/* ============================================================
   Products + SKU pages — supplementary tokens & components
   Loaded after site.css
   ============================================================ */

/* Sub-hero (smaller than home hero, used on inner pages) */
.subhero { background: var(--forest); color: var(--paper); padding-block: clamp(72px, 9vw, 120px) clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.subhero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(201,169,97,0.18) 0%, transparent 65%); pointer-events: none; }
.subhero .breadcrumb { display: inline-flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242,240,233,0.55); margin-bottom: 28px; }
.subhero .breadcrumb a { color: var(--foil); }
.subhero .breadcrumb .sep { opacity: 0.5; }
.subhero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.015em; max-width: 18ch; margin: 0 0 20px; }
.subhero .desc { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: rgba(242,240,233,0.78); max-width: 60ch; margin: 0; }
.subhero .tagrow { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.subhero .tag { padding: 6px 12px; border: 1px solid rgba(201,169,97,0.4); color: var(--foil); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.subhero .tag.star { background: var(--foil); color: var(--forest); border-color: var(--foil); }

/* Family block (Products index) */
.family { padding-block: clamp(72px, 8vw, 112px); border-top: 1px solid var(--border-1); }
.family:first-of-type { border-top: none; }
.family-head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 4vw, 80px); margin-bottom: 48px; align-items: end; }
.family-head .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--foil-text); text-transform: uppercase; }
.family-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.01em; margin: 8px 0 0; }
.family-head p { font-size: 15px; line-height: 1.65; color: var(--fg-2); margin: 0; max-width: 56ch; }

.sku-table { width: 100%; border-collapse: collapse; }
.sku-table tr { border-bottom: 1px solid var(--border-1); }
.sku-table tr:first-child { border-top: 1px solid var(--border-1); }
.sku-table td { padding: 22px 16px; vertical-align: top; }
.sku-table tr:hover { background: var(--paper-soft); }
.sku-table tr.featured { background: rgba(201,169,97,0.06); }
.sku-table tr.featured:hover { background: rgba(201,169,97,0.10); }
.sku-table td.code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--foil-text); text-transform: uppercase; white-space: nowrap; width: 110px; }
.sku-table td.name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.005em; }
.sku-table td.name .star { color: var(--foil-text); margin-right: 6px; }
.sku-table td.spec { font-size: 13px; color: var(--fg-2); line-height: 1.55; }
.sku-table td.arrow { width: 40px; text-align: right; color: var(--forest); font-family: var(--font-display); font-size: 18px; }
.sku-table td.swatches { width: 160px; }

/* SKU detail spec blocks */
.spec-section { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--border-1); }
.spec-section:first-of-type { border-top: none; }
.spec-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 4vw, 80px); align-items: start; }
.spec-grid .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--foil-text); text-transform: uppercase; }
.spec-grid h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; margin: 8px 0 0; letter-spacing: -0.005em; }
.spec-grid .body { font-size: 15px; line-height: 1.65; color: var(--fg-1); }
.spec-grid .body p { margin: 0 0 14px; }
.spec-grid .body p:last-child { margin-bottom: 0; }

.bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.bullets li { padding-left: 22px; position: relative; font-size: 15px; line-height: 1.55; color: var(--fg-1); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--foil); }

.kv { display: grid; grid-template-columns: 180px 1fr; gap: 0; }
.kv .row { display: contents; }
.kv .k { padding: 14px 0; border-top: 1px solid var(--border-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.kv .v { padding: 14px 0; border-top: 1px solid var(--border-1); font-size: 14px; color: var(--fg-1); }
.kv .row:last-child .k, .kv .row:last-child .v { border-bottom: 1px solid var(--border-1); }

/* ============================================================
   Foil swatches — realistic metallic chip system
   Drive each chip with three CSS custom properties:
     --c-edge   (darkest, top-left & bottom-right corners)
     --c-mid    (mid body tone)
     --c-shine  (brightest, the sheen)
   ============================================================ */
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.swatch-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.swatch-grid.cols-8 { grid-template-columns: repeat(8, 1fr); }

.sw { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 0; }
.sw .chip {
  width: 100%; aspect-ratio: 1/1; position: relative; overflow: hidden;
  background:
    /* core body */
    linear-gradient(135deg,
      var(--c-edge) 0%,
      var(--c-mid) 28%,
      var(--c-shine) 50%,
      var(--c-mid) 72%,
      var(--c-edge) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    inset 0 -10px 20px rgba(0,0,0,0.14),
    inset 0 10px 20px rgba(255,255,255,0.10);
  transition: transform 280ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 280ms;
}
.sw .chip::before {
  /* swept sheen band */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg,
    transparent 30%,
    rgba(255,255,255,0.10) 44%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.10) 56%,
    transparent 72%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sw .chip::after {
  /* deep corner shadow / grain */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 15% 18%, rgba(255,255,255,0.16), transparent 45%),
    radial-gradient(120% 80% at 88% 92%, rgba(0,0,0,0.18), transparent 50%);
  pointer-events: none;
}
.sw:hover .chip {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.18),
    inset 0 -12px 22px rgba(0,0,0,0.18),
    inset 0 12px 22px rgba(255,255,255,0.14),
    0 8px 22px rgba(20,39,31,0.18);
}

/* Holographic variant — multi-hue rainbow body */
.sw.holo .chip {
  background:
    linear-gradient(115deg,
      #FFB3D9 0%, #FFDBA0 14%, #E5F8A0 28%, #A0F2D5 42%,
      #9EDDFF 56%, #BFB4FF 70%, #FFB3F0 84%, #FFDBA0 100%);
}
.sw.holo .chip::before {
  background: linear-gradient(118deg,
    rgba(255,255,255,0.0) 30%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.0) 70%);
  mix-blend-mode: screen;
}

/* Pigment variant — opaque, no sheen, flat solid */
.sw.pigment .chip {
  background: var(--c-mid);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    inset 0 -4px 10px rgba(0,0,0,0.08);
}
.sw.pigment .chip::before { display: none; }
.sw.pigment .chip::after {
  background: radial-gradient(120% 80% at 18% 22%, rgba(255,255,255,0.06), transparent 50%);
}

.sw .code { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--foil-text); margin-top: 12px; }
.sw .nm { display: block; font-size: 12px; color: var(--fg-1); margin-top: 4px; line-height: 1.35; }
.sw .pantone { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--fg-2); margin-top: 2px; text-transform: uppercase; }

/* Inline swatch strip — small preview row used on products index + tiles */
.swatch-strip { display: flex; gap: 4px; align-items: center; }
.swatch-strip .dot {
  width: 14px; height: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c-edge) 0%, var(--c-mid) 50%, var(--c-shine) 75%, var(--c-mid) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), inset 0 -2px 4px rgba(0,0,0,0.18);
}
.swatch-strip .dot.holo {
  background: linear-gradient(115deg, #FFB3D9, #FFDBA0, #E5F8A0, #A0F2D5, #9EDDFF, #BFB4FF);
}
.swatch-strip .more {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-2); margin-left: 6px; text-transform: uppercase;
}

/* Product photo / image-slot styling for SKU pages */
.product-hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end;
}
.product-photo-stack { display: grid; grid-template-rows: 1fr auto; gap: 12px; }
.product-photo-stack image-slot { width: 100%; height: 100%; }
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photo-strip image-slot { width: 100%; aspect-ratio: 1/1; }

/* Editorial banner — full bleed material moment between sections */
.material-banner { padding: 0; border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
.material-banner image-slot { width: 100%; height: clamp(280px, 38vw, 480px); }

/* In-page foil shade index strip (used at top of swatch section) */
.shade-meta { display: flex; gap: 32px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); margin-bottom: 32px; }
.shade-meta .item { display: flex; flex-direction: column; gap: 4px; }
.shade-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); }
.shade-meta .v { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--forest); }

/* Related */
.related { background: var(--forest); color: var(--paper); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(201,169,97,0.18); border: 1px solid rgba(201,169,97,0.18); margin-top: 32px; }
.related-card { background: var(--forest); padding: 28px 24px; transition: background 240ms; cursor: pointer; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 220px; }
.related-card:hover { background: var(--forest-deep); }
.related-card .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--foil); }
.related-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0; color: var(--paper); }
.related-card .s { font-size: 13px; color: rgba(242,240,233,0.7); line-height: 1.55; }

@media (max-width: 960px) {
  .family-head, .spec-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 130px 1fr; }
  .swatch-grid, .swatch-grid.cols-8 { grid-template-columns: repeat(3, 1fr); }
  .product-hero-grid { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: 1fr; }
  .sku-table td.spec { display: none; }
  .sku-table td.swatches { display: none; }
}