/* ═══════════════════════════════════════════════════════════════════
   KRONBERG — product page layer
   Loaded after css/kronberg-light.css on the five product pages only:
   standard-safe, grand-cabinet, winder-3, winder-6, winder-12.

   kronberg-light.css neutralised the palette site-wide. This file does
   the shape work the product pages still needed, following the Buben &
   Zörweg product pattern:

     · the piece is the page — the gallery gets the width, the panel
       beside it stays a quiet column of facts
     · one weight of emphasis. No gold pills, no green status dots, no
       tinted "selected" chips — selection is a 1px ink border
     · specification reads as a table, not as decoration
     · every dark band is the same ink as the footer, never a blue one
     · the page ends on the rest of the collection, not on a dead end

   Nothing here is page-specific; per-product content stays in the HTML.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════ 1 · hero ══════ */
.ph-section{padding-top:clamp(96px,10vw,132px);padding-bottom:clamp(56px,7vw,96px)}
.product-hero{grid-template-columns:1.25fr .95fr;gap:clamp(32px,4.5vw,72px);padding-top:0}

/* the gallery sits on the page, not in a tinted tray */
.carousel-wrap{background:#f7f7f5;border:1px solid var(--kb-line-2)}
.carousel-btn{
  background:rgba(255,255,255,.9);border-radius:0;width:38px;height:38px;
  box-shadow:none;border:1px solid var(--kb-line-2);color:var(--navy);
}
.carousel-btn:hover{background:#fff;box-shadow:none;transform:translateY(-50%)}
.carousel-dot{background:rgba(18,18,22,.22);border-radius:0;height:2px;width:16px}
.carousel-dot.active{background:var(--navy);width:28px}
.carousel-thumbs{gap:6px;margin-top:6px}
.carousel-thumb{
  width:66px;height:66px;border-radius:0;opacity:1;
  border:1px solid var(--kb-line-2);background:#f7f7f5;
}
.carousel-thumb:hover{opacity:1;border-color:rgba(18,18,22,.28)}
.carousel-thumb.active{border-color:var(--navy)}

/* ══════ 2 · the fact column ══════ */
/* breadcrumb */
.product-hero .sans a{text-decoration:none}

/* the category line was a bordered gold pill; it is an eyebrow now */
.tag{
  background:none;border:0;padding:0;border-radius:0;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft);font-weight:500;
}
.product-hero h1{
  font-size:clamp(30px,3.4vw,46px) !important;
  font-weight:400 !important;letter-spacing:-.02em;line-height:1.04;
  margin-top:12px !important;
}

.price-hero{margin:22px 0 0}
.price-hero-from{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.price-hero-val{
  font-size:clamp(21px,2vw,26px) !important;font-weight:500 !important;
  letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums;
}
.price-hero-to{font-size:12.5px;color:var(--soft);margin-top:4px}
/* the range bar was a gold gradient over a gold track */
.price-range-bar{height:2px;background:rgba(18,18,22,.10);border-radius:0}
.price-range-fill{background:var(--navy);border-radius:0}
.price-range-labels span:last-child{font-weight:500;color:var(--navy)}

/* size / format selector — selection is a border, not a wash */
.sz-inline{gap:6px;margin-bottom:18px}
.sz-inline-btn{
  border:1px solid var(--kb-line-2);border-radius:0;padding:11px 16px;
  transition:border-color .25s var(--kb-ease);
}
.sz-inline-btn:hover{border-color:rgba(18,18,22,.32)}
.sz-inline-btn.active{border-color:var(--navy);background:transparent}
.sib-cm{font-size:15px;font-weight:500;letter-spacing:-.01em}
.sib-name{font-size:9px;letter-spacing:.16em;color:var(--soft);margin-top:3px}
.sib-price{font-size:10.5px;color:var(--soft);margin-top:2px;font-variant-numeric:tabular-nums}

/* specification: a table, generously spaced, tabular figures.
   A grid child defaults to min-width:auto, so one long value used to push
   the whole fact column past the viewport on a phone. */
.product-hero > *{min-width:0}
.spec{padding:11px 0;border-bottom:1px solid var(--kb-line-2);gap:16px}
.spec-k{font-size:10.5px;letter-spacing:.14em;color:var(--soft);flex:0 0 auto;max-width:46%}
.spec-v{font-size:12.5px;font-weight:400;color:var(--navy);text-align:right;
  font-variant-numeric:tabular-nums;min-width:0;flex:1;overflow-wrap:anywhere}

/* the chip row was five grey pills competing with the spec table */
.chip{
  background:none;border:1px solid var(--kb-line-2);border-radius:0;
  padding:5px 11px;margin:0;font-size:10px;letter-spacing:.06em;color:var(--soft);
}

/* availability: the pulsing green dot was the only colour on the page */
.live-dot{background:var(--navy);animation:none;width:5px;height:5px}
.order-status{font-size:11.5px;margin-top:16px}

.btn-row{gap:8px}

/* ══════ 3 · feature sections ══════
   The winder pages define .feat-split-* in a page-level <style> that is
   parsed after this file, so these are scoped one level deeper to win. */
.feat-split .feat-split-label{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);
  margin-bottom:14px;
}
.feat-split .feat-split-h{
  font-size:clamp(21px,2.4vw,30px);font-weight:400;letter-spacing:-.015em;
  line-height:1.14;margin-bottom:20px;text-wrap:balance;
}
.feat-split .feat-split-h em{font-style:italic}
.feat-split .feat-bullets li{font-size:13.5px;line-height:1.75;color:var(--muted)}
.feat-split .feat-bullets li::before{color:var(--soft)}
.feat-split .feat-split-body{padding:clamp(36px,5vw,64px) clamp(24px,4vw,60px)}

/* ══════ 4 · dark bands ══════
   .reel-section and its cards were a cool navy while the footer is ink;
   two dark families on one page read as an accident. One ink. */
.reel-section{background:#0e0e10;border-top:none;padding:clamp(60px,8vw,92px) 0}
.reel-card{background:#141416;border-radius:0}
.reel-caption{
  background:linear-gradient(transparent,rgba(0,0,0,.66));
  font-size:9.5px;letter-spacing:.2em;color:rgba(255,255,255,.62);
}
.reel-card:hover .reel-caption{color:#fff}
.reel-header h2{font-weight:400;letter-spacing:-.015em}

/* the comparison table marked the selected column with a warm gold wash */
.sz-col-active-bg{background:rgba(18,18,22,.035) !important}

/* ══════ 5 · FAQ ══════ */
.faq-list,.faq-item{border-color:var(--kb-line-2)}
.faq-item summary{font-size:15.5px;font-weight:400;padding:20px 0;letter-spacing:-.005em}
.faq-item summary::after{color:var(--soft);font-weight:300}
.faq-item[open]>summary::after{color:var(--navy)}
.faq-body{font-size:13px;line-height:1.8}
.faq-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ══════ 6 · more from the collection ══════
   Reuses the .kc-prod row from the overlay menu (css/style.css) so the
   piece is shown the same way wherever it is offered. */
.kc-more{padding:clamp(56px,7vw,92px) 0;border-top:1px solid var(--kb-line-2)}
.kc-more-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(20px,2.5vw,32px);
}
.kc-more-title{font-size:clamp(19px,2vw,26px);font-weight:400;letter-spacing:-.015em}
.kc-more-link{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
  display:inline-flex;align-items:center;gap:9px;transition:color .2s;
}
.kc-more-link:hover{color:var(--navy)}
.kc-more-link svg{width:13px;height:13px}
.kc-more-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,3vw,48px);
}
/* the row itself is the .kc-prod component; only the density changes here */
.kc-more-grid .kc-prod{
  padding:16px 0;border-top:1px solid var(--kb-line-2);gap:18px;
}
.kc-more-grid .kc-prod:hover{padding-left:8px}
.kc-more-grid .kc-prod-fig{width:76px;height:76px}
.kc-more-grid .kc-prod-name{font-size:15.5px}

@media(max-width:900px){
  .product-hero{grid-template-columns:1fr}
  .kc-more-grid{grid-template-columns:1fr;gap:0}
}
@media(max-width:600px){
  .carousel-thumb{width:56px;height:56px}
  .kc-more-grid .kc-prod-fig{width:64px;height:64px}
  /* two 40px-padded buttons never fit side by side on a phone */
  .btn-row > .btn{flex:1 1 100%;justify-content:center;text-align:center}
}