/** Shopify CDN: Minification failed

Line 196:0 Unexpected "`"

**/
      .ksl-wrap { width: 100%; padding: 32px 16px; }
.ksl-inner { max-width: var(--page-width, 1590px); margin: 0 auto; }
      .ksl-header-row { display: flex; align-items: center; gap: 24px; margin-top: 48px; margin-bottom: 60px; }
      .ksl-header { flex: 1; margin-bottom: 0; }
      /* Promo banner: right-hand side of the H1 row, above the filter bar. */
      .ksl-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
      .ksl-header-banner { flex: 0 1 420px; max-width: 420px; border-radius: 12px; overflow: hidden; }
      .ksl-header-banner img { width: 100%; height: auto; display: block; }
      @media (max-width: 680px) { .ksl-hero-row { flex-direction: column; align-items: flex-start; gap: 12px; } .ksl-header-banner { flex-basis: auto; max-width: 100%; } }
      .ksl-title { margin: 0 0 8px 0; font-size: 32px; line-height: 1.2; }
      .ksl-subtitle { font-size: 16px; line-height: 1.5; opacity: 0.85; }
      .ksl-empty { border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 16px; }

      .ksl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 1080px) { .ksl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ksl-grid { grid-template-columns: 1fr; } }

      .ksl-card { position: relative; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 10px 24px rgba(0,0,0,0.10); height: 100%; }
      .ksl-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,0.14); }
      .ksl-card-inner { display: flex; flex-direction: column; height: 100%; }

      .ksl-image-link { display: block; text-decoration: none; color: inherit; }
      .ksl-image-wrap { position: relative; z-index: 1; width: 100%; aspect-ratio: 8 / 5; background: rgba(0,0,0,0.04); overflow: hidden; }
      .ksl-image { width: 100%; height: 100%; object-fit: cover; display: block; }
      .ksl-image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); }

      .ksl-content { position: relative; z-index: 2; padding: 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

     :root {
  --ksl-rightcol: 160px;
  --ksl-swatch: 40px;
  --ksl-swatch-gap: 10px;
  --ksl-door-h: 160px;
  --ksl-door-w: 110px;
  --ksl-door-overlap: 100px;
}

      .ksl-toprow--new { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }

      @media (max-width: 620px) {
        .ksl-toprow--new { grid-template-columns: 1fr; }
        .ksl-toprow-right { display: none; }
      }

      .ksl-swatches-top { margin-bottom: 16px; }
      .ksl-swatches-top {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--ksl-swatch));
  gap: 12px;
  align-content: start;
  justify-content: start;
}

      .ksl-swatch-item {
        display: flex;
        flex-direction: column;
        align-items: center;
  width: var(--ksl-swatch);
      }

      .ksl-swatch-name {
  margin-top: 4px;
  font-size: 1.1rem;
  line-height: 1.1;
  text-align: center;
  opacity: 0.9;

  display: block;
  width: 100%;
  max-width: var(--ksl-swatch);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

      .ksl-swatch {
        width: var(--ksl-swatch);
        height: var(--ksl-swatch);
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,0.22);
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: #fff;
        padding: 0;
      }
      .ksl-swatch.is-active { border: 2px solid #d10000; }
      .ksl-swatch-img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .ksl-swatch-hex { width: 100%; height: 100%; display: block; }
      .ksl-swatch-more { cursor: pointer; font-size: 12px; font-weight: 700; color: #111; background: #fff; }

      .ksl-toprow-right { position: relative; overflow: visible; }
      .ksl-toprow-right {
  min-width: calc(var(--ksl-door-w) + 8px);
}

      .ksl-door-wrap {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 6;
      }

      .ksl-door-block {
        position: absolute;
        right: 0;
        top: calc(-1 * var(--ksl-door-overlap));
        width: var(--ksl-door-w);
        height: var(--ksl-door-h);
        border-radius: 0px;
        border: none;
        box-shadow: none;
        z-index: 7;
        background: transparent;
        overflow: visible;
      }
      .ksl-door-block.is-empty {
        background: linear-gradient(135deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02));
      }
      .ksl-door-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 0px;
      }

      .ksl-price {
        margin-top: calc((var(--ksl-door-h) - var(--ksl-door-overlap)) + 12px);
        text-align: right;
        position: relative;
        z-index: 7;
        width: 100%;
      }
      .ksl-price {
  max-width: var(--ksl-door-w);
  margin-left: auto;
}
      .ksl-price--stack { display: flex; flex-direction: column; gap: 6px; }
      .ksl-price-was { text-decoration: none; font-size: 13px; font-weight: bold; color: #000000; margin-top: 4px; order: 3; }
      .ksl-price-now { order: 2; }
      [data-btk-price-value] { display: flex; flex-direction: column; }
      [data-btk-price-value] [data-btk-price-loading] { order: 1; }
      .ksl-price-was-value { display: inline-block; position: relative; }
      .ksl-price-was-value::after { content: ''; position: absolute; top: 50%; left: -2px; right: -2px; height: 1px; background: #000000; transform: rotate(-12deg); }
      .ksl-price-now { font-size: 28px; font-weight: 900; line-height: 1; white-space: normal; color: #cc0000; }
      .ksl-price-now::before { content: 'Now only'; display: block; font-size: 14px; font-weight: bold; color: #000000; margin-bottom: 2px; }

      .ksl-price-now,
.ksl-price-was,
.ksl-price-suffix,
.ksl-price-note {
  overflow-wrap: anywhere;
}


.ksl-price-now,
.ksl-price-was,
.ksl-price-suffix,
.ksl-price-note {
  word-break: break-word;
}


      .ksl-price-suffix { font-size: 14px; opacity: 0.8; }
      .ksl-price-note { font-size: 12px; opacity: 0.75; }

.ksl-price--inline { display: none; flex-direction: column; gap: 6px; width: 100%; }

.ksl-example-price { margin-bottom: 10px; min-height: 30px; }
.ksl-example-price-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ksl-example-price-from { font-size: 13px; opacity: 0.7; }
.ksl-example-price-amount { font-size: 22px; font-weight: 800; line-height: 1; }
.ksl-example-price-suffix { font-size: 12px; opacity: 0.65; width: 100%; margin-top: 2px; }
.ksl-price-loading-text { font-size: 13px; opacity: 0.7; font-style: italic; }
.ksl-price-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.55);
  border-radius: 50%;
  animation: ksl-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes ksl-spin { to { transform: rotate(360deg); } }
```





      .ksl-card-title-above {
        padding: 0;
        background: #fff;
        box-sizing: border-box;
        width: 100%;
        position: relative;
      }
      .ksl-card-title-above-h2 {
        margin: 0;
        padding: 20px 30px 0 30px;
        font-size: 28px;
        line-height: 1.2;
      }
      .ksl-card-colour-above {
        margin: 0;
        padding: 4px 30px 16px 30px;
        font-size: clamp(1.8rem, 2.2vw, 2.6rem);
        line-height: 1.1;
        font-weight: 750;
      }
      .ksl-title-link--above {
        text-decoration: none;
        color: inherit;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .ksl-title-link--above:hover { text-decoration: underline; }
      .ksl-title-link--above .ksl-title-first {
        display: inline;
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
      }
      .ksl-title-link--above .ksl-title-rest {
        display: inline;
        font-size: 24px;
        font-weight: 300 !important;
        font-family: var(--body-font-family) !important;
        font-style: var(--body-font-style) !important;
        line-height: 1.2;
      }
      .ksl-card-title { margin: 0; }
      .ksl-title-link { text-decoration: none; color: inherit; display: inline-block; }
      .ksl-title-link:hover, .ksl-title-link:focus { text-decoration: underline; }
      .ksl-title-first { display: block; font-size: 34px; font-weight: 800; line-height: 1.02; }
      .ksl-title-rest { display: block; margin-top: 6px; font-size: 17px; font-weight: 400; line-height: 1.25; opacity: 0.95; }
      .ksl-selected-colour { font-size: 15px; opacity: 0.95; margin-top: 10px; }
      .ksl-card-colour-above.ksl-selected-colour { font-size: clamp(1.8rem, 2.2vw, 2.6rem) !important; margin-top: 0; opacity: 1; }

      .ksl-intro { margin: 10px 0 0 0; font-size: 14px; line-height: 1.55; opacity: 0.9; }

      .ksl-cta-grid--two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .ksl-cta-bottom {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
     .ksl-price-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: rgba(0,0,0,0.03);
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 4px;
      }
      .ksl-price-bar-left {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .ksl-price-bar-label {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.55;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .ksl-price-bar .ksl-price-bar-suffix {
        font-size: 12px;
        opacity: 0.6;
      }
      .ksl-price-bar-right {
        flex-shrink: 0;
        text-align: right;
      }
      .ksl-price-bar .ksl-price-now {
        font-size: 22px;
        font-weight: 900;
        line-height: 1;
        color: #cc0000;
        white-space: nowrap;
      }
      .ksl-price-bar .ksl-price-now::before {
        display: none;
      }
      .ksl-price-bar .ksl-price-was {
        font-size: 12px;
        font-weight: bold;
        text-align: right;
        margin-top: 0;
      }
      .ksl-price-bar .ksl-price-loading-text {
        font-size: 12px;
      }
      .ksl-cta-left, .ksl-cta-right { width: 100%; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); text-align: left; padding-left: 12px; padding-right: 12px; }
      .ksl-cta-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ksl-cta-left .ksl-cta-icon {
        background: rgba(0,0,0,0.06);
      }
      .ksl-cta-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ksl-cta-left .ksl-cta-icon {
        background: rgba(255,255,255,0.12) !important;
      }
      .ksl-cta-label {
        flex: 1;
        min-width: 0;
      }
      .ksl-cta-arrow {
        flex-shrink: 0;
        opacity: 0.5;
        margin-left: auto;
      }
      .ksl-cta-left {
        background: rgb(var(--btn-bg-color, 26 26 26)) !important;
        border-color: rgb(var(--btn-bg-color, 26 26 26)) !important;
        color: rgb(var(--btn-text-color, 255 255 255)) !important;
        background-image: none !important;
      }
      .ksl-cta-left:hover {
        filter: brightness(1.15);
        background-image: none !important;
      }
      .ksl-cta-left .ksl-cta-icon {
        background: rgba(255,255,255,0.12) !important;
      }
      .ksl-cta-right {
        background: var(--btk-green, #2d7a3a) !important;
        border-color: var(--btk-green, #2d7a3a) !important;
        color: #fff !important;
        background-image: none !important;
      }
      .ksl-cta-right:hover {
        filter: brightness(1.1);
        background-image: none !important;
      }
     
      @media (max-width: 620px) { .ksl-cta-grid--two { grid-template-columns: 1fr; } }

      .ksl-swatches-overlay {
        position: absolute;
        inset: 0;
        z-index: 20;
        background: rgba(255,255,255,0.78);
        backdrop-filter: blur(2px);
      }
      .ksl-overlay-inner { height: 100%; width: 100%; padding: 30px; }
      .ksl-overlay-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--ksl-swatch), 1fr));
        gap: 12px;
        align-content: start;
        align-items: start;
        background: rgba(255,255,255,0.98);
        border: 1px solid rgba(0,0,0,0.10);
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 14px 30px rgba(0,0,0,0.18);
        max-height: 100%;
        overflow: auto;
      }
      .ksl-swatch-more--overlay { font-size: 18px; line-height: 1; }

      /* Filter bar */
      .ksl-filterbar { background: #e6e6e6; border-radius: 12px; padding: 20px 12px; margin-bottom: 36px; margin-top: 36px; }

      .ksl-filterbar-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }

      .ksl-filterbar-mid { display: inline-flex; gap: 10px; align-items: center; justify-content: center; }

      .ksl-filterbar-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

      .ksl-reset-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        color: #555;
        text-decoration: underline;
        text-underline-offset: 2px;
        background: none;
        border: none;
        padding: 0 4px;
        cursor: pointer;
        white-space: nowrap;
        line-height: 1;
      }
      .ksl-reset-link:hover { color: #000; }

     .ksl-filterbar-tile:hover { background: #e0e0e0; border-color: #999; }
.ksl-filterbar-tile.is-active:hover { background: #333; border-color: #333; }

.ksl-colourfamily-tile:hover .ksl-colourfamily-swatch { border-color: #000; border-width: 2px; }
.ksl-colourfamily-tile:hover .ksl-colourfamily-title { font-weight: 700; }

     /* Filter button states:
        - default        → white pill, thin border
        - .has-selection → solid black pill (a filter is chosen)
        - .is-active     → white pill with thick black border (panel open)
        - both           → black pill with thick black border (chosen + open)
        Border thickness change can shift layout slightly - using
        outline on the open state instead of border keeps the size stable. */
     .ksl-filterbtn {
       background: #fff !important;
       color: #000 !important;
       border-radius: 999px !important;
       outline: 2px solid transparent;
       outline-offset: -2px;
       transition: outline-color 0.12s ease;
     }
     .ksl-filterbtn.is-active {
       background: #fff !important;
       color: #000 !important;
       border-color: #000 !important;
       outline-color: #000;
       font-weight: 700;
     }
     .ksl-filterbtn.has-selection {
       background: #000 !important;
       color: #fff !important;
       border-color: #000 !important;
       outline-color: transparent;
       font-weight: 700;
     }
     .ksl-filterbtn.is-active.has-selection {
       background: #000 !important;
       color: #fff !important;
       border-color: #000 !important;
       outline-color: #000;
       font-weight: 700;
     }

      /* Desktop: hide the mobile-only label; show only the desktop one.
         Mobile media query below flips this. */
      .ksl-filterbtn-label-mobile { display: none; }
      .ksl-filterbtn-label-desktop { display: inline; }

      .ksl-filterbar-panel { padding: 12px 0 0 0; }
      .ksl-filterbar-panel-inner { border: none; border-radius: 12px; padding: 14px; background: #fff; }
      .ksl-filterbar-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
      .ksl-filterbar-panel-label { font-size: 14px; font-weight: 600; }
      .ksl-filterbar-panel-help { font-size: 13px; opacity: 0.7; margin-top: 2px; }
      .ksl-filterbar-empty { font-size: 13px; opacity: 0.75; padding: 6px 2px; }

.ksl-filterbar-carousel { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 2px 10px 2px; overflow: visible; justify-content: center; }
.ksl-filterbar-tile { background: #fff; border: 1px solid #ccc; border-radius: 999px; padding: 14px 28px; cursor: pointer; min-width: unset; scroll-snap-align: start; display: inline-flex; flex-direction: row; gap: 0; text-decoration: none; color: inherit; align-items: center; white-space: nowrap; font-size: 15px; font-weight: 500; }
.ksl-filterbar-tile.is-active { border-color: #000; background: #000; color: #fff; outline: none; border-radius: 999px; }
.ksl-flex-break { flex-basis: 100%; height: 0; }      

.ksl-filterbar-tile-img { display: none; }
.ksl-filterbar-tile-img img {
        width: 120px;
        height: auto;
        max-height: 120px;
        object-fit: contain;
        border-radius: 10px;
        display: block;
      }
      .ksl-filterbar-tile-ph {
        width: 120px;
        height: 80px;
        border-radius: 10px;
        background: rgba(0,0,0,0.06);
        display: block;
      }
      .ksl-filterbar-tile-title { font-size: 13px; line-height: 1.2; text-align: center; font-weight: 700; }
      .ksl-filterbar-tile.is-active { outline: none; border-radius: 999px; }

      /* Colour family tiles */
      .ksl-colourfamily-tile { border: none; background: none; border-radius: 12px; padding: 10px 12px; cursor: pointer; min-width: unset; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
      .ksl-colourfamily-tile.is-active { border-color: rgba(0,0,0,0.35); }
      .ksl-colourfamily-swatch {
        width: 60px;
        height: 60px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        flex: 0 0 auto;
      }
      .ksl-colourfamily-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .ksl-colourfamily-hex { width: 100%; height: 100%; display: block; }
      .ksl-colourfamily-title { font-size: 13px; line-height: 1.15; text-align: left; }

      /* Carousel arrows + hide scrollbar */
      .ksl-carousel-wrap {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 110px; /* unifies style + colour panel heights */
        width: 100%;
      }
      .ksl-carousel-wrap .ksl-filterbar-carousel {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 50px 10px 50px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
      }



/* Permanent Inactive State */
.ksl-filterbtn--fav,
.btn.ksl-filterbtn--fav,
.btn--primary.ksl-filterbtn--fav {
  background-color: #fff !important;
  background-image: none !important;
  color: #444 !important;
  border: 1px solid #000 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  opacity: 1 !important;
}

/* Inactive Hover - neutral, no colour shift */
.ksl-filterbtn--fav:hover,
.btn.ksl-filterbtn--fav:hover,
.btn--primary.ksl-filterbtn--fav:hover {
  background-color: #fff !important;
  background-image: none !important;
  color: #444 !important;
}

/* Active State */
.ksl-filterbtn--fav.is-active,
.btn.ksl-filterbtn--fav.is-active,
.btn--primary.ksl-filterbtn--fav.is-active {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* Ensure SVG heart follows the text color */
.ksl-filterbtn--fav svg {
  fill: #333 !important;
}

.ksl-filterbtn--fav.is-active svg,
.btn.ksl-filterbtn--fav.is-active svg,
.btn--primary.ksl-filterbtn--fav.is-active svg {
  fill: #fff !important;
}



      .ksl-carousel-wrap .ksl-filterbar-carousel::-webkit-scrollbar { display: none; }

      /* Carousel arrows - hidden on desktop, shown on mobile only.
         The desktop layout wraps pills onto two rows so no nav is
         needed. On mobile the track scrolls horizontally and the
         arrows sit OUTSIDE the carousel (not overlapping content)
         using a 3-column grid layout: [arrow][carousel][arrow]. */
      .ksl-carousel-arrow { display: none; }

      @media (max-width: 760px) {
        .ksl-carousel-wrap {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 4px;
          min-height: 90px; /* unify Style + Colour panel heights on mobile */
        }
        .ksl-carousel-arrow {
          position: static;
          transform: none;
          width: 28px;
          height: 28px;
          padding: 0;
          border: none;
          background: transparent;
          box-shadow: none;
          color: #111;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: opacity 0.15s ease;
          flex-shrink: 0;
        }
        /* Theme chevron renders as an SVG; size + flip for left arrow */
        .ksl-carousel-arrow svg {
          width: 16px;
          height: 16px;
          display: block;
        }
        .ksl-carousel-arrow--left svg {
          transform: rotate(180deg);
        }
        .ksl-carousel-arrow[disabled] {
          opacity: 0.25;
          cursor: default;
          pointer-events: none;
        }
        /* Carousel sits in the middle column - no extra padding for arrows */
        .ksl-carousel-wrap .ksl-filterbar-carousel {
          padding: 8px 4px 10px 4px;
        }
      }

      @media (max-width: 760px) {
        .ksl-filterbar-row { flex-wrap: wrap; }
        .ksl-filterbar-mid { width: 100%; overflow-x: auto; padding-bottom: 2px; }
        .ksl-filterbtn { min-width: 160px; }
        .ksl-filterbar-right { width: 100%; }
      }

      .ksl-viewbar-label { opacity: 0.8; font-size: 14px; }
      .ksl-viewbar-buttons { display: inline-flex; gap: 4px; }
      .ksl-viewbtn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #000; }
      .ksl-viewbtn.is-active { background: #000; color: #fff; }
      .ksl-viewbtn .icon { display: block; }

      .ksl-door-overlay { display: none; }

      /* LIST VIEW CSS */
      .ksl-grid.is-list { grid-template-columns: 1fr; gap: 22px; }

      .ksl-grid.is-list .ksl-card-inner {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto 1fr;
        align-items: start;
        height: 100%;
      }

      .ksl-grid.is-list .ksl-card-title-above {
        grid-column: 2;
        grid-row: 1;
        padding-top: 26px;
        padding-bottom: 10px;
      }

      .ksl-grid.is-list .ksl-image-link { grid-column: 1; grid-row: 1 / 3; height: auto; align-self: start; }

      .ksl-grid.is-list .ksl-image-wrap {
        position: relative;
        aspect-ratio: 8 / 5;
        height: auto;
        min-height: 0;
        overflow: hidden;
      }

     .ksl-grid.is-list .ksl-content {
        grid-column: 2;
        grid-row: 2;
        padding: 0 26px 26px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        height: 100%;
      }
      .ksl-grid.is-list .ksl-price-bar {
        margin-top: auto;
      }
      .ksl-grid.is-list .ksl-cta-grid--two {
        margin-top: 0;
      }
      .ksl-grid.is-list .ksl-sc-panel--active {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
      }
      .ksl-grid.is-list .ksl-sc-panel--active .ksl-price-bar {
        margin-top: auto;
      }
      .ksl-grid.is-list .ksl-content > .ksl-sc-panel .ksl-cta-grid--two {
        margin-top: 0;
      }

      .ksl-grid.is-list .ksl-toprow--new { display: grid; grid-template-columns: 1fr; gap: 14px; }
      .ksl-grid.is-list .ksl-toprow-right { display: none; }
      .ksl-grid.is-list .ksl-cta-grid--two { grid-template-columns: 1fr; }

      

      .ksl-grid.is-list .ksl-door-overlay {
        display: block;
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 6;
      }

      .ksl-grid.is-list .ksl-door-overlay .ksl-door-block {
        position: relative;
        top: auto;
        right: auto;
        width: 140px;
        height: 200px;
        border-radius: 0px;
        border: 1px solid rgba(0,0,0,0.10);
        box-shadow: 0 10px 22px rgba(0,0,0,0.25);
        background: transparent;
        overflow: hidden;
      }

      .ksl-grid.is-list .ksl-door-overlay .ksl-door-block.is-empty { display: none; }

      .ksl-grid.is-list .ksl-door-overlay .ksl-door-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      @media (max-width: 980px) {
        .ksl-grid.is-list .ksl-card-inner { grid-template-columns: 1fr; }
        .ksl-grid.is-list .ksl-content { grid-column: 1; grid-row: 2; padding: 22px; }
        .ksl-grid.is-list .ksl-image-link { grid-column: 1; grid-row: 1; }
        .ksl-grid.is-list .ksl-image-wrap { aspect-ratio: 8 / 5; }
        .ksl-grid.is-list .ksl-door-overlay { right: 16px; bottom: 16px; }
        .ksl-grid.is-list .ksl-door-overlay .ksl-door-block { width: 120px; height: 172px; }
      }

/* Hide tab row - data stays in DOM for JS, visuals replaced by badge */
.ksl-sc-tabs--hidden { display: none !important; }

/* Title row - h2 left, badge right */


/* "Also available in" badge */
/* "Also available in" circular badge */
.ksl-also-badge--above {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 130px;
  height: 130px;
  overflow: hidden;
  pointer-events: none;
  border-top-right-radius: 12px;
}
.ksl-also-badge {
  position: absolute;
  top: -56px;
  right: -88px;
  width: 190px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  transform: rotate(45deg);
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 85px 0 10px;
  gap: 3px;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.2s ease;
}
.ksl-also-badge:hover {
  background: #3a3a3a;
}



.ksl-also-badge-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  opacity: 0.88;
}

.ksl-also-badge-label {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.ksl-also-badge-arrow {
  display: none;
}


/* Favourites Toggle Styling */
.btk-fav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  
  /* The "Anti-Wonky" Fix */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.btk-fav-toggle svg {
  width: 20px;
  height: 20px;
  display: block; /* Removes baseline spacing */
  margin: 0;
}

.btk-fav-toggle.is-active {
  background: #d10000;
  border-color: #d10000;
  color: #fff;
}

.btk-fav-toggle.is-active svg {
  fill: #fff;
}

.ksl-toprow-left {
  display: flex;
  flex-direction: column;
}

.ksl-overlay-close-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.ksl-overlay-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.ksl-overlay-close-btn:hover {
  background: #f2f2f2;
}

/* --- Linked style tabs --- */
.ksl-sc-tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(0,0,0,0.12);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.ksl-sc-tab {
  font-size: 12px;
  font-weight: 400;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(0,0,0,0.5);
  cursor: pointer;
  transition: all .18s;
  line-height: 1.4;
  white-space: nowrap;
}

.ksl-sc-tab:hover {
  color: rgba(0,0,0,0.8);
  border-color: rgba(0,0,0,0.15);
}

.ksl-sc-tab--active {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
  color: #000;
  font-weight: 600;
}

/* --- Linked style panels --- */
.ksl-sc-panel {
  display: none;
  flex-direction: column;
  width: 100%;
}

.ksl-sc-panel--active {
  display: flex;
}

/* Ensure panel inside toprow-left flows correctly */
.ksl-toprow-left .ksl-sc-panel {
  flex-direction: column;
  gap: 0;
}

/* Ensure panel in bottom section flows correctly */
.ksl-content > .ksl-sc-panel {
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Push bottom panel CTAs to bottom of card like primary panel */
.ksl-content > .ksl-sc-panel .ksl-cta-bottom {
  margin-top: auto;
}


   /* ── Hero (plain, no background image) ──
      Kept the .ksl-hero id and structure for JS compatibility
      (updateDynamicHeading still targets #ksl-hero / #ksl-hero-title).
      The .ksl-hero--plain modifier opts out of the dark image style. */
   .ksl-hero {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
      }
      .ksl-hero--plain {
        background: none;
        background-color: transparent;
        min-height: 0;
      }
      .ksl-hero-inner {
        position: relative;
        z-index: 1;
        text-align: left;
        padding: 32px 20px 16px;
        max-width: var(--page-width, 1590px);
        width: 100%;
        margin: 0 auto;
      }
      .ksl-hero--plain .ksl-hero-title {
        color: inherit;
        font-size: clamp(28px, 4.5vw, 48px);
        font-weight: 800;
        margin: 0;
        line-height: 1.1;
        letter-spacing: -0.5px;
      }
      .ksl-hero-intro {
        margin-top: 16px;
        font-size: 16px;
        line-height: 1.6;
        max-width: 880px;
        color: inherit;
      }
      .ksl-hero-intro p { margin: 0 0 12px; }
      .ksl-hero-intro p:last-child { margin-bottom: 0; }
      .ksl-hero-intro a { text-decoration: underline; }
      .ksl-hero-intro ul,
      .ksl-hero-intro ol { margin: 0 0 12px; padding-left: 22px; }

      @media (max-width: 680px) {
        .ksl-hero-inner { padding: 20px 16px 8px; }
        .ksl-hero-intro { font-size: 15px; margin-top: 12px; }
      }

      /* ── BTK STYLE MODAL ── */
.btk-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.btk-modal[style*="flex"],
.btk-modal[style*="block"] {
  display: flex !important;
}

.btk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.btk-modal__panel {
  position: relative;
  background: #e6e6e6;
  border-radius: 16px;
  padding: 24px;
  width: auto;
  min-width: 300px;
  max-width: min(90vw, 480px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.btk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.btk-modal__title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
}

.btk-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.btk-modal__close:hover { color: #111; }

.btk-modal__intro {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px;
}

.btk-modal__active-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.btk-modal__swatches {
  flex-shrink: 0;
}

.btk-modal__active-info {
  flex: 1;
  min-width: 0;
}

.btk-modal__active-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--btk-green, #2d7a3a);
  margin-bottom: 4px;
}

.btk-modal__active-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btk-modal__active-sub {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
}

.btk-modal__question {
  font-size: 13px;
  color: #444;
  margin: 0 0 16px;
  line-height: 1.4;
}

.btk-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btk-modal__btn {
  width: 100%;
  padding: var(--btn-padding-y, 12px) 16px;
  border-radius: var(--btn-border-radius, 6px);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: var(--btn-border-width, 1px) solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  background-image: none !important;
  transition: opacity 0.15s;
}

.btk-modal__btn:hover { opacity: 0.85; }

.btk-modal__btn--dark {
  background: rgb(var(--btn-bg-color, 26 26 26));
  color: rgb(var(--btn-text-color, 255 255 255));
}

.btk-modal__btn--green {
  background: var(--btk-green, #2d7a3a);
  color: #fff;
}

.btk-modal__cancel {
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  color: #888;
  font-size: 12px;
  text-align: center;
  padding: 4px 0 0;
  transition: color 0.15s;
}

.btk-modal__cancel:hover { color: #333; }



/* ── KSL BUY DRAWER ── */
#kslBuyDrawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  visibility: hidden;
}

#kslBuyDrawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.ksl-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#kslBuyDrawer.is-open .ksl-drawer-backdrop {
  opacity: 1;
}

.ksl-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#kslBuyDrawer.is-open .ksl-drawer-panel {
  transform: translateX(0);
}

.ksl-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e4;
  background: #111;
  flex-shrink: 0;
  gap: 12px;
}

.ksl-drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.2;
}

.ksl-drawer-colour-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.ksl-drawer-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ksl-drawer-close:hover { color: #fff; }

.ksl-drawer-style-info {
  padding: 14px 20px 0;
  flex-shrink: 0;
}

.ksl-drawer-style-name {
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.1;
  margin: 0 0 2px;
  color: #111;
}

.ksl-drawer-style-colour {
  font-size: 2.0rem;
  font-weight: 750;
  line-height: 1.1;
  margin: 0;
  color: #111;
}

.ksl-drawer-desc {
  font-size: 1.35rem;
  line-height: 1.55;
  opacity: 0.75;
  margin: 0;
  padding: 10px 20px 0;
  flex-shrink: 0;
}

.ksl-drawer-pair {
  position: relative;
  width: min(calc(100% - 40px), 230px);   /* smaller preview so the drawer doesn't scroll */
  margin: 14px auto 0;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.10);
  flex-shrink: 0;
}

.ksl-drawer-pair-carcase,
.ksl-drawer-pair-door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ksl-drawer-pair-door { z-index: 2; }
.ksl-drawer-pair-carcase { z-index: 1; }

.ksl-drawer-swatches {
  padding: 16px 20px 0;
  flex-shrink: 0;
}

.ksl-drawer-swatch-label {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  margin: 0 0 10px;
}

.ksl-drawer-carcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ksl-drawer-carcase-swatch {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.ksl-drawer-carcase-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  margin-bottom: 6px;
}

.ksl-drawer-carcase-swatch.is-active .ksl-drawer-carcase-img-wrap {
  outline: 3px solid rgba(0,0,0,0.6);
  outline-offset: 2px;
}

.ksl-drawer-carcase-name {
  font-size: 1.0rem;
  line-height: 1.2;
  margin: 0;
}

/* Start Buying Online - black CTA under Plan Online. */
.ksl-drawer-buy {
  margin: 0 20px 20px;
  flex-shrink: 0;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--btn-padding-y, 12px) 16px;
  border-radius: var(--btn-border-radius, 12px);
  background: #111;
  background-image: none !important;
  border: 1px solid #111;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  text-align: left;
  font-family: inherit;
}

.ksl-drawer-buy:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.ksl-drawer-buy .ksd-action-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ksl-drawer-buy .ksd-action-text {
  flex: 1;
  min-width: 0;
}

.ksl-drawer-buy .ksd-action-title {
  font-size: 1.5rem;
  font-weight: 750;
  margin: 0 0 1px;
  line-height: 1.15;
}

.ksl-drawer-buy .ksd-action-sub {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.4;
  opacity: 0.65;
}

.ksl-drawer-buy .ksd-action-arrow {
  flex-shrink: 0;
  opacity: 0.5;
  color: #fff;
}

.ksl-drawer-buy:hover {
  filter: brightness(1.5) !important;
}

.ksl-drawer-buy .ksl-cta-icon {
  flex-shrink: 0 !important;
  color: #fff !important;
}

.ksl-drawer-buy .ksl-cta-label {
  flex: 1 !important;
  font-size: 1.5rem !important;
  font-weight: 750 !important;
  color: #fff !important;
}

.ksl-drawer-buy .ksl-cta-arrow {
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
  color: #fff !important;
}

/* Plan Online - green CTA at the top of the button pair (mirrors the buy
   button's card layout); the auto top margin pins the pair to the bottom. */
.ksl-drawer-plan {
  margin: auto 20px 20px;
  flex-shrink: 0;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--btn-padding-y, 12px) 16px;
  border-radius: var(--btn-border-radius, 12px);
  background: var(--btk-green, #2d7a3a);
  background-image: none !important;
  border: 1px solid var(--btk-green, #2d7a3a);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  text-align: left;
  font-family: inherit;
}
.ksl-drawer-plan:hover { filter: brightness(1.1); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.ksl-drawer-plan .ksd-action-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: #fff;
}
.ksl-drawer-plan .ksd-action-text { flex: 1; min-width: 0; }
.ksl-drawer-plan .ksd-action-title { font-size: 1.5rem; font-weight: 750; margin: 0 0 1px; line-height: 1.15; color: #fff; }
.ksl-drawer-plan .ksd-action-sub { font-size: 1.2rem; margin: 0; line-height: 1.4; opacity: 0.65; color: #fff; }
.ksl-drawer-plan .ksd-action-arrow { flex-shrink: 0; opacity: 0.5; color: #fff; }

/* ============================================
         MOBILE REDESIGN
         Single source of truth for screens ≤ 760px.
         Order matters: this block sits at the end so
         its rules win over earlier desktop rules without
         needing !important everywhere.
         ============================================ */

      @media (max-width: 760px) {

        /* Section padding - tighter */
        .ksl-wrap { padding: 16px 10px; }

        /* Hero - keep but compact */
        .ksl-hero-inner { padding: 16px 14px 8px; }
        .ksl-hero--plain .ksl-hero-title {
          font-size: clamp(24px, 7vw, 32px);
          line-height: 1.15;
        }
        .ksl-hero-intro {
          font-size: 14px;
          line-height: 1.55;
          margin-top: 10px;
        }

        /* Filterbar - restructure for narrow screens.
           Desktop is 3-col grid; mobile becomes a single
           column with the bar split into rows visually. */
        .ksl-filterbar {
          padding: 14px 10px;
          margin-top: 16px;
          margin-bottom: 24px;
          border-radius: 10px;
        }
        .ksl-filterbar-row {
          grid-template-columns: 1fr;
          gap: 10px;
        }

        /* "Filter by" label + view toggle on one shared row */
        .ksl-filterbar-left {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
        }
        .ksl-filterbar-right {
          justify-content: flex-end;
          width: auto;
        }
        /* Hide the separate viewbar slot - we move it next to "Filter by" */
        .ksl-filterbar-row > .ksl-filterbar-right { display: none; }
        .ksl-filterbar-left::after {
          /* Reserve nothing - the actual viewbar is moved via flex below */
          content: none;
        }

        .ksl-filterbar-heading {
          font-size: 13px;
          font-weight: 700;
          opacity: 0.75;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }

        /* Filter buttons row - Style + Colour share equal width,
           Favourites is a fixed-width icon-only pill so the longest
           style names ("True Handleless") fit on one line. */
        .ksl-filterbar-mid {
          display: grid;
          grid-template-columns: 1fr 1fr 44px;
          gap: 8px;
          width: 100%;
          overflow: visible;
          padding: 0;
        }
        .ksl-filterbtn {
          width: 100%;
          min-width: 0;
          padding: 10px 12px;
          font-size: 13px;
          line-height: 1.2;
          height: 42px;
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
        }
        .ksl-filterbtn .ksl-filterbtn-label {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
        }

        /* Mobile: swap "Kitchen Style" → "Style" via a swap label. */
        .ksl-filterbtn-label-desktop { display: none !important; }
        .ksl-filterbtn-label-mobile { display: inline !important; }

        /* Favourites: icon-only on mobile, narrower than the
           text buttons so longer style names ("True Handleless")
           don't get cut off in the Style pill. */
        .ksl-filterbtn--fav {
          padding: 0 !important;
        }
        .ksl-filterbtn--fav .ksl-filterbtn-label {
          gap: 0 !important;
          justify-content: center;
        }
        .ksl-filterbtn--fav .ksl-fav-text,
        .ksl-filterbtn--fav .ksl-fav-count-wrap {
          display: none;
        }
        .ksl-filterbtn--fav .inline-heart {
          width: 18px !important;
          height: 18px !important;
        }

        /* Reset link - full width on row 2 below the buttons */
        .ksl-reset-link {
          grid-column: 1 / -1;
          justify-content: center;
          padding: 6px 4px;
          font-size: 12px;
        }

        /* View toggle - visible inline with "Filter by" header */
        .ksl-viewbar-label { display: none; }
        .ksl-viewbtn {
          width: 32px;
          height: 32px;
        }
        .ksl-viewbtn .icon { width: 18px; height: 18px; }

        /* Filter panel - full width, shorter padding */
        .ksl-filterbar-panel-inner { padding: 8px; }
        .ksl-filterbar-carousel {
          padding: 4px 4px 8px;
          gap: 6px;
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .ksl-filterbar-carousel::-webkit-scrollbar { display: none; }
        .ksl-carousel-wrap .ksl-filterbar-carousel {
          padding: 4px 4px 8px;
        }
        .ksl-filterbar-tile {
          padding: 8px 16px;
          font-size: 13px;
          flex-shrink: 0;
        }

        /* Colour family tiles - slightly smaller swatches */
        .ksl-colourfamily-tile {
          padding: 6px 8px;
          flex-shrink: 0;
        }
        .ksl-colourfamily-swatch {
          width: 44px;
          height: 44px;
        }
        .ksl-colourfamily-title { font-size: 11px; }

        /* Header row (above grid) - tighter margins */
        .ksl-header-row {
          margin-top: 16px;
          margin-bottom: 24px;
          gap: 12px;
        }
        .ksl-title { font-size: 22px; }
        .ksl-subtitle { font-size: 14px; }

        /* Grid - single column on mobile, 36px vertical gap to match desktop */
        .ksl-grid { gap: 36px; }

        /* Cards - tighter inside */
        .ksl-card { border-radius: 10px; }
        .ksl-card-title-above-h2 {
          padding: 16px 16px 0 16px;
          font-size: 22px;
        }
        .ksl-title-link--above .ksl-title-first {
          font-size: 22px;
        }
        .ksl-title-link--above .ksl-title-rest {
          font-size: 18px;
        }
        .ksl-card-colour-above {
          padding: 4px 16px 12px 16px;
          font-size: clamp(1.4rem, 4.5vw, 1.9rem);
        }
        .ksl-content {
          padding: 16px;
          gap: 12px;
        }

        /* Toprow - already 1 column at 620px, just tighten */
        .ksl-toprow--new { gap: 12px; }

        /* Swatches - smaller + tighter on mobile */
        :root {
          /* Override the desktop swatch size for mobile */
        }
        .ksl-swatches-top {
          grid-template-columns: repeat(auto-fill, 36px);
          gap: 8px;
        }
        .ksl-swatch-item { width: 36px; }
        .ksl-swatch {
          width: 36px;
          height: 36px;
        }
        .ksl-swatch-name {
          font-size: 1rem;
          max-width: 36px;
        }

        /* "Also available" badge - smaller corner ribbon */
        .ksl-also-badge--above {
          width: 100px;
          height: 100px;
          border-top-right-radius: 10px;
        }
        .ksl-also-badge {
          width: 150px;
          top: -42px;
          right: -68px;
          padding: 64px 0 8px;
        }
        .ksl-also-badge-eyebrow { font-size: 8px; }
        .ksl-also-badge-label { font-size: 14px; }

        /* Favourites button on cards - slightly smaller */
        .btk-fav-toggle {
          width: 36px;
          height: 36px;
          top: 12px;
          right: 12px;
        }
        .btk-fav-toggle svg { width: 18px; height: 18px; }

        /* Price bar - keep readable */
        .ksl-price-bar {
          padding: 10px 12px;
          gap: 10px;
        }
        .ksl-price-bar-label { font-size: 11px; }
        .ksl-price-bar .ksl-price-now { font-size: 20px; }

        /* CTAs - bigger tap targets */
        .ksl-cta-grid--two { gap: 8px; }
        .ksl-cta-left, .ksl-cta-right {
          padding: 12px 14px;
          font-size: 14px;
          gap: 8px;
        }
        .ksl-cta-icon {
          width: 26px;
          height: 26px;
        }

        /* Linked-style tabs (when shown) */
        .ksl-sc-tab {
          font-size: 11px;
          padding: 4px 10px;
        }

        /* Swatches overlay (full grid) - tighter padding */
        .ksl-overlay-inner { padding: 16px; }
        .ksl-overlay-grid {
          grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
          gap: 8px;
          padding: 12px;
        }
      }

      /* Very narrow phones - extra-tight tweaks */
      @media (max-width: 380px) {
        .ksl-filterbar-mid { grid-template-columns: 1fr; }
        .ksl-filterbtn { padding: 10px 8px; font-size: 12px; }
        .ksl-card-title-above-h2 { font-size: 20px; }
        .ksl-title-link--above .ksl-title-first { font-size: 20px; }
        .ksl-title-link--above .ksl-title-rest { font-size: 16px; }
      }

/* Style Names filter panel (2026-10-06): plain A-Z name links in newspaper
   columns, matching the Kitchens mega menu's Style Names panel. Still
   <button>s on /pages/kitchens (the JS filters in place), styled as links.
   No max-height: the panel grows to fit every name (a capped height made the
   columns overflow sideways into a horizontal scroll). */
.ksl-range-list { columns: 4 200px; column-gap: 32px; padding: 8px 4px 10px; }
.ksl-range-tile { display: block; width: 100%; background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer; font: inherit; font-size: 14px; line-height: 1.3; text-align: left; color: inherit; text-decoration: none; break-inside: avoid; }
.ksl-range-tile:hover { text-decoration: underline; }
.ksl-range-tile.is-active { font-weight: 700; text-decoration: underline; }
@media (max-width: 760px) {
  .ksl-range-list { columns: 2; column-gap: 16px; }
  .ksl-range-tile { font-size: 13px; }
}

/* Colour filter panel (2026-10-06): fixed 12-across grid on desktop, so the
   31 colour filters sit in 3 rows with no scrolling. Phones keep the
   scrolling strip from the mobile rules above. */
@media (min-width: 761px) {
  .ksl-filterpanel--colour .ksl-filterbar-carousel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 8px; justify-content: stretch; }
  .ksl-filterpanel--colour .ksl-carousel-arrow { display: none; }
  .ksl-filterpanel--colour .ksl-colourfamily-tile { padding: 6px 2px; min-width: 0; }
  .ksl-filterpanel--colour .ksl-colourfamily-swatch { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1 / 1; }
  .ksl-filterpanel--colour .ksl-colourfamily-title { text-align: center; font-size: 12px; }
}

/* Swatch design matches the homepage colour block and the Kitchens mega menu:
   round colour in a white ring with a soft shadow. Selected = dark outer ring. */
.ksl-filterpanel--colour .ksl-colourfamily-swatch,
.ksl-filterpanel--colour .ksl-colourfamily-tile:hover .ksl-colourfamily-swatch {
  background: #fff; padding: 7%; border: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ksl-filterpanel--colour .ksl-colourfamily-swatch img,
.ksl-filterpanel--colour .ksl-colourfamily-hex { border-radius: 50%; }
.ksl-filterpanel--colour .ksl-colourfamily-tile:hover .ksl-colourfamily-swatch { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.ksl-filterpanel--colour .ksl-colourfamily-tile.is-active .ksl-colourfamily-swatch { box-shadow: 0 0 0 2px #1a1a1a, 0 4px 12px rgba(0,0,0,.14); }
.ksl-filterpanel--colour .ksl-colourfamily-tile.is-active .ksl-colourfamily-title { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ksl-filterpanel--colour .ksl-colourfamily-swatch { transition: none; } }