/* ============================================================
   PRODUCT DETAIL — "tech pack" direction
   Scoped entirely to body[data-page="catalog-product"]. The rest of the
   site (nav, footer, category grids, home) is untouched by this file.
   Signature: the SKU rendered as a woven garment/pouch tag; specs read
   like an order form / cut sheet rather than an ecommerce price table;
   swatches are physical fabric chips on a swatch card, not color pills.
   ============================================================ */

body[data-page="catalog-product"]{
  /* The whole site now runs this warm kraft-paper neutral palette (see
     style.css :root --alt/--line/--muted) -- these just alias to it so the
     tech-pack card/tag/gallery components stay single-sourced with the
     rest of the site instead of carrying their own copy of the tones. */
  --paper:var(--alt);
  --paper-line:var(--line);
  --paper-dash:#d3c6a4;
  --paper-dot:#bfae83;
  --stamp-ink:var(--ink);
  --thread:var(--g700);
  --tag-bg:var(--g900);
  --tag-eyebrow-c:#a9d0e8;
  --tag-code-c:#eaf4fa;
}

body[data-page="catalog-product"] .catalog-product-copy h1{
  font-family:"Fraunces",Georgia,serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  letter-spacing:-.01em;
  line-height:1.08;
  margin:14px 0 16px;
}

/* ---- breadcrumb ---- */
.breadcrumb-bar{
  background:var(--paper);
  border-bottom:1px solid var(--paper-line);
}
body[data-page="catalog-product"] .breadcrumb-bar .breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  padding:13px 0;color:var(--stamp-ink);
}
.breadcrumb-bar .crumb{display:flex;align-items:center}
.breadcrumb-bar .crumb + .crumb::before{
  content:"/";
  margin:0 9px;color:var(--paper-dot);font-size:.7rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
body[data-page="catalog-product"] .breadcrumb-bar .crumb a{
  color:var(--g700);text-decoration:none;font-size:.82rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.01em;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
body[data-page="catalog-product"] .breadcrumb-bar .crumb a:hover{
  color:var(--thread);border-color:var(--thread);
}
.breadcrumb-bar .crumb.is-current{
  color:var(--stamp-ink);font-size:.82rem;font-weight:600;
  max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- SKU woven tag (signature element) ---- */
.sku-tag{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--tag-bg);color:var(--tag-code-c);
  padding:7px 14px 7px 12px;
  border-radius:3px;
  transform:rotate(-1.4deg);
  margin:2px 0 22px;
  box-shadow:0 1px 0 rgba(0,0,0,.15),0 6px 14px -8px rgba(0,0,0,.5);
  position:relative;
}
.sku-tag::before{
  content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;
  background:var(--paper);border:1px solid rgba(0,0,0,.25);border-radius:50%;
  transform:translateY(-50%);
}
.sku-tag-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tag-eyebrow-c);
}
.sku-tag-code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:600;font-size:.86rem;letter-spacing:.03em;
}

/* ---- tech-pack spec sheet ---- */
.tech-spec{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:6px;
  padding:6px 18px;
  margin:20px 0;
}
.spec-row{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;
  border-bottom:1px dashed var(--paper-dash);
}
.spec-row:last-child{border-bottom:none}
.spec-row dt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.spec-row dd{
  flex:1;margin:0;min-width:8px;align-self:end;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.86rem;color:var(--stamp-ink);text-align:right;
  background-image:radial-gradient(circle,var(--paper-dot) 1px,transparent 1.2px);
  background-position:bottom 5px left;
  background-repeat:repeat-x;
  background-size:6px 1px;
  padding-bottom:6px;
}

/* ---- swatch card ---- */
.swatch-card{
  margin:22px 0;padding:16px 16px 14px;
  border:1px dashed var(--paper-dash);border-radius:8px;
  background:#fff;
}
.swatch-card-title{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.swatch-chip-row{display:flex;flex-wrap:wrap;gap:14px}
.swatch-chip{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;padding:2px;
  font-family:inherit;
}
.swatch-chip-fabric{
  width:34px;height:34px;border-radius:5px;
  background-color:var(--swatch-color,#ccc);
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(25deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);
  border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  transition:transform .15s,box-shadow .15s;
}
.swatch-chip:hover .swatch-chip-fabric{transform:translateY(-2px)}
.swatch-chip.is-active .swatch-chip-fabric{
  box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--thread);
}
.swatch-chip-label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;color:var(--muted);text-align:center;max-width:64px;line-height:1.25;
}
.swatch-chip.is-active .swatch-chip-label{color:var(--stamp-ink);font-weight:600}
.swatch-card-note{
  margin:14px 0 0;font-size:.74rem;color:var(--muted);line-height:1.6;
  border-top:1px dashed var(--paper-dash);padding-top:10px;
}

/* ---- gallery: big hero + single-row scrolling contact strip ---- */
body[data-page="catalog-product"] .product-gallery{
  display:block;
}
body[data-page="catalog-product"] .product-gallery > .gallery-item{
  display:block;width:100%;aspect-ratio:1;border-radius:6px;
  border:1px solid var(--paper-line);overflow:hidden;
}
body[data-page="catalog-product"] .gallery-thumbs{
  display:flex;gap:8px;margin-top:10px;
  overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--paper-dot) transparent;
}
body[data-page="catalog-product"] .gallery-thumbs::-webkit-scrollbar{height:6px}
body[data-page="catalog-product"] .gallery-thumbs::-webkit-scrollbar-thumb{background:var(--paper-dot);border-radius:3px}
body[data-page="catalog-product"] .gallery-thumbs .gallery-item{
  position:relative;flex:0 0 64px;width:64px;height:64px;
  background:#fff;border-radius:5px;border:2px solid transparent;
  overflow:hidden;counter-increment:frame;
}
body[data-page="catalog-product"] .gallery-thumbs{counter-reset:frame}
body[data-page="catalog-product"] .gallery-thumbs .gallery-item::after{
  content:"0" counter(frame);
  position:absolute;bottom:2px;right:3px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.52rem;letter-spacing:.02em;
  color:#fff;background:rgba(18,24,18,.6);
  padding:0 3px;border-radius:2px;
  pointer-events:none;
}
body[data-page="catalog-product"] .gallery-thumbs .gallery-item[aria-current="true"]{
  border-color:var(--thread);
}

/* ---- feature strip / stats band (reuses .feat/.grid g4 from style.css) ---- */
.product-feature-strip{padding:8px 0 48px}
.product-feature-strip .feat{background:var(--paper);border-color:var(--paper-line)}
.product-stats-band{padding:0 0 56px}
.product-stats-band .feat{background:transparent;border:none;padding:10px 12px;text-align:center}
.product-stats-band .feat h3{font-family:"Fraunces",Georgia,serif;font-size:1.7rem;color:var(--thread);margin-bottom:4px}
.product-stats-band .feat p{font-size:.8rem}

/* ---- spec + customization two-column section ---- */
.spec-and-options{width:min(1180px,calc(100% - 40px));margin:0 auto 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.spec-and-options .tech-spec{margin:0}
.customization-panel{background:var(--g800);color:#e7f0e9;border-radius:10px;padding:26px 26px 10px}
.customization-panel .kicker{color:#9fe8bd}
.customization-panel h3{font-family:"Fraunces",Georgia,serif;font-size:1.3rem;margin:8px 0 18px;color:#fff}
.option-item{padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.option-item h4{font-size:.92rem;margin:0 0 5px;color:#fff}
.option-item p{font-size:.82rem;color:#bcd3c2;line-height:1.55;margin:0}
@media(max-width:720px){.spec-and-options{grid-template-columns:1fr}}

/* ---- bottom lifestyle CTA band ---- */
.cta-photo-band{position:relative;border-radius:14px;overflow:hidden;min-height:280px;display:flex;align-items:flex-end}
.cta-photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-photo-band .cta-photo-copy{position:relative;z-index:1;padding:34px 32px;width:100%;
  background:linear-gradient(0deg,rgba(11,46,25,.92),rgba(11,46,25,.35) 65%,transparent)}
.cta-photo-band h2{font-family:"Fraunces",Georgia,serif;color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 8px}
.cta-photo-band p{color:#dcebe0;margin:0 0 18px;max-width:520px}

@media(max-width:720px){
  .sku-tag{transform:none}
  .spec-row{flex-wrap:wrap}
}

/* ---- large variant families: photo grid instead of a wall of colour chips ---- */
.variant-grid-card .variant-tile-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;
}
/* Full-width placement below the main layout: with ~14 tiles per row a
   67-colour family is five rows, so every tile is visible without the nested
   scroll region this needed when it sat in the narrow buy column. */
.variant-picker-wide{padding-top:0;padding-bottom:40px}
.variant-picker-wide .swatch-card{margin:0}
.variant-picker-wide .swatch-card-title{font-size:.72rem}
.variant-picker-wide .swatch-card-note{max-width:70ch}
.variant-tile{
  position:relative;padding:0;border:2px solid transparent;border-radius:6px;
  background:#fff;cursor:pointer;overflow:hidden;aspect-ratio:1;
  transition:border-color .15s,transform .15s;
}
.variant-tile img{width:100%;height:100%;object-fit:cover;display:block}
.variant-tile:hover{transform:translateY(-2px)}
.variant-tile.is-active{border-color:var(--thread)}
.variant-tile-sku{
  position:absolute;left:0;right:0;bottom:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.5rem;
  letter-spacing:.02em;color:#fff;background:rgba(18,24,18,.62);
  padding:1px 0;text-align:center;pointer-events:none;
}
.variant-tile.is-active .variant-tile-sku{background:var(--thread)}