/* =========================================
   Home Image Size
   ========================================= */

/* Ensure slide is a positioning context */
#home .slide-wrap {
  position: relative;
}

/* Hero wrapper: span viewport, center content */
#home .accessories-hero-image {
  position: relative;
  z-index: 5;
  width: 100vw;                 /* critical for % scaling */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: 20px;
}

/* Image scaling + opacity fix */
#home .accessories-hero-image img {
  width: 100%;
  max-width: 600px;
  height: auto;

  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Responsive down-scaling */
@media (max-width: 1600px) {
  #home .accessories-hero-image img { width: 100%; }
}

@media (max-width: 1200px) {
  #home .accessories-hero-image img { width: 90%; }
}

@media (max-width: 900px) {
  #home .accessories-hero-image img { width: 80%; }
}

@media (max-width: 600px) {
  #home .accessories-hero-image img { width: 80%; }
}



/* =========================================
   Key Features grid
========================================= */

#key-features{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  gap: 0px;
  align-items: stretch;
}

/* base cell */
#key-features .kf-cell{
  position: relative;
  min-height: clamp(120px, 18vw, 280px);
}

/* Center helper */
#key-features .kf-center{
  height: 100%;
  display: flex;
  align-items: center;     /* v-align */
  justify-content: center; /* h-align */
  text-align: center;
}

/* Image sizing (adjust %) */
#key-features .kf-img{
  display: block;
  width: 90%;        /* <-- tweak this */
  height: auto;
  margin: 0 auto;
}

/* Center image vertically */
#key-features .kf-img-wrap{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Tablet View --- */
@media (max-width: 900px){

  #key-features{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* Hide blank cell */
  #key-features .kf-1{
    display: none;
  }

  /* Reorder cells */
  #key-features .kf-4{ order: 1; }
  #key-features .kf-2{ order: 2; }
  #key-features .kf-3{ order: 3; }

  /* Make both titles behave like fs-7 */
  #key-features .kf-2 .js-split-chars-letter-up,
  #key-features .kf-3 .js-split-chars-letter-up{
    font-size: clamp(28px, 7vw, 56px);
  }

  /* Bigger image on mobile */
  #key-features .kf-img{
    width: 92%;
  }

  /* Reduce vertical height on mobile */
  #key-features .kf-cell{
    min-height: unset;
  }
}

/* --- Desktop: scaling and locked text after 1600px --- */
@media (min-width: 901px) {
  #key-features .kf-2 .js-split-chars-letter-up.fs-7,
  #key-features .kf-3 .js-split-chars-letter-up.fs-7 {
    font-size: clamp(56px, 7vw, 112px) !important;
    line-height: 1 !important;
  }
}


/* Center content in image cell */
#key-features .kf-4 .kf-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers image + button */
  justify-content: center;
  text-align: center;
}

/* Remove default paragraph spacing that can offset alignment */
#key-features .kf-4 .bracket-wrap {
  margin: 0;
}

/* Ensure button behaves predictably */
#key-features .kf-4 .bracket-link {
  display: inline-block;
}

#key-features .kf-4 .bracket-img {
  display: block;
  max-width: 100%;
}

/* Hover swap */
/* Prevent layout shift on hover (lock base height) */
#key-features .bracket-default { display: block; }
#key-features .bracket-hover   { display: block; }


/* =========================================
   Contact Form deep-link (footer -> accordion)
   ========================================= */

/* So the accordion header doesn't get hidden under the fixed toolbar */
#contact-form {
  scroll-margin-top: calc(var(--toolbar-h, 80px) + 20px);
}



/* =========================================
   Remove focus/active outline from Contact Form jump link
   ========================================= */

#contact a.js-open-contact-form,
#contact a.js-open-contact-form:focus,
#contact a.js-open-contact-form:active {
  outline: none;
  box-shadow: none;
}

/* Optional: only remove focus when triggered by mouse */
#contact a.js-open-contact-form:focus:not(:focus-visible) {
  outline: none;
}

#contact a.js-open-contact-form {
  -webkit-tap-highlight-color: transparent;
}




/* =========================================
   Line Break <br> Mobile
   ========================================= */

br.br-mobile { display: none; }

@media (max-width: 1200px) {
  br.br-mobile { display: block; }
}



/* =========================================
   Accordion – remove numbering + fix wrapping
   ========================================= */

#info-list .acc-no {
  display: none !important;
}

/* Reclaim space previously used by the number */
#info-list .acc-block {
  grid-template-columns: 1fr auto !important;
}

/* Ensure title spans full width */
#info-list .acc-title {
  white-space: nowrap;
}




/* =========================================
   Features Text
   ========================================= */

	@media (max-width: 767px) { 
		/* 1) Undo the inherited centering on mobile */ 
		#features-list .text-center {
			text-align: left !important; 
		} 
		/* 2) Make expanded content align left as well */ 
		#features-list ul.accordion, #features-list ul.accordion li, #features-list ul.accordion li p {
			text-align: left !important;
		}
		/* 3) Make the number sit flush-left */ 
		#features-list .acc-no { 
			min-width: auto;
			margin-right: 10px;
			text-align: left; 
		}
		#features-list .acc-no::before {
			left: 0; right: auto; 
		}
		/* 4) Align accordion body content with header padding (fixes the mismatch) */ 
		#features-list ul.accordion li {
			padding-left: 10px !important; 
			padding-right: 10px !important; 
		} 
		/* Preserve open-state spacing but keep the same 10px gutters */ 
		#features-list [data-collapse].is-open + ul.accordion li {
			padding: 8px 10px !important; 
		}
		/* Optional: if a single item is open, keep gutters too */ 
		#features-list [data-collapse].is-open + ul.accordion li:only-child { 
			padding-top: 12px !important;
			padding-bottom: 12px !important;
			padding-left: 10px !important;
			padding-right: 10px !important;
		}
	}


	/* Shared measurements so header + body align perfectly */
	#features-list{
	  --acc-num-col: 3ch;   /* fits 00–99 nicely */
	  --acc-gap: 12px;
	}

	/* Header layout: number | title | icon */
	#features-list .acc-block{
	  display: grid;
	  grid-template-columns: var(--acc-num-col) 1fr auto;
	  column-gap: var(--acc-gap);
	  align-items: center;
	}

	/* Keeps icon on the far right */
	#features-list .acc-toggle-icon{
	  justify-self: end;
	}

	#features-list .acc-no{
	  margin-right: 0;   /* grid handles spacing */
	  min-width: auto;
	}

	/* Body text styling + alignment */
	#features-list .acc-body-text{
	  margin: 0;
	  padding-bottom: 20px;

	  font-size: 1.0rem;
	  font-weight: 300;
	  line-height: 1.5;
	  text-align: left;
	  padding-left: calc(var(--acc-num-col) + var(--acc-gap));
	}

	#features-list ul.acc-body-list{
	  margin: 0;
	  padding: 0px 10px;     /* matches header side padding */
	  list-style: none;
	}

	#features-list ul.acc-body-list > li{
	  margin: 0;
	  padding: 0;
	}

	@media (max-width: 767px) {

	  /* Reduce number ? title gap on mobile */
	  #features-list { --acc-gap: 6px; }

	  /* Accordion body text should NOT align to title start on mobile */
	  #features-list .acc-body-text { padding-left: 0; }

	  /* 10px left/right gutter for accordion text UL */
	  #features-list ul.acc-body-list {
		padding-left: 10px;
		padding-right: 10px;
	  }

	  /* Check-list: 10px gutters + force left alignment */
	  #features-list ul.check-list {
		padding-left: 10px;
		padding-right: 10px;
		margin: 0;
		list-style: none;
		text-align: left !important;
	  }

	  /* Each checklist row a left-aligned icon + text row */
	  #features-list ul.check-list > li {
		position: relative;
		margin: 0;
		padding-left: 44px;           /* reserve space for icon + gap */
		text-align: left !important;
		margin-bottom: 14px;   /* spacing between bullets */
	  }

	  #features-list ul.check-list > li::before{
		position: absolute;
		left: 10px;                  /* aligns with 10px gutter */
		top: 0.2em;                  /* tweak if needed */
	  }

	  #features-list ul.check-list > li:last-child {
		margin-bottom: 0px;
	  }

	  #features-list ul.check-list > li p,
	  #features-list ul.check-list > li span,
	  #features-list ul.check-list > li div {
		text-align: left !important;
	  }

	  #features-list ul.check-list > li i,
	  #features-list ul.check-list > li svg {
		flex: 0 0 auto;
	  }
	}

	/* PDF link layout */
	#features-list .acc-body-text a.pdf-link,
	#features-list .acc-body-text a.pdf-secure {
	  display: inline-flex;
	  align-items: center;
	  gap: 12px;
	  color: #ffffff;
	  text-decoration: none;
	  transition: color 0.2s ease;
	}

	/* PDF icon sizing (desktop) */
	#features-list .acc-body-text a.pdf-link img,
	#features-list .acc-body-text a.pdf-secure img {
	  width: 40px;
	  height: auto;
	  display: block;
	  transition: opacity 0.15s ease;
	}

	/* Swap image on hover */
	#features-list .acc-body-text a.pdf-link:hover img {
	  content: url("../../catmacs/pdf-black.png");
	}

	/* Swap image on hover */
	#features-list .acc-body-text a.pdf-secure:hover img {
	  content: url("../../catmacs/pdf-black-2.png");
	}

	/* Text colour on hover */
	#features-list .acc-body-text a.pdf-link:hover,
	#features-list .acc-body-text a.pdf-secure:hover {
	  color: #b1b1b1;
	}

	/* Mobile sizing */
	@media (max-width: 767px) {
	  #features-list .acc-body-text a.pdf-link img,
	  #features-list .acc-body-text a.pdf-secure img {
		width: 25px;
	  }
	}

	/* Video link hover swap */
	#features-list .acc-body-text a.video-link:hover img {
	  content: url("../../catmacs/video-black.png");
	}


	#features-list .features-info,
	#features-list .features-tick,
	#features-list .features-dot {
	  font-size: var(--fs-1);
	  font-weight: 300;
	  text-align: left;
	  padding-left: 20px;  /* Indent Block Text */
	}

	/* Target list items directly */
	#features-list .features-tick li,
	#features-list .features-dot li {
	  position: relative;
	  padding-left: 50px;  /* text indent */
	  line-height: 1.5;
	  margin-bottom: 12px;
	  list-style: none;
	  text-align: left;
	}

	/* Tick icon */
	#features-list .features-tick li::before {
	  content: "";
	  position: absolute;
	  left: 20px;  /* bullet indent */
	  top: 0.15em;
	  width: 16px;
	  height: 16px;
	  background-image: url("../../catmacs/tick-2-white.png");
	  background-size: contain;
	  background-repeat: no-repeat;
	}

	/* Tick icon */
	#features-list .features-dot li::before {
	  content: "";
	  position: absolute;
	  left: 20px;  /* bullet indent */
	  top: 0.15em;
	  width: 16px;
	  height: 16px;
	  background-image: url("../../catmacs/dot-white.png");
	  background-size: contain;
	  background-repeat: no-repeat;
	}

	/* Intro list anchor styling */
	#features-list .features-tick li a,
	#features-list .features-dot li a {
	  color: #c0b5a4;
	  font-weight: 600;
	  text-decoration: none;
	  transition: color 0.2s ease;
	}

	/* Hover state */
	#features-list .features-tick li a:hover,
	#features-list .features-dot li a:hover {
	  color: #e8e8e8;
	}

	/* Visited and active states reset */
	#features-list .features-tick a:visited,
	#features-list .features-tick li a:active,
	#features-list .features-tick li a:focus, 
	#features-list .features-dot a:visited,
	#features-list .features-dot li a:active,
	#features-list .features-dot li a:focus {
	  color: #c0b5a4;
	}



/* =========================================
   Brush Kit Grid
========================================= */

/* Title */
#brush-kit-text .features-title{
  font-size: var(--fs-3);
  font-weight: 500;
}

/* Body + list */
#brush-kit-text .features-info,
#brush-kit-text .brush-kit-list {
  font-size: var(--fs-2);
  font-weight: 300;
}

/* Body + list */
#brush-kit-expanded .highlights-info {
  font-size: var(--fs-2);
  font-weight: 300;
  text-align: center;
}

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 900px){
  /* Title */
  #brush-kit-text .features-title{
    font-size: var(--fs-2);
    font-weight: 500;
  }

  /* Body + list */
  #brush-kit-text .features-info,
  #brush-kit-text .brush-kit-list{
    font-size: var(--fs-1);
    font-weight: 300;
  }
}

@media (max-width: 900px){
  /* Body + list */
  #brush-kit-expanded .highlights-info {
    font-size: var(--fs-1);
    font-weight: 300;
  }
}


#brush-kit .brush-kit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  width: 100%;
}

/* -------- Column 1: Image -------- */
#brush-kit-image{
  display: flex;
  flex-direction: column;
  align-items: center;      /* center horizontally */
}

#brush-kit-image img{
  display: block;
  width: 75%;                /* <-- adjust % here */
  padding-bottom: 10px;
  height: auto;
}


/* -------- Column 2: Text -------- */
#brush-kit-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* h-align left */
  justify-content: flex-start; /* v-align start */
}

/* -------- Custom bullets (gold dot) -------- */
#brush-kit-text .brush-kit-list{
  list-style: none;
  padding-left: 0;
  margin: 20px 0 0;
}

#brush-kit-text .brush-kit-list li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

#brush-kit-text .brush-kit-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;

  background: url("../../catmacs/tick-2-gold.png") no-repeat center / contain;
}

/* -------- Tablet / Mobile -------- */
@media (max-width: 900px){
  #brush-kit .brush-kit-grid{
    grid-template-columns: 1fr;  /* stack */
  }

  #brush-kit-image img{
    width: 85%;                  /* optional: bigger on mobile */
  }
}

/* Center brush kit button */
#brush-kit-text .brush-kit-btn-wrap{
  width: 100%;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;
  padding-top: 30px;
  padding-bottom: 20px;
}


/* =========================================
   Brush Kit Examples Grid
========================================= */

#brush-kit-expanded{
  width: 100%;
  padding-top: clamp(40px, 5vw, 80px); /* spacing from main section */
}

/* 3-column grid */
#brush-kit-examples{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 50px);
  width: 100%;
}

/* Each cell */
#brush-kit-examples .bk-example{
  display: flex;
  justify-content: center;   /* h-align center */
  align-items: flex-start;   /* v-align start */
}

/* Image sizing (px width, auto height) */
#brush-kit-examples img{
  width: 200px;     /* <<< adjust in PX */
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------- Tablet / Mobile ---------- */
@media (max-width: 900px){

  /* Stack images on smaller screens */
  #brush-kit-examples{
    grid-template-columns: 1fr;
  }

  #brush-kit-examples img{
    width: 260px; /* optional: slightly larger on mobile */
  }

}



/* =========================================
   Brush Kit Highlights
   ========================================= */

#brush-kit-expanded .brush-kit-highlights {
  display: grid;
  grid-template-columns: 15% 35% 15% 35%;
  column-gap: 0;        /* only row padding requested */
  row-gap: 40px;        /* padding between rows */
  align-items: center;
}

#brush-kit-expanded .brush-feat {
  display: block;     /* prevents inherited flex centering */
  align-self: start;  /* top align the cell itself */
}

/* Alignment rules */
#brush-kit-expanded .brush-feat.sm {
  text-align: center;
}

#brush-kit-expanded .brush-feat.lg {
  text-align: left;
  font-size: var(--fs-2);
  font-weight: 300;
}

#brush-kit-expanded .brush-kit-highlights p {
  margin: 0;
}

/* Features grid — mobile font size adjustment */

@media (max-width: 1200px) {
  #brush-kit-expanded .brush-kit-highlights .dc-feat.lg {
    font-size: var(--fs-1) !important;
  }
}

/* Tablet and below: reorder into 2-col / 6-row as specified */
@media (max-width: 1200px) {
  #brush-kit-expanded .brush-kit-highlights {
    grid-template-columns: 30% 70%;
  }

  /* Reorder items */

  #brush-kit-expanded .brush-kit-highlights > :nth-child(1)  { order: 1; }  /* 1 */
  #brush-kit-expanded .brush-kit-highlights > :nth-child(2)  { order: 2; }  /* 2 */

  #brush-kit-expanded .brush-kit-highlights > :nth-child(3)  { order: 3; }  /* 3 */
  #brush-kit-expanded .brush-kit-highlights > :nth-child(4)  { order: 4; }  /* 4 */

}


/* =========================================
   Brush Kit Details 1
========================================= */

#brush-kit-details-1{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(22px, 4vw, 60px);
  width: 100%;
  align-items: stretch;
}

/* ---------- Left column (image) ---------- */
#brush-kit-details-1 .bk1-image{
  display: flex;
  align-items: center;     /* v-align center */
  justify-content: center; /* h-align center */
}

#brush-kit-details-1 .bk1-image img{
  width: 70%;   /* adjust image size inside 40% column */
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Right column (5 rows) ---------- */
#brush-kit-details-1 .bk1-details{
  background: rgba(255,255,255,0.04); /* same as your row tint */
  padding: 1px;
  border-radius: 10px; /* optional */
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 14px;
}

/* Row 1 header bar */
#brush-kit-details-1 .bk1-head{
  background: #232323;
  color: #ffffff;

  font-size: var(--fs-3);
  font-weight: 500;

  display: flex;
  align-items: center;     /* v-align center */
  justify-content: center; /* h-align center */
  text-align: center;

  padding: 18px 18px;
  border-radius: 0px; /* optional */
}

/* Rows 2–5: 2-column layout */
#brush-kit-details-1 .bk1-row{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 16px;

  background: transparent;
  border-radius: 0px;                /* optional */
  padding: 6px 18px;
}

/* Label (left cell) */
#brush-kit-details-1 .bk1-label{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 500;

  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: flex-start; /* h-align left */
  text-align: left;
}

/* Value (right cell) */
#brush-kit-details-1 .bk1-value{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 300;

  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: flex-start; /* h-align left */
  text-align: left;
}


/* ---------- Tablet / Mobile stacking ---------- */
@media (max-width: 1200px){

  #brush-kit-details-1{
    grid-template-columns: 1fr;
  }

  /* header size down */
  #brush-kit-details-1 .bk1-head{
    font-size: var(--fs-2);
  }

  /* rows 2–5 become stacked:
     label on one line, value underneath indented */
  #brush-kit-details-1 .bk1-row{
    grid-template-columns: 1fr;
    gap: 10px;
	padding: 10px 18px 10px 50px;
  }

  #brush-kit-details-1 .bk1-label,
  #brush-kit-details-1 .bk1-value{
    font-size: var(--fs-1);
  }

  #brush-kit-details-1 .bk1-value{
    padding-left: 14px; /* indent under label */
    opacity: 0.95;
  }

  /* image can be slightly larger on mobile */
  #brush-kit-details-1 .bk1-image img{
    width: 92%;
  }
}


@media (max-width: 1200px){

  /* Force 320px image on mobile */
  #brush-kit-details-1 .bk1-image img{
    width: 320px;
    max-width: 100%;
	padding-bottom: 20px;
  }

}



/* =========================================
   Brush Kit Details 2
========================================= */

#brush-kit-details-2{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(22px, 4vw, 60px);
  width: 100%;
  align-items: stretch;
}

/* ---------- Left column (image) ---------- */
#brush-kit-details-2 .bk2-image{
  display: flex;
  align-items: center;     /* v-align center */
  justify-content: center; /* h-align center */
}

#brush-kit-details-2 .bk2-image img{
  width: 85%;   /* adjust image size inside 40% column */
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Right column (5 rows) ---------- */
#brush-kit-details-2 .bk2-details{
  background: rgba(255,255,255,0.04); /* same as your row tint */
  padding: 1px;
  border-radius: 10px; /* optional */
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 14px;
}

/* Row 1 header bar */
#brush-kit-details-2 .bk2-head{
  background: #232323;
  color: #ffffff;

  font-size: var(--fs-3);
  font-weight: 500;

  display: flex;
  align-items: center;     /* v-align center */
  justify-content: center; /* h-align center */
  text-align: center;

  padding: 18px 18px;
  border-radius: 0px; /* optional */
}

/* Rows 2–5: 2-column layout */
#brush-kit-details-2 .bk2-row{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 16px;

  background: transparent;
  border-radius: 0px;                /* optional */
  padding: 6px 18px;
}

/* Label (left cell) */
#brush-kit-details-2 .bk2-label{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 500;

  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: flex-start; /* h-align left */
  text-align: left;
}

/* Value (right cell) */
#brush-kit-details-2 .bk2-value{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 300;

  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: flex-start; /* h-align left */
  text-align: left;
}


/* ---------- Tablet / Mobile stacking ---------- */
@media (max-width: 1200px){

  #brush-kit-details-2{
    grid-template-columns: 1fr;
  }

  /* header size down */
  #brush-kit-details-2 .bk2-head{
    font-size: var(--fs-2);
  }

  /* rows 2–5 become stacked:
     label on one line, value underneath indented */
  #brush-kit-details-2 .bk2-row{
    grid-template-columns: 1fr;
    gap: 10px;
	padding: 10px 18px 10px 50px;
  }

  #brush-kit-details-2 .bk2-label,
  #brush-kit-details-2 .bk2-value{
    font-size: var(--fs-1);
  }

  #brush-kit-details-2 .bk2-value{
    padding-left: 14px; /* indent under label */
    opacity: 0.95;
  }

  /* image can be slightly larger on mobile */
  #brush-kit-details-2 .bk2-image img{
    width: 92%;
  }
}


@media (max-width: 1200px){

  /* Force 320px image on mobile */
  #brush-kit-details-2 .bk2-image img{
    width: 320px;
    max-width: 100%;
	padding-bottom: 20px;
  }

}


/* =========================================
   Brush Kit Details 3
========================================= */

#brush-kit-details-3{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(22px, 4vw, 60px);
  width: 100%;
  align-items: stretch;
}


/* ---------- Left column (image) ---------- */

#brush-kit-details-3 .bk3-image{
  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: center;   /* h-align center */
}

#brush-kit-details-3 .bk3-image img{
  width: 85%;
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------- Right column (panel) ---------- */

#brush-kit-details-3 .bk3-details{
  background: rgba(255,255,255,0.04);
  padding: 1px;
  border-radius: 10px;

  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 14px;
}


/* ---------- Header row ---------- */

#brush-kit-details-3 .bk3-head{
  background: #232323;
  color: #ffffff;

  font-size: var(--fs-3);
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 18px;
}


/* ---------- Rows (3 columns) ---------- */

#brush-kit-details-3 .bk3-row{
  display: grid;
  grid-template-columns: 40% 20% 40%; /* label / code / value */
  gap: 16px;

  background: transparent;
  padding: 6px 18px;
}


/* Label */

#brush-kit-details-3 .bk3-label{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 500;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}


/* Code (middle column) */

#brush-kit-details-3 .bk3-code{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 300;

  opacity: 0.9;
  white-space: nowrap;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}


/* Value (right column) */

#brush-kit-details-3 .bk3-value{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 300;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}


/* ---------- Tablet / Mobile ---------- */

@media (max-width: 1200px){

  /* Stack main columns */
  #brush-kit-details-3{
    grid-template-columns: 1fr;
  }


  /* Smaller header */
  #brush-kit-details-3 .bk3-head{
    font-size: var(--fs-2);
  }


  /* Stack row content */
  #brush-kit-details-3 .bk3-row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 18px 10px 50px;
  }


  #brush-kit-details-3 .bk3-label,
  #brush-kit-details-3 .bk3-code,
  #brush-kit-details-3 .bk3-value{
    font-size: var(--fs-1);
  }


  /* Indent secondary lines */
  #brush-kit-details-3 .bk3-code,
  #brush-kit-details-3 .bk3-value{
    padding-left: 14px;
    opacity: 0.95;
  }


  /* Mobile image size */
  #brush-kit-details-3 .bk3-image img{
    width: 320px;
    max-width: 100%;
    padding-bottom: 20px;
  }

}


/* =========================================
   Brush Kit Details 4
========================================= */

#brush-kit-details-4{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(22px, 4vw, 60px);
  width: 100%;
  align-items: stretch;
}


/* ---------- Left column (image) ---------- */

#brush-kit-details-4 .bk4-image{
  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: center;   /* h-align center */
}

#brush-kit-details-4 .bk4-image img{
  width: 85%;
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------- Right column (panel) ---------- */

#brush-kit-details-4 .bk4-details{
  background: rgba(255,255,255,0.04);
  padding: 1px;
  border-radius: 10px;

  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 14px;
}


/* ---------- Header row ---------- */

#brush-kit-details-4 .bk4-head{
  background: #232323;
  color: #ffffff;

  font-size: var(--fs-3);
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 18px;
}


/* ---------- Rows (3 columns) ---------- */

#brush-kit-details-4 .bk4-row{
  display: grid;
  grid-template-columns: 40% 20% 40%; /* label / code / value */
  gap: 16px;

  background: transparent;
  padding: 6px 18px;
}


/* Label */

#brush-kit-details-4 .bk4-label{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 500;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}


/* Code (middle column) */

#brush-kit-details-4 .bk4-code{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 300;

  opacity: 0.9;
  white-space: nowrap;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}


/* Value (right column) */

#brush-kit-details-4 .bk4-value{
  color: #ffffff;
  font-size: var(--fs-2);
  font-weight: 300;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}


/* ---------- Tablet / Mobile ---------- */

@media (max-width: 1200px){

  /* Stack main columns */
  #brush-kit-details-4{
    grid-template-columns: 1fr;
  }


  /* Smaller header */
  #brush-kit-details-4 .bk4-head{
    font-size: var(--fs-2);
  }


  /* Stack row content */
  #brush-kit-details-4 .bk4-row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 18px 10px 50px;
  }


  #brush-kit-details-4 .bk4-label,
  #brush-kit-details-4 .bk4-code,
  #brush-kit-details-4 .bk4-value{
    font-size: var(--fs-1);
  }


  /* Indent secondary lines */
  #brush-kit-details-4 .bk4-code,
  #brush-kit-details-4 .bk4-value{
    padding-left: 14px;
    opacity: 0.95;
  }


  /* Mobile image size */
  #brush-kit-details-4 .bk4-image img{
    width: 320px;
    max-width: 100%;
    padding-bottom: 20px;
  }

}



/* =========================================
   Brush Kit Expand Toggle
========================================= */

#brush-kit-expanded{
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* When active */
#brush-kit-expanded.is-open{
  display: block;
  opacity: 1;
}

/* Smooth fade-out state */
#brush-kit-expanded.is-closing{
  opacity: 0;
}

/* Brush kit toggle button sizing */
#brush-kit-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;   /* prevents wrapping */
  padding: 0.6em 1.6em;   /* gives breathing room */
  min-width: max-content;/* grows to fit longest text */
}



/* =========================================
   DC Adapter Grid (Independent)
========================================= */

#dc-adapter .dc-adapter-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* text | image */
  gap: clamp(22px, 4vw, 60px);
  width: 100%;
  align-items: start;
}

/* TEXT column (inherits the same typography approach as brush-kit) */
#dc-adapter-text{
  text-align: left;
}

/* Match brush-kit text attributes */
#dc-adapter-text .features-title{
  font-size: var(--fs-3);
  font-weight: 400;
  margin: 0 0 12px;
}

#dc-adapter-text .features-info{
  font-size: var(--fs-2);
  font-weight: 300;
  margin: 0 0 18px;
}

/* Custom bullet list using your gold dot */
#dc-adapter-text .dc-adapter-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#dc-adapter-text .dc-adapter-list li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;

  font-size: var(--fs-2);
  font-weight: 300;
  color: inherit;
}

#dc-adapter-text .dc-adapter-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  background: url("../../catmacs/tick-2-gold.png") no-repeat center / contain;
}

/* Button */
#dc-adapter-text .dc-adapter-btn-wrap{
  display: flex;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 20px;
}

/* IMAGE column */
#dc-adapter-image{
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center horizontally */
}

#dc-adapter-image img{
  width: 85%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Button spacing */
#dc-adapter-image .dc-adapter-btn-wrap{
  width: 100%;
  display: flex;
  justify-content: center;

  padding-top: 60px;
  padding-bottom: 20px;
}

/* DC Adapter: make button width driven by text (same as brush-kit-toggle) */
#dc-adapter-image .dc-adapter-btn-wrap .btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;     /* keep "More Details" on one line */
  min-width: max-content;  /* width = content width */
  padding: 0.6em 1.6em;    /* match brush-kit feel */
}


/* ---------- <=1200px: swap columns (image above text) ---------- */
@media (max-width: 1200px){

  #dc-adapter .dc-adapter-grid{
    grid-template-columns: 1fr;
  }

  /* swap order: image first, text second */
  #dc-adapter-image{ order: 1; }
  #dc-adapter-text{ order: 2; }

  /* typography step down (match your brush-kit behaviour) */
  #dc-adapter-text .features-title{
    font-size: var(--fs-2);
    font-weight: 400;
  }

  #dc-adapter-text .features-info,
  #dc-adapter-text .dc-adapter-list li{
    font-size: var(--fs-1);
    font-weight: 300;
  }

  /* optional: image sizing on smaller screens */
  #dc-adapter-image img{
    width: 320px;
    max-width: 100%;
  }
}



/* =========================================
   DC Adapter Highlights (Standalone)
========================================= */

#dc-adapter-expanded{
  width: 100%;
  padding-top: 20px;
}


/* Intro text (match brush-kit highlights-info) */
#dc-adapter-expanded .dc-adapter-highlights-info{
  font-size: var(--fs-2);
  font-weight: 300;
  color: var(--light-1);

  max-width: 900px;
  margin: 0 auto;

  text-align: center;
  line-height: 1.6;
}


/* Highlights grid */
#dc-adapter-expanded .dc-adapter-highlights{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: clamp(20px, 3vw, 40px);

  align-items: center;
  justify-content: center;

  max-width: 1100px;
  margin: 0 auto;
}


/* Feature cells */
#dc-adapter-expanded .dc-feat{
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--light-1);
  font-size: var(--fs-2);
  font-weight: 300;
  line-height: 1.4;
  text-align: left;
}


/* Small cells (icons) */
#dc-adapter-expanded .dc-feat.sm{
  justify-content: center;
}


/* Large cells (text) */
#dc-adapter-expanded .dc-feat.lg{
  justify-content: flex-start;
}


/* Images */
#dc-adapter-expanded .dc-feat img{
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------- Tablet / Mobile ---------- */

@media (max-width: 900px){

  /* Stack vertically */
  #dc-adapter-expanded .dc-adapter-highlights{
    grid-template-columns: 1fr;
    gap: 18px;
  }


  /* Center everything */
  #dc-adapter-expanded .dc-feat{
    justify-content: center;
    text-align: center;
    font-size: var(--fs-1);
  }


  #dc-adapter-expanded .dc-adapter-highlights-info{
    font-size: var(--fs-1);
    padding-left: 10px;
    padding-right: 10px;
  }

}



@media (max-width: 1200px) {
  #dc-adapter-expanded .dc-adapter-highlights .brush-feat.lg {
    font-size: var(--fs-1) !important;
  }
}

/* Tablet and below: reorder into 2-col / 6-row as specified */
@media (max-width: 1200px) {
  #dc-adapter-expanded .dc-adapter-highlights {
    grid-template-columns: 30% 70%;
  }

  /* Reorder items */

  #dc-adapter-expanded .dc-adapter-highlights > :nth-child(1)  { order: 1; }  /* 1 */
  #dc-adapter-expanded .dc-adapter-highlights > :nth-child(2)  { order: 2; }  /* 2 */

  #dc-adapter-expanded .dc-adapter-highlights > :nth-child(3)  { order: 3; }  /* 3 */
  #dc-adapter-expanded .dc-adapter-highlights > :nth-child(4)  { order: 4; }  /* 4 */

}



/* =========================================
   Chrome Buttons
========================================= */

#intro-text .catalog-wrap,
#dc-adapter-expanded .dc-catalog-wrap,
#key-features .bracket-wrap {
  padding-top: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}

#intro-text .catalog-link,
#dc-adapter-expanded .dc-catalog-link,
#key-features .bracket-link {
  position: relative;
  display: inline-block;
}

/* Base image: always visible */
#intro-text .catalog-default,
#dc-adapter-expanded .dc-catalog-default,
#key-features .bracket-default {
  display: block;
}

/* Hover image: fades in/out */
#intro-text .catalog-hover,
#dc-adapter-expanded .dc-catalog-hover,
#key-features .bracket-hover {
  position: absolute;
  inset: 0;

  opacity: 0;
  transition: opacity 0.35s ease;
}

/* On hover: show second image */
#intro-text .catalog-link:hover .catalog-hover,
#dc-adapter-expanded .dc-catalog-link:hover .dc-catalog-hover,
#key-features .bracket-link:hover .bracket-hover{
  opacity: 1;
}

/* Image sizing */
#intro-text .catalog-img,
#dc-adapter-expanded .dc-catalog-img,
#key-features .bracket-img {
  width: 240px;
  height: auto;
  display: block;
}


/* =========================================
   DC Adapter Expand Toggle (fade)
========================================= */

#dc-adapter-expanded{
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#dc-adapter-expanded.is-open{
  display: block;
  opacity: 1;
}

#dc-adapter-expanded.is-closing{
  opacity: 0;
}



/* =========================================
   RFID Labels (Standalone - Brush Kit style)
========================================= */

#rfid-labels .labels-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 60px);
  width: 100%;
  align-items: start;
}

/* ---------- Column 1: Image (same behavior as brush-kit-image) ---------- */
#rfid-labels #brush-kit-image{
  display: flex;
  flex-direction: column;  /* allows multiple images stacked */
  align-items: center;     /* h-align center */
}

#rfid-labels #brush-kit-image img{
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  padding-bottom: 20px;
}

/* remove bottom gap on last image */
#rfid-labels #brush-kit-image img:last-child{
  padding-bottom: 0;
}

/* ---------- Column 2: Text (same look as brush-kit-text) ---------- */
#rfid-labels #labels-text{
  text-align: left;
}

/* Title: fs-3 desktop, fs-2 <=tablet, fw400 */
#rfid-labels #labels-text .labels-title{
  font-size: var(--fs-3);
  font-weight: 400;
  margin: 0 0 12px;
}

/* Info: fs-2 desktop, fs-1 <=tablet, fw200 */
#rfid-labels #labels-text .labels-info{
  font-size: var(--fs-2);
  font-weight: 200;
  margin: 0 0 18px;
  line-height: 1.6;
}

/* List: same as brush-kit-list with dot-gold bullets */
#rfid-labels #labels-text .labels-list{
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#rfid-labels #labels-text .labels-list li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;

  font-size: var(--fs-2);
  font-weight: 200;
  color: inherit;
}

#rfid-labels #labels-text .labels-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  background: url("../../catmacs/tick-2-gold.png") no-repeat center / contain;
}

/* ---------- <=1200px: stack image above text (same as brush-kit behavior) ---------- */
@media (max-width: 1200px){

  #rfid-labels .labels-grid{
    grid-template-columns: 1fr;
  }

  /* Typography step-down like brush-kit */
  #rfid-labels #labels-text .labels-title{
    font-size: var(--fs-2);
    font-weight: 400;
  }

  #rfid-labels #labels-text .labels-info,
  #rfid-labels #labels-text .labels-list li{
    font-size: var(--fs-1);
    font-weight: 200;
  }

  /* Optional: constrain image width on smaller screens (remove if you want full width) */
  #rfid-labels #brush-kit-image img{
    width: 320px;
    max-width: 100%;
  }
}


/* =========================================
   Text Hyperlink
========================================= */

/* Text link hover effect */
.text-link{
  color: #c0b5a4;
  transition: color 0.25s ease;
}

.text-link:hover{
  color: #f9f9f9;
}