/* The heading level moved when the design was ported — a PDP needs exactly one
   <h1>, so the design's <h2> title was promoted. These selectors cover both so a
   promoted heading does not silently fall back to the base size. */
/* ============================================================
   LUSTRE — shared stylesheet
   Ported 1:1 from Figma FkYP6aD0Y1Of1om4Zrzm2L, page "02 LUSTRE — Clothing",
   via Dev Mode (get_design_context) per section.
   Setiap blok di bawah nyantumin node Figma asalnya.
   ============================================================ */

/* ---------- 1. TOKENS (Variable collection "LUSTRE Tokens") ---------- */
:root{
  --color-ivory:#F3EFE7;
  --color-shell:#E7E1D6;
  --color-ink:#17131A;
  --color-muted:#69626E;
  --color-line:#D6CFC2;
  --color-border:#858078;   /* control outlines — WCAG 1.4.11 wants 3:1, hairlines do not */
  --color-bordeaux:#6E2438;
  --color-gold:#776034;
  --color-lilac:#C9C6E8;

  /* Paint style "LUSTRE/Chrome Iridescent" — satu-satunya gradient di sistem ini.
     5 stop, dipakai apa adanya di announcement, pill, marquee, chrome band, wordmark. */
  --chrome:linear-gradient(90deg,
    rgb(201,198,232) 0%,
    rgb(236,236,241) 28%,
    rgb(191,224,228) 52%,
    rgb(239,231,221) 76%,
    rgb(205,191,217) 100%);
  /* Font families are NOT declared here. snippets/css-variables.liquid sets them
     from the theme's font pickers, and this stylesheet loads after that snippet —
     so a hardcoded value here would win the cascade and the pickers would do
     nothing in the editor, which is a Theme Store failure in itself. */
  --container:90rem;
  --margin-global:4.5rem;   /* lebih rapat dari AKTA (80) — grid fashion lebih padat */
  --gutter:1.5rem;

  /* Spacing and radius scale. These were used 581 times across this stylesheet and
     never declared: an undefined var() makes the whole declaration invalid at
     computed-value time, so every `padding: var(--space-7) …` silently became 0 and
     the design rendered flat. Same scale as AKTA — the rules were written against it. */
  --space-1:0.25rem;  --space-2:0.5rem;  --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem;   --space-6:2rem;    --space-7:3rem;    --space-8:4rem;
  --space-9:6rem;     --space-10:8rem;

  --radius-s:0.125rem; --radius-m:0.25rem; --radius-l:0.5rem; --radius-pill:62.4375rem;

  /* Referenced by the port additions; LUSTRE's surface tone is the shell grey. */
  --color-surface:#E7E1D6;
}

/* ---------- 2. TAG BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--color-ivory);color:var(--color-ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;line-height:1;letter-spacing:-.02em;margin:0;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--color-bordeaux);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:0.125rem solid var(--color-bordeaux);outline-offset:0.1875rem;
}
strong,b{font-weight:600;}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea,select{font:inherit;}

/* ---------- 3. STRUCTURE ---------- */
.page-wrapper{overflow-x:clip;}
.padding-global{padding-left:var(--margin-global);padding-right:var(--margin-global);}
.container-large{width:100%;max-width:var(--container);margin:0 auto;}

/* ---------- 4. UTILITIES ---------- */
.visually-hidden{position:absolute;width:0.0625rem;height:0.0625rem;margin:-0.0625rem;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.text-micro{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);line-height:normal;}
.text-mono{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.head_spacer{flex:1;min-width:0;}
.is-gold{color:var(--color-gold);}
.is-bordeaux{color:var(--color-bordeaux);}

/* Chrome dipakai sebagai teks — dipakai di wordmark footer & marquee */
.chrome-text{
  background-image:var(--chrome);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 5. BUTTONS (Y2K accent layer — pill radius 999) ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.0625rem 2.125rem;border:0.0625rem solid transparent;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:600;font-size:0.75rem;letter-spacing:.1em;line-height:normal;
  cursor:pointer;white-space:nowrap;
}
.button.is-ink{background:var(--color-ink);color:var(--color-ivory);}
.button.is-ink:hover{background:var(--color-bordeaux);color:var(--color-ivory);}
.button.is-chrome{background-image:var(--chrome);border-color:var(--color-ink);color:var(--color-ink);}
.button.is-chrome:hover{filter:brightness(1.06);color:var(--color-ink);}
.button.is-outline{border-color:var(--color-ink);color:var(--color-ink);}
.button.is-outline:hover{background:var(--color-ink);color:var(--color-ivory);}
.button.is-block{width:100%;}

/* ---------- 6. ANNOUNCEMENT — Figma 73:4 ---------- */
.announcement_bar{background-image:var(--chrome);}
.announcement_inner{
  display:flex;align-items:center;justify-content:center;height:2.75rem;
  font-weight:600;font-size:0.75rem;letter-spacing:.16em;color:var(--color-ink);
  line-height:normal;white-space:pre;
}

/* ---------- 7. NAV — Figma 73:19 ----------
   GSAP (dari doc component Figma): hide on scroll down, reveal on scroll up. */
.nav_bar{background:var(--color-ivory);border-bottom:0.0625rem solid var(--color-line);position:sticky;top:0;z-index:50;}
.nav_inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);height:5.5rem;line-height:normal;}
.nav_brand{display:flex;flex-direction:column;gap:0.1875rem;}
.nav_wordmark{font-family:var(--font-display);font-weight:500;font-size:1.6875rem;letter-spacing:.16em;line-height:normal;}
.nav_est{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.16em;color:var(--color-muted);line-height:normal;}
.nav_menu{display:flex;align-items:center;gap:2.25rem;font-size:0.875rem;letter-spacing:.02em;}
.nav_utility{display:flex;align-items:center;gap:var(--space-5);font-size:0.875rem;}
.nav_utility .is-muted{color:var(--color-muted);}
.bag_pill{
  display:inline-flex;align-items:center;padding:0.5625rem var(--space-4);border:0.0625rem solid var(--color-ink);border-radius:var(--radius-pill);
  background-image:var(--chrome);
  font-weight:600;font-size:0.625rem;letter-spacing:.12em;color:var(--color-ink);line-height:normal;
}

/* ---------- 8. FOOTER — Figma 73:47 ---------- */
/* No background/color here: the section carries .color-<scheme>, which already sets
   both. Restating them with role tokens inverted the footer under scheme-ink —
   `--color-ink` is the TEXT role, so it painted the background ivory and left the
   gold labels at 2.55:1. */
.footer_shell{padding:5rem 0 2.25rem;}
.footer_cols{display:flex;gap:var(--space-6);align-items:flex-start;padding-bottom:4.5rem;}
.footer_brand{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.footer_wordmark{
  font-family:var(--font-display);font-weight:500;font-size:1.75rem;letter-spacing:.16em;line-height:normal;
  filter:drop-shadow(0 0.125rem 0.5rem rgba(0,0,0,.35));
}
.footer_blurb{font-size:0.875rem;line-height:1.65;color:var(--color-ivory);}
.footer_col{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;line-height:normal;}
.footer_colhead{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-gold);}
.footer_link{font-size:0.875rem;}
.footer_link:hover{color:var(--color-gold);}
.footer_fine{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding-top:1.75rem;border-top:0.0625rem solid var(--color-ivory);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;
}
.footer_fine p{white-space:pre;}

@media (max-width:1024px){
  :root{--margin-global:1.5rem;}
  .nav_menu{display:none;}
  .footer_cols{flex-wrap:wrap;gap:var(--space-6) var(--space-5);}
  .footer_brand{flex:1 1 100%;}
  .footer_col{flex:1 1 40%;}
  .footer_fine{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .announcement_inner{font-size:0.625rem;letter-spacing:.1em;text-align:center;white-space:normal;padding:var(--space-2) 0;height:auto;}
}

/* ============================================================
   9. HERO — Figma 7:15 (1440 × 900)
   ============================================================ */
.hero_shell{position:relative;overflow:hidden;background:var(--color-ivory);padding:4.5rem 0;}
.hero_blob{position:absolute;left:-8.75rem;top:15rem;width:42.5rem;height:42.5rem;pointer-events:none;}
.hero_inner{position:relative;display:flex;gap:var(--space-8);align-items:stretch;min-height:47.25rem;}
.hero_copy{width:40rem;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-7);}
.hero_top{display:flex;flex-direction:column;gap:var(--space-5);}
.hero_meta{display:flex;align-items:center;gap:0.875rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}
.hero_dot{width:0.25rem;height:0.25rem;border-radius:50%;background:var(--color-muted);flex:none;}
.hero_title{font-size:7rem;line-height:.92;letter-spacing:-.03em;}
.hero_title .is-chrome{
  display:block;background-image:var(--chrome);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Figma cuma punya satu drop shadow lembut (0 3 10 / .22). Di browser itu gak cukup:
     stop tengah chrome (silver #ECECF1, champagne #EFE7DD) hampir sama dengan ground
     ivory #F3EFE7, jadi huruf tengah ilang. Ditambah satu shadow rapat buat bikin tepi. */
  filter:drop-shadow(0 0.0625rem 0.0625rem rgba(23,18,26,.45)) drop-shadow(0 0.1875rem 0.625rem rgba(23,18,26,.22));
}
.hero_lede{font-size:1rem;line-height:1.65;color:var(--color-muted);max-width:29.375rem;}
.hero_cta{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;}
.hero_pills{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.button.is-hero{padding:1.0625rem 2.125rem;font-size:0.75rem;letter-spacing:.12em;font-weight:500;}
.button.is-chrome.is-hero{font-weight:600;}
.hero_fine{font-size:0.75rem;color:var(--color-muted);line-height:normal;}
.hero_media{flex:1;min-width:0;position:relative;}
.hero_image{width:100%;height:100%;min-height:47.25rem;object-fit:cover;border-radius:17.5rem;}
.hero_sticker{
  position:absolute;left:-5.75rem;top:1.5rem;transform:rotate(9deg);
  display:inline-flex;align-items:center;padding:0.625rem 1.125rem;border-radius:var(--radius-pill);
  background:var(--color-bordeaux);color:var(--color-ivory);
  font-weight:600;font-size:0.75rem;letter-spacing:.12em;line-height:normal;white-space:nowrap;
}

/* ============================================================
   10. MARQUEE — Figma 7:16 (1440 × 92)
   GSAP nanti: track jalan terus-menerus ke kiri.
   ============================================================ */
.marquee_shell{background:var(--color-ink);height:5.75rem;display:flex;align-items:center;overflow:hidden;}
.marquee_track{display:flex;white-space:nowrap;}
.marquee_track p{
  font-family:var(--font-body);font-weight:900;font-size:2.125rem;letter-spacing:.02em;line-height:normal;
  padding-right:.5em;
  background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   11. NEW ARRIVALS — Figma 7:17
   ============================================================ */
.sec_pad{padding:var(--space-9) 0;}
.arrivals_shell{background:var(--color-ivory);}
.arrivals_inner{display:flex;flex-direction:column;gap:2.5rem;}
.section_head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);padding-bottom:1.25rem;border-bottom:0.0625rem solid var(--color-line);}
.section_head h2{font-size:2.875rem;line-height:1;letter-spacing:-.02em;}
.section_head .head_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;color:var(--color-muted);white-space:pre;line-height:normal;}
.product_grid{display:flex;gap:var(--gutter);align-items:flex-start;}
.product_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.product_card img{width:100%;height:25rem;object-fit:cover;border-radius:var(--radius-l);}
.product_info{display:flex;flex-direction:column;gap:0.4375rem;align-items:flex-start;}
.product_namerow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;}
.product_name{font-family:var(--font-display);font-size:1.1875rem;line-height:1.2;letter-spacing:0;}
.product_price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.product_spec{font-size:0.75rem;line-height:1.5;color:var(--color-muted);}
.scarcity_tag{
  display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:var(--color-gold);
  color:var(--color-ivory);font-weight:600;font-size:0.625rem;letter-spacing:.12em;line-height:normal;white-space:nowrap;
}

@media (max-width:1024px){
  .sec_pad{padding:3.5rem 0;}
  .hero_inner{flex-direction:column;min-height:0;}
  .hero_copy{width:100%;}
  .hero_title{font-size:3.5rem;}
  .hero_image{min-height:0;height:26.25rem;border-radius:7.5rem;}
  .hero_sticker{left:auto;right:1rem;top:1rem;}
  .hero_blob{display:none;}
  .marquee_shell{height:4rem;}
  .marquee_track p{font-size:1.5rem;}
  .section_head{flex-wrap:wrap;}
  .section_head h2{font-size:2rem;}
  .product_grid{flex-wrap:wrap;gap:var(--space-6) var(--space-5);}
  .product_card{flex:1 1 45%;}
}
@media (max-width:720px){
  .hero_title{font-size:2.5rem;}
  .product_card{flex:1 1 100%;}
}

/* ============================================================
   12. THE COLLECTION — Figma 7:18
   ============================================================ */
.collection_shell{background:var(--color-shell);}
.collection_inner{display:flex;gap:var(--space-8);align-items:flex-start;}
.collection_img{width:35rem;height:41.25rem;flex:none;object-fit:cover;border-radius:var(--radius-l);}
.collection_copy{flex:1;min-width:0;display:flex;flex-direction:column;}
.collection_intro{display:flex;flex-direction:column;gap:1.125rem;padding-bottom:2.5rem;}
.eyebrow_mono{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;}
.collection_intro h2{font-size:3.5rem;line-height:.96;letter-spacing:-.02em;max-width:37.5rem;}
.collection_intro p{font-size:1rem;line-height:1.65;color:var(--color-muted);max-width:33.75rem;}
.fact_row{display:flex;gap:1.25rem;align-items:center;padding:1.125rem 0;border-top:0.0625rem solid var(--color-line);}
.fact_num{width:1.5rem;flex:none;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-gold);line-height:normal;}
.fact_row p:last-child{flex:1;min-width:0;font-size:0.875rem;line-height:1.5;}
.collection_link{padding-top:1.75rem;font-weight:500;font-size:0.875rem;color:var(--color-bordeaux);white-space:pre;line-height:normal;}

/* ============================================================
   13. CHROME BAND — Figma 7:19
   ============================================================ */
.chromeband_shell{background-image:var(--chrome);padding:6.5rem 0;}
.chromeband_inner{display:flex;flex-direction:column;align-items:center;gap:1.375rem;text-align:center;}
.chromeband_flag{font-weight:600;font-size:0.75rem;letter-spacing:.16em;color:var(--color-ink);white-space:pre;line-height:normal;}
.chromeband_inner h2{font-size:3.75rem;line-height:.96;letter-spacing:-.02em;max-width:50rem;}
.chromeband_inner .chromeband_lede{font-size:1rem;line-height:1.6;max-width:35rem;}
.button.is-band{padding:1.125rem 2.375rem;font-size:0.75rem;letter-spacing:.12em;font-weight:500;}

/* ============================================================
   14. LOOKBOOK — Figma 7:20
   ============================================================ */
.lookbook_shell{background:var(--color-ivory);}
.lookbook_inner{display:flex;flex-direction:column;gap:2.5rem;}
.lookbook_grid{display:flex;gap:var(--gutter);align-items:flex-start;}
.look{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;}
.look.is-drop-72{padding-top:4.5rem;}
.look.is-drop-24{padding-top:var(--space-5);}
.look img{width:100%;height:33.3125rem;object-fit:cover;border-radius:var(--radius-l);}
.look figcaption{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}

/* ============================================================
   15. PRESS — Figma 7:21
   ============================================================ */
.press_shell{background:var(--color-ivory);border-top:0.0625rem solid var(--color-line);border-bottom:0.0625rem solid var(--color-line);}
.press_row{display:flex;align-items:center;padding:3.5rem 0;}
.press_quote{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;padding:0 2.5rem;border-left:0.0625rem solid var(--color-line);}
.press_quote:first-child{border-left:0;padding-left:0;padding-right:2.5rem;}
.press_quote blockquote{font-family:var(--font-display);font-size:1.1875rem;line-height:1.45;}
.press_source{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-gold);line-height:normal;}

/* ============================================================
   16. NEWSLETTER — Figma 7:22
   ============================================================ */
.news_shell{background:var(--color-shell);padding:6.5rem 0;}
.news_inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;}
.news_glyph{font-weight:500;font-size:1rem;color:var(--color-gold);line-height:normal;}
.news_inner h2{font-size:3.125rem;line-height:.96;letter-spacing:-.02em;max-width:43.75rem;}
.news_lede{font-size:1rem;line-height:1.6;color:var(--color-muted);max-width:35rem;}
.news_form{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:30rem;max-width:100%;
  padding-top:var(--space-5);padding-bottom:var(--space-4);border-bottom:0.0625rem solid var(--color-ink);
}
.news_form input{flex:1;min-width:0;background:none;border:0;padding:0;font-family:var(--font-body);font-size:1rem;color:var(--color-ink);line-height:normal;}
.news_form input::placeholder{color:var(--color-muted);}
.news_form input:focus{outline:none;}
.news_form button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.12em;color:var(--color-ink);white-space:pre;}

@media (max-width:1024px){
  .collection_inner{flex-direction:column;gap:var(--space-6);}
  .collection_img{width:100%;height:auto;}
  .collection_intro h2{font-size:2.25rem;}
  .chromeband_shell,.news_shell{padding:var(--space-8) 0;}
  .chromeband_inner h2{font-size:2.25rem;}
  .news_inner h2{font-size:2.125rem;}
  .lookbook_grid{flex-direction:column;gap:var(--space-6);}
  .look.is-drop-72,.look.is-drop-24{padding-top:0;}
  .look img{height:auto;}
  .press_row{flex-direction:column;align-items:flex-start;gap:var(--space-6);padding:2.5rem 0;}
  .press_quote{padding:0;border-left:0;}
  .press_quote:first-child{padding-right:0;}
}

/* ============================================================
   17. PRODUCT — breadcrumb, gallery + buy panel (74:59 / 74:66)
   ============================================================ */
.crumb_shell{background:var(--color-ivory);padding:2.25rem 0 0;}
.crumb{display:flex;align-items:center;gap:0.5625rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.crumb [aria-current]{color:var(--color-ink);}

.pdp_shell{background:var(--color-ivory);padding:2.25rem 0 5.5rem;}
.pdp_inner{display:flex;gap:var(--space-8);align-items:flex-start;}
.pdp_gallery{width:42.5rem;flex:none;display:flex;flex-direction:column;gap:0.875rem;}
.pdp_hero_img{width:100%;height:51.25rem;object-fit:cover;border-radius:var(--radius-l);}
.pdp_thumbs{display:flex;gap:0.875rem;}
.pdp_thumbs img{flex:1;min-width:0;height:11.25rem;object-fit:cover;border-radius:var(--radius-m);border:0.0625rem solid transparent;}
.pdp_thumbs img.is-active{border-color:var(--color-ink);}
.pdp_info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;}
.pdp_meta{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}
.pdp_title{font-size:3.25rem;line-height:1.04;letter-spacing:-.02em;}
.pdp_pricerow{display:flex;align-items:center;gap:var(--space-4);}
.pdp_price{font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;line-height:normal;}
.pdp_lead{font-size:1rem;line-height:1.72;}
.pdp_group{display:flex;flex-direction:column;gap:var(--space-3);width:100%;}
.pdp_grouphead{display:flex;align-items:center;gap:var(--space-4);font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}
.pdp_grouplink{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);white-space:pre;}
.swatches{display:flex;gap:0.625rem;}
.swatch{width:2.375rem;height:2.375rem;border-radius:var(--radius-pill);border:0.0625rem solid var(--color-border);cursor:pointer;padding:0;}
.swatch.is-active{border:0.09375rem solid var(--color-ink);}
.swatch.is-oat{background:var(--color-shell);}
.swatch.is-bordeaux{background:var(--color-bordeaux);}
.swatch.is-ink{background:var(--color-ink);}
.size_opts{display:flex;gap:0.625rem;width:100%;}
.size_opt{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0.8125rem 0;
  border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.size_opt.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);font-weight:600;}
.size_opt:disabled{opacity:.4;cursor:not-allowed;}
.pdp_trust{display:flex;gap:var(--space-5);flex-wrap:wrap;padding-top:0.125rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;color:var(--color-muted);line-height:normal;}
.pdp_accordion{display:flex;flex-direction:column;width:100%;}
.pdp_row{border-top:0.0625rem solid var(--color-line);}
.pdp_row > summary{display:flex;align-items:center;gap:var(--space-4);padding:1.25rem 0;cursor:pointer;list-style:none;line-height:normal;}
.pdp_row > summary::-webkit-details-marker{display:none;}
.pdp_q{flex:1;min-width:0;font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.01em;}
.pdp_sign{width:0.75rem;text-align:center;font-size:1rem;color:var(--color-muted);}
.pdp_sign::before{content:"+";}
.pdp_row[open] .pdp_sign::before{content:"−";}
.pdp_row p{padding-bottom:1.25rem;font-size:0.875rem;line-height:1.72;color:var(--color-muted);}

/* ============================================================
   18. PRODUCT — atelier block + styled with (74:133 / 74:147)
   ============================================================ */
.atelier_shell{background:var(--color-shell);padding:5rem 0;}
.atelier_inner{display:flex;gap:3.5rem;align-items:center;}
.atelier_img{width:32.5rem;height:32.5rem;flex:none;object-fit:cover;border-radius:var(--radius-l);}
.atelier_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.atelier_copy h2{font-size:3rem;line-height:1.02;letter-spacing:-.02em;max-width:32.5rem;}
.atelier_copy .fact_row{padding:var(--space-4) 0;}
.atelier_copy .fact_row p:last-child{line-height:1.55;}

.styled_shell{background:var(--color-ivory);padding:5.5rem 0;}
.styled_inner{display:flex;flex-direction:column;gap:2.5rem;}
.section_head.is-flush{justify-content:flex-start;}

@media (max-width:1024px){
  .pdp_shell{padding:var(--space-5) 0 3.5rem;}
  .pdp_inner{flex-direction:column;gap:2.5rem;}
  .pdp_gallery{width:100%;}
  .pdp_hero_img{height:auto;}
  .pdp_title{font-size:2.125rem;}
  .atelier_shell,.styled_shell{padding:3.5rem 0;}
  .atelier_inner{flex-direction:column;gap:var(--space-6);}
  .atelier_img{width:100%;height:auto;}
  .atelier_copy h2{font-size:2rem;}
}

/* ============================================================
   19. COLLECTION — banner, filter bar, grid, pagination
        (74:223 / 74:231 / 74:244)
   ============================================================ */
.collbanner_shell{background:var(--color-shell);padding:2.25rem 0 var(--space-8);}
.collbanner_inner{display:flex;flex-direction:column;gap:1.375rem;}
.collbanner_row{display:flex;gap:3.5rem;align-items:center;}
.collbanner_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.collbanner_copy h1{font-size:3.75rem;line-height:1;letter-spacing:-.03em;}
.collbanner_copy p{font-size:1rem;line-height:1.72;color:var(--color-muted);max-width:32.5rem;}
.collbanner_img{width:30rem;height:17.5rem;flex:none;object-fit:cover;border-radius:var(--radius-l);}

.filterbar_shell{background:var(--color-ivory);border-top:0.0625rem solid var(--color-line);border-bottom:0.0625rem solid var(--color-line);}
.filterbar{display:flex;align-items:center;gap:0.625rem;padding:1.625rem 0;}
.chip{
  padding:0.5625rem var(--space-4);border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.chip.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);font-weight:600;}
.sort_control{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);white-space:pre;line-height:normal;
}

.collgrid_shell{background:var(--color-ivory);padding:3.5rem 0 5.5rem;}
.collgrid_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.pagination{display:flex;justify-content:center;gap:0.625rem;padding-top:1.25rem;}
.pagination a,.pagination span{
  padding:0.6875rem var(--space-4);border:0.0625rem solid var(--color-line);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;color:var(--color-ink);line-height:normal;
}
.pagination .is-current{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}

@media (max-width:1024px){
  .collbanner_row{flex-direction:column;align-items:flex-start;gap:1.75rem;}
  .collbanner_copy h1{font-size:2.375rem;}
  .collbanner_img{width:100%;height:auto;}
  .filterbar{flex-wrap:wrap;}
  .collgrid_shell{padding:2.5rem 0 3.5rem;}
}

/* ============================================================
   20. LIST-COLLECTIONS — header, tiles, atelier tile (74:370 / 74:375)
   ============================================================ */
.pagehead_shell{background:var(--color-ivory);padding:5.5rem 0 var(--space-7);}
.pagehead_inner{display:flex;flex-direction:column;gap:1.25rem;}
.pagehead_inner h1{font-size:3.75rem;line-height:1;letter-spacing:-.03em;}
.pagehead_lead{font-size:1rem;line-height:1.7;color:var(--color-muted);max-width:43.75rem;}

.tiles_shell{background:var(--color-ivory);padding:var(--space-5) 0 5.5rem;}
.tiles_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.tiles_row{display:flex;gap:var(--space-6);align-items:flex-start;}
.tile{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.tile img{width:100%;height:26.25rem;object-fit:cover;border-radius:var(--radius-l);}
.tile_head{display:flex;align-items:flex-end;gap:var(--space-4);}
.tile_head h2{font-size:2rem;line-height:1.05;letter-spacing:-.01em;}
.tile_count{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);line-height:normal;}
.tile p{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}
.atelier_tile{display:flex;gap:var(--space-7);align-items:center;padding:2.75rem;background:var(--color-shell);}
.atelier_tile_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;}
.atelier_tile_copy h2{font-size:2.375rem;line-height:1.1;letter-spacing:-.02em;}
.atelier_tile_copy p{font-size:1rem;line-height:1.68;color:var(--color-muted);max-width:35rem;}

@media (max-width:1024px){
  .pagehead_shell{padding:3.5rem 0 var(--space-6);}
  .pagehead_inner h1{font-size:2.375rem;}
  .tiles_row{flex-direction:column;gap:2.5rem;}
  .tiles_shell{padding:var(--space-4) 0 3.5rem;}
  .tile img{height:auto;}
  .atelier_tile{flex-direction:column;align-items:flex-start;gap:1.75rem;padding:1.75rem;}
  .atelier_tile_copy h2{font-size:1.75rem;}
}

/* ============================================================
   21. PAGE (rich text) — header, TOC, body (75:179 / 75:186)
   ============================================================ */
.pagehead_shell.is-tight{padding:4.5rem 0 var(--space-7);}
.pagehead_shell.is-tight h1{font-size:3.875rem;}
.pagehead_shell.is-tight .pagehead_lead{font-size:1.125rem;max-width:45rem;}

.rich_shell{background:var(--color-ivory);padding:5.5rem 0;}
.rich_inner{display:flex;gap:3.5rem;align-items:flex-start;}
.rich_toc{width:14.375rem;flex:none;display:flex;flex-direction:column;gap:0.875rem;position:sticky;top:6.75rem;}
.rich_toc_head{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.rich_toc a{display:block;padding:0.4375rem 0 0.4375rem 0.875rem;border-left:0.0625rem solid var(--color-line);font-size:0.875rem;color:var(--color-muted);line-height:normal;}
.rich_toc a.is-active{border-left:0.125rem solid var(--color-ink);color:var(--color-ink);font-weight:500;}
.rich_body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-5);}
.rich_lead{font-size:1.1875rem;line-height:1.74;}
.rich_body img{width:100%;height:26.25rem;object-fit:cover;border-radius:var(--radius-l);}
.rich_body h2{font-size:1.875rem;line-height:1.12;letter-spacing:-.02em;}
.rich_body p{font-size:1rem;line-height:1.8;color:var(--color-muted);}
.rich_quote{padding:var(--space-2) 0 var(--space-2) var(--space-6);border-left:0.1875rem solid var(--color-gold);}
.rich_quote p{font-family:var(--font-display);font-size:1.75rem;line-height:1.45;letter-spacing:-.01em;color:var(--color-ink);}

@media (max-width:1024px){
  .rich_shell{padding:3.5rem 0;}
  .rich_inner{flex-direction:column;gap:var(--space-6);}
  .rich_toc{width:100%;position:static;}
  .pagehead_shell.is-tight h1{font-size:2.375rem;}
  .rich_body img{height:auto;}
  .rich_quote p{font-size:1.25rem;}
}

/* ============================================================
   22. BLOG — header, filters, featured, post grid
        (75:345 / 75:350 / 75:359 / 75:369)
   ============================================================ */
.blogfilter_shell{background:var(--color-ivory);}
.blogfilter{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;padding:5.5rem 0 2.25rem;}

.feat_shell{background:var(--color-ivory);padding:5.5rem 0 3.5rem;}
.feat_inner{display:flex;gap:2.75rem;align-items:center;}
.feat_img{flex:1;min-width:0;height:26.25rem;object-fit:cover;border-radius:var(--radius-l);}
.feat_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.post_meta{display:flex;align-items:center;gap:0.875rem;font-size:0.625rem;line-height:normal;}
.post_cat{font-weight:500;letter-spacing:.12em;color:var(--color-bordeaux);}
.post_read{font-family:var(--font-mono);letter-spacing:.08em;color:var(--color-muted);white-space:pre;}
.feat_copy h2{font-size:2.625rem;line-height:1.12;letter-spacing:-.02em;max-width:35rem;}
.feat_dek{font-size:1rem;line-height:1.72;color:var(--color-muted);max-width:32.5rem;}
.feat_more{font-weight:500;font-size:0.875rem;white-space:pre;}

.posts_shell{background:var(--color-ivory);padding:5.5rem 0;}
.posts_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.posts_row{display:flex;gap:var(--space-6);align-items:flex-start;}
.post_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.post_card img{width:100%;height:16.25rem;object-fit:cover;border-radius:var(--radius-l);}
.post_metarow{display:flex;align-items:center;gap:var(--space-4);width:100%;font-size:0.625rem;line-height:normal;}
.post_card h3{font-size:1.5rem;line-height:1.22;letter-spacing:-.01em;}

@media (max-width:1024px){
  .blogfilter{padding:var(--space-7) 0 var(--space-5);}
  .feat_shell,.posts_shell{padding:var(--space-7) 0;}
  .feat_inner{flex-direction:column;align-items:flex-start;gap:1.75rem;}
  .feat_img{width:100%;height:auto;}
  .feat_copy h2{font-size:1.875rem;}
  .posts_row{flex-direction:column;gap:2.5rem;}
  .post_card img{height:auto;}
}

/* ============================================================
   23. ARTICLE — header, hero, TOC + body, "from this roll"
        (75:458 / 75:464 / 75:466)
   ============================================================ */
.arthead_shell{background:var(--color-ivory);padding:4.5rem 0 2.75rem;}
.arthead_inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;}
.arthead_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.1em;color:var(--color-muted);white-space:pre;line-height:normal;}
.arthead_inner h1{font-size:3.625rem;line-height:1.06;letter-spacing:-.03em;max-width:62.5rem;}
.art_author{display:flex;align-items:center;gap:var(--space-3);}
.art_author img{width:2.125rem;height:2.125rem;border-radius:50%;}
.art_author p{font-size:0.875rem;color:var(--color-muted);white-space:pre;line-height:normal;}

.arthero_shell{background:var(--color-ivory);padding:5.5rem 0 3.5rem;}
.arthero_shell img{width:100%;height:33.75rem;object-fit:cover;border-radius:var(--radius-l);}

.artbody_shell{background:var(--color-ivory);padding:5.5rem 0 5rem;}
.artbody_shell .rich_toc{width:13.125rem;}
.roll_callout{display:flex;flex-direction:column;gap:0.625rem;padding:var(--space-5) 1.75rem;background:var(--color-shell);}
.roll_callout_kind{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;}
.roll_row{display:flex;gap:var(--space-4);align-items:center;}
.roll_row img{width:5rem;height:6rem;flex:none;object-fit:cover;border-radius:var(--radius-m);}
.roll_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem;line-height:normal;}
.roll_copy h3{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.01em;}
.roll_copy p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.02em;color:var(--color-muted);}

@media (max-width:1024px){
  .arthead_inner h1{font-size:2rem;}
  .arthero_shell{padding:var(--space-6) 0;}
  .arthero_shell img{height:auto;}
  .artbody_shell{padding:var(--space-7) 0;}
  .roll_row{flex-wrap:wrap;}
}

/* ============================================================
   24. CONTACT — form + channels + atelier (75:254 / 75:261)
   ============================================================ */
.contact_shell{background:var(--color-ivory);padding:5.5rem 0;}
.contact_inner{display:flex;gap:3.5rem;align-items:flex-start;}
.contact_form{width:51.25rem;flex:none;display:flex;flex-direction:column;gap:1.25rem;padding:2.5rem;background:var(--color-shell);}
.contact_form h2{font-size:1.875rem;letter-spacing:-.01em;line-height:normal;}
.field_row{display:flex;gap:1.125rem;}
.field{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.5625rem;}
.field label{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}
.field input,.field textarea{
  width:100%;padding:var(--space-4) 1.125rem;background:var(--color-ivory);border:0.0625rem solid var(--color-border);border-radius:0;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.field textarea{height:7.5rem;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--color-muted);}
.field input:focus,.field textarea:focus{outline:0.0625rem solid var(--color-ink);outline-offset:-0.0625rem;}
.contact_note{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;color:var(--color-muted);line-height:normal;}

.contact_info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.contact_block{display:flex;flex-direction:column;gap:0.5625rem;padding-top:1.25rem;border-top:0.0625rem solid var(--color-line);}
.contact_kind{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;}
.contact_mail{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.01em;line-height:normal;}
.contact_block p:last-child{font-size:0.875rem;line-height:1.6;color:var(--color-muted);}
.contact_atelier{display:flex;flex-direction:column;gap:var(--space-3);padding-top:1.25rem;border-top:0.0625rem solid var(--color-line);}
.contact_atelier address{font-style:normal;font-size:1rem;line-height:1.65;}
.contact_atelier img{width:100%;height:13.75rem;object-fit:cover;border-radius:var(--radius-l);}

@media (max-width:1024px){
  .contact_shell{padding:3.5rem 0;}
  .contact_inner{flex-direction:column;gap:2.5rem;}
  .contact_form{width:100%;padding:1.75rem;}
  .field_row{flex-direction:column;}
}

/* ============================================================
   25. SEARCH — field, tabs, piece results, journal results
        (76:339 / 76:345 / 76:354 / 76:386)
   ============================================================ */
.searchhead_shell{background:var(--color-ivory);padding:4.5rem 0 2.25rem;}
.searchhead_inner{display:flex;flex-direction:column;gap:1.375rem;}
.searchhead_inner h1{font-size:3.5rem;line-height:1;letter-spacing:-.03em;}
.search_field{display:flex;align-items:center;gap:0.875rem;padding-bottom:1.125rem;border-bottom:0.0625rem solid var(--color-ink);}
.search_field input{
  flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--font-display);font-size:2.125rem;letter-spacing:-.01em;color:var(--color-ink);line-height:normal;
}
.search_field input:focus{outline:none;}
.search_field button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);}
.search_count{font-size:0.875rem;color:var(--color-muted);line-height:normal;}

.tabs_shell{background:var(--color-ivory);border-bottom:0.0625rem solid var(--color-line);}
.tabs{display:flex;align-items:center;}
.tab{
  padding:0.875rem 1.25rem 0.875rem var(--space-1);border:0;border-bottom:0.125rem solid transparent;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-muted);line-height:normal;
}
.tab.is-active{border-bottom-color:var(--color-ink);color:var(--color-ink);font-weight:500;}

.sres_shell{background:var(--color-ivory);padding:var(--space-7) 0 var(--space-8);}
.sres_inner{display:flex;flex-direction:column;gap:1.75rem;}
.sres_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.sres_grid{display:flex;gap:var(--gutter);align-items:stretch;}
.sres_empty{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;
  padding:var(--space-6) 1.75rem;background:var(--color-shell);border-radius:var(--radius-l);text-align:center;color:var(--color-muted);line-height:normal;
}
.sres_empty p:first-child{font-size:0.875rem;}
.sres_empty p:last-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;}

.jres_shell{background:var(--color-shell);padding:3.5rem 0 5.5rem;}
.jres_inner{display:flex;flex-direction:column;gap:var(--space-5);}
.jres_item{display:flex;flex-direction:column;gap:0.5625rem;padding:1.25rem 0;border-top:0.0625rem solid var(--color-line);}
.jres_item h3{font-size:1.625rem;line-height:1.2;letter-spacing:-.01em;}
.jres_item p:last-child{font-size:0.875rem;line-height:1.68;color:var(--color-muted);}

@media (max-width:1024px){
  .searchhead_inner h1{font-size:2.25rem;}
  .search_field input{font-size:1.375rem;}
  .sres_grid{flex-wrap:wrap;gap:var(--space-6) var(--space-5);}
  .sres_grid > *{flex:1 1 45%;}
  .tabs{flex-wrap:wrap;}
}

/* ============================================================
   26. CART — head, lines + summary, empty state
        (76:440 / 76:443 / 76:498)
   ============================================================ */
.carthead_shell{background:var(--color-ivory);padding:4.5rem 0 1.75rem;}
.carthead_inner{display:flex;flex-direction:column;gap:1.125rem;}
.carthead_inner h1{font-size:3.5rem;line-height:1;letter-spacing:-.03em;}
.carthead_inner p{font-size:0.875rem;color:var(--color-muted);line-height:normal;}

.cart_shell{background:var(--color-ivory);padding:2.25rem 0 5.5rem;}
.cart_inner{display:flex;gap:3.5rem;align-items:flex-start;}
.cart_lines{flex:1;min-width:0;display:flex;flex-direction:column;}
.cart_colhead{display:flex;align-items:center;gap:var(--space-4);padding-bottom:0.875rem;border-bottom:0.0625rem solid var(--color-line);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.cart_colhead .is-gap{width:5.625rem;flex:none;}
.cart_line{display:flex;gap:1.375rem;align-items:center;padding:1.375rem 0;border-bottom:0.0625rem solid var(--color-line);}
.cart_line > img{width:6.875rem;height:8.25rem;flex:none;object-fit:cover;border-radius:var(--radius-m);}
.cart_item{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;line-height:normal;}
.cart_item h2{font-family:var(--font-display);font-size:1.4375rem;letter-spacing:-.01em;}
.cart_variant{font-size:0.875rem;color:var(--color-muted);}
.cart_remove{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:0.75rem;color:var(--color-muted);text-decoration:underline;text-underline-offset:0.125rem;}
.cart_qty{display:flex;align-items:center;gap:var(--space-4);padding:0.6875rem 0.875rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);line-height:normal;}
.cart_qty button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);}
.cart_qty button:first-of-type{color:var(--color-muted);}
.cart_qty output{font-family:var(--font-mono);font-size:0.75rem;}
.cart_linetotal{width:5.625rem;flex:none;text-align:right;font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.02em;line-height:normal;}

.cart_summary{width:26.25rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);padding:2.125rem;background:var(--color-shell);}
.cart_summary h2{font-size:1.75rem;letter-spacing:-.01em;line-height:normal;}
.kv{display:flex;align-items:center;gap:var(--space-4);}
.kv dt{font-size:0.875rem;color:var(--color-muted);line-height:normal;}
.kv dd{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;margin:0;}
.kv.is-total{padding-top:var(--space-4);border-top:0.0625rem solid var(--color-line);align-items:flex-end;}
.kv.is-total dt,.kv.is-total dd{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;color:var(--color-ink);}
.button.is-summary{padding:var(--space-4) var(--space-6);font-size:0.75rem;letter-spacing:.12em;}
.cart_fine{font-size:0.75rem;line-height:1.65;color:var(--color-muted);}

.emptybag_shell{background:var(--color-shell);padding:var(--space-8) 0;}
.emptybag_inner{display:flex;flex-direction:column;align-items:center;gap:1.125rem;text-align:center;}
.emptybag_flag{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);line-height:normal;}
.emptybag_inner h2{font-size:2.5rem;letter-spacing:-.02em;line-height:normal;}
.emptybag_inner p{font-size:1rem;color:var(--color-muted);line-height:normal;}
.emptybag_actions{display:flex;gap:0.875rem;flex-wrap:wrap;justify-content:center;}

@media (max-width:1024px){
  .carthead_inner h1{font-size:2.25rem;}
  .cart_inner{flex-direction:column;gap:2.5rem;}
  .cart_summary{width:100%;}
  .cart_colhead{display:none;}
  .cart_line{flex-wrap:wrap;}
  .emptybag_inner h2{font-size:1.75rem;}
}

/* ============================================================
   27. 404 — message + still available (76:551 / 76:560)
   ============================================================ */
.err_shell{background:var(--color-ivory);padding:7rem 0;}
.err_inner{display:flex;flex-direction:column;align-items:center;gap:1.375rem;text-align:center;}
.err_code{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.err_inner h1{font-size:3.75rem;line-height:1.06;letter-spacing:-.03em;max-width:56.25rem;}
.err_lead{font-size:1rem;line-height:1.7;color:var(--color-muted);max-width:38.75rem;}
.err_actions{display:flex;gap:0.875rem;flex-wrap:wrap;justify-content:center;}

.suggest_shell{background:var(--color-ivory);padding:4.5rem 0 5.5rem;}
.suggest_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.suggest_inner .section_head h2{font-size:2.75rem;}

@media (max-width:1024px){
  .err_shell{padding:var(--space-8) 0;}
  .err_inner h1{font-size:2rem;}
  .suggest_shell{padding:var(--space-7) 0;}
}

/* ============================================================
   28. PASSWORD gate (76:630) — no nav, no footer
   ============================================================ */
.gate_wrap{display:flex;align-items:stretch;min-height:47.5rem;}
.gate_panel{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1.375rem;padding:var(--space-9);background:var(--color-ivory);}
.gate_brand{display:flex;flex-direction:column;gap:var(--space-1);}
.gate_wordmark{font-family:var(--font-display);font-weight:500;font-size:2rem;letter-spacing:.16em;line-height:normal;}
.gate_est{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.16em;color:var(--color-muted);line-height:normal;}
.gate_panel h1{font-size:3.125rem;line-height:1.04;letter-spacing:-.03em;}
.gate_lead{font-size:1rem;line-height:1.72;color:var(--color-muted);max-width:27.5rem;}
.gate_notify{display:flex;align-items:center;gap:var(--space-4);padding:0.625rem 0 0.875rem;border-bottom:0.0625rem solid var(--color-ink);}
.gate_notify input{flex:1;min-width:0;background:none;border:0;padding:0;font-family:var(--font-body);font-size:1rem;color:var(--color-ink);line-height:normal;}
.gate_notify input::placeholder{color:var(--color-muted);}
.gate_notify input:focus{outline:none;}
.gate_notify button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.12em;white-space:pre;color:var(--color-ink);}
.gate_enter{display:flex;flex-direction:column;gap:0.875rem;padding-top:1.75rem;border-top:0.0625rem solid var(--color-line);}
.gate_enter_head{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.gate_row{display:flex;gap:var(--space-3);align-items:stretch;}
.gate_row input{flex:1;min-width:0;padding:0.9375rem 1.125rem;background:var(--color-shell);border:0;font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;}
.gate_img{flex:1;min-width:0;object-fit:cover;}

/* ============================================================
   29. GIFT CARD (76:649) — no nav, no footer
   ============================================================ */
.gift_shell{background:var(--color-ivory);padding:5.5rem 0;}
.gift_inner{display:flex;flex-direction:column;align-items:center;gap:1.625rem;text-align:center;}
.gift_brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);}
.gift_wordmark{font-family:var(--font-display);font-weight:500;font-size:1.875rem;letter-spacing:.16em;line-height:normal;}
.gift_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.14em;color:var(--color-muted);line-height:normal;}
.gift_card{
  display:flex;flex-direction:column;width:38.75rem;max-width:100%;height:20.625rem;padding:2.125rem 2.5rem;
  background-image:var(--chrome);border:0.0625rem solid var(--color-ink);border-radius:var(--radius-l);text-align:left;color:var(--color-ink);
}
.gift_card_brand{font-family:var(--font-display);font-weight:500;font-size:1.625rem;letter-spacing:.16em;line-height:normal;}
.gift_amount{font-family:var(--font-display);font-size:3.75rem;letter-spacing:-.02em;line-height:normal;}
.gift_card_meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;white-space:pre;line-height:normal;}
.gift_code{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:1.625rem 2.5rem;background:var(--color-shell);}
.gift_code_head{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.gift_code_value{font-family:var(--font-mono);font-size:1.375rem;letter-spacing:.06em;line-height:normal;}
.gift_qr{width:6.875rem;height:6.875rem;background:var(--color-ink);}
.gift_fine{font-size:0.875rem;line-height:1.7;color:var(--color-muted);max-width:32.5rem;}

@media (max-width:1024px){
  .gate_wrap{flex-direction:column;min-height:0;}
  .gate_panel{padding:3.5rem var(--space-5);}
  .gate_panel h1{font-size:2rem;}
  .gate_img{width:100%;height:20rem;}
  .gift_shell{padding:3.5rem 0;}
  .gift_card{height:auto;gap:2.5rem;}
  .gift_amount{font-size:2.5rem;}
}

/* ============================================================
   30. AUTH — split form + image (77:459 / 77:496 / 77:541 / 77:574)
   ============================================================ */
.auth_wrap{display:flex;align-items:stretch;min-height:43.75rem;}
.auth_side{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 var(--space-9);background:var(--color-ivory);}
.auth_card{display:flex;flex-direction:column;gap:1.375rem;width:100%;}
.auth_card h1{font-size:2.875rem;line-height:1;letter-spacing:-.02em;}
.auth_lead{font-size:1rem;line-height:1.7;color:var(--color-muted);}
.auth_extra{display:flex;align-items:center;gap:var(--space-4);line-height:normal;}
.auth_extra p{font-size:0.875rem;color:var(--color-muted);}
.auth_extra a{font-weight:500;font-size:0.875rem;color:var(--color-ink);}
.button.is-auth{width:100%;padding:var(--space-4) var(--space-6);font-size:0.75rem;letter-spacing:.12em;}
.auth_img{flex:1;min-width:0;object-fit:cover;}

@media (max-width:1024px){
  .auth_wrap{flex-direction:column;min-height:0;}
  .auth_side{padding:3.5rem var(--space-5);}
  .auth_card h1{font-size:2rem;}
  .auth_img{width:100%;height:20rem;}
}

/* ============================================================
   31. ACCOUNT — header, side nav, early access, orders table
        (77:611 / 77:614)
   ============================================================ */
.acchead_shell{background:var(--color-ivory);padding:4.5rem 0 2.25rem;}
.acchead_inner{display:flex;flex-direction:column;gap:0.875rem;}
.acchead_inner h1{font-size:3.125rem;line-height:1;letter-spacing:-.03em;}
.acchead_meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);white-space:pre;line-height:normal;}

.acc_shell{background:var(--color-ivory);padding:5rem 0;}
.acc_inner{display:flex;gap:3.5rem;align-items:flex-start;}
.acc_nav{width:15rem;flex:none;display:flex;flex-direction:column;gap:var(--space-2);}
.acc_nav_head{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.acc_nav a{display:block;padding:0.5625rem 0 0.5625rem 0.875rem;border-left:0.0625rem solid var(--color-line);font-size:0.875rem;color:var(--color-muted);line-height:normal;}
.acc_nav a.is-active{border-left:0.125rem solid var(--color-ink);color:var(--color-ink);font-weight:500;}
.acc_main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2.5rem;}

.early_card{display:flex;gap:1.25rem;align-items:center;padding:var(--space-5) 1.75rem;background:var(--color-shell);}
.early_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;line-height:normal;}
.early_flag{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);}
.early_copy h2{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;}
.early_copy p:last-child{font-size:0.875rem;color:var(--color-muted);}

.orders_head{display:flex;align-items:flex-end;gap:var(--space-5);padding-bottom:1.125rem;border-bottom:0.0625rem solid var(--color-line);}
.orders_head h2{font-size:2.375rem;letter-spacing:-.02em;line-height:normal;}
.orders_count{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);line-height:normal;}
.table{width:100%;border-collapse:collapse;}
.table th{padding:0 0 1.125rem;text-align:left;font-weight:400;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.table td{padding:1.125rem 0;border-bottom:0.0625rem solid var(--color-line);font-size:0.875rem;line-height:normal;}
.table td.is-code{font-family:var(--font-mono);letter-spacing:.04em;}
.table td.is-action{text-align:right;white-space:pre;}
.table td.is-action a{font-weight:500;font-size:0.875rem;}

@media (max-width:1024px){
  .acchead_inner h1{font-size:2.125rem;}
  .acc_shell{padding:var(--space-7) 0;}
  .acc_inner{flex-direction:column;gap:var(--space-6);}
  .acc_nav{width:100%;}
  .early_card{flex-direction:column;align-items:flex-start;}
  .orders_head{flex-wrap:wrap;}
  .table,.table tbody,.table tr,.table td{display:block;width:100%;}
  .table thead{display:none;}
  .table td{border:0;padding:0.125rem 0;}
  .table tr{padding:1.125rem 0;border-bottom:0.0625rem solid var(--color-line);}
  .table td.is-action{text-align:left;}
}

/* ============================================================
   32. ORDER — header, items, totals + blocks (77:732 / 77:739)
   ============================================================ */
.order_shell{background:var(--color-ivory);padding:5rem 0;}
.order_inner{display:flex;gap:3.5rem;align-items:flex-start;}
.order_items{flex:1;min-width:0;display:flex;flex-direction:column;}
.order_line{display:flex;gap:1.375rem;align-items:center;padding:1.375rem 0;border-bottom:0.0625rem solid var(--color-line);}
.order_line > img{width:6.25rem;height:7.5rem;flex:none;object-fit:cover;border-radius:var(--radius-m);}
.order_item{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;align-items:flex-start;line-height:normal;}
.order_item h2{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.01em;}
.order_variant{font-size:0.875rem;color:var(--color-muted);}
.order_item a.is-repair{font-weight:500;font-size:0.75rem;color:var(--color-ink);}
.order_amount{width:5.625rem;flex:none;text-align:right;font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.02em;line-height:normal;}

.order_side{width:25rem;flex:none;display:flex;flex-direction:column;gap:1.375rem;}
.order_totals{display:flex;flex-direction:column;gap:0.875rem;padding:1.75rem;background:var(--color-shell);}
.order_totals .kv dt{font-size:0.875rem;}
.order_totals .kv.is-total{padding-top:0.875rem;}
.order_totals .kv.is-total dt,.order_totals .kv.is-total dd{font-size:1.375rem;}
.order_block{display:flex;flex-direction:column;gap:0.625rem;padding-top:1.25rem;border-top:0.0625rem solid var(--color-line);}
.order_block_head{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.order_block address,.order_block p{font-style:normal;font-size:0.875rem;line-height:1.68;}

@media (max-width:1024px){
  .order_shell{padding:var(--space-7) 0;}
  .order_inner{flex-direction:column;gap:2.5rem;}
  .order_side{width:100%;}
  .order_line{flex-wrap:wrap;}
}

/* ============================================================
   33. ADDRESSES — cards + add form (77:826 / 77:829)
   ============================================================ */
.addr_grid{display:flex;gap:var(--space-5);align-items:flex-start;}
.addr_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;padding:1.625rem 1.75rem;background:var(--color-shell);border:0.0625rem solid transparent;}
.addr_card.is-default{border-color:var(--color-ink);}
.addr_cardhead{display:flex;align-items:center;gap:var(--space-4);}
.addr_kind{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;}
.addr_default{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;}
.addr_card address{font-style:normal;font-size:0.875rem;line-height:1.72;}
.addr_actions{display:flex;gap:1.25rem;align-items:center;padding-top:0.875rem;border-top:0.0625rem solid var(--color-line);font-size:0.75rem;line-height:normal;}
.addr_actions .is-primary{font-weight:500;color:var(--color-ink);}
.addr_actions .is-muted{color:var(--color-muted);}
.addr_form{display:flex;flex-direction:column;gap:1.25rem;padding:var(--space-6);border:0.0625rem solid var(--color-line);}
.addr_form h2{font-size:1.75rem;letter-spacing:-.01em;line-height:normal;}
.button.is-inline{align-self:flex-start;width:auto;padding:var(--space-4) var(--space-6);font-size:0.75rem;letter-spacing:.12em;}

@media (max-width:1024px){
  .addr_grid{flex-direction:column;}
  .addr_form{padding:var(--space-5);}
}

/* fix: <dl> pembungkus baris .kv perlu jarak antar baris (Figma: 1rem di cart, 0.875rem di order) */
.cart_summary dl{display:flex;flex-direction:column;gap:var(--space-4);margin:0;}
.order_totals{gap:0.875rem;}
.order_totals.is-dl{display:flex;flex-direction:column;margin:0;}

/* ============================================================
   34. VARIANT GALLERY chrome — cuma dipakai di variants.html,
   bukan bagian desain LUSTRE. Label mono di atas tiap section,
   meniru label frame di area varian Figma.
   ============================================================ */
.vg_head{background:var(--color-ink);color:var(--color-ivory);padding:var(--space-8) 0 3.5rem;}
.vg_head h1{font-size:3.5rem;line-height:1;letter-spacing:-.03em;color:var(--color-ivory);}
.vg_head p{font-size:1rem;line-height:1.7;color:var(--color-ivory);opacity:.72;max-width:40rem;margin-top:var(--space-4);}
.vg_toc{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:1.75rem;}
.vg_toc a{
  padding:0.4375rem 0.875rem;border:0.0625rem solid rgba(243,239,231,.32);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-ivory);line-height:normal;
}
.vg_toc a:hover{background:var(--color-ivory);color:var(--color-ink);}
.vg_label{
  display:flex;align-items:baseline;gap:0.875rem;padding:1.625rem 0 0.625rem;
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;
}
.vg_label .vg_node{color:var(--color-bordeaux);}
.vg_item{border-top:0.0625rem solid var(--color-line);}

/* ============================================================
   35. VARIAN — ANNOUNCEMENT A/B, MARQUEE A/B
        (79:618 / 79:634 / 79:646 / 79:661)
   ============================================================ */
/* ANNOUNCEMENT — A (drop counter) — 79:618 */
.ann_counter_bar{background-image:var(--chrome);}
.ann_counter{display:flex;align-items:center;gap:1.125rem;padding:0.8125rem 0;line-height:normal;}
.ann_counter_label{font-weight:600;font-size:0.75rem;letter-spacing:.14em;color:var(--color-ink);white-space:nowrap;}
.ann_counter_units{display:flex;align-items:center;gap:0.375rem;}
.ann_unit{
  display:flex;align-items:flex-end;gap:0.125rem;padding:0.1875rem var(--space-2);border-radius:0.25rem;
  background:var(--color-ink);color:var(--color-ivory);font-family:var(--font-mono);line-height:normal;
}
.ann_unit b{font-weight:400;font-size:0.75rem;letter-spacing:.02em;}
.ann_unit span{font-size:0.625rem;letter-spacing:.06em;}
.ann_counter_cta{font-weight:600;font-size:0.75rem;letter-spacing:.14em;color:var(--color-ink);white-space:pre;}

/* ANNOUNCEMENT — B (member split) — 79:634 */
.ann_split{display:flex;align-items:stretch;background:var(--color-ink);}
.ann_split_side{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);padding:0.875rem var(--space-6);line-height:normal;}
.ann_split_side.is-member{background-image:var(--chrome);color:var(--color-ink);padding-left:var(--margin-global);}
.ann_split_side.is-public{color:var(--color-ivory);padding-right:var(--margin-global);}
.ann_split_kind{font-weight:600;font-size:0.625rem;letter-spacing:.14em;white-space:nowrap;}
.ann_split_side.is-public .ann_split_kind{font-weight:500;}
.ann_split_msg{font-weight:500;font-size:0.75rem;white-space:nowrap;}
.ann_split_side.is-public .ann_split_msg{font-weight:400;}
.ann_split_cta{font-weight:600;font-size:0.625rem;letter-spacing:.12em;white-space:pre;}

/* MARQUEE — A (thumbnails inline) — 79:646 */
.mq_thumbs_shell{background:var(--color-ink);overflow:hidden;}
.mq_thumbs{display:flex;align-items:center;gap:1.375rem;padding:1.125rem 0;white-space:nowrap;}
.mq_thumbs p{font-family:var(--font-body);font-weight:900;font-size:1.75rem;letter-spacing:.02em;color:var(--color-ivory);line-height:normal;}
.mq_thumbs .mq_glyph{font-size:1.375rem;color:var(--color-gold);letter-spacing:0;}
.mq_thumbs img{width:3.5rem;height:4.125rem;flex:none;object-fit:cover;border-radius:0.625rem;}

/* MARQUEE — B (two rows, chrome + outline) — 79:661 */
.mq_rows_shell{background:var(--color-ink);padding:1.25rem 0;display:flex;flex-direction:column;gap:0.375rem;overflow:hidden;}
.mq_rows_shell p{
  font-family:var(--font-body);font-weight:900;font-size:2.375rem;letter-spacing:.02em;line-height:normal;white-space:nowrap;
}
.mq_rows_shell .is-chrome{background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* Baris 2 = teks outline. Dev Mode cuma ngasih fill transparan + opacity .5 —
   stroke teks gak ikut ke-emit, jadi dipasang manual pakai -webkit-text-stroke. */
.mq_rows_shell .is-outline{
  color:transparent;-webkit-text-stroke:0.0625rem var(--color-ivory);opacity:.5;padding-left:11.25rem;
}

@media (max-width:1024px){
  .ann_counter{flex-wrap:wrap;gap:var(--space-3);}
  .ann_split{flex-direction:column;}
  .ann_split_side{padding:var(--space-3) var(--margin-global);}
  .mq_thumbs p{font-size:1.25rem;}
  .mq_rows_shell p{font-size:1.5rem;}
  .mq_rows_shell .is-outline{padding-left:5rem;}
}

/* ============================================================
   36. VARIAN — CHROME BAND A/B (79:667 / 79:677)
   ============================================================ */
/* CHROME BAND — A (membership scene) — 79:667 */
.cb_scene{background-image:var(--chrome);padding:var(--space-9) 0;}
.cb_scene_inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center;}
.cb_scene_flag{font-weight:600;font-size:0.75rem;letter-spacing:.16em;color:var(--color-ink);white-space:pre;line-height:normal;}
.cb_scene_inner h2{font-size:3.625rem;line-height:1;letter-spacing:-.03em;max-width:56.25rem;}
.cb_scene_lede{font-size:1rem;line-height:1.65;color:var(--color-ink);max-width:37.5rem;}
.cb_scene_form{display:flex;align-items:center;gap:var(--space-3);width:28.75rem;max-width:100%;}
.cb_scene_form input{
  flex:1;min-width:0;padding:0.9375rem 1.25rem;border:0.0625rem solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-ivory);
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.cb_scene_form input::placeholder{color:var(--color-muted);}
.button.is-pill-sm{padding:0.9375rem 1.875rem;font-size:0.75rem;letter-spacing:.12em;font-weight:500;}

/* CHROME BAND — B (ink ground, chrome type) — 79:677 */
.cb_ink{background:var(--color-ink);padding:5.5rem 0;}
.cb_ink_inner{display:flex;flex-direction:column;align-items:center;gap:1.375rem;text-align:center;}
.cb_ink_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;color:var(--color-ivory);white-space:pre;line-height:normal;}
.cb_ink_inner h2{
  font-size:5.25rem;line-height:.98;letter-spacing:-.04em;
  background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  /* sama seperti hero: stop tengah chrome nyaris seterang ground kalau di ivory,
     tapi di ground ink kontrasnya aman — jadi gak perlu shadow tambahan di sini. */
}
.cb_ink_lede{font-size:1rem;line-height:1.68;color:var(--color-ivory);max-width:38.75rem;}
.cb_ink_actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;padding-top:0.375rem;}
.button.is-ivory{background:var(--color-ivory);color:var(--color-ink);}
.button.is-ivory:hover{background:var(--color-gold);color:var(--color-ink);}

@media (max-width:1024px){
  .cb_scene,.cb_ink{padding:3.5rem 0;}
  .cb_scene_inner h2{font-size:2.125rem;}
  .cb_scene_form{flex-direction:column;align-items:stretch;}
  .cb_ink_inner h2{font-size:2.75rem;}
}

/* ============================================================
   37. VARIAN — HERO A/B (80:618 / 80:658)
   ============================================================ */
/* HERO — A (chapter index) — 80:618 */
.vhero_index{display:flex;align-items:stretch;background:var(--color-ivory);}
.vhero_index_media{position:relative;width:46.25rem;flex:none;height:47.5rem;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 1.75rem 1.75rem;}
.vhero_index_media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vhero_plate{
  position:relative;display:inline-flex;flex-direction:column;gap:var(--space-1);align-self:flex-start;
  padding:0.875rem 1.25rem;border-radius:0.625rem;background:var(--color-ivory);color:var(--color-ink);line-height:normal;
}
.vhero_plate p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;white-space:pre;}
.vhero_plate p:last-child{font-size:0.75rem;white-space:pre;}
.vhero_index_side{flex:1;min-width:0;display:flex;flex-direction:column;padding:4.5rem var(--space-8);}
.vhero_index_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;white-space:pre;line-height:normal;margin-bottom:1.25rem;}
.vhero_index_side h2,.vhero_index_side h1{font-size:3.5rem;line-height:1;letter-spacing:-.03em;max-width:32.5rem;margin-bottom:2.25rem;}
.chapter_row{display:flex;align-items:center;gap:1.25rem;padding:1.125rem 0;border-top:0.0625rem solid var(--color-line);}
.chapter_row:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.chapter_num{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-bordeaux);line-height:normal;}
.chapter_name{font-family:var(--font-display);font-size:1.625rem;letter-spacing:-.01em;line-height:normal;}
.chapter_count{font-size:0.75rem;line-height:normal;}
.chapter_go{font-weight:500;font-size:1rem;line-height:normal;}

/* HERO — B (triptych) — 80:658 */
.vhero_tri{background:var(--color-ink);display:flex;flex-direction:column;}
.vhero_tri_over{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:2.75rem var(--space-8) 1.625rem;text-align:center;}
.vhero_tri_over p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.14em;color:var(--color-ivory);white-space:pre;line-height:normal;}
.vhero_tri_over h2,.vhero_tri_over h1{
  font-size:4.875rem;line-height:1.04;letter-spacing:-.04em;
  background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.vhero_tri_row{display:flex;gap:0.125rem;padding:0 0.125rem 0.125rem;}
.vhero_panel{
  position:relative;flex:1;min-width:0;height:29.375rem;display:flex;flex-direction:column;justify-content:space-between;
  padding:1.375rem;border-radius:0.25rem;overflow:hidden;color:var(--color-ivory);
}
.vhero_panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vhero_panel > *{position:relative;}
.vhero_panel_num{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;line-height:normal;}
.vhero_panel_meta{display:flex;flex-direction:column;gap:0.1875rem;line-height:normal;}
.vhero_panel_meta h3,.vhero_panel_meta h2,.vhero_panel_meta h1{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.01em;color:var(--color-ivory);}
.vhero_panel_meta p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;}
.vhero_tri_cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;padding:1.625rem var(--space-8) 2.75rem;}

@media (max-width:1024px){
  .vhero_index{flex-direction:column;}
  .vhero_index_media{width:100%;height:26.25rem;padding:0 0 1.25rem 1.25rem;}
  .vhero_index_side{padding:2.5rem var(--space-5);}
  .vhero_index_side h2,.vhero_index_side h1{font-size:2.125rem;}
  .vhero_tri_over h2,.vhero_tri_over h1{font-size:2.375rem;}
  .vhero_tri_row{flex-direction:column;}
  .vhero_panel{height:21.25rem;}
}

/* ============================================================
   38. VARIAN — PRESS A/B (80:684 / 80:714)
   ============================================================ */
/* PRESS — A (quote ladder) — 80:684 */
.press_ladder{background:var(--color-shell);padding:var(--space-9) 0;}
.press_ladder_head{display:flex;align-items:center;gap:var(--space-5);padding-bottom:2.75rem;line-height:normal;}
.press_ladder_head p:first-child{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;}
.press_ladder_head p:last-child{font-size:0.75rem;white-space:pre;}
.press_ladder_row{display:flex;align-items:stretch;padding:1.625rem 0;border-top:0.0625rem solid var(--color-line);}
.press_ladder_row:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.press_ladder_row.is-step-1{padding-left:11.25rem;}
.press_ladder_row.is-step-2{padding-left:22.5rem;}
.press_ladder_rule{width:0.125rem;flex:none;background:var(--color-gold);}
.press_ladder_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;padding-left:1.625rem;}
.press_ladder_c blockquote{font-family:var(--font-display);font-size:1.875rem;line-height:1.36;letter-spacing:-.01em;max-width:51.25rem;}
.press_ladder_m{display:flex;align-items:center;gap:0.875rem;line-height:normal;}
.press_ladder_m .is-title{font-weight:600;font-size:0.75rem;letter-spacing:.12em;color:var(--color-bordeaux);}
.press_ladder_m .is-date{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;}

/* PRESS — B (masthead bar + pull quote) — 80:714 */
.press_masthead{display:flex;align-items:center;gap:var(--space-5);padding:1.875rem 0;background:var(--color-shell);}
.press_masthead p{font-family:var(--font-display);font-size:1.1875rem;letter-spacing:.02em;line-height:normal;white-space:nowrap;}
.press_pull{position:relative;overflow:hidden;display:flex;justify-content:center;padding:6.875rem var(--space-8);}
.press_pull > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.press_pull_scrim{
  position:relative;width:55rem;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  padding:3.25rem 3.5rem;border-radius:1rem;background:var(--color-ink);opacity:.92;text-align:center;
}
.press_pull_glyph{font-weight:900;font-size:1rem;color:var(--color-gold);line-height:normal;}
.press_pull_scrim blockquote{font-family:var(--font-display);font-size:2.375rem;line-height:1.32;letter-spacing:-.02em;color:var(--color-ivory);max-width:47.5rem;}
.press_pull_m{display:flex;align-items:center;gap:0.875rem;line-height:normal;}
.press_pull_m .is-title{font-weight:600;font-size:0.75rem;letter-spacing:.12em;color:var(--color-gold);}
.press_pull_m .is-date{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-ivory);}

@media (max-width:1024px){
  .press_ladder{padding:3.5rem 0;}
  .press_ladder_row.is-step-1,.press_ladder_row.is-step-2{padding-left:0;}
  .press_ladder_c blockquote{font-size:1.25rem;}
  .press_masthead{flex-wrap:wrap;gap:var(--space-4) var(--space-5);justify-content:center;}
  .press_masthead p{font-size:0.875rem;}
  .press_pull{padding:3.5rem var(--space-5);}
  .press_pull_scrim{padding:var(--space-6) var(--space-5);}
  .press_pull_scrim blockquote{font-size:1.375rem;}
}

/* ============================================================
   39. VARIAN — THE COLLECTION A/B (80:734 / 80:793)
   ============================================================ */
/* THE COLLECTION — A (chapter rows) — 80:734 */
.tc_rows{background:var(--color-ivory);padding:var(--space-9) 0;}
.tc_rows_head{display:flex;align-items:baseline;gap:var(--space-5);padding-bottom:2.5rem;}
.tc_rows_head h2{font-size:2.875rem;letter-spacing:-.02em;line-height:normal;}
.tc_rows_head p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.1em;white-space:pre;line-height:normal;}
.tc_row{display:flex;align-items:center;gap:var(--space-5);padding:1.375rem 0;border-top:0.0625rem solid var(--color-line);}
.tc_row:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.tc_row_num{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-bordeaux);line-height:normal;}
.tc_row_c{width:18.75rem;flex:none;display:flex;flex-direction:column;gap:0.3125rem;line-height:normal;}
.tc_row_c h3,.tc_row_c h2{font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;}
.tc_row_c p{font-size:0.75rem;}
.tc_row_thumbs{display:flex;gap:var(--space-2);}
.tc_row_thumbs img{width:4.5rem;height:5.75rem;object-fit:cover;border-radius:var(--radius-s);}
.tc_row_count{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;}
.tc_row_go{font-weight:500;font-size:1rem;line-height:normal;}

/* THE COLLECTION — B (scarcity board) — 80:793 */
.tc_board{background:var(--color-shell);padding:5.5rem 0;}
.tc_board_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.tc_board_head{display:flex;align-items:center;gap:var(--space-5);}
.tc_board_head_c{display:flex;flex-direction:column;gap:var(--space-2);line-height:normal;}
.tc_board_head_c p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;color:var(--color-bordeaux);white-space:pre;}
.tc_board_head_c h2{font-size:2.75rem;letter-spacing:-.02em;}
.tc_board_grid{display:flex;gap:1.25rem;align-items:flex-start;}
.tc_board_card{flex:1;min-width:0;display:flex;flex-direction:column;}
.tc_board_media{position:relative;height:23.75rem;border-radius:0.875rem;overflow:hidden;display:flex;justify-content:flex-end;padding:var(--space-3);}
.tc_board_media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tc_board_tag{
  position:relative;align-self:flex-start;display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);
  background:#a4854a;color:var(--color-ink);font-weight:600;font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:nowrap;
}
.tc_board_meta{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-4);}
.tc_board_t{display:flex;align-items:baseline;gap:var(--space-4);}
.tc_board_t h3{font-family:var(--font-display);font-size:1.1875rem;letter-spacing:-.01em;line-height:normal;}
.tc_board_t p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.stock_bar{height:0.25rem;width:100%;border-radius:var(--radius-pill);background:#cec8bf;overflow:hidden;}
.stock_bar span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-bordeaux);}
.stock_bar span.is-retired{background:var(--color-muted);}
.tc_board_note{font-size:0.75rem;line-height:normal;}

@media (max-width:1024px){
  .tc_rows,.tc_board{padding:3.5rem 0;}
  .tc_rows_head{flex-wrap:wrap;}
  .tc_rows_head h2{font-size:2rem;}
  .tc_row{flex-wrap:wrap;}
  .tc_row_c{width:auto;flex:1 1 12.5rem;}
  .tc_row_thumbs{display:none;}
  .tc_board_head{flex-direction:column;align-items:flex-start;}
  .tc_board_head_c h2{font-size:1.875rem;}
  .tc_board_grid{flex-wrap:wrap;gap:var(--space-6) 1.25rem;}
  .tc_board_card{flex:1 1 45%;}
}

.tc_row_c .tc_row_h3{display:block;}

/* ============================================================
   40. VARIAN — LOOKBOOK A (contact sheet) — 81:618
   ============================================================ */
.lb_sheet{background:var(--color-ink);color:var(--color-ivory);padding:5.5rem 0;}
.lb_sheet_head{display:flex;align-items:center;gap:var(--space-5);padding-bottom:2.125rem;}
.lb_sheet_head_c{display:flex;flex-direction:column;gap:var(--space-2);line-height:normal;}
.lb_sheet_head_c p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;white-space:pre;}
.lb_sheet_head_c h2{font-size:2.75rem;letter-spacing:-.02em;color:var(--color-ivory);}
.lb_sheet_credit{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;white-space:pre;line-height:normal;}
.lb_sheet_grid{display:flex;gap:0.625rem;align-items:flex-start;}
.lb_frame{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);}
.lb_frame img{width:100%;height:18.75rem;object-fit:cover;border:0.0625rem solid var(--color-ivory);border-radius:0.1875rem;}
.lb_frame_m{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);line-height:normal;}
.lb_frame_m .is-code{font-size:0.625rem;letter-spacing:.08em;color:var(--color-gold);}
.lb_frame_m .is-look{font-size:0.625rem;letter-spacing:.06em;}
.lb_sheet_rule{height:0.0625rem;background:var(--color-ivory);margin:1.875rem 0 1.125rem;}
.lb_log{display:flex;gap:3.25rem;align-items:flex-start;flex-wrap:wrap;}
.lb_log_f{display:flex;flex-direction:column;gap:0.3125rem;line-height:normal;}
.lb_log_f p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;}
.lb_log_f p:last-child{font-weight:500;font-size:0.875rem;}

@media (max-width:1024px){
  .lb_sheet{padding:3.5rem 0;}
  .lb_sheet_head{flex-wrap:wrap;}
  .lb_sheet_head_c h2{font-size:1.875rem;}
  .lb_sheet_grid{flex-wrap:wrap;gap:var(--space-4) 0.625rem;}
  .lb_frame{flex:1 1 30%;}
  .lb_frame img{height:11.25rem;}
  .lb_log{gap:var(--space-5) var(--space-6);}
}

/* ============================================================
   41. VARIAN — LOOKBOOK B (shoppable stack) — 81:685
   ============================================================ */
.lb_shop{display:flex;align-items:stretch;background:var(--color-ivory);}
.lb_shop_stage{position:relative;width:51.25rem;flex:none;height:45rem;display:flex;flex-direction:column;justify-content:space-between;padding:1.75rem;overflow:hidden;}
.lb_shop_stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lb_hotspot_row{position:relative;display:flex;align-items:center;gap:0.625rem;}
.lb_hotspot_row.is-right{justify-content:flex-end;}
.lb_hotspot{
  display:inline-flex;align-items:center;gap:0.625rem;padding:0.5625rem 0.875rem;border-radius:var(--radius-pill);
  background:var(--color-ivory);font-weight:500;line-height:normal;white-space:pre;
}
.lb_hotspot .is-plus{font-size:0.875rem;color:var(--color-bordeaux);}
.lb_hotspot .is-label{font-size:0.75rem;color:var(--color-ink);}
.lb_shop_panel{flex:1;min-width:0;height:45rem;display:flex;flex-direction:column;padding:var(--space-8) 3.25rem;background:var(--color-shell);overflow:auto;}
.lb_shop_row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:0.0625rem solid var(--color-line);}
.lb_shop_row img{width:3.75rem;height:4.625rem;object-fit:cover;border-radius:var(--radius-s);flex:none;}
.lb_shop_row_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);line-height:normal;}
.lb_shop_row_c h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.lb_shop_row_c .is-price{font-family:var(--font-mono);font-size:0.75rem;color:var(--color-muted);}
.lb_shop_kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;margin-bottom:0.875rem;}
.lb_shop_panel h2{font-size:2.625rem;letter-spacing:-.02em;line-height:normal;margin-bottom:0.625rem;}
.lb_shop_lede{font-size:0.875rem;line-height:1.65;max-width:26.25rem;margin-bottom:1.75rem;}
.lb_item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:0.0625rem solid var(--color-line);}
.lb_item:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.lb_item img{width:3.625rem;height:4.625rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.lb_item_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.lb_item_t{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.lb_item_t h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;line-height:normal;}
.lb_item_tag{
  display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#e5dbc6;
  font-weight:600;font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);line-height:normal;white-space:nowrap;
}
.lb_item_c p:last-child{font-size:0.75rem;line-height:normal;white-space:pre;}
.lb_item_price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.lb_check{
  display:flex;align-items:center;justify-content:center;padding:var(--space-1) 0.375rem;border-radius:0.25rem;
  background:var(--color-ink);color:var(--color-ivory);font-weight:500;font-size:0.75rem;line-height:normal;
}
.lb_total{display:flex;align-items:baseline;gap:var(--space-4);padding-top:var(--space-5);}
.lb_total p:first-child{font-size:0.875rem;line-height:normal;}
.lb_total p:last-child{font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;line-height:normal;}
.lb_shop_actions{display:flex;gap:0.625rem;padding-top:1.125rem;}
.lb_shop_actions .button{flex:1;}
.lb_shop_actions .button.is-outline{flex:none;}

@media (max-width:1024px){
  .lb_shop{flex-direction:column;}
  .lb_shop_stage{width:100%;height:26.25rem;}
  .lb_shop_panel{height:auto;padding:2.5rem var(--space-5);}
  .lb_shop_panel h2{font-size:1.875rem;}
  .lb_shop_actions{flex-direction:column;}
}

/* ============================================================
   42. VARIAN — ATELIER A (process timeline) — 81:751
   ============================================================ */
.at_time{background:var(--color-ivory);padding:var(--space-9) 0;}
.at_time_head{display:flex;flex-direction:column;align-items:center;gap:0.625rem;padding-bottom:2.75rem;text-align:center;line-height:normal;}
.at_time_head p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.14em;color:var(--color-bordeaux);}
.at_time_head h2{font-size:2.75rem;letter-spacing:-.02em;}
.at_time_row{display:flex;align-items:flex-start;}
.at_step{flex:1;min-width:0;display:flex;flex-direction:column;padding-right:1.75rem;}
.at_step:last-child{padding-right:0;}
.at_step img{width:100%;height:13.125rem;object-fit:cover;border-radius:var(--radius-m);}
.at_node_row{display:flex;align-items:center;margin:1.25rem 0 1.125rem;}
.at_node{width:0.6875rem;height:0.6875rem;flex:none;}
.at_track{flex:1;min-width:0;height:0.0625rem;background:var(--color-line);}
.at_week{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;margin-bottom:var(--space-2);}
.at_step h3{font-family:var(--font-display);font-size:1.625rem;letter-spacing:-.01em;line-height:normal;margin-bottom:var(--space-2);}
.at_step p:last-child{font-size:0.875rem;line-height:1.65;}

@media (max-width:1024px){
  .at_time{padding:3.5rem 0;}
  .at_time_head h2{font-size:1.75rem;}
  .at_time_row{flex-wrap:wrap;gap:var(--space-6) 0;}
  .at_step{flex:1 1 45%;padding-right:1.25rem;}
}

/* ============================================================
   43. VARIAN — ATELIER B (spec sheet over macro) — 81:805
   ============================================================ */
.at_spec{display:flex;align-items:stretch;background:var(--color-shell);}
.at_spec_copy{flex:1;min-width:0;min-height:40rem;display:flex;flex-direction:column;padding:5.5rem 3.5rem 5.5rem var(--space-8);}
.at_spec_kicker{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.14em;color:var(--color-bordeaux);line-height:normal;margin-bottom:var(--space-4);}
.at_spec_copy h2{font-size:2.875rem;line-height:1.06;letter-spacing:-.02em;max-width:28.75rem;margin-bottom:var(--space-4);}
.at_spec_lede{font-size:0.875rem;line-height:1.72;max-width:28.75rem;margin-bottom:1.875rem;}
.spec_row{display:flex;align-items:center;gap:var(--space-4);padding:0.8125rem 0;border-top:0.0625rem solid var(--color-line);}
.spec_row:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.spec_row dt{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.spec_row dd{margin:0;font-weight:500;font-size:0.875rem;line-height:normal;}
.at_spec_macro{position:relative;width:37.5rem;flex:none;min-height:40rem;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-5);overflow:hidden;}
.at_spec_macro > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.at_spec_plate{
  position:relative;align-self:flex-start;display:flex;flex-direction:column;gap:0.375rem;
  padding:var(--space-4) 1.25rem;border-radius:0.625rem;background:var(--color-ivory);line-height:normal;
}
.at_spec_plate p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);white-space:pre;}
.at_spec_plate p:last-child{font-weight:500;font-size:0.875rem;}

@media (max-width:1024px){
  .at_spec{flex-direction:column;}
  .at_spec_copy{min-height:0;padding:3.5rem var(--space-5);}
  .at_spec_copy h2{font-size:1.875rem;}
  .at_spec_macro{width:100%;min-height:0;height:26.25rem;}
}

/* ============================================================
   44. VARIAN — NEW ARRIVALS A (editorial rail) — 81:844
   ============================================================ */
.na_rail{background:var(--color-ivory);padding:5.5rem 0;}
.na_rail_head{display:flex;align-items:baseline;gap:var(--space-5);padding-bottom:0.875rem;}
.na_rail_head h2{font-size:2.75rem;letter-spacing:-.02em;line-height:normal;}
.na_rail_nav{display:flex;gap:var(--space-2);}
.na_rail_nav button{
  padding:0.625rem 0.875rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.na_rail_rule{height:0.0625rem;background:var(--color-line);margin:var(--space-3) 0 var(--space-6);}
.na_rail_row{display:flex;gap:var(--gutter);align-items:flex-start;}
.na_card{flex:1;min-width:0;display:flex;flex-direction:column;}
.na_card_n{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);}
.na_card_n .is-num{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-bordeaux);line-height:normal;}
.na_tag{
  display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#e5dbc6;
  font-weight:600;font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);line-height:normal;white-space:nowrap;
}
.na_card img{width:100%;height:25rem;object-fit:cover;border-radius:0.875rem;}
.na_card h3{font-family:var(--font-display);font-size:1.3125rem;letter-spacing:-.01em;line-height:normal;margin:var(--space-4) 0 0.3125rem;}
.na_card_spec{font-size:0.75rem;line-height:normal;margin-bottom:0.625rem;}
.na_card_p{display:flex;align-items:center;gap:var(--space-4);}
.na_card_p .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.na_card_p .is-add{font-weight:600;font-size:0.625rem;letter-spacing:.1em;white-space:pre;line-height:normal;}

@media (max-width:1024px){
  .na_rail{padding:3.5rem 0;}
  .na_rail_head{flex-wrap:wrap;}
  .na_rail_head h2{font-size:1.875rem;}
  .na_rail_row{flex-wrap:wrap;gap:var(--space-6) var(--space-5);}
  .na_card{flex:1 1 45%;}
  .na_card img{height:auto;}
}

/* ============================================================
   45. VARIAN — NEW ARRIVALS B (release calendar) — 81:918
   ============================================================ */
.na_cal{display:flex;align-items:stretch;background:var(--color-ink);color:var(--color-ivory);}
.na_cal_side{width:38.75rem;flex:none;min-height:37.5rem;display:flex;flex-direction:column;padding:5rem var(--space-7) 5rem var(--space-8);}
.na_cal_kicker{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.14em;color:var(--color-gold);line-height:normal;margin-bottom:0.875rem;}
.na_cal_side h2{font-size:2.75rem;line-height:1.06;letter-spacing:-.02em;color:var(--color-ivory);max-width:30rem;margin-bottom:var(--space-3);}
.na_cal_lede{font-size:0.875rem;line-height:1.7;max-width:28.75rem;margin-bottom:1.625rem;}
.na_cal_row{display:flex;align-items:center;gap:1.375rem;padding:var(--space-4) 0;border-top:0.0625rem solid var(--color-ivory);}
.na_cal_row:last-of-type{border-bottom:0.0625rem solid var(--color-ivory);}
.na_cal_date{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;line-height:normal;}
.na_cal_row.is-open .na_cal_date{color:var(--color-gold);}
.na_cal_name{font-weight:500;font-size:0.875rem;line-height:normal;}
.na_cal_st{display:inline-flex;padding:var(--space-1) 0.625rem;border-radius:var(--radius-pill);background:#312d33;color:var(--color-ivory);font-weight:600;font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:nowrap;}
.na_cal_st.is-open{background:#a4854a;color:var(--color-ink);}
.na_cal_next{position:relative;flex:1;min-width:0;min-height:37.5rem;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-6);overflow:hidden;}
.na_cal_next > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.na_cal_tagrow{position:relative;display:flex;justify-content:flex-end;}
.na_cal_tag{display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#a4854a;color:var(--color-ink);font-weight:600;font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:pre;}
.na_cal_card{position:relative;display:flex;flex-direction:column;gap:0.875rem;padding:var(--space-5) 1.625rem;border-radius:0.875rem;background:var(--color-ivory);color:var(--color-ink);}
.na_cal_card h3{font-family:var(--font-display);font-size:1.625rem;letter-spacing:-.01em;line-height:normal;}
.na_cal_card p{font-size:0.875rem;line-height:1.6;}
.na_cal_form{display:flex;gap:0.625rem;}
.na_cal_form input{
  flex:1;min-width:0;padding:0.875rem 1.125rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.na_cal_form input::placeholder{color:var(--color-muted);}

@media (max-width:1024px){
  .na_cal{flex-direction:column;}
  .na_cal_side{width:100%;min-height:0;padding:3.5rem var(--space-5);}
  .na_cal_side h2{font-size:1.875rem;}
  .na_cal_next{min-height:0;padding:var(--space-5);}
  .na_cal_form{flex-direction:column;}
}

/* ============================================================
   46. VARIAN — CTA A/B (82:618 / 82:642)
   ============================================================ */
/* CTA — A (waiting list ticket) — 82:618 */
.cta_ticket_shell{background:var(--color-shell);padding:var(--space-9) 0;}
.cta_ticket{
  display:flex;align-items:stretch;width:68.75rem;max-width:100%;margin:0 auto;overflow:hidden;
  background:var(--color-ivory);border:0.0625rem solid var(--color-line);border-radius:var(--radius-l);
}
.cta_stub{
  width:14.375rem;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;
  padding:2.75rem 2.25rem;background-image:var(--chrome);color:var(--color-ink);line-height:normal;text-align:center;
}
.cta_stub .is-glyph{font-weight:900;font-size:1.375rem;}
.cta_stub .is-kind{font-weight:600;font-size:0.75rem;letter-spacing:.14em;}
.cta_stub .is-no{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;}
.cta_ticket_body{flex:1;min-width:0;display:flex;flex-direction:column;padding:2.75rem;}
.cta_ticket_kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);white-space:pre;line-height:normal;margin-bottom:var(--space-3);}
.cta_ticket_body h2{font-size:2.375rem;line-height:1.18;letter-spacing:-.02em;max-width:37.5rem;margin-bottom:0.625rem;}
.cta_ticket_lede{font-size:0.875rem;line-height:1.68;max-width:37.5rem;margin-bottom:1.625rem;}
.cta_ticket_form{display:flex;gap:0.625rem;}
.cta_ticket_form input{
  flex:1;min-width:0;padding:0.9375rem 1.25rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.cta_ticket_form input::placeholder{color:var(--color-muted);}
.cta_ticket_meta{display:flex;gap:1.25rem;flex-wrap:wrap;padding-top:0.875rem;font-size:0.75rem;line-height:normal;white-space:pre;}

/* CTA — B (fitting room booking) — 82:642 */
.cta_fit{display:flex;align-items:stretch;background:var(--color-ivory);}
.cta_fit_copy{flex:1;min-width:0;min-height:32.5rem;display:flex;flex-direction:column;padding:5.5rem 3.5rem 5.5rem var(--space-8);background:var(--color-ink);color:var(--color-ivory);}
.cta_fit_kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-gold);white-space:pre;line-height:normal;margin-bottom:var(--space-4);}
.cta_fit_copy h2{font-size:2.875rem;line-height:1.06;letter-spacing:-.03em;color:var(--color-ivory);max-width:27.5rem;margin-bottom:0.875rem;}
.cta_fit_lede{font-size:0.875rem;line-height:1.7;max-width:27.5rem;margin-bottom:1.75rem;}
.cta_slots{display:flex;gap:0.625rem;flex-wrap:wrap;margin-bottom:var(--space-5);}
.cta_slot{
  display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) 1.125rem;border:0.0625rem solid var(--color-ivory);border-radius:0.625rem;
  background:#2d292f;color:var(--color-ivory);cursor:pointer;text-align:left;line-height:normal;
}
.cta_slot.is-taken{background:#201c22;opacity:.6;}
.cta_slot .is-day{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;}
.cta_slot .is-time{font-weight:500;font-size:1rem;}
.cta_fit_actions{display:flex;gap:0.625rem;flex-wrap:wrap;}
.button.is-ivory-outline{border-color:var(--color-ivory);color:var(--color-ivory);}
.button.is-ivory-outline:hover{background:var(--color-ivory);color:var(--color-ink);}
.cta_fit_studio{position:relative;width:35rem;flex:none;min-height:32.5rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:1.625rem;overflow:hidden;}
.cta_fit_studio > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cta_fit_addr{
  position:relative;display:flex;flex-direction:column;gap:0.3125rem;padding:var(--space-4) 1.25rem;border-radius:0.625rem;
  background:var(--color-ivory);color:var(--color-ink);line-height:normal;
}
.cta_fit_addr p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);}
.cta_fit_addr p:last-child{font-weight:500;font-size:0.875rem;}

@media (max-width:1024px){
  .cta_ticket_shell{padding:3.5rem 0;}
  .cta_ticket{flex-direction:column;}
  .cta_stub{width:100%;padding:1.75rem;}
  .cta_ticket_body{padding:1.75rem;}
  .cta_ticket_body h2{font-size:1.625rem;}
  .cta_ticket_form{flex-direction:column;}
  .cta_fit{flex-direction:column;}
  .cta_fit_copy{min-height:0;padding:3.5rem var(--space-5);}
  .cta_fit_copy h2{font-size:1.875rem;}
  .cta_fit_studio{width:100%;min-height:0;height:20rem;}
}

/* ============================================================
   47. VARIAN — FOOTER A (index + stock ticker) — 82:671
   ============================================================ */
.vf_index{background:var(--color-ink);color:var(--color-ivory);}
.vf_ticker{background-image:var(--chrome);overflow:hidden;}
.vf_ticker_track{display:flex;gap:2.125rem;align-items:center;padding:0.875rem 0;white-space:nowrap;}
.vf_ticker_track p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-ink);white-space:pre;line-height:normal;}
.vf_index_cols{display:flex;align-items:flex-start;gap:var(--space-5);padding:4.5rem 0 3.5rem;}
.vf_index_brand{width:23.75rem;flex:none;display:flex;flex-direction:column;}
.vf_index_wordmark{
  font-family:var(--font-display);font-size:3rem;letter-spacing:.02em;line-height:normal;
  background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:0.875rem;
}
.vf_index_blurb{font-size:0.875rem;line-height:1.7;max-width:20rem;margin-bottom:1.375rem;}
.vf_social{display:flex;gap:var(--space-2);}
.vf_social a{
  padding:0.5625rem 0.8125rem;border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-ivory);line-height:normal;
}
.vf_social a:hover{background:var(--color-ivory);color:var(--color-ink);}
.vf_index_col{width:12.5rem;flex:none;display:flex;flex-direction:column;}
.vf_index_colhead{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-gold);line-height:normal;margin-bottom:var(--space-4);}
.vf_index_col a{display:block;padding:0.625rem 0;border-top:0.0625rem solid var(--color-ivory);font-size:0.875rem;line-height:normal;}
.vf_index_col a:last-child{border-bottom:0.0625rem solid var(--color-ivory);}
.vf_index_col a:hover{color:var(--color-gold);}
.vf_index_bottom{
  display:flex;align-items:center;gap:var(--space-5);padding:1.375rem 0;border-top:0.0625rem solid var(--color-ivory);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;
}
.vf_index_bottom p{white-space:pre;}

@media (max-width:1024px){
  .vf_index_cols{flex-wrap:wrap;gap:var(--space-6) var(--space-5);padding:var(--space-7) 0 var(--space-6);}
  .vf_index_brand{width:100%;}
  .vf_index_wordmark{font-size:2.125rem;}
  .vf_index_col{width:calc(50% - 0.75rem);}
  .vf_index_bottom{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
}

/* ============================================================
   48. VARIAN — FOOTER B (editorial sitemap) — 82:749
   ============================================================ */
.vf_ed{background:var(--color-shell);}
.vf_ed_band{display:flex;align-items:stretch;}
.vf_ed_band > img{width:26.25rem;height:15rem;flex:none;object-fit:cover;}
.vf_ed_signup{flex:1;min-width:0;min-height:15rem;display:flex;flex-direction:column;justify-content:center;padding:3.5rem;background:var(--color-ivory);}
.vf_ed_t{display:flex;align-items:baseline;gap:var(--space-5);}
.vf_ed_t h2{font-size:2.125rem;letter-spacing:-.02em;line-height:normal;}
.vf_ed_t p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.vf_ed_lede{font-size:0.875rem;line-height:normal;margin:0.625rem 0 1.25rem;}
.vf_ed_form{display:flex;gap:0.625rem;}
.vf_ed_form input{
  flex:1;min-width:0;padding:0.875rem 1.25rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.vf_ed_form input::placeholder{color:var(--color-muted);}
.vf_ed_map{padding:3.5rem 0 2.5rem;}
.vf_ed_row{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;padding:1.25rem 0;border-top:0.0625rem solid var(--color-line);}
.vf_ed_row:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.vf_ed_kind{width:8.75rem;flex:none;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;}
.vf_ed_row a{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.01em;line-height:normal;white-space:nowrap;}
.vf_ed_bottom{display:flex;align-items:center;gap:var(--space-5);padding:1.625rem 0 2.125rem;}
.vf_ed_bottom .is-wordmark{font-family:var(--font-display);font-size:2rem;letter-spacing:.02em;line-height:normal;}
.vf_ed_bottom .is-fine{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;white-space:pre;line-height:normal;}

@media (max-width:1024px){
  .vf_ed_band{flex-direction:column;}
  .vf_ed_band > img{width:100%;height:13.75rem;}
  .vf_ed_signup{padding:var(--space-6) var(--space-5);min-height:0;}
  .vf_ed_t{flex-wrap:wrap;gap:var(--space-2);}
  .vf_ed_t h2{font-size:1.5rem;}
  .vf_ed_form{flex-direction:column;}
  .vf_ed_row{gap:var(--space-4) var(--space-5);}
  .vf_ed_kind{width:100%;}
  .vf_ed_bottom{flex-direction:column;align-items:flex-start;gap:var(--space-3);}
}

/* ============================================================
   49. VARIAN — GIFT CARD A (card front) — 82:797
   ============================================================ */
.gc_front{background:var(--color-ivory);padding:5.5rem 0;}
.gc_front_inner{display:flex;gap:3.5rem;align-items:center;}
.gc_front_wrap{width:32.5rem;flex:none;display:flex;flex-direction:column;gap:0.875rem;}
.gc_front_card{
  display:flex;flex-direction:column;justify-content:space-between;height:20rem;padding:2.125rem;border-radius:var(--radius-l);
  background-image:var(--chrome);color:var(--color-ink);
}
.gc_front_t{display:flex;align-items:center;gap:var(--space-4);}
.gc_front_t .is-wordmark{font-family:var(--font-display);font-size:1.625rem;letter-spacing:.04em;line-height:normal;}
.gc_front_t .is-glyph{font-weight:900;font-size:1rem;line-height:normal;}
.gc_front_b{display:flex;flex-direction:column;gap:var(--space-2);}
.gc_front_amount{font-family:var(--font-display);font-size:3.625rem;letter-spacing:-.03em;line-height:normal;}
.gc_front_r{display:flex;align-items:baseline;gap:var(--space-4);font-family:var(--font-mono);line-height:normal;}
.gc_front_r .is-kind{font-size:0.625rem;letter-spacing:.1em;white-space:pre;}
.gc_front_r .is-code{font-size:0.75rem;letter-spacing:.04em;}
.gc_designs{display:flex;gap:0.625rem;}
.gc_design{flex:1;min-width:0;height:3rem;border-radius:var(--radius-s);border:0;cursor:pointer;}
.gc_design.is-chrome{background-image:var(--chrome);border:0.09375rem solid var(--color-ink);}
.gc_design.is-ink{background:var(--color-ink);}
.gc_design.is-bordeaux{background:#6e2438;}
.gc_design.is-shell{background:var(--color-shell);}
.gc_form{flex:1;min-width:0;display:flex;flex-direction:column;}
.gc_form_kicker{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.14em;color:var(--color-bordeaux);line-height:normal;margin-bottom:var(--space-3);}
.gc_form h2{font-size:2.375rem;letter-spacing:-.02em;line-height:normal;margin-bottom:0.625rem;}
.gc_form_lede{font-size:0.875rem;line-height:1.68;max-width:28.75rem;margin-bottom:1.625rem;}
.gc_form_label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;margin-bottom:0.625rem;}
.gc_denoms{display:flex;gap:var(--space-2);margin-bottom:1.25rem;}
.gc_denom{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0.875rem 1.25rem;
  border:0.0625rem solid var(--color-line);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.gc_denom.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.gc_fields{display:flex;flex-direction:column;gap:0.625rem;margin-bottom:1.125rem;}
.gc_fields input,.gc_fields textarea{
  width:100%;padding:0.875rem 1.25rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-m);background:none;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.gc_fields input::placeholder,.gc_fields textarea::placeholder{color:var(--color-muted);}

@media (max-width:1024px){
  .gc_front{padding:3.5rem 0;}
  .gc_front_inner{flex-direction:column;gap:var(--space-6);}
  .gc_front_wrap{width:100%;}
  .gc_front_amount{font-size:2.5rem;}
  .gc_form h2{font-size:1.625rem;}
  .gc_denoms{flex-wrap:wrap;}
  .gc_denom{flex:1 1 40%;}
}

/* ============================================================
   50. VARIAN — GIFT CARD B (delivery scheduler) — 82:845
   ============================================================ */
.gc_sched{background:var(--color-ink);color:var(--color-ivory);padding:5.5rem 0;}
.gc_sched_head{display:flex;flex-direction:column;align-items:center;text-align:center;}
.gc_sched_kicker{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.14em;color:var(--color-gold);line-height:normal;margin-bottom:0.875rem;}
.gc_sched_head h2{font-size:2.875rem;line-height:1.12;letter-spacing:-.03em;color:var(--color-ivory);max-width:47.5rem;margin-bottom:0.625rem;}
.gc_sched_lede{font-size:0.875rem;line-height:1.68;max-width:37.5rem;margin-bottom:2.125rem;}
.gc_panel{
  display:flex;align-items:stretch;width:67.5rem;max-width:100%;margin:0 auto;
  background:#242026;border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-l);overflow:hidden;
}
.gc_preview{width:27.5rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);padding:2.125rem;}
.gc_mini{
  display:flex;flex-direction:column;justify-content:space-between;height:11.875rem;padding:var(--space-5);border-radius:0.875rem;
  background-image:var(--chrome);color:var(--color-ink);
}
.gc_mini .is-wordmark{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.04em;line-height:normal;}
.gc_mini_b{display:flex;flex-direction:column;gap:var(--space-1);}
.gc_mini_amount{font-family:var(--font-display);font-size:2.375rem;letter-spacing:-.02em;line-height:normal;}
.gc_mini_for{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;white-space:pre;line-height:normal;}
.gc_preview_note{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em;line-height:normal;}
.gc_sched_form{flex:1;min-width:0;display:flex;flex-direction:column;padding:2.125rem;}
.gc_sched_label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;margin-bottom:var(--space-3);}
.gc_dates{display:flex;gap:var(--space-2);margin-bottom:1.25rem;}
.gc_date{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0.1875rem;padding:var(--space-3) var(--space-4);border-radius:0.625rem;
  border:0;background:#29252a;color:var(--color-ivory);cursor:pointer;line-height:normal;
}
.gc_date.is-active{background-image:var(--chrome);color:var(--color-ink);}
.gc_date .is-d{font-weight:500;font-size:0.875rem;}
.gc_date .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;}
.gc_delivery{display:flex;gap:var(--space-2);margin-bottom:1.25rem;}
.gc_deliv{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-4);
  border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ivory);line-height:normal;
}
.gc_deliv.is-active{background:#2d292f;}
.gc_sched_note{
  width:100%;padding:var(--space-4) 1.25rem 2.125rem;border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-m);background:none;resize:vertical;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ivory);line-height:normal;margin-bottom:1.125rem;
}
.gc_sched_note::placeholder{color:var(--color-ivory);opacity:.8;}

@media (max-width:1024px){
  .gc_sched{padding:3.5rem 0;}
  .gc_sched_head h2{font-size:1.875rem;}
  .gc_panel{flex-direction:column;}
  .gc_preview{width:100%;padding:var(--space-5);}
  .gc_sched_form{padding:var(--space-5);}
  .gc_dates,.gc_delivery{flex-wrap:wrap;}
  .gc_date,.gc_deliv{flex:1 1 45%;}
}

/* ============================================================
   51. VARIAN — MAIN PRODUCT A (fit ladder) — 83:618
   ============================================================ */
.mp_fit{display:flex;align-items:stretch;background:var(--color-ivory);}
.mp_fit_gallery{width:47.5rem;flex:none;min-height:53.75rem;display:flex;gap:var(--space-2);padding:var(--space-2);}
.mp_fit_thumbs{width:4.625rem;flex:none;display:flex;flex-direction:column;gap:var(--space-2);}
.mp_fit_thumbs img{width:4.625rem;height:5.75rem;object-fit:cover;border-radius:var(--radius-s);}
.mp_fit_main{position:relative;flex:1;min-width:0;border-radius:0.875rem;overflow:hidden;padding:1.25rem;display:flex;align-items:flex-start;}
.mp_fit_main > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mp_fit_tag{
  position:relative;display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#a4854a;
  color:var(--color-ink);font-weight:600;font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:nowrap;
}
.mp_fit_buy{flex:1;min-width:0;min-height:53.75rem;display:flex;flex-direction:column;padding:var(--space-8) 3.5rem;}
.mp_fit_kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);white-space:pre;line-height:normal;margin-bottom:var(--space-3);}
.mp_fit_buy h2{font-size:2.5rem;letter-spacing:-.02em;line-height:normal;margin-bottom:var(--space-2);}
.mp_fit_p{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;line-height:normal;margin-bottom:1.625rem;}
.mp_fit_p .is-price{font-family:var(--font-mono);font-size:1.125rem;letter-spacing:.02em;}
.mp_fit_p .is-cloth{font-size:0.75rem;}
.mp_fit_rule{height:0.0625rem;background:var(--color-line);}
.mp_fit_fh{display:flex;align-items:center;gap:var(--space-4);padding:1.375rem 0 var(--space-3);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.mp_fit_fh .is-guide{font-family:var(--font-body);font-weight:600;letter-spacing:.1em;white-space:pre;}
.mp_sizes{display:flex;gap:var(--space-2);margin-bottom:1.375rem;}
.mp_size{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3) 0.875rem;
  border:0.0625rem solid var(--color-line);border-radius:0.625rem;background:none;cursor:pointer;color:var(--color-ink);line-height:normal;
}
.mp_size.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.mp_size .is-uk{font-family:var(--font-body);font-weight:500;font-size:0.875rem;}
.mp_size .is-left{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;}
.mp_size.is-gone{opacity:.5;cursor:not-allowed;}
.mp_ladder_label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;white-space:pre;line-height:normal;margin-bottom:var(--space-3);}
.mp_measure{display:flex;align-items:center;gap:1.125rem;flex-wrap:wrap;padding:var(--space-3) 0;border-top:0.0625rem solid var(--color-line);line-height:normal;}
.mp_measure:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.mp_measure .is-name{width:6rem;flex:none;font-weight:500;font-size:0.875rem;}
.mp_measure .is-val{width:4.375rem;flex:none;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;color:var(--color-bordeaux);}
.mp_measure .is-note{font-size:0.75rem;}
.mp_model{display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1.125rem;border-radius:var(--radius-m);background:var(--color-shell);margin:1.125rem 0 1.25rem;}
.mp_model img{width:2.5rem;height:3.125rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.mp_model p{font-size:0.75rem;line-height:1.58;}
.mp_fit_actions{display:flex;gap:0.625rem;flex-wrap:wrap;}
.mp_fit_actions .button:first-child{flex:1;}

@media (max-width:1024px){
  .mp_fit{flex-direction:column;}
  .mp_fit_gallery{width:100%;min-height:0;}
  .mp_fit_main{min-height:26.25rem;}
  .mp_fit_buy{min-height:0;padding:2.5rem var(--space-5);}
  .mp_fit_buy h2{font-size:1.75rem;}
  .mp_sizes{flex-wrap:wrap;}
  .mp_size{flex:1 1 30%;}
}

/* ============================================================
   52. VARIAN — MAIN PRODUCT B (unit certificate) — 83:696
   ============================================================ */
.mp_cert{display:flex;align-items:stretch;background:var(--color-ink);color:var(--color-ivory);}
.mp_cert_panel{width:35rem;flex:none;min-height:55rem;display:flex;flex-direction:column;padding:var(--space-8) var(--space-7) var(--space-8) 3.5rem;}
.mp_cert_card{display:flex;flex-direction:column;padding:var(--space-5) 1.625rem;border-radius:0.875rem;background-image:var(--chrome);color:var(--color-ink);}
.mp_cert_t{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);}
.mp_cert_t .is-kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;}
.mp_cert_t .is-glyph{font-weight:900;font-size:0.875rem;}
.mp_cert_n{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:0.875rem;line-height:normal;}
.mp_cert_n .is-no{font-family:var(--font-display);font-size:2.75rem;letter-spacing:-.02em;}
.mp_cert_n .is-of{font-size:0.875rem;}
/* Run bar 40 segmen — 28 terisi, 12 sisa. Dibangun dari daftar span, bukan 40 div manual. */
.run_bar{display:flex;gap:0.125rem;margin-bottom:0.625rem;}
.run_bar span{width:0.375rem;height:0.875rem;border-radius:0.0625rem;background:rgba(23,23,28,.85);}
.run_bar span.is-left{background:rgba(23,23,28,.2);}
.mp_cert_note{font-size:0.75rem;line-height:normal;}
.mp_cert_kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-gold);white-space:pre;line-height:normal;margin:var(--space-5) 0 var(--space-3);}
.mp_cert_panel h2,.mp_cert_panel h1{font-size:2.375rem;letter-spacing:-.02em;line-height:normal;color:var(--color-ivory);margin-bottom:0.625rem;}
.mp_cert_lede{font-size:0.875rem;line-height:1.68;max-width:26.25rem;margin-bottom:var(--space-5);}
.mp_prov{display:flex;align-items:center;gap:var(--space-4);padding:0.6875rem 0;border-top:0.0625rem solid var(--color-ivory);line-height:normal;}
.mp_prov:last-of-type{border-bottom:0.0625rem solid var(--color-ivory);}
.mp_prov dt{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;}
.mp_prov dd{margin:0;font-weight:500;font-size:0.75rem;}
.mp_cert_sizes{display:flex;gap:var(--space-2);margin:1.375rem 0 1.125rem;}
.mp_cert_size{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3) 0.875rem;
  border:0.0625rem solid var(--color-ivory);border-radius:0.625rem;background:none;cursor:pointer;color:var(--color-ivory);line-height:normal;
}
.mp_cert_size.is-active{background:var(--color-ivory);border-color:var(--color-ivory);color:var(--color-ink);}
.mp_cert_size .is-uk{font-weight:500;font-size:0.875rem;}
.mp_cert_size .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;}
.mp_cert_buy{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.mp_cert_price{font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;line-height:normal;color:var(--color-ivory);}
.mp_cert_gallery{flex:1;min-width:0;min-height:55rem;display:flex;flex-direction:column;gap:0.375rem;padding:0.375rem 0.375rem 0.375rem 0;}
.mp_cert_main{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:0.625rem;}
.mp_cert_strip{display:flex;gap:0.375rem;}
.mp_cert_strip img{flex:1;min-width:0;height:14.375rem;object-fit:cover;border-radius:0.625rem;}

@media (max-width:1024px){
  .mp_cert{flex-direction:column;}
  .mp_cert_panel{width:100%;min-height:0;padding:2.5rem var(--space-5);}
  .mp_cert_panel h2,.mp_cert_panel h1{font-size:1.75rem;}
  .mp_cert_n .is-no{font-size:2rem;}
  .mp_cert_sizes{flex-wrap:wrap;}
  .mp_cert_size{flex:1 1 30%;}
  .mp_cert_gallery{min-height:0;padding:0.375rem;}
  .mp_cert_main{height:26.25rem;flex:none;}
  .mp_cert_strip img{height:8.75rem;}
}

/* ============================================================
   53. VARIAN — MAIN PRODUCT C (styled in context) — 83:814
   ============================================================ */
.mp_ctx{background:var(--color-shell);display:flex;flex-direction:column;}
.mp_ctx_stage{display:flex;align-items:stretch;}
.mp_ctx_main{position:relative;flex:1;min-width:0;height:35rem;display:flex;flex-direction:column;justify-content:flex-end;padding:1.375rem;overflow:hidden;}
.mp_ctx_main > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mp_ctx_cap{
  position:relative;align-self:flex-start;display:inline-flex;padding:var(--space-2) 0.875rem;border-radius:var(--radius-pill);
  background:var(--color-ivory);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;
  color:var(--color-ink);line-height:normal;white-space:pre;
}
.mp_ctx_side{width:26.875rem;flex:none;height:35rem;object-fit:cover;}
.mp_ctx_bar{display:flex;align-items:center;gap:2.75rem;padding:2.25rem 0;background:var(--color-ivory);}
.mp_ctx_c{width:21.25rem;flex:none;display:flex;flex-direction:column;gap:0.375rem;line-height:normal;}
.mp_ctx_c .is-kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);white-space:pre;}
.mp_ctx_c h2{font-size:1.875rem;letter-spacing:-.02em;}
.mp_ctx_c .is-cloth{font-size:0.75rem;white-space:pre;}
.mp_ctx_s{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.625rem;}
.mp_ctx_s > p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.mp_ctx_b{width:15rem;flex:none;display:flex;flex-direction:column;gap:var(--space-2);}
.mp_ctx_strip{display:flex;align-items:center;gap:1.25rem;padding:2.125rem 0 2.75rem;}
.mp_ctx_strip > p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:nowrap;}
.mp_ctx_item{
  flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 1.125rem var(--space-3) var(--space-3);
  border-radius:var(--radius-m);background:var(--color-ivory);
}
.mp_ctx_item img{width:3rem;height:3.75rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.mp_ctx_item_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.1875rem;line-height:normal;}
.mp_ctx_item_c h3{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em;}
.mp_ctx_item_c p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.mp_ctx_add{font-weight:500;font-size:1rem;line-height:normal;}

@media (max-width:1024px){
  .mp_ctx_stage{flex-direction:column;}
  .mp_ctx_main{height:23.75rem;}
  .mp_ctx_side{width:100%;height:20rem;}
  .mp_ctx_bar{flex-direction:column;align-items:stretch;gap:var(--space-5);padding:1.75rem 0;}
  .mp_ctx_c,.mp_ctx_b{width:100%;}
  .mp_ctx_strip{flex-direction:column;align-items:stretch;gap:var(--space-3);padding:var(--space-5) 0 var(--space-6);}
}

/* ============================================================
   54. VARIAN — ATC A (size + fit confidence) — 83:869
   ============================================================ */
.atc_conf_shell{background:var(--color-ivory);padding:var(--space-8) 0;}
.atc_box{
  width:40rem;max-width:100%;margin:0 auto;display:flex;flex-direction:column;
  padding:2.125rem 2.25rem;border-radius:var(--radius-l);background:var(--color-shell);
}
.atc_box_t{display:flex;align-items:center;gap:var(--space-4);margin-bottom:0.875rem;}
.atc_box_t p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.atc_box_tag{
  display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#e5dbc6;
  font-weight:600;font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);line-height:normal;white-space:nowrap;
}
.atc_conf{display:flex;flex-direction:column;gap:var(--space-3);padding:1.125rem 1.25rem;border-radius:var(--radius-m);background:var(--color-ivory);margin:1.125rem 0;}
.atc_conf_r{display:flex;align-items:center;gap:var(--space-4);line-height:normal;}
.atc_conf_r p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;}
.atc_conf_r p:last-child{font-size:0.75rem;}
/* Skala true-to-size 5 segmen; segmen ke-3 aktif = mayoritas bilang true to size. */
.fit_scale{display:flex;}
.fit_scale span{flex:1;min-width:0;padding-right:0.1875rem;}
.fit_scale span::before{content:"";display:block;width:0.625rem;height:0.375rem;border-radius:var(--radius-pill);background:#ddd9d2;}
.fit_scale span.is-on::before{background:var(--color-bordeaux);}
.fit_labels{display:flex;align-items:center;gap:var(--space-4);font-size:0.75rem;line-height:normal;}
.fit_labels .is-mid{font-weight:500;color:var(--color-bordeaux);}
.atc_qty_row{display:flex;align-items:center;gap:0.875rem;margin-bottom:var(--space-4);}
.atc_qty{display:flex;align-items:center;gap:1.375rem;padding:var(--space-3) 0.875rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);line-height:normal;}
.atc_qty button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:0.875rem;color:var(--color-ink);}
.atc_qty output{font-family:var(--font-body);font-weight:500;font-size:0.875rem;}
.atc_price{font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;line-height:normal;}
.atc_reassure{display:flex;gap:1.125rem;flex-wrap:wrap;padding-top:var(--space-4);font-size:0.75rem;line-height:normal;white-space:pre;}

@media (max-width:1024px){
  .atc_conf_shell{padding:2.5rem 0;}
  .atc_box{padding:var(--space-5);}
  .atc_box .mp_sizes{flex-wrap:wrap;}
  .atc_box .mp_size{flex:1 1 30%;}
}

/* ============================================================
   55. VARIAN — ATC B (made-to-order queue) — 83:936
   ============================================================ */
.atc_q_shell{background:var(--color-ink);color:var(--color-ivory);padding:var(--space-8) 0;}
.atc_q_box{
  width:42.5rem;max-width:100%;margin:0 auto;display:flex;flex-direction:column;
  padding:2.125rem 2.25rem;border-radius:var(--radius-l);background:#242026;border:0.0625rem solid var(--color-ivory);
}
.atc_q_t{display:flex;align-items:center;gap:var(--space-4);margin-bottom:0.875rem;line-height:normal;}
.atc_q_t .is-kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-gold);}
.atc_q_t .is-when{font-size:0.75rem;}
.atc_q_box h2{font-size:1.875rem;letter-spacing:-.02em;line-height:normal;color:var(--color-ivory);margin-bottom:var(--space-2);}
.atc_q_lede{font-size:0.875rem;line-height:1.65;max-width:35rem;margin-bottom:var(--space-5);}
.atc_q_prog{display:flex;flex-direction:column;gap:var(--space-3);padding:1.25rem 1.375rem;border-radius:var(--radius-m);background:#242026;margin-bottom:1.25rem;}
.atc_q_prog_r{display:flex;align-items:baseline;gap:var(--space-4);line-height:normal;}
.atc_q_prog_r .is-count{font-weight:500;font-size:1rem;}
.atc_q_prog_r .is-more{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-gold);}
/* Progres komit 8 segmen — 6 terisi emas, 2 sisa pudar. */
.commit_bar{display:flex;gap:0.3125rem;}
.commit_bar span{width:0.625rem;height:0.5rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);}
.commit_bar span.is-on{background:#c7a866;}
.atc_q_prog p:last-child{font-size:0.75rem;line-height:1.58;}
.atc_q_label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;margin-bottom:var(--space-3);}
.atc_q_sizes{display:flex;gap:var(--space-2);margin-bottom:1.25rem;}
.atc_q_eta{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:1.375rem;}
.atc_q_f{flex:1;min-width:7.5rem;display:flex;flex-direction:column;gap:0.3125rem;line-height:normal;}
.atc_q_f p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;}
.atc_q_f p:last-child{font-weight:500;font-size:0.875rem;}
.atc_q_actions{display:flex;gap:0.625rem;flex-wrap:wrap;}
.atc_q_actions .button:first-child{flex:1;}

@media (max-width:1024px){
  .atc_q_shell{padding:2.5rem 0;}
  .atc_q_box{padding:var(--space-5);}
  .atc_q_box h2{font-size:1.375rem;}
  .atc_q_sizes{flex-wrap:wrap;}
  .atc_q_sizes .mp_cert_size{flex:1 1 30%;}
}

/* ============================================================
   56. VARIAN — REVIEW A (fit report) — 85:618
   ============================================================ */
.fr_shell{background:var(--color-ivory);padding:5.5rem 0;}
.fr_head{display:flex;align-items:baseline;gap:var(--space-5);padding-bottom:1.875rem;}
.fr_head h2{font-size:2.75rem;letter-spacing:-.02em;line-height:normal;}
.fr_head p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;white-space:pre;line-height:normal;}
.fr_top{display:flex;gap:var(--space-5);align-items:flex-start;padding-bottom:2.25rem;}
.fr_card{flex:1;min-width:0;display:flex;flex-direction:column;padding:1.625rem;border-radius:0.875rem;background:var(--color-shell);}
.fr_card_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);line-height:normal;margin-bottom:var(--space-3);}
.fr_card h3{font-family:var(--font-display);font-size:1.75rem;letter-spacing:-.01em;line-height:normal;margin-bottom:var(--space-1);}
.fr_card_sub{font-size:0.75rem;line-height:normal;margin-bottom:var(--space-4);}
/* Histogram sizing 5 kolom — bar tengah bordeaux = mayoritas ambil ukuran biasa. */
.fr_hist{display:flex;gap:0.375rem;align-items:flex-end;margin-bottom:var(--space-2);}
.fr_hist span{flex:1;min-width:0;}
.fr_hist span::before{content:"";display:block;width:0.625rem;border-radius:0.25rem;background:#cac4bc;}
.fr_hist span:nth-child(1)::before{height:1.125rem;}
.fr_hist span:nth-child(2)::before{height:2.125rem;}
.fr_hist span:nth-child(3)::before{height:4.625rem;background:var(--color-bordeaux);}
.fr_hist span:nth-child(4)::before{height:1.625rem;}
.fr_hist span:nth-child(5)::before{height:0.875rem;}
.fr_hist_l{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;}
.fr_m{display:flex;flex-direction:column;gap:0.4375rem;padding-bottom:0.875rem;}
.fr_m_t{display:flex;align-items:baseline;gap:var(--space-4);line-height:normal;}
.fr_m_t p:first-child{font-weight:500;font-size:0.75rem;}
.fr_m_t p:last-child{font-size:0.75rem;}
.fr_track{height:0.25rem;width:100%;border-radius:var(--radius-pill);background:#d2ccc3;overflow:hidden;}
.fr_track span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-bordeaux);}
.fr_owner{width:20rem;flex:none;display:flex;flex-direction:column;padding:1.625rem;border-radius:0.875rem;background:var(--color-ink);color:var(--color-ivory);}
.fr_owner .fr_card_kind{color:var(--color-gold);}
.fr_owner_r{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-top:0.0625rem solid var(--color-ivory);line-height:normal;}
.fr_owner_r:last-of-type{border-bottom:0.0625rem solid var(--color-ivory);}
.fr_owner_r p:first-child{font-size:0.75rem;}
.fr_owner_r p:last-child{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.fr_review{display:flex;gap:var(--space-5);align-items:flex-start;padding:1.625rem 0;border-top:0.0625rem solid var(--color-line);}
.fr_review:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.fr_review > img{width:5.5rem;height:6.875rem;flex:none;object-fit:cover;border-radius:0.625rem;}
.fr_review_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.625rem;}
.fr_review_t{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;line-height:normal;}
.fr_review_t .is-who{font-weight:600;font-size:0.875rem;}
.fr_review_t .is-spec{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;white-space:pre;}
.fr_verified{
  display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#e5dbc6;
  font-weight:600;font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);line-height:normal;white-space:nowrap;
}
.fr_review_c blockquote{font-family:var(--font-display);font-size:1.1875rem;line-height:1.5;letter-spacing:-.01em;}

@media (max-width:1024px){
  .fr_shell{padding:3.5rem 0;}
  .fr_head{flex-wrap:wrap;}
  .fr_head h2{font-size:1.875rem;}
  .fr_top{flex-wrap:wrap;}
  .fr_card{flex:1 1 100%;}
  .fr_owner{width:100%;}
  .fr_review{flex-wrap:wrap;}
  .fr_review_c blockquote{font-size:1rem;}
}

/* ============================================================
   57. VARIAN — REVIEW B (worn-by wall) — 85:737
   ============================================================ */
.wb_shell{background:var(--color-shell);padding:5.5rem 0;}
.wb_head{display:flex;align-items:center;gap:var(--space-5);padding-bottom:var(--space-3);}
.wb_head_c{display:flex;flex-direction:column;gap:var(--space-2);line-height:normal;}
.wb_head_c p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.14em;color:var(--color-bordeaux);}
.wb_head_c h2{font-size:2.625rem;letter-spacing:-.02em;}
.wb_filter{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.wb_filter button{
  padding:0.625rem var(--space-4);border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.wb_filter button.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.wb_wall{display:flex;gap:var(--space-4);align-items:flex-start;margin-top:1.875rem;}
.wb_card{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:0.875rem;overflow:hidden;background:var(--color-ivory);}
.wb_media{position:relative;height:18.75rem;display:flex;justify-content:flex-end;align-items:flex-start;padding:var(--space-3);}
.wb_media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wb_tag{
  position:relative;display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#a4854a;
  color:var(--color-ink);font-weight:600;font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:nowrap;
}
.wb_c{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) 1.125rem 1.125rem;}
.wb_c h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;line-height:normal;}
.wb_c .is-spec{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-bordeaux);line-height:normal;}
.wb_c blockquote{font-size:0.75rem;line-height:1.58;}
.wb_foot{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:1.875rem;}
.wb_foot p{font-size:0.75rem;line-height:normal;}

@media (max-width:1024px){
  .wb_shell{padding:3.5rem 0;}
  .wb_head{flex-wrap:wrap;}
  .wb_head_c h2{font-size:1.75rem;}
  .wb_wall{flex-wrap:wrap;gap:var(--space-4);}
  .wb_card{flex:1 1 45%;}
  .wb_media{height:13.75rem;}
}

/* ============================================================
   58. VARIAN — RELATED A (outfit builder) — 85:796
   ============================================================ */
.ob_shell{background:var(--color-ivory);padding:5rem 0;}
.ob_inner{display:flex;gap:2.5rem;align-items:flex-start;}
.ob_build{flex:1;min-width:0;display:flex;flex-direction:column;}
.ob_kicker{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;color:var(--color-bordeaux);line-height:normal;margin-bottom:var(--space-3);}
.ob_build h2{font-size:2.5rem;letter-spacing:-.02em;line-height:normal;margin-bottom:0.625rem;}
.ob_lede{font-size:0.875rem;line-height:1.65;max-width:32.5rem;margin-bottom:1.75rem;}
.ob_layer{display:flex;align-items:center;gap:1.125rem;flex-wrap:wrap;padding:var(--space-4) 0;border-top:0.0625rem solid var(--color-line);}
.ob_layer:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.ob_layer_kind{width:3.5rem;flex:none;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.ob_layer img{width:3.375rem;height:4.25rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.ob_layer_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);line-height:normal;}
.ob_layer_c h3{font-family:var(--font-display);font-size:1.1875rem;letter-spacing:-.01em;}
.ob_layer_c p{font-size:0.75rem;white-space:pre;}
.ob_swap{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:0.625rem;letter-spacing:.1em;color:var(--color-ink);}
.ob_price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.ob_toggle{
  display:flex;align-items:center;justify-content:center;padding:var(--space-1) 0.375rem;border-radius:0.3125rem;border:0;cursor:pointer;
  background:var(--color-ink);color:var(--color-ivory);font-family:var(--font-body);font-weight:500;font-size:0.75rem;line-height:normal;
}
.ob_sum{display:flex;flex-direction:column;gap:0.875rem;padding:1.375rem var(--space-5);border-radius:0.875rem;background:var(--color-shell);margin-top:1.375rem;}
.ob_sum_r{display:flex;align-items:baseline;gap:var(--space-4);}
.ob_sum_c{display:flex;flex-direction:column;gap:var(--space-1);line-height:normal;}
.ob_sum_c p:first-child{font-weight:500;font-size:0.875rem;}
.ob_sum_c p:last-child{font-size:0.75rem;}
.ob_sum_t{display:flex;flex-direction:column;align-items:flex-end;gap:0.125rem;line-height:normal;}
.ob_sum_t p:first-child{font-family:var(--font-display);font-size:2rem;letter-spacing:-.01em;}
.ob_sum_t p:last-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;}
.ob_preview{position:relative;width:31.25rem;flex:none;height:45rem;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem;}
.ob_preview > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ob_preview_cap{
  position:relative;align-self:flex-start;display:inline-flex;padding:0.625rem var(--space-4);border-radius:var(--radius-pill);
  background:var(--color-ivory);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;
  color:var(--color-ink);line-height:normal;white-space:pre;
}

@media (max-width:1024px){
  .ob_shell{padding:3.5rem 0;}
  .ob_inner{flex-direction:column;gap:var(--space-6);}
  .ob_build h2{font-size:1.75rem;}
  .ob_preview{width:100%;height:26.25rem;}
}

/* ============================================================
   59. VARIAN — RELATED B (cut from the same roll) — 85:854
   ============================================================ */
/* Outfit builder + same-roll rows — the port arranges these; the static mock drew each
   variant by hand. */
.rl_row{display:flex;gap:var(--space-5);align-items:flex-start;flex-wrap:wrap;}
.rl_item{flex:1 1 12.5rem;min-width:0;display:flex;flex-direction:column;gap:0.625rem;}
.rl_item img{width:100%;height:17.5rem;object-fit:cover;border-radius:var(--radius-l);}
.rl_item h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;line-height:1.2;}
.rl_item .is-price{font-family:var(--font-mono);font-size:0.75rem;color:var(--color-muted);}
.rl_foot{flex:1 1 100%;padding-top:var(--space-2);}
.rl_cuts{display:flex;flex-direction:column;}
.rl_cut{display:flex;align-items:center;gap:1.25rem;padding:1.125rem 0;border-top:0.0625rem solid var(--color-line);}
.rl_cut .is-left img{width:7.5rem;height:9.25rem;object-fit:cover;border-radius:var(--radius-m);}
.rl_cut_c{display:flex;flex-direction:column;gap:0.375rem;min-width:0;line-height:normal;}
.rl_cut_c h3{font-family:var(--font-display);font-size:1.3125rem;letter-spacing:-.01em;}
.rl_cut_c .is-cut{font-size:0.875rem;color:var(--color-muted);}
.rl_cut .is-price{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.02em;}
@media (max-width:1024px){
  .rl_item{flex:1 1 45%;}
  .rl_cut{flex-wrap:wrap;}
}

.rl_shell{background:var(--color-ink);color:var(--color-ivory);padding:5.5rem 0;}
.rl_head{display:flex;align-items:center;gap:var(--space-5);padding-bottom:0.875rem;}
.rl_head_c{display:flex;flex-direction:column;gap:var(--space-2);line-height:normal;}
.rl_head_c p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-gold);white-space:pre;}
.rl_head_c h2{font-size:2.625rem;letter-spacing:-.02em;color:var(--color-ivory);}
.rl_head_note{font-size:0.875rem;line-height:1.65;max-width:21.25rem;}
/* Meteran gulungan — 31 dari 42 meter kepakai. */
.rl_meter{display:flex;flex-direction:column;gap:var(--space-3);padding:1.25rem var(--space-5);border-radius:0.875rem;background:#242026;margin:1.625rem 0;}
.rl_meter_r{display:flex;align-items:baseline;gap:var(--space-4);line-height:normal;}
.rl_meter_r .is-cut{font-weight:500;font-size:0.875rem;}
.rl_meter_r .is-left{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-gold);white-space:pre;}
.rl_track{height:0.5rem;width:100%;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);overflow:hidden;}
.rl_track span{display:block;height:100%;border-radius:var(--radius-pill);background:#c7a866;}
.rl_grid{display:flex;gap:1.125rem;align-items:flex-start;}
.rl_card{flex:1;min-width:0;display:flex;flex-direction:column;}
.rl_media{position:relative;height:18.75rem;border-radius:0.875rem;overflow:hidden;display:flex;justify-content:flex-end;align-items:flex-start;padding:var(--space-3);}
.rl_media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rl_tag{
  position:relative;display:inline-flex;padding:0.3125rem 0.6875rem;border-radius:var(--radius-pill);background:#a4854a;
  color:var(--color-ink);font-weight:600;font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:nowrap;
}
.rl_card h3{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.01em;line-height:normal;color:var(--color-ivory);margin:var(--space-4) 0 0.375rem;}
.rl_per{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;margin-bottom:0.625rem;}
.rl_p{display:flex;align-items:center;gap:var(--space-4);line-height:normal;}
.rl_p .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.rl_p .is-view{font-weight:600;font-size:0.625rem;letter-spacing:.1em;white-space:pre;}

@media (max-width:1024px){
  .rl_shell{padding:3.5rem 0;}
  .rl_head{flex-wrap:wrap;}
  .rl_head_c h2{font-size:1.75rem;}
  .rl_grid{flex-wrap:wrap;gap:var(--space-5) 1.125rem;}
  .rl_card{flex:1 1 45%;}
  .rl_media{height:13.75rem;}
}

/* ============================================================
   60. VARIAN — STICKY ATC A (light rail) — 85:924
   ============================================================ */
.sa_shell{background:var(--color-shell);padding:3.375rem 0;display:flex;flex-direction:column;align-items:center;}
.sa_bar{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;width:82rem;max-width:calc(100% - 3rem);
  padding:var(--space-4) 1.625rem;border:0.0625rem solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-ivory);
}
.sa_bar > img{width:3rem;height:3.625rem;flex:none;object-fit:cover;border-radius:0.625rem;}
.sa_c{display:flex;flex-direction:column;gap:0.1875rem;line-height:normal;}
.sa_c h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.sa_c p{font-size:0.75rem;white-space:pre;}
.sa_stock{display:flex;align-items:center;gap:0.625rem;}
/* Dot stok — Dev Mode ngasih satu SVG gabungan; dibangun ulang jadi span biar
   jumlah dot bisa nyambung ke data stok, bukan gambar mati. */
.stock_dots{display:flex;gap:0.3125rem;}
.stock_dots span{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--color-bordeaux);}
.stock_dots span.is-off{background:var(--color-line);}
.sa_stock p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-bordeaux);line-height:normal;white-space:nowrap;}
.sa_sizes{display:flex;gap:0.375rem;}
.sa_size{
  padding:0.5625rem var(--space-3);border:0.0625rem solid var(--color-line);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.sa_size.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.sa_price{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;line-height:normal;}
.sa_note{font-size:0.75rem;text-align:center;max-width:56.25rem;margin-top:var(--space-3);line-height:normal;}

@media (max-width:1024px){
  .sa_shell{padding:var(--space-6) 0;}
  .sa_bar{border-radius:var(--radius-l);padding:var(--space-4);gap:var(--space-3);}
  .sa_stock,.sa_sizes{width:100%;}
}

/* ============================================================
   61. VARIAN — STICKY ATC B (dark, unit + queue) — 85:963
   ============================================================ */
.sb_shell{background:var(--color-shell);padding:3.375rem 0;display:flex;flex-direction:column;align-items:center;}
.sb_bar{
  width:82rem;max-width:calc(100% - 3rem);display:flex;flex-direction:column;
  background:var(--color-ink);border-radius:1.25rem;overflow:hidden;color:var(--color-ivory);
}
/* Rail chrome di atas bar = progres run itu sendiri (28 dari 40 unit ≈ 98.9%). */
.sb_run{height:0.25rem;width:100%;background:rgba(255,255,255,.12);}
.sb_run span{display:block;height:100%;background-image:var(--chrome);}
.sb_row{display:flex;align-items:center;gap:1.375rem;flex-wrap:wrap;padding:var(--space-4) 1.625rem;}
.sb_row > img{width:3rem;height:3.625rem;flex:none;object-fit:cover;border-radius:0.625rem;}
.sb_c{display:flex;flex-direction:column;gap:0.1875rem;line-height:normal;}
.sb_c h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;color:var(--color-ivory);}
.sb_c_r{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;}
.sb_c_r .is-unit{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-gold);}
.sb_c_r .is-cut{font-size:0.75rem;white-space:pre;}
.sb_count{display:flex;align-items:center;gap:0.375rem;font-family:var(--font-mono);line-height:normal;}
.sb_count > p{font-size:0.625rem;letter-spacing:.08em;white-space:nowrap;}
.sb_unit{display:flex;align-items:flex-end;gap:0.125rem;padding:var(--space-1) var(--space-2);border-radius:0.3125rem;background:#2d292f;}
.sb_unit b{font-weight:400;font-size:0.75rem;letter-spacing:.02em;}
.sb_unit span{font-size:0.625rem;letter-spacing:.06em;}
.sb_sizes{display:flex;gap:0.375rem;}
.sb_size{
  padding:0.5625rem var(--space-3);border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-pill);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ivory);line-height:normal;
}
.sb_size.is-active{background:var(--color-ivory);color:var(--color-ink);}
.sb_price{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;line-height:normal;color:var(--color-ivory);}
.sb_note{font-size:0.75rem;text-align:center;max-width:56.25rem;margin-top:var(--space-3);line-height:normal;}

@media (max-width:1024px){
  .sb_shell{padding:var(--space-6) 0;}
  .sb_row{gap:var(--space-3);padding:var(--space-4);}
  .sb_count,.sb_sizes{width:100%;}
}

/* ============================================================
   62. VARIAN — FILTER A (availability bar) — 86:618
   ============================================================ */
.fa_shell{background:var(--color-ivory);}
.fa_bar{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;padding:1.25rem 0;}
.fa_bar_shell{background:var(--color-shell);}
.fa_bar > p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.fa_chip{
  display:inline-flex;align-items:center;gap:var(--space-2);padding:0.5625rem 0.9375rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);
  background:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.fa_chip.is-on{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.fa_chip .is-x{font-size:0.75rem;}
.fa_sort{
  display:inline-flex;align-items:center;gap:0.625rem;padding:0.625rem var(--space-4);border:0.0625rem solid var(--color-line);border-radius:var(--radius-pill);
  background:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.fa_strip{display:flex;align-items:center;gap:1.625rem;flex-wrap:wrap;padding:var(--space-4) 0;}
.fa_strip_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);white-space:pre;line-height:normal;}
.fa_avail{flex:1;min-width:10rem;display:flex;flex-direction:column;gap:0.375rem;}
.fa_avail_t{display:flex;align-items:baseline;gap:var(--space-4);line-height:normal;}
.fa_avail_t p:first-child{font-weight:500;font-size:0.75rem;}
.fa_avail_t p:last-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;}
.fa_track{height:0.25rem;width:100%;border-radius:var(--radius-pill);background:#ddd9d2;overflow:hidden;}
.fa_track span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-bordeaux);}
.fa_results{display:flex;align-items:center;gap:var(--space-4);padding:1.25rem 0 1.75rem;border-top:0.0625rem solid var(--color-line);}
.fa_results p{font-size:0.875rem;line-height:normal;white-space:pre;}
.fa_results a{font-weight:600;font-size:0.625rem;letter-spacing:.1em;white-space:pre;}
.fa_grid{display:flex;gap:1.125rem;align-items:flex-start;padding-bottom:3.5rem;}
.fa_card{flex:1;min-width:0;display:flex;flex-direction:column;}
.fa_card img{width:100%;height:15rem;object-fit:cover;border-radius:var(--radius-m);margin-bottom:var(--space-3);}
.fa_card_t{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:0.3125rem;line-height:normal;}
.fa_card_t h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.fa_card_t p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.fa_card_left{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-bordeaux);white-space:pre;line-height:normal;}

@media (max-width:1024px){
  .fa_strip{gap:var(--space-4);}
  .fa_grid{flex-wrap:wrap;gap:var(--space-5) 1.125rem;padding-bottom:var(--space-6);}
  .fa_card{flex:1 1 45%;}
  .fa_card img{height:11.25rem;}
}

/* ============================================================
   63. VARIAN — FILTER B (drawer, size-first) — 86:710
   ============================================================ */
.fb_shell{display:flex;align-items:stretch;background:var(--color-shell);}
.fb_drawer{width:25rem;flex:none;min-height:53.75rem;display:flex;flex-direction:column;padding:var(--space-6);background:var(--color-ivory);overflow:auto;}
.fb_head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:1.25rem;}
.fb_head h2{font-size:1.75rem;letter-spacing:-.01em;line-height:normal;}
.fb_close{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:1.375rem;color:var(--color-ink);line-height:normal;}
.fb_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);line-height:normal;margin-bottom:0.625rem;}
.fb_sizes{display:flex;gap:0.375rem;margin-bottom:0.625rem;}
.fb_size{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0.1875rem;padding:0.6875rem 0.625rem;
  border:0.0625rem solid var(--color-border);border-radius:0.625rem;background:none;cursor:pointer;color:var(--color-ink);line-height:normal;
}
.fb_size.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.fb_size .is-uk{font-family:var(--font-body);font-weight:500;font-size:0.75rem;}
.fb_size .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;}
.fb_toggle{display:flex;align-items:center;gap:var(--space-4);padding:0.8125rem var(--space-4);border-radius:0.625rem;background:var(--color-shell);margin-bottom:var(--space-5);}
.fb_toggle p{font-weight:500;font-size:0.75rem;line-height:normal;}
/* Switch — Dev Mode ngasih SVG; dibangun ulang jadi elemen biar state-nya nyata. */
.fb_switch{width:2.375rem;height:1.375rem;border-radius:var(--radius-pill);border:0;background:var(--color-ink);cursor:pointer;position:relative;flex:none;}
.fb_switch::after{content:"";position:absolute;top:0.1875rem;right:0.1875rem;width:1rem;height:1rem;border-radius:50%;background:var(--color-ivory);}
.fb_group{padding-top:var(--space-4);border-top:0.0625rem solid var(--color-border);}
.fb_gh{display:flex;align-items:center;gap:var(--space-4);margin-bottom:0.625rem;}
.fb_gh p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.fb_gh .is-toggle{font-weight:500;font-size:0.875rem;line-height:normal;}
.fb_opt{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;}
.fb_box{
  width:1rem;height:1rem;flex:none;display:flex;align-items:center;justify-content:center;border-radius:0.25rem;
  border:0.0625rem solid var(--color-border);background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:0.625rem;color:var(--color-ink);line-height:1;
}
.fb_box.is-on{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-ivory);}
.fb_opt .is-label{font-size:0.875rem;line-height:normal;}
.fb_opt .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;}
.fb_actions{display:flex;gap:0.625rem;padding-top:var(--space-4);border-top:0.0625rem solid var(--color-border);margin-top:0.875rem;}
.fb_actions .button:last-child{flex:1;}
.fb_grid{flex:1;min-width:0;min-height:53.75rem;display:flex;flex-direction:column;gap:1.125rem;padding:2.75rem var(--space-8) 2.75rem 2.75rem;}
.fb_grid_h{display:flex;align-items:center;gap:var(--space-4);}
.fb_grid_h h2{font-size:2rem;letter-spacing:-.02em;line-height:normal;white-space:pre;}
.fb_grid_h p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;}
.fb_row{display:flex;gap:1.125rem;align-items:flex-start;}
.fb_card{flex:1;min-width:0;display:flex;flex-direction:column;}
.fb_card img{width:100%;height:16.875rem;object-fit:cover;border-radius:var(--radius-m);margin-bottom:var(--space-3);}
.fb_card_t{display:flex;align-items:baseline;gap:var(--space-4);line-height:normal;}
.fb_card_t h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.fb_card_t p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}

@media (max-width:1024px){
  .fb_shell{flex-direction:column;}
  .fb_drawer{width:100%;min-height:0;}
  .fb_grid{min-height:0;padding:var(--space-6) var(--space-5);}
  .fb_grid_h h2{font-size:1.5rem;}
  .fb_row{flex-wrap:wrap;gap:var(--space-5) 1.125rem;}
  .fb_card{flex:1 1 45%;}
  .fb_card img{height:12.5rem;}
}

/* ============================================================
   64. VARIAN — HERO E (type-first, stock ledger) — 118:683
   ============================================================ */
.he_shell{background:var(--color-shell);padding:5.5rem 0 0;}
.he_top{display:flex;align-items:baseline;gap:var(--space-5);margin-bottom:2.125rem;line-height:normal;}
.he_top p:first-child{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;color:var(--color-bordeaux);}
.he_top p:last-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;white-space:pre;}
.he_shell h1{font-size:7.375rem;line-height:.96;letter-spacing:-.05em;margin-bottom:1.875rem;}
.he_sub{display:flex;align-items:center;gap:var(--space-7);flex-wrap:wrap;margin-bottom:2.75rem;}
.he_sub p{font-size:1rem;line-height:1.7;max-width:32.5rem;}
.he_actions{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.he_ledger{display:flex;align-items:flex-start;}
.he_piece{flex:1;min-width:0;display:flex;flex-direction:column;padding:1.625rem 1.75rem 2.125rem;border-left:0.0625rem solid var(--color-line);}
.he_piece:first-child{border-left:0;padding-left:0;}
.he_piece_r{display:flex;align-items:center;gap:0.875rem;margin-bottom:0.875rem;}
.he_piece_r img{width:3.375rem;height:4.25rem;flex:none;object-fit:cover;border-radius:0.375rem;}
.he_piece_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);line-height:normal;}
.he_piece_c h3,.he_piece_c h2{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.he_piece_c p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.he_track{height:0.1875rem;width:100%;border-radius:var(--radius-pill);background:#cec8bf;overflow:hidden;margin-bottom:0.625rem;}
.he_track span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-bordeaux);}
.he_track span.is-retired{background:var(--color-muted);}
.he_left{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-bordeaux);line-height:normal;}
.he_left.is-retired{color:var(--color-muted);}

@media (max-width:1024px){
  .he_shell{padding:3.5rem 0 0;}
  .he_shell h1{font-size:2.75rem;}
  .he_sub{gap:var(--space-5);}
  .he_ledger{flex-wrap:wrap;}
  .he_piece{flex:1 1 45%;padding:1.25rem;border-left:0;border-top:0.0625rem solid var(--color-line);}
  .he_piece:first-child{padding-left:1.25rem;}
}

/* ============================================================
   65. VARIAN — MEGA MENU A (chapter index) — 86:890
   ============================================================ */
.mm_shell{background:var(--color-shell);}
.mm_nav{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;padding:1.375rem 0;background:var(--color-ivory);}
.mm_nav_wordmark{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.04em;line-height:normal;}
.mm_nav a{font-size:0.75rem;letter-spacing:.04em;line-height:normal;}
.mm_nav a.is-on{font-weight:600;}
.mm_nav .is-util{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;}
.mm_panel_shell{background:var(--color-ivory);}
.mm_panel{display:flex;gap:2.5rem;align-items:flex-start;padding:2.75rem 0;}
.mm_index{width:26.25rem;flex:none;display:flex;flex-direction:column;}
.mm_index_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);white-space:pre;line-height:normal;margin-bottom:var(--space-4);}
.mm_ch{display:flex;align-items:center;gap:var(--space-4);padding:0.875rem 0;border-top:0.0625rem solid var(--color-line);}
.mm_ch:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.mm_ch .is-num{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;}
.mm_ch.is-on .is-num{color:var(--color-bordeaux);}
.mm_ch h3{font-family:var(--font-display);font-size:1.625rem;letter-spacing:-.01em;line-height:normal;}
.mm_ch .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;}
.mm_quick{display:flex;flex-direction:column;gap:0.5625rem;padding-top:1.125rem;font-size:0.875rem;line-height:normal;white-space:pre;}
.mm_tiles{flex:1;min-width:0;display:flex;gap:var(--space-4);align-items:flex-start;}
.mm_tile{position:relative;flex:1;min-width:0;height:20rem;border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:1.125rem;}
.mm_tile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mm_tile_cap{
  position:relative;display:flex;flex-direction:column;gap:var(--space-1);width:100%;padding:var(--space-3) var(--space-4);border-radius:0.625rem;
  background:var(--color-ivory);color:var(--color-ink);line-height:normal;
}
.mm_tile_cap h4{font-family:var(--font-display);font-size:1.1875rem;letter-spacing:-.01em;}
.mm_tile_cap p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;white-space:pre;}
.mm_foot{background-image:var(--chrome);}
.mm_foot_r{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-4) 0;font-weight:600;font-size:0.75rem;letter-spacing:.12em;color:var(--color-ink);line-height:normal;white-space:pre;}

@media (max-width:1024px){
  .mm_panel{flex-direction:column;gap:var(--space-6);padding:var(--space-6) 0;}
  .mm_index{width:100%;}
  .mm_tiles{flex-wrap:wrap;}
  .mm_tile{flex:1 1 45%;height:13.75rem;}
}

/* ============================================================
   66. VARIAN — MEGA MENU B (shop by silhouette) — 86:955
   ============================================================ */
.mmb_shell{background:var(--color-shell);}
.mmb_nav_shell{background:var(--color-ink);}
.mmb_nav{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;padding:1.375rem 0;color:var(--color-ivory);}
.mmb_nav_wordmark{
  font-family:var(--font-display);font-size:1.5rem;letter-spacing:.04em;line-height:normal;
  background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mmb_nav a{font-size:0.75rem;letter-spacing:.04em;line-height:normal;color:var(--color-ivory);}
.mmb_nav a.is-on{font-weight:600;}
.mmb_nav .is-util{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;}
.mmb_panel{background:var(--color-ink);color:var(--color-ivory);padding:2.5rem 0;}
.mmb_h{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;padding-bottom:1.625rem;line-height:normal;}
.mmb_h p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-gold);}
.mmb_h p:last-child{font-size:0.75rem;}
.mmb_row{display:flex;gap:0.875rem;align-items:flex-start;}
.mmb_sil{flex:1;min-width:0;display:flex;flex-direction:column;}
.mmb_sil img{width:100%;height:15rem;object-fit:cover;border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-m);margin-bottom:0.875rem;}
.mmb_sil h3{font-family:var(--font-display);font-size:1.3125rem;letter-spacing:-.01em;line-height:normal;color:var(--color-ivory);margin-bottom:0.375rem;}
.mmb_sil p{font-size:0.75rem;line-height:1.58;margin-bottom:var(--space-2);}
.mmb_sil .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-gold);}
.mmb_f{display:flex;align-items:center;gap:2.125rem;flex-wrap:wrap;padding-top:1.25rem;margin-top:1.75rem;border-top:0.0625rem solid var(--color-ivory);}
.mmb_f a{font-size:0.875rem;line-height:normal;color:var(--color-ivory);}
.mmb_f .is-cta{font-weight:600;font-size:0.625rem;letter-spacing:.1em;color:var(--color-gold);white-space:pre;}

@media (max-width:1024px){
  .mmb_row{flex-wrap:wrap;gap:var(--space-5) 0.875rem;}
  .mmb_sil{flex:1 1 45%;}
  .mmb_sil img{height:10.625rem;}
  .mmb_f{gap:var(--space-4) var(--space-5);}
}

/* ============================================================
   67. VARIAN — SEARCH B (empty state, archive-aware) — 86:1091
   ============================================================ */
.se_shell{background:var(--color-shell);padding:3.75rem 0;display:flex;justify-content:center;}
.se_modal{width:57.5rem;max-width:calc(100% - 3rem);display:flex;flex-direction:column;background:var(--color-ink);color:var(--color-ivory);border-radius:1.25rem;overflow:hidden;}
.se_field{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) 1.75rem;border-bottom:0.0625rem solid var(--color-ivory);}
.se_field .is-glyph{font-size:1.25rem;line-height:normal;}
.se_field input{
  flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--font-display);font-size:1.625rem;letter-spacing:-.01em;color:var(--color-ivory);line-height:normal;
}
.se_field input:focus{outline:none;}
.se_field button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:1.25rem;color:var(--color-ivory);}
.se_empty{display:flex;flex-direction:column;padding:2.25rem 2.5rem;}
.se_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-gold);line-height:normal;margin-bottom:var(--space-3);}
.se_empty h2{font-size:2rem;letter-spacing:-.02em;line-height:normal;color:var(--color-ivory);margin-bottom:0.625rem;}
.se_lede{font-size:0.875rem;line-height:1.68;max-width:40rem;margin-bottom:var(--space-5);}
.se_arch{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.25rem;border-radius:0.875rem;background:#262228;margin-bottom:var(--space-5);}
.se_arch > img{width:5rem;height:6.25rem;flex:none;object-fit:cover;border-radius:0.625rem;}
.se_arch_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.4375rem;line-height:normal;}
.se_arch_c h3{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.01em;color:var(--color-ivory);white-space:pre;}
.se_arch_c .is-meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;white-space:pre;}
.se_arch_r{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;}
.se_arch_r p{font-size:0.75rem;}
/* Track "5 of 8 minta dibuka lagi" — Dev Mode ngasih SVG; dibangun ulang jadi bar. */
.se_ask{width:5.25rem;height:0.4375rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);overflow:hidden;}
.se_ask span{display:block;height:100%;border-radius:var(--radius-pill);background:#c7a866;}
.se_alt_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;padding-top:1.25rem;border-top:0.0625rem solid var(--color-ivory);margin-bottom:0.875rem;}
.se_alts{display:flex;gap:0.875rem;align-items:stretch;}
.se_alt{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3);border-radius:var(--radius-m);background:#262228;}
.se_alt img{width:2.625rem;height:3.25rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.se_alt_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.1875rem;line-height:normal;}
.se_alt_c h4{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em;color:var(--color-ivory);}
.se_alt_c p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.02em;}

@media (max-width:1024px){
  .se_shell{padding:var(--space-6) 0;}
  .se_field input{font-size:1.125rem;}
  .se_empty{padding:var(--space-5);}
  .se_empty h2{font-size:1.375rem;}
  .se_alts{flex-wrap:wrap;}
  .se_alt{flex:1 1 45%;}
}

/* ============================================================
   68. VARIAN — CART DRAWER B (empty bag, dark) — 86:1231
   ============================================================ */
.cdb_shell{display:flex;align-items:stretch;background:var(--color-shell);}
.cdb_page{flex:1;min-width:0;height:51.25rem;object-fit:cover;}
.cdb_drawer{width:28.75rem;flex:none;height:51.25rem;display:flex;flex-direction:column;padding:var(--space-6);background:var(--color-ink);color:var(--color-ivory);overflow:auto;}
.cdb_h{display:flex;align-items:center;gap:var(--space-4);margin-bottom:2.25rem;}
.cdb_h h2{font-size:1.75rem;letter-spacing:-.01em;line-height:normal;color:var(--color-ivory);}
.cdb_close{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:1.375rem;color:var(--color-ivory);line-height:normal;}
.cdb_kind{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-gold);line-height:normal;margin-bottom:var(--space-3);}
.cdb_drawer h3{font-family:var(--font-display);font-size:2.125rem;letter-spacing:-.02em;line-height:normal;color:var(--color-ivory);margin-bottom:0.625rem;}
.cdb_lede{font-size:0.875rem;line-height:1.68;max-width:22.5rem;margin-bottom:1.875rem;}
.cdb_sub{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;margin-bottom:0.875rem;}
.cdb_sugg{display:flex;align-items:center;gap:0.875rem;padding:0.875rem var(--space-4) 0.875rem 0.875rem;border-radius:var(--radius-m);background:#242026;margin-bottom:0.625rem;}
.cdb_sugg img{width:3.25rem;height:4rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.cdb_sugg_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);line-height:normal;}
.cdb_sugg_t{display:flex;align-items:baseline;gap:var(--space-4);}
.cdb_sugg_t h4{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;color:var(--color-ivory);}
.cdb_sugg_t p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.cdb_sugg_c .is-spec{font-size:0.75rem;white-space:pre;}
.cdb_sugg_c .is-left{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-gold);}
.cdb_join{display:flex;flex-direction:column;gap:var(--space-3);padding-top:1.125rem;margin-top:1.125rem;border-top:0.0625rem solid var(--color-ivory);}
.cdb_join p{font-size:0.75rem;line-height:1.6;}
.cdb_join_f{display:flex;gap:0.625rem;}
.cdb_join_f input{
  flex:1;min-width:0;padding:0.875rem 1.125rem;border:0.0625rem solid var(--color-ivory);border-radius:var(--radius-pill);background:none;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ivory);line-height:normal;
}
.cdb_join_f input::placeholder{color:var(--color-ivory);opacity:.75;}

@media (max-width:1024px){
  .cdb_shell{flex-direction:column;}
  .cdb_page{height:17.5rem;}
  .cdb_drawer{width:100%;height:auto;padding:var(--space-5);}
  .cdb_drawer h3{font-size:1.625rem;}
  .cdb_join_f{flex-direction:column;}
}

/* ============================================================
   69. VARIAN — SEARCH A (search by fit) — 86:1025
   ============================================================ */
.sf_shell{background:var(--color-ink);padding:3.75rem 0;display:flex;justify-content:center;}
.sf_modal{width:57.5rem;max-width:calc(100% - 3rem);display:flex;flex-direction:column;background:var(--color-ivory);border-radius:1.25rem;overflow:hidden;}
.sf_field{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) 1.75rem;border-bottom:0.0625rem solid var(--color-line);}
.sf_field .is-glyph{font-size:1.25rem;line-height:normal;}
.sf_field input{
  flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--font-display);font-size:1.625rem;letter-spacing:-.01em;color:var(--color-ink);line-height:normal;
}
.sf_field input:focus{outline:none;}
.sf_esc{padding:0.3125rem 0.625rem;border-radius:0.375rem;background:var(--color-shell);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;}
.sf_chips{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-4) 1.75rem;background:var(--color-shell);}
.sf_chips > p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.sf_results{display:flex;flex-direction:column;padding:1.375rem 1.75rem;}
.sf_res_h{display:flex;align-items:center;gap:var(--space-4);padding-bottom:var(--space-3);line-height:normal;}
.sf_res_h p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-bordeaux);}
.sf_res_h p:last-child{font-size:0.75rem;}
.sf_res{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:0.875rem 0;border-top:0.0625rem solid var(--color-line);}
.sf_res:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.sf_res img{width:3.25rem;height:4rem;flex:none;object-fit:cover;border-radius:var(--radius-s);}
.sf_res_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);line-height:normal;}
.sf_res_c h3{font-family:var(--font-display);font-size:1.1875rem;letter-spacing:-.01em;}
.sf_res_c p{font-size:0.75rem;white-space:pre;}
.sf_res .is-left{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-bordeaux);line-height:normal;}
.sf_res .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.sf_try{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;padding-top:var(--space-4);}
.sf_try > p{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}

@media (max-width:1024px){
  .sf_shell{padding:var(--space-6) 0;}
  .sf_field input{font-size:1.125rem;}
  .sf_chips,.sf_results{padding:var(--space-4) 1.25rem;}
}

/* ============================================================
   70. VARIAN — CART DRAWER A (bag with unit numbers) — 86:1146
   ============================================================ */
.cda_shell{display:flex;align-items:stretch;background:var(--color-shell);}
.cda_page{flex:1;min-width:0;height:51.25rem;object-fit:cover;}
.cda_drawer{width:28.75rem;flex:none;height:51.25rem;display:flex;flex-direction:column;padding:var(--space-6);background:var(--color-ivory);overflow:auto;}
.cda_h{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:1.25rem;}
.cda_h h2{font-size:1.75rem;letter-spacing:-.01em;line-height:normal;}
.cda_h .is-n{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;line-height:normal;}
.cda_close{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:1.375rem;color:var(--color-ink);line-height:normal;}
/* Bar hold 15 menit — chrome, satu-satunya aksen Y2K di drawer ini. */
.cda_hold{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:0.625rem;background-image:var(--chrome);color:var(--color-ink);margin-bottom:1.25rem;line-height:normal;}
.cda_hold .is-glyph{font-weight:900;font-size:0.75rem;}
.cda_hold .is-label{font-weight:500;font-size:0.75rem;}
.cda_hold .is-time{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.04em;}
.cda_line{display:flex;gap:var(--space-4);align-items:flex-start;padding:1.125rem 0;border-top:0.0625rem solid var(--color-line);}
.cda_line:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.cda_line > img{width:4.375rem;height:5.5rem;flex:none;object-fit:cover;border-radius:0.625rem;}
.cda_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;line-height:normal;}
.cda_t{display:flex;align-items:baseline;gap:var(--space-4);}
.cda_t h3{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.cda_t p{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.cda_c .is-variant{font-size:0.75rem;white-space:pre;}
.cda_c .is-unit{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-bordeaux);}
.cda_q{display:flex;align-items:center;gap:0.875rem;}
.cda_qty{display:flex;align-items:center;gap:0.875rem;padding:0.375rem 0.625rem;border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);}
.cda_qty button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:0.75rem;color:var(--color-ink);}
.cda_qty output{font-family:var(--font-body);font-weight:500;font-size:0.75rem;}
.cda_remove{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:0.75rem;color:var(--color-ink);text-decoration:underline;text-underline-offset:0.125rem;}
.cda_alt{display:flex;align-items:center;gap:var(--space-3);padding:0.875rem var(--space-4);border-radius:0.625rem;background:var(--color-shell);margin:1.125rem 0;}
.cda_alt_c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.1875rem;line-height:normal;}
.cda_alt_c p:first-child{font-weight:500;font-size:0.75rem;}
.cda_alt_c p:last-child{font-size:0.75rem;}
.cda_kv{display:flex;align-items:center;gap:var(--space-4);padding:0.375rem 0;line-height:normal;}
.cda_kv p:first-child{font-size:0.75rem;}
.cda_kv p:last-child{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.cda_total{display:flex;align-items:baseline;gap:var(--space-4);padding-top:0.875rem;margin-top:0.625rem;border-top:0.0625rem solid var(--color-line);}
.cda_total p:first-child{font-weight:500;font-size:0.875rem;line-height:normal;}
.cda_total p:last-child{font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;line-height:normal;}
.cda_actions{display:flex;flex-direction:column;gap:0.625rem;margin-top:var(--space-4);}

@media (max-width:1024px){
  .cda_shell{flex-direction:column;}
  .cda_page{height:17.5rem;}
  .cda_drawer{width:100%;height:auto;padding:var(--space-5);}
}

/* ============================================================
   71. VARIAN — HERO C (magazine cover) — 118:618
   ============================================================ */
.hc_shell{background:var(--color-ink);}
.hc_cover{
  position:relative;min-height:53.75rem;display:flex;flex-direction:column;justify-content:space-between;
  padding:2.5rem 3.5rem var(--space-7);overflow:hidden;color:var(--color-ivory);
}
.hc_cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Scrim gradient — dari Figma, bikin masthead & coverline kebaca di atas foto terang. */
.hc_cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(9,9,17,.1) 0%,rgba(9,9,17,.42) 38%,rgba(9,9,17,.9) 100%);
}
.hc_cover > *:not(img){position:relative;z-index:1;}
.press_masthead_shell{background:var(--color-shell);}
.hc_wordmark{font-family:var(--font-display);font-weight:500;font-size:2.25rem;letter-spacing:.16em;line-height:normal;}
.hc_masthead{display:flex;align-items:center;gap:var(--space-5);}
.hc_masthead h1{font-size:6.5rem;letter-spacing:.06em;line-height:normal;color:var(--color-ivory);}
.hc_issue{display:flex;flex-direction:column;align-items:flex-end;gap:0.3125rem;font-family:var(--font-mono);line-height:normal;}
.hc_issue p:first-child{font-size:0.75rem;letter-spacing:.12em;}
.hc_issue p:last-child{font-size:0.625rem;letter-spacing:.1em;white-space:pre;}
.hc_lines{display:flex;flex-direction:column;}
.hc_lines h2,.hc_lines h1{font-size:4.125rem;line-height:1.06;letter-spacing:-.03em;color:var(--color-ivory);max-width:47.5rem;margin-bottom:1.375rem;}
.hc_cover_l{display:flex;flex-direction:column;gap:0.5625rem;margin-bottom:1.875rem;}
.hc_cover_l div{display:flex;align-items:center;gap:var(--space-3);line-height:normal;}
.hc_cover_l .is-glyph{font-weight:900;font-size:0.625rem;color:var(--color-gold);}
.hc_cover_l p{font-size:0.875rem;}
.hc_actions{display:flex;gap:var(--space-3);flex-wrap:wrap;}

@media (max-width:1024px){
  .hc_cover{min-height:0;padding:1.75rem var(--space-5) 2.25rem;}
  .hc_masthead{flex-wrap:wrap;gap:var(--space-3);}
  .hc_masthead h1{font-size:2.75rem;}
  .hc_lines h2,.hc_lines h1{font-size:1.875rem;}
}

/* ============================================================
   72. VARIAN — HERO D (plinth, type around object) — 118:646
   ============================================================ */
.hd_shell{background:var(--color-ivory);padding:var(--space-8) 0 3.5rem;}
.hd_inner{display:flex;flex-direction:column;align-items:center;}
.hd_top{display:flex;align-items:center;gap:var(--space-5);width:100%;margin-bottom:1.625rem;line-height:normal;}
.hd_top p:first-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.14em;white-space:pre;}
.hd_top p:last-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--color-bordeaux);}
/* Headline dipecah di atas & bawah objek — itu ide variannya, jadi dua elemen terpisah. */
.hd_word{font-family:var(--font-display);font-size:5.75rem;line-height:.96;letter-spacing:-.04em;white-space:nowrap;}
.hd_row{display:flex;align-items:center;gap:2.25rem;width:100%;}
.hd_spec{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;line-height:normal;}
.hd_spec.is-left{align-items:flex-end;text-align:right;}
.hd_spec div{display:flex;flex-direction:column;gap:0.1875rem;}
.hd_spec .is-k{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;}
.hd_spec .is-v{font-weight:500;font-size:0.875rem;}
.hd_object{width:22.5rem;flex:none;height:29.375rem;object-fit:cover;}
.hd_actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:1.75rem;}

@media (max-width:1024px){
  .hd_shell{padding:var(--space-7) 0;}
  .hd_word{font-size:2.375rem;white-space:normal;text-align:center;}
  .hd_row{flex-direction:column;gap:var(--space-5);}
  .hd_spec,.hd_spec.is-left{align-items:flex-start;text-align:left;width:100%;}
  .hd_object{width:100%;max-width:22.5rem;height:auto;}
}


/* ============================================================
   RESPONSIVE — mobile overflow fixes (measured, not guessed)
   ============================================================ */

/* The middot-separated meta lines use white-space:pre so the double spaces around "·"
   survive. But `pre` also forbids wrapping, so on a phone lines like
   "Placed 28 March 2026  ·  Delivered 31 March" ran straight out of the page.
   pre-wrap keeps the exact same spacing and simply allows a soft wrap — applied at the
   phone breakpoint only, so nothing about the desktop composition changes. */
@media (max-width: 720px) {
  .acchead_meta,
  .arthead_meta,
  .gift_card_meta,
  .art_author p,
  .sub_copy p,
  .announcement_inner,
  .footer_fine p {
    white-space: pre-wrap;
  }
}

/* A flex item defaults to min-width:auto, so the product title could not shrink below
   its longest word and pushed the row 0.25rem wide. */
.cart_item h2 { min-width: 0; overflow-wrap: anywhere; }


/* ============================================================
   MOBILE NAVIGATION
   The markup carried no menu button at all below the tablet breakpoint — the link list
   was simply set to display:none, so on a phone the site had no navigation whatsoever.
   ============================================================ */
.nav_toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.625rem; height: 2.625rem;
  margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav_burger { display: block; width: 1.375rem; height: 0.875rem; position: relative; }
.nav_burger i {
  position: absolute; left: 0; width: 100%; height: 0.09375rem; border-radius: 0.125rem;
  background: var(--color-ink);
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s linear;
}
.nav_burger i:nth-child(1) { top: 0; }
.nav_burger i:nth-child(2) { top: 0.390625rem; }
.nav_burger i:nth-child(3) { top: 0.78125rem; }
/* The bars become the close cross, so the control never changes meaning mid-tap. */
.nav_toggle.is-open .nav_burger i:nth-child(1) { transform: translateY(0.390625rem) rotate(45deg); }
.nav_toggle.is-open .nav_burger i:nth-child(2) { opacity: 0; }
.nav_toggle.is-open .nav_burger i:nth-child(3) { transform: translateY(-0.390625rem) rotate(-45deg); }

.nav_scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(23,19,26,.42);
  opacity: 0; visibility: hidden;
  transition: opacity .3s linear, visibility .3s linear;
}

/* Must match the 1024px breakpoint the rest of the layout uses. When this was
   991px, viewports 992-1024px had the desktop list hidden AND no menu button. */
@media (max-width:1024px) {
  .nav_toggle { display: inline-flex; }
  .nav_scrim.is-open { opacity: 1; visibility: visible; }

  .nav_menu {
    display: flex !important;          /* beats the base rule that hid the list outright */
    position: fixed;
    top: 0; bottom: 0;
    left: 0;
    z-index: 70;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--space-9) var(--margin-global) 2.5rem;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-ivory);
    transform: translateX(-100%);
    transition: transform .42s cubic-bezier(.16,1,.3,1);
  }
  .nav_menu.is-open { transform: translateX(0); }

  .nav_menu li { width: 100%; }
  .nav_menu a, .nav_menu .nav_link {
    display: block;
    width: 100%;
    padding: 1.125rem 0;
    border-bottom: 0.0625rem solid var(--color-line);
    font-size: 1.25rem;
  }
}


/* ============================================================
   SCROLL MOTION
   Hiding is scoped to .has-motion, and that class is added by motion.js itself. If the
   script never runs — blocked, failed, disabled — nothing is ever hidden, so the page
   can never end up with invisible content and no error to explain it.
   ============================================================ */
.has-motion [data-anim]:not([data-anim="nav"]) {
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--anim-delay, 0ms);
}
.has-motion [data-anim].is-in { opacity: 1; transform: none; }

/* A track or grid reveals its children one after another instead of as one block. */
.has-motion [data-anim] .anim-child {
  opacity: 0;
  transform: translateY(1.375rem);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--anim-delay, 0ms);
}
.has-motion [data-anim].is-in .anim-child { opacity: 1; transform: none; }

/* Images arrive with a slight settle rather than a slide — it reads as focus, not travel. */
.has-motion [data-anim="hero-image"],
.has-motion [data-anim="collection-img"] { transform: translateY(1.5rem) scale(1.02); }
.has-motion [data-anim="hero-image"].is-in,
.has-motion [data-anim="collection-img"].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-anim],
  .has-motion [data-anim] .anim-child { opacity: 1 !important; transform: none !important; }
}

/* The track holds two identical copies, so translating exactly half of it loops with no
   seam. Paused on hover because it sits behind text the reader may want to hold still. */
.marquee_track { display: flex; width: max-content; animation: marquee-scroll 34s linear infinite; }
.marquee_track p { white-space: nowrap; margin: 0; }
.marquee_shell:hover .marquee_track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* the marquee must keep moving even though it is tagged for the reveal pass */
.has-motion [data-anim="marquee"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .marquee_track { animation: none; } }

/* NAV-479-FIX
   At 390 the nav row could not fit the stacked wordmark, the utility links, the bag pill
   and the new menu button. The "EST." line is a flourish, not navigation, so it is the
   thing that goes; everything functional stays reachable. */
@media (max-width: 479px) {
  .nav_inner { gap: var(--space-3); }
  .nav_est { display: none; }
  .nav_wordmark { font-size: 1.25rem; letter-spacing: .12em; }
  .nav_utility { gap: 0.875rem; }
}

/* Sticky bar copy column, and the worn-by card body — the static mock laid these out inline. */
.sa_t{display:flex;flex-direction:column;gap:0.1875rem;min-width:0;line-height:normal;}
.sa_t h2{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.01em;}
.sa_t .is-meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);}
.wb_card_c{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);}
.wb_card_m{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);}
.wb_card_c blockquote{font-family:var(--font-display);font-size:1.0625rem;line-height:1.45;}

/* Footer variant headers — the static mock nested these differently per variant. */
.vf_index_top{display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-6);}
.vf_ed_top{display:flex;gap:var(--space-6);align-items:flex-end;flex-wrap:wrap;padding-bottom:2.5rem;}
.vf_ed_top h2{flex:1 1 20rem;font-size:2.5rem;line-height:1.02;letter-spacing:-.02em;}