/*
Theme Name: COLORS
Theme URI: 
Author: 
Author URI: 
Description: Standalone custom theme for the COLORS WooCommerce site. Not a child theme — built independently with no parent, per the architecture discussion: everything here is hand-built (header, footer, homepage), and WooCommerce's public functions/hooks are called directly rather than through a page-builder abstraction. See the comments in functions.php and front-page.php for how this maps back to the original design mockup.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: colors
*/

/* ==========================================================
   SELF-HOSTED FONTS
   Source: Google Fonts' own open-source repo (github.com/google/fonts),
   converted from the original OFL-licensed TTF files to WOFF2.
   Barlow, Barlow Condensed, IBM Plex Mono: static weights.
   Source Serif 4: a single variable file covering the opsz+wght
   range, same as the "opsz,wght@8..60" axis used in the original
   Google Fonts CDN URL during the design/mockup phase.
   ========================================================== */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Barlow-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Barlow-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Barlow-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Barlow-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

/* Variable font: one file, weight 400-600 and optical size 8-60 are both
   continuously adjustable via CSS (font-weight, font-optical-sizing:auto). */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/SourceSerif4-Variable.woff2') format('woff2-variations');
  font-optical-sizing: auto;
}

/* ==========================================================
   DESIGN TOKENS
   Ported directly from the approved homepage mockup — colors,
   font stacks, and the content wrap width. Full component styles
   (header, hero, product sections, etc.) get added in Phase 3
   when the mockup's markup/CSS is ported into front-page.php.
   Keeping tokens here in style.css means every template file
   built from this point on shares one source of truth for them.
   ========================================================== */
:root{
  --paper:#FFFFFF;
  --paper-tint:#F7F6F3;
  --ink:#14140F;
  --ink-soft:#55534C;
  --line:#E4E2DC;

  --rust:#CC4E00;
  --rust-tint:#FBEDE3;
  --rust-line:#EBC7AE;

  --blue:#0063A7;
  --blue-tint:#E6F0F7;
  --blue-line:#B9D6E9;

  --display: 'Barlow', sans-serif;
  --condensed: 'Barlow Condensed', sans-serif;
  --body: 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', monospace;

  --wrap: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
a{ color:inherit; }

/* ==========================================================
   COMPONENT STYLES
   Ported directly from the approved homepage mockup (Phase 3).
   ========================================================== */
  /* ---------- utility type ---------- */
  .eyebrow{
    font-family:var(--condensed);
    font-weight:600;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .mono-label{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .placeholder{
    color:#9B968A;
    font-style:italic;
  }
  .placeholder-box{
    border:1px dashed #C9C5BA;
    background:repeating-linear-gradient(135deg, #FAFAF8, #FAFAF8 10px, #F2F1EC 10px, #F2F1EC 20px);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#8C8878;
    font-family:var(--condensed);
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }

  /* ---------- header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s ease;
  }
  header.scrolled{ box-shadow:0 4px 16px rgba(20,20,15,0.05); }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
  }
  .mark{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .mark svg{ display:block; }
  .wordmark{
    font-family:var(--display);
    font-weight:500;
    font-size:39px;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .wm-rust{ color:var(--rust); }
  .wm-blue{ color:var(--blue); }
  nav{ display:flex; align-items:center; gap:36px; }
  nav a{
    font-family:var(--condensed);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.03em;
    text-decoration:none;
    color:var(--ink);
    position:relative;
    padding:4px 0;
  }
  nav a.rust-hover:hover{ color:var(--rust); }
  nav a.blue-hover:hover{ color:var(--blue); }

  .cart-btn{
    display:flex;
    align-items:center;
    gap:8px;
    background:none;
    border:1px solid var(--ink);
    border-radius:999px;
    padding:8px 16px 8px 14px;
    cursor:pointer;
    font-family:var(--condensed);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.03em;
    color:var(--ink);
    transition:background .2s ease, color .2s ease;
  }
  .cart-btn:hover{ background:var(--ink); color:var(--paper); }
  .cart-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:999px;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--mono);
    font-size:11px;
    transition:background .2s ease, color .2s ease;
  }
  .cart-btn:hover .cart-count{ background:var(--paper); color:var(--ink); }

  /* ---------- hero ---------- */
  /* Signature device: a phyllotaxis point-cluster (the botanical growth
     pattern behind sunflower seeds, pinecones, etc.) grows and rotates
     until the points tile into one solid, precise circle. Distant organic
     origin, resolved into something engineered. Runs once on load, never
     loops, and both colors use the identical pattern/size/timing —
     no hierarchy between SKUs. */
  .hero{
    position:relative;
    padding:90px 0 100px;
    min-height:480px;
    overflow:hidden;
  }
  /* hero-shapes and hero-inner both live inside this wrap now, so on wide
     screens the shapes sit relative to the same centered 1180px content
     box as the text — not the full browser width, which is what was
     leaving a large gap between the text and the shapes on desktop. */
  .hero-content{ position:relative; }
  .hero-shapes{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .phyllo-wrap{
    position:absolute;
    width:190px;
    height:190px;
  }
  /* proximal pair, both fully inside the visible hero area, clear of the header */
  .phyllo-wrap.pos-blue{ right:6%; top:110px; }
  .phyllo-wrap.pos-rust{ right:calc(6% + 218px); top:77px; }
  .phyllo-wrap svg{ width:100%; height:100%; overflow:visible; }
  /* clickable shortcut to jump to the section — enabled on mobile only,
     via the media query below. On desktop the shapes stay decorative,
     since the equivalent text CTA sits right there already. */
  .phyllo-link{ display:block; width:100%; height:100%; pointer-events:none; }

  /* 64 dots, paired 1:1: each starts at its phyllotaxis position (small,
     visibly separate) and ends at a position in an exact hex-packed circle
     (full size, touching neighbors — a genuinely gapless tiling, not an
     approximation). Every dot shares the identical animation delay,
     duration and easing — only the per-dot start/end coordinates differ,
     via --dx1/--dy1. That's what keeps 64 elements moving as one smooth
     gesture instead of the earlier staggered, choppy version. The whole
     group also rotates continuously underneath it all, and a true solid
     circle fades in at the very end as final polish/precision. */
  .phyllo-group{ transform-origin:100px 100px; }
  .phyllo-dot{
    transform-box:fill-box;
    transform-origin:center;
    transform:translate(0,0) scale(0.4706);
  }
  .pos-blue .phyllo-dot{ fill:var(--blue); }
  .pos-rust .phyllo-dot{ fill:var(--rust); }
  .pos-blue .phyllo-final{ fill:var(--blue); }
  .pos-rust .phyllo-final{ fill:var(--rust); }
  .phyllo-final{ opacity:0; }

  .hero-shapes.run .phyllo-group{
    animation:dot-rotate 7.4s linear both;
  }
  .hero-shapes.run .phyllo-dot{
    animation:
      dot-morph 2.2s cubic-bezier(.3,.7,.3,1) 2s both,
      dot-fade 3.2s ease 4.2s both;
  }
  .hero-shapes.run .phyllo-final{
    animation:final-reveal 3.2s ease 4.2s both;
  }
  @keyframes dot-rotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(100deg); }
  }
  @keyframes dot-morph{
    from{ transform:translate(0,0) scale(0.4706); }
    to{ transform:translate(var(--dx1), var(--dy1)) scale(1); }
  }
  @keyframes dot-fade{
    from{ opacity:1; }
    to{ opacity:0; }
  }
  @keyframes final-reveal{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .phyllo-group{ display:none; }
    .phyllo-final{ opacity:1 !important; animation:none !important; }
  }


  .hero-inner{ position:relative; max-width:540px; }
  .hero h1{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(30px, 3.6vw, 44px);
    line-height:1.18;
    letter-spacing:-0.01em;
    margin:16px 0 22px;
    max-width:460px;
  }
  .hero p.lede{
    font-family:var(--body);
    font-size:17.5px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:440px;
  }
  .hero-links{
    display:flex;
    gap:32px;
    margin-top:38px;
    flex-wrap:wrap;
  }
  .text-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--condensed);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.04em;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid var(--ink);
    padding-bottom:3px;
    transition:color .2s ease, border-color .2s ease;
  }
  .text-link .arrow{ transition:transform .2s ease; display:inline-block; }
  .text-link:hover .arrow{ transform:translateX(3px); }
  .text-link.rust-hover:hover{ color:var(--rust); border-color:var(--rust); }
  .text-link.blue-hover:hover{ color:var(--blue); border-color:var(--blue); }

  @media (max-width: 860px){
    .hero{ padding:80px 0 40px; min-height:auto; }
    /* both shapes stay equal-weight on mobile too — pulled out of the
       desktop "bleed off the edge" composition and left-aligned to match
       the text column, in the same order as their CTAs above (rust/
       Product One first, blue/Product Two second) */
    .hero-inner{ padding-bottom:150px; }
    .phyllo-wrap.pos-rust,
    .phyllo-wrap.pos-blue{
      width:110px;
      height:110px;
      top:auto;
      bottom:16px;
      right:auto;
    }
    .phyllo-wrap.pos-rust{ left:24px; }
    .phyllo-wrap.pos-blue{ left:150px; }
    .phyllo-link{ pointer-events:auto; }
  }

  /* ---------- product sections ---------- */
  .product{
    padding:100px 0;
    border-top:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  /* the divider right after the hero specifically — a touch more visible
     than the lighter hairline used between the two product sections */
  #product-one{
    border-top:1px solid #C9C5BA;
  }
  .product-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:center;
    position:relative;
  }
  .product.reverse .product-inner{ direction:rtl; }
  .product.reverse .product-inner > *{ direction:ltr; }

  .product-media-col{
    position:relative;
    z-index:1;
  }
  .product-media{
    position:relative;
    aspect-ratio:4/5;
    border-radius:2px;
  }
  .product-copy{
    position:relative;
    z-index:1;
  }
  .product-media .placeholder-box{
    width:100%; height:100%;
    border-radius:2px;
  }
  .product-media .product-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:2px;
    display:block;
  }
  /* This whole block is conditional — only renders if the product's
     gallery images (plus the featured image) total more than one. A
     single-image product shows just .product-media with no thumb strip
     at all; nothing else changes. See colors_get_product_image_ids()
     in front-page.php. */
  .gallery-thumbs{
    display:flex;
    gap:10px;
    margin-top:12px;
  }
  .thumb{
    width:56px;
    height:56px;
    flex-shrink:0;
    border:1.5px solid #C9C5BA;
    border-radius:2px;
    background:repeating-linear-gradient(135deg, #FAFAF8, #FAFAF8 8px, #F2F1EC 8px, #F2F1EC 16px);
    cursor:pointer;
    padding:0;
    font-family:var(--mono);
    font-size:11px;
    color:#8C8878;
    transition:border-color .15s ease;
  }
  .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .thumb:hover{ border-color:var(--ink-soft); }
  .product.rust .thumb.active{ border-color:var(--rust); border-width:2px; }
  .product.blue .thumb.active{ border-color:var(--blue); border-width:2px; }
  /* sized to span most of the section, bleeding off the edges (the section
     already clips via overflow:hidden) rather than staying fully contained.
     Product one shifted right, product two shifted left — mirrored. */
  .ring-mark-wrap{
    position:absolute;
    top:50%;
    width:69%;
    aspect-ratio:1;
    transform:translateY(-50%);
    z-index:0;
    pointer-events:none;
    opacity:0.075;
  }
  .ring-mark-wrap svg{ width:100%; height:100%; display:block; }
  .product:not(.reverse) .ring-mark-wrap{ left:31%; }
  .product.reverse .ring-mark-wrap{ right:31%; }

  .sku-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
  }
  .sku-dot{ width:8px; height:8px; border-radius:50%; }
  .product.rust .sku-dot{ background:var(--rust); }
  .product.blue .sku-dot{ background:var(--blue); }
  .product.rust .eyebrow{ color:var(--rust); }
  .product.blue .eyebrow{ color:var(--blue); }

  .product h2{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(30px, 3.4vw, 42px);
    letter-spacing:-0.01em;
    margin-bottom:14px;
  }
  .product.rust h2{ color:var(--rust); }
  .product.blue h2{ color:var(--blue); }

  .product .desc{
    font-family:var(--body);
    font-size:16.5px;
    line-height:1.7;
    color:var(--ink-soft);
    max-width:460px;
    margin-bottom:28px;
  }

  /* dosage / potency readout strip */
  .readout{
    display:flex;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    margin-bottom:28px;
    max-width:460px;
  }
  .readout-cell{
    flex:1;
    padding:12px 16px;
    border-right:1px solid var(--line);
  }
  .readout-cell:last-child{ border-right:none; }
  .readout-cell .k{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line);
    padding-bottom:4px;
    margin-bottom:7px;
  }
  .readout-cell .v{
    display:block;
    font-family:var(--mono);
    font-size:14px;
    color:var(--ink);
  }

  .stock-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-soft);
    margin-bottom:22px;
  }
  .stock-dot{ width:7px; height:7px; border-radius:50%; background:#3E7D3E; }
  /* in-stock uses the default green dot above; these two override it */
  .stock-badge.stock-backorder .stock-dot{ background:#B8860B; }
  .stock-badge.stock-out-of-stock .stock-dot{ background:var(--rust); }
  .stock-badge.stock-out-of-stock{ color:var(--rust); }

  .price-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:22px;
  }
  .price{
    font-family:var(--display);
    font-weight:600;
    font-size:26px;
  }
  .price-note{
    font-family:var(--condensed);
    font-size:13px;
    color:var(--ink-soft);
  }

  .qty-add{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:34px;
    flex-wrap:wrap;
  }
  .qty-stepper{
    display:flex;
    align-items:center;
    border:1px solid var(--ink);
    border-radius:999px;
    overflow:hidden;
  }
  .qty-stepper button{
    background:none;
    border:none;
    width:36px;
    height:40px;
    font-family:var(--mono);
    font-size:15px;
    cursor:pointer;
    color:var(--ink);
  }
  .qty-stepper button:hover{ background:var(--paper-tint); }
  .qty-stepper .qty-val{
    width:32px;
    text-align:center;
    font-family:var(--mono);
    font-size:14px;
  }

  .add-btn{
    font-family:var(--condensed);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#fff;
    border:none;
    border-radius:999px;
    padding:13px 30px;
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
  }
  .add-btn:hover{ transform:translateY(-1px); opacity:0.92; }
  .add-btn:active{ transform:translateY(0); }
  .product.rust .add-btn{ background:var(--rust); }
  .product.blue .add-btn{ background:var(--blue); }
  .add-btn.disabled,
  .add-btn:disabled{
    background:var(--ink-soft) !important;
    opacity:0.5;
    cursor:not-allowed;
    transform:none !important;
  }
  .add-btn.disabled:hover,
  .add-btn:disabled:hover{ transform:none; opacity:0.5; }
  /* WooCommerce injects its own "View cart" link next to the button after
     a successful AJAX add by default — suppressed here since our own
     cart drawer (opened via the 'added_to_cart' event, see the script
     below) already provides that nudge/navigation, more consistent with
     the rest of this design than WC's default inline text link. */
  a.added_to_cart.wc-forward{ display:none !important; }
  /* WC also toggles a "loading" class on the button during the AJAX
     request itself — a quiet visual cue rather than a full spinner,
     consistent with the restrained motion language used elsewhere. */
  .add-btn.loading{ opacity:0.6; pointer-events:none; }

  /* accordions */
  .accordions{ max-width:460px; border-top:1px solid var(--line); }
  .accordions details{
    border-bottom:1px solid var(--line);
  }
  .accordions summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 2px;
    cursor:pointer;
    font-family:var(--condensed);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.02em;
  }
  .accordions summary::-webkit-details-marker{ display:none; }
  .accordions summary::after{
    content:'+';
    font-family:var(--mono);
    font-size:16px;
    color:var(--ink-soft);
    transition:transform .2s ease;
  }
  .accordions details[open] summary::after{ content:'–'; }
  .accordions .panel{
    padding:0 2px 18px;
    font-family:var(--body);
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.65;
  }
  .accordions .panel strong{ color:var(--ink); font-weight:600; }
  .accordions .panel p{ margin-bottom:16px; }
  .accordions .panel p:last-child{ margin-bottom:0; }

  /* dropper reference scale — reuses the readout strip's bordered-row
     language for visual consistency with the Size/Weight/Format block */
  .dropper-scale{
    display:flex;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .dropper-cell{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:14px 6px 12px;
    border-right:1px solid var(--line);
  }
  .dropper-cell:last-child{ border-right:none; }
  .dropper-icons{
    display:flex;
    align-items:flex-end;
    gap:5px;
    height:66px;
  }
  .dropper-icon{ width:18px; height:68px; }
  .dropper-fill{ fill:currentColor; opacity:0.35; }
  .product.rust .dropper-scale{ color:var(--rust); }
  .product.blue .dropper-scale{ color:var(--blue); }
  .dropper-label{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-soft);
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    background:var(--paper-tint);
    padding:56px 0 40px;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;
  }
  .footer-links{ display:flex; gap:28px; }
  .footer-links a{
    font-family:var(--condensed);
    font-weight:600;
    font-size:13.5px;
    letter-spacing:0.03em;
    text-decoration:none;
    color:var(--ink-soft);
  }
  .footer-links a:hover{ color:var(--ink); }
  .disclaimer{
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-family:var(--mono);
    font-size:11px;
    line-height:1.7;
    color:var(--ink-soft);
    max-width:720px;
  }
  .copyright{
    margin-top:18px;
    font-family:var(--mono);
    font-size:11px;
    color:#9B968A;
  }

  /* ---------- mini cart drawer ---------- */
  .backdrop{
    position:fixed; inset:0;
    background:rgba(20,20,15,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:90;
  }
  .backdrop.open{ opacity:1; pointer-events:auto; }

  .drawer{
    position:fixed;
    top:0; right:0;
    height:100%;
    width:min(380px, 92vw);
    background:var(--paper);
    z-index:100;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex;
    flex-direction:column;
    box-shadow:-8px 0 24px rgba(20,20,15,0.08);
  }
  .drawer.open{ transform:translateX(0); }
  .drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 24px;
    border-bottom:1px solid var(--line);
  }
  .drawer-head .eyebrow{ margin:0; }
  .drawer-close{
    background:none; border:none; cursor:pointer;
    font-family:var(--mono); font-size:13px; color:var(--ink-soft);
  }
  .drawer-body{ padding:24px; flex:1; }
  .drawer-item{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:8px;
  }
  .drawer-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .drawer-item-name{
    font-family:var(--display);
    font-weight:600;
    font-size:15px;
  }
  .drawer-item-meta{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-soft);
  }
  .drawer-empty{
    font-family:var(--body);
    font-style:italic;
    color:#9B968A;
  }
  .drawer-actions{
    padding:20px 24px 28px;
    border-top:1px solid var(--line);
  }
  .drawer-actions .checkout-btn{
    display:block;
    width:100%;
    text-align:center;
    background:var(--ink);
    color:var(--paper);
    border:none;
    border-radius:999px;
    padding:14px;
    font-family:var(--condensed);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    margin-bottom:12px;
  }
  .drawer-actions .continue-btn{
    display:block;
    width:100%;
    text-align:center;
    background:none;
    border:none;
    font-family:var(--condensed);
    font-weight:600;
    font-size:13.5px;
    color:var(--ink-soft);
    cursor:pointer;
    text-decoration:underline;
  }

  /* scroll reveal */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (max-width: 860px){
    .product-inner{ grid-template-columns:1fr; gap:40px; }
    .product.reverse .product-inner{ direction:ltr; }
    .product-media{ aspect-ratio:16/10; }
    nav{ display:none; }
  }

/* ==========================================================
   LEGAL DOCUMENT PAGES (Terms & Conditions, Privacy Policy)
   Ported from the approved legal-page mockups. One adaptation from
   the mockup: it used <section> wrappers between topics (hand-authored
   HTML). Real content here comes from the block editor as a plain
   stream of headings/paragraphs with no such wrapper, so the divider
   styling that was on <section> lives directly on h2 instead.
   ========================================================== */
.legal-page{ padding:70px 0 100px; }
.legal-col{ max-width:720px; margin:0 auto; }

.legal-col h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px, 4.5vw, 48px);
  letter-spacing:-0.015em;
  margin:16px 0 10px;
}
.updated-line{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:34px;
}

/* draft/review banner styling — this is applied via a CSS class the
   editor adds to a block (e.g. a Group block's "Additional CSS Class"
   field set to "draft-banner"), not template chrome, so it can be
   deleted in the editor once legal review is done. */
.draft-banner{
  border:1.5px solid var(--rust);
  background:var(--rust-tint);
  border-radius:4px;
  padding:18px 22px;
  margin-bottom:44px;
}
.draft-banner .tag{
  display:inline-block;
  font-family:var(--condensed);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:8px;
}
.draft-banner p{
  font-family:var(--body);
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
}

.toc{
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 24px;
  margin-bottom:48px;
}
.toc .mono-label{ display:block; margin-bottom:12px; }
.toc ol{
  list-style:none;
  counter-reset:toc-counter;
  columns:2;
  column-gap:28px;
}
.toc li{
  counter-increment:toc-counter;
  margin-bottom:9px;
  break-inside:avoid;
}
.toc a{
  font-family:var(--condensed);
  font-size:14.5px;
  text-decoration:none;
  color:var(--ink);
}
.toc a:hover{ color:var(--rust); }
.toc a::before{
  content: counter(toc-counter) ". ";
  font-family:var(--mono);
  color:var(--ink-soft);
  margin-right:2px;
}
@media (max-width: 640px){
  .toc ol{ columns:1; }
}

.legal-col h2{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.005em;
  margin-bottom:14px;
  padding-top:38px;
  margin-top:38px;
  border-top:1px solid var(--line);
  scroll-margin-top:96px;
}
.legal-col h2:first-of-type{
  border-top:none;
  padding-top:0;
  margin-top:16px;
}
.legal-col p{
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.legal-col p:last-child{ margin-bottom:0; }
.legal-col ul{
  margin:0 0 14px 22px;
  color:var(--ink-soft);
}
.legal-col li{
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  margin-bottom:8px;
}
.legal-col strong{ color:var(--ink); font-weight:600; }
.bracket{ color:var(--rust); font-style:italic; }

.bottom-note{
  margin-top:56px;
  padding:20px 22px;
  background:var(--paper-tint);
  border-radius:4px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* ==========================================================
   CONTACT PAGE (order-verified)
   Ported from the approved contact mockup. Skipped porting: the
   mockup's .demo-banner and .bracket styles (only relevant to that
   file's fake demo-mode credentials, not used in the real template),
   and the #message-panel/#confirm-panel show/hide-via-class rules
   (the real template renders one panel at a time server-side via PHP
   conditionals, so there's nothing for JS to toggle).
   ========================================================== */
.contact-page{ padding:70px 0 110px; }
.contact-col{ max-width:600px; margin:0 auto; }

.contact-col h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px, 4.5vw, 48px);
  letter-spacing:-0.015em;
  margin:16px 0 18px;
}
.intro{
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.intro strong{ color:var(--ink); font-weight:600; }

.contact-panel{
  border:1px solid var(--line);
  border-radius:6px;
  padding:32px;
}
.contact-panel + .contact-panel{ margin-top:20px; }
.contact-panel h2{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  margin-bottom:6px;
}
.contact-panel .sub{
  font-family:var(--body);
  font-size:14.5px;
  color:var(--ink-soft);
  margin-bottom:26px;
}

.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-family:var(--condensed);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:7px;
}
.field input,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 13px;
  font-family:var(--body);
  font-size:15.5px;
  color:var(--ink);
  background:var(--paper);
  transition:border-color .15s ease;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
}
.field textarea{ resize:vertical; min-height:120px; }
.char-count{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-top:6px;
  text-align:right;
}
.char-count.at-limit{ color:var(--rust); }

.submit-btn{
  width:100%;
  background:var(--ink);
  color:var(--paper);
  border:none;
  border-radius:999px;
  padding:14px;
  font-family:var(--condensed);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .15s ease;
}
.submit-btn:hover{ opacity:0.88; }
.submit-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

.status-message{
  margin-top:16px;
  padding:13px 15px;
  border-radius:4px;
  font-family:var(--body);
  font-size:14.5px;
  line-height:1.6;
}
.status-message.error{
  background:var(--rust-tint);
  color:var(--ink);
  border:1px solid var(--rust-line);
}
.status-message.locked{
  background:var(--paper-tint);
  color:var(--ink-soft);
  border:1px solid var(--line);
}

.verified-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  background:var(--paper-tint);
  border-radius:999px;
  padding:6px 12px;
  margin-bottom:22px;
}
.verified-dot{ width:7px; height:7px; border-radius:50%; background:#3E7D3E; }

#confirm-panel{ text-align:center; padding:48px 32px; }
#confirm-panel h2{ margin-bottom:10px; }
#confirm-panel p{
  font-family:var(--body);
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.7;
}