/** Shopify CDN: Minification failed

Line 926:0 All "@import" rules must come first

**/
/*
  Oh!Possum — Koala Product Page Styles
  File: assets/product-koala.css
  =========================================
  Swatch color variables — add one per color variant:
  --swatch-sand:   #C4A882;
  --swatch-toffee: #8B7355;
  --swatch-forest: #4A5240;
  --swatch-linen:  #D4C5B0;
*/

:root {
  --kl-cream:        #F5F0E8;
  --kl-warm-white:   #FAF8F4;
  --kl-forest:       #2C3528;
  --kl-sage:         #7A8C6E;
  --kl-rust:         #8B4A2F;
  --kl-charcoal:     #3A3A3A;
  --kl-light-gray:   #E8E4DC;
  --kl-gold:         #B8944A;
  --kl-green-trust:  #4A7A5A;
  --kl-font-serif:   'Cormorant Garamond', Georgia, serif;
  --kl-font-sans:    'DM Sans', sans-serif;
  --kl-shadow:       0 8px 32px rgba(0,0,0,.10);
  --kl-radius:       6px;

  /* Swatch colors */
  --swatch-sand:     #C4A882;
  --swatch-toffee:   #8B7355;
  --swatch-forest:   #4A5240;
  --swatch-linen:    #D4C5B0;
}

/* ========== TRUST BAR ========== */
.kl-trust-bar {
  background: var(--kl-forest);
  color: white;
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 500;
  flex-wrap: wrap;
  font-family: var(--kl-font-sans);
}
.kl-trust-bar span { display: flex; align-items: center; gap: 5px; }

/* ========== BREADCRUMB ========== */
.kl-breadcrumb {
  padding: 10px 40px;
  font-size: 12px;
  color: #999;
  max-width: 1280px;
  margin: 0 auto;
  font-family: var(--kl-font-sans);
}
.kl-breadcrumb a { color: #999; text-decoration: none; }
.kl-breadcrumb a:hover { color: var(--kl-forest); }

/* ========== PRODUCT WRAPPER ========== */
.kl-product-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  font-family: var(--kl-font-sans);
}

/* ========== GALLERY ========== */
.kl-gallery { position: sticky; top: 72px; }
.kl-gallery-main {
  position: relative;
  border-radius: var(--kl-radius);
  overflow: hidden;
  background: var(--kl-cream);
  aspect-ratio: 1;
}
.kl-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-badge-bestseller {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--kl-gold);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.kl-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.kl-gallery-thumb {
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--kl-cream);
  aspect-ratio: 1;
  transition: border-color .2s;
}
.kl-gallery-thumb.active { border-color: var(--kl-forest); }
.kl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ========== PRODUCT INFO ========== */
.kl-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  min-height: 24px;
}
.kl-product-subtitle {
  font-size: 12px;
  color: var(--kl-sage);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kl-product-title {
  font-family: var(--kl-font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--kl-forest);
  margin-bottom: 14px;
}
.kl-price-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.kl-price-main {
  font-family: var(--kl-font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--kl-forest);
}
.kl-price-compare {
  font-size: 20px;
  color: #aaa;
  font-weight: 300;
  margin-right: 4px;
}
.kl-price-note {
  font-size: 12px;
  color: var(--kl-sage);
  background: var(--kl-cream);
  padding: 3px 8px;
  border-radius: 20px;
}
.kl-price-per-use {
  font-size: 12px;
  color: var(--kl-sage);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kl-price-per-use strong { color: var(--kl-forest); }

/* ========== URGENCY ========== */
.kl-urgency-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #FFF8F0;
  border: 1px solid #FFE0B2;
  border-radius: var(--kl-radius);
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  flex-wrap: wrap;
}
.kl-stock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kl-rust);
  animation: kl-pulse 1.5s infinite;
  display: inline-block;
}
@keyframes kl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.3); }
}

/* ========== VARIANT SELECTORS ========== */
.kl-option-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kl-forest);
  margin-bottom: 8px;
  margin-top: 12px;
}
.kl-color-swatches { display: flex; gap: 8px; margin-bottom: 16px; }
.kl-swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color .2s, transform .15s;
}
.kl-swatch:hover { transform: scale(1.1); }
.kl-swatch.active { border-color: var(--kl-forest); }

.kl-option-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.kl-option-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--kl-light-gray);
  border-radius: var(--kl-radius);
  background: white;
  font-family: var(--kl-font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.kl-option-btn:hover { border-color: var(--kl-forest); }
.kl-option-btn.active { border-color: var(--kl-forest); background: var(--kl-forest); color: white; }

/* ========== GIFT OPTION ========== */
.kl-gift-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--kl-light-gray);
  border-radius: var(--kl-radius);
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 13px;
}

/* ========== CTA BUTTONS ========== */
.kl-cta-primary {
  width: 100%;
  background: var(--kl-forest);
  color: white;
  border: none;
  padding: 15px 32px;
  font-family: var(--kl-font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .05em;
  border-radius: var(--kl-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  transition: all .2s;
}
.kl-cta-primary:hover { background: #1a2518; transform: translateY(-1px); box-shadow: var(--kl-shadow); }
.kl-cta-primary:disabled { background: #999; cursor: not-allowed; transform: none; }

.kl-cta-secondary {
  width: 100%;
  background: transparent;
  color: var(--kl-forest);
  border: 1.5px solid var(--kl-forest);
  padding: 13px 32px;
  font-family: var(--kl-font-sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--kl-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  transition: all .2s;
}
.kl-cta-secondary:hover { background: var(--kl-cream); }

.kl-cta-note {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 14px;
}

/* ========== PAYMENT ICONS ========== */
.kl-payment-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.kl-payment-icon { height: 24px; width: auto; opacity: .7; }

/* ========== TRUST PILLARS ========== */
.kl-trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--kl-cream);
  border-radius: var(--kl-radius);
}
.kl-trust-pillar { text-align: center; }
.kl-trust-pillar .icon  { font-size: 18px; margin-bottom: 3px; }
.kl-trust-pillar .label { font-size: 11px; font-weight: 600; color: var(--kl-forest); display: block; }
.kl-trust-pillar .sub   { font-size: 10px; color: var(--kl-sage); }

/* ========== CERTS ========== */
.kl-cert-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #F0F4EE;
  border-radius: var(--kl-radius);
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.kl-cert-badge   { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--kl-forest); }
.kl-cert-divider { width: 1px; height: 22px; background: #C8D4C0; }

/* ========== USP LIST ========== */
.kl-usps { margin-top: 16px; }
.kl-usp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kl-light-gray);
}
.kl-usp-item:last-child { border-bottom: none; }
.kl-usp-icon-wrap {
  width: 34px; height: 34px;
  background: var(--kl-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.kl-usp-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--kl-forest); }
.kl-usp-text span   { font-size: 12px; color: #888; }

/* ========== PRODUCT BODY ========== */
.kl-product-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px 120px;
  font-family: var(--kl-font-sans);
}
.kl-section-wrap { margin-bottom: 60px; }
.kl-section-title {
  font-family: var(--kl-font-serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--kl-forest);
  text-align: center;
  margin-bottom: 6px;
}
.kl-section-sub {
  text-align: center;
  color: var(--kl-sage);
  font-size: 14px;
  margin-bottom: 30px;
}

/* ========== FEATURE PILLS ========== */
.kl-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 52px;
  padding: 20px;
  background: var(--kl-forest);
  border-radius: var(--kl-radius);
  justify-content: center;
}
.kl-feature-pill {
  background: rgba(255,255,255,.1);
  color: white;
  border: 1px solid rgba(255,255,255,.2);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* ========== BENEFITS ========== */
.kl-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kl-benefit-card {
  background: white;
  border: 1px solid var(--kl-light-gray);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.kl-benefit-card:hover { box-shadow: var(--kl-shadow); transform: translateY(-2px); }
.kl-benefit-icon  { font-size: 30px; margin-bottom: 10px; }
.kl-benefit-title { font-family: var(--kl-font-serif); font-size: 20px; color: var(--kl-forest); margin-bottom: 8px; }
.kl-benefit-desc  { font-size: 13px; color: #666; line-height: 1.6; }

/* ========== USE CASES ========== */
.kl-use-cases {
  background: var(--kl-cream);
  padding: 34px;
  border-radius: 8px;
  margin-bottom: 60px;
  text-align: center;
}
.kl-use-case-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.kl-use-case-item {
  background: white;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kl-forest);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========== MATERIALS ========== */
.kl-materials-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.kl-material-card {
  background: var(--kl-cream);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
}
.kl-big-num {
  font-family: var(--kl-font-serif);
  font-size: 52px;
  color: var(--kl-forest);
  line-height: 1;
  margin-bottom: 4px;
}
.kl-mat-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--kl-sage);
  margin-bottom: 10px;
}
.kl-material-card p { font-size: 13px; color: #666; line-height: 1.7; }

/* ========== COMPARISON TABLE ========== */
.kl-comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.kl-comparison-table th {
  background: var(--kl-forest);
  color: white;
  padding: 13px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kl-comparison-table th:nth-child(2) { background: var(--kl-sage); }
.kl-comparison-table th:nth-child(3) { background: #999; }
.kl-comparison-table td {
  padding: 11px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--kl-light-gray);
}
.kl-comparison-table tr:nth-child(even) td { background: var(--kl-cream); }
.kl-comparison-table tr:last-child td { border-bottom: none; }
.kl-check { color: var(--kl-green-trust); font-weight: 700; }
.kl-cross { color: #ccc; }

/* ========== REVIEWS ========== */
#review-widget-placeholder { min-height: 100px; }

/* ========== UGC ========== */
.kl-ugc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.kl-follow-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1.5px solid var(--kl-light-gray);
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kl-charcoal);
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
}
.kl-follow-btn:hover { border-color: var(--kl-rust); color: var(--kl-rust); }

.kl-ugc-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 10px;
  margin-bottom: 10px;
}
.kl-ugc-card {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--kl-light-gray);
  transition: transform .25s, box-shadow .25s;
}
.kl-ugc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.kl-ugc-featured { grid-row: span 2; }
.kl-ugc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-ugc-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.75) 100%);
  padding: 40px 14px 14px;
  opacity: 0;
  transition: opacity .25s;
}
.kl-ugc-card:hover .kl-ugc-overlay { opacity: 1; }
.kl-ugc-handle  { color: white; font-size: 12.5px; font-weight: 700; }
.kl-ugc-caption { color: rgba(255,255,255,.8); font-size: 11px; margin-top: 3px; line-height: 1.4; }
.kl-ugc-likes   { color: rgba(255,255,255,.6); font-size: 11px; margin-top: 4px; }
.kl-ugc-platform {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}

.kl-ugc-cta {
  background: var(--kl-forest);
  border-radius: 10px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.kl-ugc-cta-title { color: white; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.kl-ugc-cta-sub   { color: rgba(255,255,255,.65); font-size: 13px; }
.kl-ugc-cta-sub strong { color: var(--kl-gold); }
.kl-ugc-social-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.kl-ugc-social-btn:hover { background: rgba(255,255,255,.2); }

/* ========== GUARANTEE ========== */
.kl-guarantee-section {
  background: var(--kl-forest);
  color: white;
  padding: 34px;
  border-radius: 8px;
  margin-bottom: 60px;
  text-align: center;
}
.kl-guarantee-section h3 {
  font-family: var(--kl-font-serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 8px;
}
.kl-guarantee-section p {
  opacity: .8;
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto 20px;
}
.kl-guarantee-badges {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.kl-guarantee-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

/* ========== FAQ ========== */
.kl-faq-item { border-bottom: 1px solid var(--kl-light-gray); }
.kl-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--kl-forest);
  transition: color .2s;
}
.kl-faq-question:hover { color: var(--kl-rust); }
.kl-faq-toggle  { font-size: 18px; color: var(--kl-sage); flex-shrink: 0; }
.kl-faq-answer  { padding: 0 0 14px; font-size: 13px; color: #666; line-height: 1.7; display: none; }

/* ========== CROSS-SELL ========== */
.kl-upsell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.kl-upsell-card {
  border: 1px solid var(--kl-light-gray);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.kl-upsell-card:hover { box-shadow: var(--kl-shadow); }
.kl-upsell-img-wrap { display: block; }
.kl-upsell-img-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.kl-upsell-info    { padding: 14px; }
.kl-upsell-name    { font-weight: 600; font-size: 14px; color: var(--kl-forest); margin-bottom: 3px; }
.kl-upsell-price   { font-size: 13px; color: var(--kl-sage); margin-bottom: 10px; }
.kl-upsell-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--kl-forest);
  color: white;
  padding: 9px;
  border: none;
  border-radius: 4px;
  font-family: var(--kl-font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.kl-upsell-cta:hover { background: var(--kl-rust); }

/* ========== STICKY ATC ========== */
.kl-sticky-atc {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 1px solid var(--kl-light-gray);
  padding: 11px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  font-family: var(--kl-font-sans);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.kl-sticky-atc.visible { transform: translateY(0); }
.kl-sticky-product-info { display: flex; align-items: center; gap: 14px; }
.kl-sticky-img {
  width: 48px; height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kl-cream);
  flex-shrink: 0;
}
.kl-sticky-img img { width: 100%; height: 100%; object-fit: cover; }
.kl-sticky-name { font-weight: 600; font-size: 13px; color: var(--kl-forest); }
.kl-sticky-reviews { min-height: 16px; }
.kl-sticky-cta {
  background: var(--kl-forest);
  color: white;
  border: none;
  padding: 13px 30px;
  border-radius: var(--kl-radius);
  font-family: var(--kl-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.kl-sticky-cta:hover { background: var(--kl-rust); }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .kl-product-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px 16px 40px;
  }
  .kl-gallery { position: static; }
  .kl-product-body { padding: 0 16px 120px; }
  .kl-benefits-grid { grid-template-columns: 1fr; }
  .kl-materials-section { grid-template-columns: 1fr; }
  .kl-upsell-grid { grid-template-columns: 1fr; }
  .kl-ugc-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .kl-ugc-featured { grid-row: span 1; }
  .kl-sticky-atc { padding: 10px 16px; }
  .kl-trust-bar { gap: 14px; font-size: 11px; }
  .kl-breadcrumb { padding: 8px 16px; }
  .kl-section-title { font-size: 26px; }
}

@media (max-width: 480px) {
  .kl-product-title { font-size: 26px; }
  .kl-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .kl-ugc-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .kl-benefits-grid { grid-template-columns: 1fr; }
}

/* === V3 class aliases === */
.kl-trust-bar{background:var(--kl-forest);color:white;display:flex;justify-content:center;gap:28px;padding:9px 20px;font-size:12px;font-weight:500;flex-wrap:wrap;}
.kl-trust-bar span{display:flex;align-items:center;gap:5px;}
.kl-breadcrumb{padding:10px 40px;font-size:12px;color:#999;max-width:1280px;margin:0 auto;}
.kl-breadcrumb a{color:#999;text-decoration:none;}
.kl-product-wrapper,.kl-info{font-family:var(--kl-font-sans);}
.kl-gallery-main,.kl-gallery-thumbs{display:block;}
.kl-badge{position:absolute;top:14px;right:14px;background:var(--kl-gold);color:white;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:2px;}
.kl-thumb{border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--kl-cream);aspect-ratio:1;transition:border-color .2s;}
.kl-thumb.active{border-color:var(--kl-forest);}
.kl-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.kl-rating-row{min-height:22px;margin-bottom:10px;}
.kl-subtitle{font-size:12px;color:var(--kl-sage);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.kl-title{font-family:var(--kl-font-serif);font-size:34px;font-weight:400;line-height:1.15;color:var(--kl-forest);margin-bottom:14px;}
.kl-price-block{display:flex;align-items:baseline;gap:14px;margin-bottom:4px;flex-wrap:wrap;}
.kl-price{font-family:var(--kl-font-serif);font-size:30px;font-weight:500;color:var(--kl-forest);}
.kl-compare{font-size:20px;color:#aaa;font-weight:300;margin-right:4px;}
.kl-price-note{font-size:12px;color:var(--kl-sage);background:var(--kl-cream);padding:3px 8px;border-radius:20px;}
.kl-price-sub{font-size:12px;color:var(--kl-sage);margin-bottom:14px;}
.kl-price-sub strong{color:var(--kl-forest);}
.kl-urgency{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#FFF8F0;border:1px solid #FFE0B2;border-radius:var(--kl-radius);margin-bottom:14px;font-size:12px;font-weight:500;flex-wrap:wrap;}
.kl-dot{width:8px;height:8px;border-radius:50%;background:var(--kl-rust);animation:kl-pulse 1.5s infinite;display:inline-block;}
.kl-option-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kl-forest);margin-bottom:8px;margin-top:12px;}
.kl-swatches{display:flex;gap:8px;margin-bottom:16px;}
.kl-swatch{width:34px;height:34px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color .2s,transform .15s;}
.kl-swatch:hover{transform:scale(1.1);}
.kl-swatch.active{border-color:var(--kl-forest);}
.kl-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.kl-optbtn{padding:8px 16px;border:1.5px solid var(--kl-light-gray);border-radius:var(--kl-radius);background:white;font-family:var(--kl-font-sans);font-size:13px;cursor:pointer;transition:all .2s;}
.kl-optbtn:hover{border-color:var(--kl-forest);}
.kl-optbtn.active{border-color:var(--kl-forest);background:var(--kl-forest);color:white;}
.kl-gift{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--kl-light-gray);border-radius:var(--kl-radius);margin-bottom:14px;font-size:13px;cursor:pointer;}
.kl-cta-primary{width:100%;background:var(--kl-forest);color:white;border:none;padding:15px 32px;font-family:var(--kl-font-sans);font-size:15px;font-weight:600;letter-spacing:.05em;border-radius:var(--kl-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;transition:all .2s;}
.kl-cta-primary:hover{background:#1a2518;transform:translateY(-1px);box-shadow:var(--kl-shadow);}
.kl-cta-primary:disabled{background:#999;cursor:not-allowed;transform:none;}
.kl-cta-secondary{width:100%;background:transparent;color:var(--kl-forest);border:1.5px solid var(--kl-forest);padding:13px 32px;font-family:var(--kl-font-sans);font-size:14px;font-weight:500;border-radius:var(--kl-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;transition:all .2s;}
.kl-cta-secondary:hover{background:var(--kl-cream);}
.kl-cta-note{text-align:center;font-size:12px;color:#999;margin-bottom:14px;}
.kl-payments{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.kl-pay-icon{height:24px;width:auto;opacity:.7;}
.kl-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;padding:14px;background:var(--kl-cream);border-radius:var(--kl-radius);}
.kl-pillar{text-align:center;}
.kl-pillar div{font-size:18px;margin-bottom:3px;}
.kl-pillar span{font-size:11px;font-weight:600;color:var(--kl-forest);display:block;}
.kl-pillar small{font-size:10px;color:var(--kl-sage);}
.kl-certs{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#F0F4EE;border-radius:var(--kl-radius);flex-wrap:wrap;margin-bottom:16px;}
.kl-cert{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--kl-forest);}
.kl-cert-div{width:1px;height:22px;background:#C8D4C0;}
.kl-usps{margin-top:16px;}
.kl-usp{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--kl-light-gray);}
.kl-usp:last-child{border-bottom:none;}
.kl-usp-ic{width:34px;height:34px;background:var(--kl-cream);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.kl-usp strong{display:block;font-size:13px;font-weight:600;color:var(--kl-forest);}
.kl-usp span{font-size:12px;color:#888;}
.kl-body{max-width:1280px;margin:0 auto;padding:0 40px 120px;font-family:var(--kl-font-sans);}
.kl-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:52px;padding:20px;background:var(--kl-forest);border-radius:var(--kl-radius);justify-content:center;}
.kl-pill{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.2);padding:7px 14px;border-radius:20px;font-size:12px;font-weight:500;}
.kl-section{margin-bottom:60px;}
.kl-h2{font-family:var(--kl-font-serif);font-size:34px;font-weight:400;color:var(--kl-forest);text-align:center;margin-bottom:6px;}
.kl-sub{text-align:center;color:var(--kl-sage);font-size:14px;margin-bottom:30px;}
.kl-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.kl-benefit{background:white;border:1px solid var(--kl-light-gray);border-radius:8px;padding:24px 20px;text-align:center;transition:box-shadow .2s,transform .2s;}
.kl-benefit:hover{box-shadow:var(--kl-shadow);transform:translateY(-2px);}
.kl-bic{font-size:30px;margin-bottom:10px;}
.kl-bt{font-family:var(--kl-font-serif);font-size:20px;color:var(--kl-forest);margin-bottom:8px;}
.kl-bd{font-size:13px;color:#666;line-height:1.6;}
.kl-usecases{background:var(--kl-cream);padding:34px;border-radius:8px;margin-bottom:60px;text-align:center;}
.kl-uc-grid{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.kl-uc{background:white;border-radius:8px;padding:14px 18px;font-size:13px;font-weight:500;color:var(--kl-forest);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.kl-mats{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.kl-mat{background:var(--kl-cream);border-radius:8px;padding:28px;text-align:center;}
.kl-matnum{font-family:var(--kl-font-serif);font-size:52px;color:var(--kl-forest);line-height:1;margin-bottom:4px;}
.kl-matname{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--kl-sage);margin-bottom:10px;}
.kl-mat p{font-size:13px;color:#666;line-height:1.7;}
.kl-table{width:100%;border-collapse:collapse;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.kl-table th{background:var(--kl-forest);color:white;padding:13px 16px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.kl-table th:nth-child(2){background:var(--kl-sage);}
.kl-table th:nth-child(3){background:#999;}
.kl-table td{padding:11px 16px;font-size:13px;border-bottom:1px solid var(--kl-light-gray);}
.kl-table tr:nth-child(even) td{background:var(--kl-cream);}
.kl-table tr:last-child td{border-bottom:none;}
.kl-yes{color:var(--kl-green-trust);font-weight:700;}
.kl-no{color:#ccc;}
.kl-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.kl-review{background:white;border:1px solid var(--kl-light-gray);border-radius:8px;padding:18px;}
.kl-rv-top{display:flex;justify-content:space-between;margin-bottom:8px;}
.kl-rv-name{font-weight:600;font-size:14px;color:var(--kl-forest);}
.kl-rv-date{font-size:11px;color:#aaa;}
.kl-rv-stars{color:var(--kl-gold);font-size:13px;}
.kl-rv-badge{font-size:10px;color:var(--kl-green-trust);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;}
.kl-rv-title{font-weight:600;font-size:13px;color:var(--kl-forest);margin-bottom:4px;}
.kl-rv-body{font-size:13px;color:#666;line-height:1.6;}
.kl-guarantee{background:var(--kl-forest);color:white;padding:34px;border-radius:8px;margin-bottom:60px;text-align:center;}
.kl-guarantee h3{font-family:var(--kl-font-serif);font-size:28px;font-weight:400;margin-bottom:8px;}
.kl-guarantee p{opacity:.8;font-size:14px;max-width:520px;margin:0 auto 20px;}
.kl-guar-badges{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:12px;font-weight:500;color:white;}
.kl-faq-item{border-bottom:1px solid var(--kl-light-gray);}
.kl-faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;font-weight:500;font-size:14px;color:var(--kl-forest);}
.kl-faq-tog{font-size:18px;color:var(--kl-sage);}
.kl-faq-a{padding:0 0 14px;font-size:13px;color:#666;line-height:1.7;display:none;}
.kl-upsells{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.kl-up-card{border:1px solid var(--kl-light-gray);border-radius:8px;overflow:hidden;transition:box-shadow .2s;}
.kl-up-card:hover{box-shadow:var(--kl-shadow);}
.kl-up-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.kl-up-info{padding:14px;}
.kl-up-name{font-weight:600;font-size:14px;color:var(--kl-forest);margin-bottom:3px;}
.kl-up-price{font-size:13px;color:var(--kl-sage);margin-bottom:10px;}
.kl-up-btn{display:block;width:100%;text-align:center;background:var(--kl-forest);color:white;padding:9px;border:none;border-radius:4px;font-family:var(--kl-font-sans);font-size:12px;font-weight:600;cursor:pointer;}
.kl-up-btn:hover{background:var(--kl-rust);}
.kl-sticky{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--kl-light-gray);padding:11px 40px;display:flex;align-items:center;justify-content:space-between;z-index:200;box-shadow:0 -4px 20px rgba(0,0,0,.08);font-family:var(--kl-font-sans);transform:translateY(100%);transition:transform .3s;}
.kl-sticky.visible{transform:translateY(0);}
.kl-sticky-left{display:flex;align-items:center;gap:14px;}
.kl-sticky-img{width:48px;height:48px;border-radius:4px;object-fit:cover;}
.kl-sticky-name{font-weight:600;font-size:13px;color:var(--kl-forest);}
.kl-sticky-stars{font-size:11px;color:var(--kl-gold);}
.kl-sticky-btn{background:var(--kl-forest);color:white;border:none;padding:13px 30px;border-radius:var(--kl-radius);font-family:var(--kl-font-sans);font-size:14px;font-weight:600;cursor:pointer;}
.kl-sticky-btn:hover{background:var(--kl-rust);}
/* swatch color variables */
:root{--sw-sand:#C4A882;--sw-toffee:#8B7355;--sw-forest:#4A5240;--sw-linen:#D4C5B0;--sw-moss:#6B7C5A;--sw-cream:#E8DFD0;}
@media(max-width:900px){
  .kl-product-wrapper{grid-template-columns:1fr;gap:24px;padding:16px 16px 40px;}
  .kl-gallery{position:static;}
  .kl-body{padding:0 16px 120px;}
  .kl-benefits,.kl-mats,.kl-reviews,.kl-upsells{grid-template-columns:1fr;}
  .kl-sticky{padding:10px 16px;}
}

/* Woolmark benefit - full width */
.kl-benefit-wide {
  grid-column: 1 / -1;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.kl-benefit-wide .kl-bic { font-size: 30px; flex-shrink: 0; }
.kl-benefit-wide .kl-bt  { margin-bottom: 6px; }

/* Swatch colors for Oh!Possum variants */
:root {
  --sw-beige:    #C8B49A;
  --sw-sand:     #C4A882;
  --sw-hellgrau: #B0B0A8;
  --sw-anthrazit:#2C2C2C;
}

/* ===== BRAND FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Nunito:wght@300;400;500;600&display=swap');
:root{--kl-font-serif:'Instrument Sans',sans-serif;--kl-font-sans:'Nunito',sans-serif;}
.kl-title,.kl-h2,.kl-bt,.kl-matnum{font-family:'Instrument Sans',sans-serif;}
body,.kl-info,.kl-body,.kl-product-wrapper{font-family:'Nunito',sans-serif;}

/* ===== WOOLMARK LOGOS ===== */
.kl-cert-logo{display:flex;align-items:center;}
.kl-cert-img{height:32px;width:auto;object-fit:contain;}
.kl-benefit-woolmark{grid-column:1/-1;display:flex;align-items:flex-start;gap:20px;background:white;border:1px solid var(--kl-light-gray);border-radius:8px;padding:24px 20px;transition:box-shadow .2s,transform .2s;}
.kl-benefit-woolmark:hover{box-shadow:var(--kl-shadow);transform:translateY(-2px);}
.kl-woolmark-logo{height:60px;width:auto;flex-shrink:0;object-fit:contain;}

/* ===== SWATCH COLORS ===== */
:root{--sw-beige:#C8B49A;--sw-sand:#C4A882;--sw-hellgrau:#B0B0A8;--sw-anthrazit:#2C2C2C;}

.kl-cert-img-lg { height: 52px !important; }

/* ===== VIDEO SECTION ===== */
.kl-video-section {
  margin-bottom: 60px;
  background: var(--kl-forest, #2C3528);
  border-radius: 16px;
  overflow: hidden;
}
.kl-video-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 400px;
}
.kl-video-text {
  padding: 48px 48px 48px 52px;
  color: white;
}
.kl-video-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
}
.kl-video-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: white;
  margin-bottom: 16px;
}
.kl-video-desc {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 24px;
}
.kl-adac-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--kl-forest, #2C3528);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 6px;
  transition: all .2s;
}
.kl-adac-btn:hover { background: #F0F4EE; }
.kl-video-wrap {
  position: relative;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
}
.kl-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kl-adac-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--kl-sage, #7A8C6E);
  font-weight: 600;
  text-decoration: underline;
}
.kl-cert-img-lg { height: 56px !important; width: auto; }

@media (max-width: 900px) {
  .kl-video-inner { grid-template-columns: 1fr; }
  .kl-video-text { padding: 32px 20px; }
  .kl-video-wrap { min-height: 280px; }
}

/* ===== ADAC SECTION ===== */
.kl-adac-section {
  margin-bottom: 60px;
  background: var(--kl-cream, #F5F0E8);
  border: 1px solid var(--kl-light-gray, #E8E4DC);
  border-radius: 14px;
  padding: 40px 48px;
}
.kl-adac-inner {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.kl-adac-icon {
  font-size: 40px;
  flex-shrink: 0;
  margin-top: 4px;
}
.kl-adac-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kl-sage, #7A8C6E);
  margin-bottom: 10px;
}
.kl-adac-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--kl-forest, #2C3528);
  margin-bottom: 14px;
  line-height: 1.3;
}
.kl-adac-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 640px;
}
.kl-adac-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--kl-forest, #2C3528);
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 6px;
  transition: all .2s;
}
.kl-adac-btn:hover { background: #1a2518; }

/* ===== VIDEO SECTION ===== */
.kl-video-section {
  margin-bottom: 60px;
  background: var(--kl-forest, #2C3528);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
}
.kl-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 0;
}
.kl-video-player {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
@media (max-width: 900px) {
  .kl-adac-section { padding: 28px 20px; }
  .kl-adac-inner { flex-direction: column; gap: 16px; }
  .kl-video-section { padding: 28px 20px; }
  .kl-videos-grid { grid-template-columns: 1fr; }
}

/* ===== SVG BRAND ICONS ===== */
.kl-svg-icon {
  display: block;
  object-fit: contain;
}
.kl-pillar-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.kl-usp-ic .kl-svg-icon,
.kl-bic .kl-svg-icon {
  margin: 0 auto;
}
.kl-adac-icon .kl-svg-icon {
  flex-shrink: 0;
}
.kl-guar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ===== SVG BRAND ICONS ===== */
.kl-svg-icon{display:block;object-fit:contain;}
.kl-pillar-ic{display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.kl-usp-ic{width:44px;height:44px;background:var(--kl-cream,#F5F0E8);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:5px;}
.kl-bic{width:68px;height:68px;background:var(--kl-cream,#F5F0E8);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;padding:12px;}

/* ===== ADAC SECTION ===== */
.kl-adac-section{margin-bottom:60px;background:var(--kl-cream,#F5F0E8);border:1px solid var(--kl-light-gray,#E8E4DC);border-radius:14px;padding:40px 48px;}
.kl-adac-inner{display:flex;align-items:flex-start;gap:28px;}
.kl-adac-icon{flex-shrink:0;margin-top:4px;}
.kl-adac-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kl-sage,#7A8C6E);margin-bottom:10px;}
.kl-adac-title{font-family:'Instrument Sans',sans-serif;font-size:24px;font-weight:600;color:var(--kl-forest,#2C3528);margin-bottom:14px;line-height:1.3;}
.kl-adac-desc{font-size:14px;color:#666;line-height:1.75;margin-bottom:22px;max-width:640px;}
.kl-adac-btn{display:inline-flex;align-items:center;gap:8px;background:var(--kl-forest,#2C3528);color:white;text-decoration:none;font-size:13px;font-weight:700;padding:11px 22px;border-radius:6px;transition:all .2s;}
.kl-adac-btn:hover{background:#1a2518;}

/* ===== VIDEO SECTION ===== */
.kl-video-section{margin-bottom:60px;background:var(--kl-forest,#2C3528);border-radius:16px;padding:48px;text-align:center;}
.kl-videos-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.kl-video-player{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;display:block;}

@media(max-width:900px){
  .kl-adac-section{padding:28px 20px;}
  .kl-adac-inner{flex-direction:column;gap:16px;}
  .kl-video-section{padding:28px 20px;}
  .kl-videos-grid{grid-template-columns:1fr;}
}

/* ===== GUARANTEE BADGES - centered icon over text ===== */
.kl-guar-badges {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.kl-guar-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 100px;
}
.kl-guar-icon-wrap {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kl-guar-badge-item span {
  font-size: 13px;
  font-weight: 500;
  color: white;
  text-align: center;
}

/* ===== GALLERY FIX ===== */
.kl-gallery { position: sticky; top: 20px; }
.kl-gallery-main {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #F5F0E8;
  aspect-ratio: 4/5;
  max-height: 580px;
  width: 100%;
}
.kl-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kl-gallery-thumbs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #E8E4DC transparent;
  flex-wrap: nowrap;
}
.kl-gallery-thumbs::-webkit-scrollbar { height: 4px; }
.kl-gallery-thumbs::-webkit-scrollbar-thumb { background: #E8E4DC; border-radius: 2px; }
.kl-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.kl-thumb.active { border-color: #2C3528; }
.kl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== IMAGE SWATCHES ===== */
.kl-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color .2s, transform .15s;
  background-size: cover !important;
  background-position: center !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.kl-swatch:hover { transform: scale(1.08); }
.kl-swatch.active {
  border-color: var(--kl-forest, #2C3528);
  outline: 2px solid var(--kl-forest, #2C3528);
  outline-offset: 3px;
}

/* ===== CASHMERE STORY SECTION ===== */
.kl-cashmere-section {
  margin-bottom: 60px;
  background: linear-gradient(135deg, #2C3528 0%, #3d4a38 100%);
  border-radius: 16px;
  overflow: hidden;
  padding: 60px 52px;
}
.kl-cashmere-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.kl-cashmere-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B8944A;
  margin-bottom: 14px;
}
.kl-cashmere-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: white;
  line-height: 1.2;
  margin-bottom: 18px;
}
.kl-cashmere-desc {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  margin-bottom: 32px;
}
.kl-cashmere-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.kl-cashmere-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kl-cashmere-num {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #B8944A;
  line-height: 1;
}
.kl-cashmere-stlabel {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}
.kl-cashmere-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kl-cashmere-bullet {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kl-cashmere-check {
  color: #B8944A;
  font-weight: 700;
  flex-shrink: 0;
}
.kl-cashmere-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}
.kl-cashmere-badge-big {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(184,148,74,.15);
  border: 2px solid rgba(184,148,74,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #B8944A;
  text-align: center;
  padding: 20px;
  line-height: 1.3;
}
.kl-cashmere-visual-sub {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  max-width: 260px;
}

@media (max-width: 900px) {
  .kl-cashmere-section { padding: 36px 20px; }
  .kl-cashmere-inner { grid-template-columns: 1fr; gap: 32px; }
  .kl-cashmere-visual { display: none; }
}

/* ===== COMPARISON TABLE - more padding left column ===== */
.kl-table td:first-child,
.kl-table th:first-child {
  padding-left: 28px;
}


/* ══════════════════════════════
   FIXES: spacing, contrast, edges
   ══════════════════════════════ */

/* 1. Fix gap between gallery thumbs and body content below
   The gallery is sticky - after it ends there's empty space.
   Fix: reduce product wrapper padding + ensure body starts immediately */
.kl-product-wrapper {
  padding-bottom: 0 !important;
  padding-left: 72px !important;
  padding-right: 72px !important;
}

/* 2. Reduce gap: thumbs → Why parents love heading */
.kl-gallery {
  margin-bottom: 0;
}
.kl-gallery-thumbs {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
.kl-body {
  padding-top: 20px !important;
  padding-left: 72px !important;
  padding-right: 72px !important;
}

/* 3. More breathing room on all sides */
.kl-section,
.kl-section-wrap { margin-bottom: 72px !important; }

/* 4. Contrast fixes — cashmere section text over beige bg */
.kl-cashmere-section {
  background: #2C3528 !important; /* restore dark green for contrast */
}
.kl-cashmere-title { color: #FFFFFF !important; }
.kl-cashmere-desc  { color: rgba(255,255,255,.82) !important; }
.kl-cashmere-label { color: #C8B08A !important; }
.kl-cashmere-stlabel { color: rgba(255,255,255,.6) !important; }
.kl-cashmere-bullet { color: rgba(255,255,255,.85) !important; }
.kl-cashmere-num,
.kl-cashmere-check { color: #C8B08A !important; }

/* 5. Video section — restore dark green for contrast */
.kl-video-section { background: #2C3528 !important; }
.kl-video-sub { color: rgba(255,255,255,.8) !important; }

/* 6. Guarantee section contrast */
.kl-guarantee { background: #2C3528 !important; }
.kl-guarantee h2,
.kl-guarantee p { color: white !important; }
.kl-guar-badge span { color: rgba(255,255,255,.85) !important; }

/* 7. Trust bar contrast */
.kl-trust-bar { background: #ADA497 !important; }
.kl-trust-bar span { color: white !important; }

/* 8. ATC button contrast */
.kl-cta-primary {
  background: #2C3528 !important;
  color: white !important;
}
.kl-cta-primary:hover { background: #1a2518 !important; }

/* 9. Sticky button */
.kl-sticky-btn {
  background: #2C3528 !important;
  color: white !important;
}

/* 10. ADAC button */
.kl-adac-btn {
  background: #2C3528 !important;
  color: white !important;
}

/* 11. Table header - more contrast */
.kl-table th:first-child { background: #555 !important; }
.kl-table th:nth-child(2) { background: #ADA497 !important; color: white !important; }

/* 12. Opt label color */
.kl-opt-label { color: #555 !important; }
.kl-opt-label strong { color: #2C2C2C !important; }

/* 13. Section headings */
.kl-h2 { color: #2C2C2C !important; }
.kl-sub { color: #888 !important; }

/* Mobile */
@media (max-width: 900px) {
  .kl-product-wrapper { padding-left: 20px !important; padding-right: 20px !important; }
  .kl-body { padding-left: 20px !important; padding-right: 20px !important; }
}


/* ══ CONTRAST FIX — keep #ADA497 bg, fix text colors ══ */

/* Cashmere section — dark text on beige bg */
.kl-cashmere-section {
  background: #ADA497 !important;
}
.kl-cashmere-title  { color: #1C1C1C !important; }
.kl-cashmere-desc   { color: rgba(0,0,0,.72) !important; }
.kl-cashmere-label  { color: #6B5C3E !important; }
.kl-cashmere-num    { color: #1C1C1C !important; }
.kl-cashmere-stlabel{ color: rgba(0,0,0,.55) !important; }
.kl-cashmere-bullet { color: rgba(0,0,0,.78) !important; }
.kl-cashmere-check  { color: #6B5C3E !important; font-weight:700; }
.kl-cashmere-badge-big {
  border-color: rgba(0,0,0,.2) !important;
  background: rgba(0,0,0,.08) !important;
  color: #1C1C1C !important;
}
.kl-cashmere-visual-sub { color: rgba(0,0,0,.55) !important; }

/* Video section — dark text on beige bg */
.kl-video-section { background: #ADA497 !important; }
.kl-video-sub { color: #1C1C1C !important; font-weight: 600; }
.kl-h2[style*="color:white"] { color: #1C1C1C !important; }

/* Guarantee section — dark text on beige bg */
.kl-guarantee { background: #ADA497 !important; }
.kl-guarantee h2,
.kl-guarantee h3 { color: #1C1C1C !important; }
.kl-guarantee p   { color: rgba(0,0,0,.7) !important; }
.kl-guar-badge span { color: #1C1C1C !important; }
.kl-guar-ic {
  background: rgba(0,0,0,.1) !important;
}
.kl-guar-ic img { filter: none !important; }

/* ATC button — dark on beige needs to stand out */
.kl-cta-primary {
  background: #2C2C2C !important;
  color: white !important;
}
.kl-cta-primary:hover { background: #111 !important; }

/* Sticky btn */
.kl-sticky-btn {
  background: #2C2C2C !important;
  color: white !important;
}

/* ADAC btn */
.kl-adac-btn {
  background: #2C2C2C !important;
  color: white !important;
}

/* Pills on beige bg */
.kl-pills { background: #ADA497 !important; }
.kl-pill  {
  color: #1C1C1C !important;
  border-color: rgba(0,0,0,.25) !important;
  background: rgba(0,0,0,.06) !important;
}

/* Trust bar */
.kl-trust-bar { background: #ADA497 !important; }
.kl-trust-bar span { color: #1C1C1C !important; font-weight: 600; }

/* ══ PILLS + TABLE FIX ══ */

/* Pills — horizontal wrap, visible on beige bg */
.kl-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 20px 24px !important;
  background: #ADA497 !important;
}
.kl-pill {
  display: inline-flex !important;
  width: auto !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #1C1C1C !important;
  background: rgba(0,0,0,.08) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  white-space: nowrap !important;
}

/* Table — remove green from .kl-yes */
.kl-yes {
  color: #2C2C2C !important;
  font-weight: 700 !important;
}
.kl-no {
  color: #BFBAB4 !important;
  font-weight: 400 !important;
}

/* ══ TABLE FIX v3 — force dark text, fix column widths ══ */
.kl-table { table-layout: fixed !important; }
.kl-table th:nth-child(1),
.kl-table td:nth-child(1) { width: 40% !important; }
.kl-table th:nth-child(2),
.kl-table td:nth-child(2) { width: 30% !important; }
.kl-table th:nth-child(3),
.kl-table td:nth-child(3) { width: 15% !important; }
.kl-table th:nth-child(4),
.kl-table td:nth-child(4) { width: 15% !important; }

/* Force dark on .kl-yes regardless of Prestige overrides */
.kl-comparison-table .kl-yes,
.kl-table .kl-yes,
td.kl-yes,
[class*="comparison"] td.kl-yes { 
  color: #2C2C2C !important; 
  font-weight: 700 !important; 
}

/* ══ TABLE SPACING — match merino layout ══ */
.kl-table {
  table-layout: auto !important;
  width: 100% !important;
  min-width: 600px !important;
}
.kl-table th:first-child,
.kl-table td:first-child { 
  padding-left: 28px !important;
  width: 35% !important;
}
/* Wrap table in horizontal scroll on mobile */
.kl-section { overflow-x: auto !important; }

/* ══ RATING ROW ══ */
.kl-rating-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kl-stars { color: #B8944A; font-size:15px; letter-spacing:1px; }
.kl-rating-count { font-size:13px; color:#666; }
.kl-rating-link { font-size:12px; color:#ADA497; font-weight:600; text-decoration:underline; }

/* ══ CROSS-SELL ══ */
.kl-crosssell-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.kl-crosssell-card { text-decoration:none; color:inherit; border:1px solid var(--kl-light-gray, #E8E4DC); display:block; transition:transform .2s, box-shadow .2s; }
.kl-crosssell-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.08); }
.kl-crosssell-img-wrap { aspect-ratio:4/3; overflow:hidden; background:var(--kl-cream, #F5F0E8); }
.kl-crosssell-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.kl-crosssell-info { padding:14px 16px; }
.kl-crosssell-name { font-family:'Instrument Sans',sans-serif; font-size:14px; font-weight:600; color:#2C2C2C; margin-bottom:4px; }
.kl-crosssell-price { font-size:13px; color:#888; }
@media(max-width:900px){ .kl-crosssell-grid { grid-template-columns:1fr; } }

/* ══ SWATCH FIX — clean single ring, no Prestige bleed ══ */
.kl-swatches .kl-swatch {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
  background-size: cover !important;
  background-position: center !important;
  display: inline-block !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.kl-swatches .kl-swatch::before,
.kl-swatches .kl-swatch::after {
  display: none !important;
  content: none !important;
}
.kl-swatches .kl-swatch:hover {
  border-color: #ADA497 !important;
  transform: none !important;
}
.kl-swatches .kl-swatch.active {
  border-color: #2C2C2C !important;
  outline: none !important;
  box-shadow: 0 0 0 3px white, 0 0 0 5px #2C2C2C !important;
}

/* ══ PRESTIGE-NATIVE SWATCH STYLES ══ */
.kl-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.kl-swatches .color-swatch {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  background-image: var(--swatch-background);
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  transition: box-shadow .15s;
}
.kl-swatches .color-swatch.is-selected,
.kl-swatches .color-swatch.active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #2C2C2C;
}
.kl-swatches .color-swatch::before,
.kl-swatches .color-swatch::after { display: none !important; }

/* Hide Prestige's own variant picker label */
.kl-product-wrapper .product__info-container .variant-picker,
.kl-product-wrapper .product__info-container [class*="variant-picker"],
.kl-product-wrapper .product__info-container .block-variant_picker { display: none !important; }

/* ══════════════════════════════════════
   IMAGE DISPLAY FIX — responsive + mobile
   ══════════════════════════════════════ */

/* Images never overflow their container */
.kl-product-wrapper img,
.kl-body img,
.kl-sticky img {
  max-width: 100%;
}

/* Main gallery image: WHOLE photo always visible — no cropping */
.kl-gallery-main { background: var(--kl-cream, #F5F0E8); }
.kl-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Cashmere story image scales with its column */
.kl-cashmere-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 900px) {
  /* CRITICAL: gallery must NOT be sticky on mobile.
     The sticky rule (line ~1187) comes after the mobile media queries
     and was pinning photos/swatch area while the page scrolled. */
  .kl-gallery { position: static !important; }

  /* CRITICAL: 1fr track minimum is min-content — a wide child was
     blowing the column up to ~650px and everything overflowed.
     minmax(0,1fr) locks the column to the viewport width. */
  .kl-product-wrapper { grid-template-columns: minmax(0, 1fr) !important; }
  .kl-gallery, .kl-info { min-width: 0; max-width: 100%; }

  /* No page-level horizontal overflow (layout was shifting sideways) */
  .kl-product-wrapper,
  .kl-body { overflow-x: clip; }

  /* Single column on mobile — earlier media query targets the wrong
     class name (.kl-benefits-grid vs actual .kl-benefits) */
  .kl-benefits { grid-template-columns: 1fr; }
  .kl-reviews { grid-template-columns: 1fr; }

  /* Comparison table scrolls inside its own box instead of
     stretching the whole page */
  .kl-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0 !important; /* overrides the 600px !important above — was pushing the page sideways */
  }
  .kl-table th, .kl-table td { min-width: 110px; }

  /* Gallery: full width, natural 4:5 frame — no desktop height cap
     (the 580px cap distorts crop on narrow screens) */
  .kl-gallery-main {
    aspect-ratio: 4 / 5;
    max-height: none;
    width: 100%;
    border-radius: 8px;
  }
  /* Thumbnails: swipeable row, comfortable touch targets */
  .kl-gallery-thumbs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 8px;
    padding-bottom: 6px;
  }
  .kl-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    scroll-snap-align: start;
  }
  /* Cert / Woolmark logos scale down instead of overflowing */
  .kl-cert-img { height: 44px !important; max-width: 70vw; object-fit: contain; }
  .kl-woolmark-logo { height: 44px; max-width: 60vw; }
  /* Videos: full width, keep vertical format */
  .kl-video-player { width: 100%; }
  /* Sticky bar product image stays compact */
  .kl-sticky-img { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .kl-thumb { flex: 0 0 58px; width: 58px; height: 58px; }
}

/* ══ SOLD-OUT VARIANTS (data-driven from Shopify availability) ══ */
.kl-swatches .kl-swatch--oos {
  opacity: .35;
  cursor: not-allowed !important;
  position: relative !important;
}
.kl-swatches .kl-swatch--oos::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50%; top: 50%;
  width: 120%; height: 2px;
  background: #6f6f6f;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.kl-swatches .kl-swatch--oos:hover {
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.kl-optbtn--oos,
.kl-optbtn:disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.kl-optbtn--oos:hover { border-color: var(--kl-light-gray, #E8E4DC) !important; }
.kl-sticky-btn:disabled { background: #999 !important; cursor: not-allowed; }