/* 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. */
/* ============================================================
   AKTA — shared stylesheet
   Source of truth: Figma FkYP6aD0Y1Of1om4Zrzm2L → page 2:2
   Tokens mirror the "AKTA Tokens" variable collection (3:2).
   Class naming: Client-First, so this ports to Webflow 1:1
     page-wrapper > main-wrapper > section_[name] > padding-global > container-large
   MOTION: none yet by design. Elements that will animate carry data-anim="…".
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --color-paper:#F5F2EC;
  --color-surface:#EBE7DF;
  --color-ink:#1A1A16;
  --color-muted:#6A6860;
  --color-line:#DCD7CD;
  --color-border:#86837D;   /* control outlines — WCAG 1.4.11 wants 3:1, hairlines do not */
  --color-accent:#3D4B3E;
  --color-clay:#C9B4A2;
  /* Used by the pill controls and never declared — an undefined var()
     invalidates the whole declaration. */
  --radius-pill:62.4375rem;
  /* 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:5rem;

  --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;
}

/* ---------- 2. TAG BASE (Style-Guide foundation) ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.01em;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-accent);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:0.125rem solid var(--color-accent);outline-offset:0.1875rem;border-radius:0.125rem;
}
strong,b{font-weight:500;}
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;}
.hairline{height:0.0625rem;background:var(--color-line);border:0;margin:0;}

/* ---------- 4. UTILITIES ---------- */
.text-label{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);}
.text-mono{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);}
.text-muted{color:var(--color-muted);}
.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;}

.button{
  display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;
  padding:0.9375rem 1.75rem;font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;
  border:0.0625rem solid transparent;transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.button.is-ink{background:var(--color-ink);color:var(--color-paper);}
.button.is-ink:hover{background:var(--color-accent);color:var(--color-paper);}
.button.is-accent{background:var(--color-accent);color:var(--color-paper);}
.button.is-accent:hover{background:var(--color-ink);color:var(--color-paper);}
.button.is-outline{border-color:var(--color-ink);color:var(--color-ink);}
.button.is-outline:hover{background:var(--color-ink);color:var(--color-paper);}
/* Varian di atas ground gelap (CTA — B, COUNTDOWN, footer minimal). */
.button.is-paper{background:var(--color-paper);color:var(--color-ink);}
.button.is-paper:hover{background:var(--color-clay);color:var(--color-ink);}
.button.is-outline-paper{border-color:var(--color-paper);color:var(--color-paper);}
.button.is-outline-paper:hover{background:var(--color-paper);color:var(--color-ink);}

.link-underline{border-bottom:0.0625rem solid var(--color-line);padding-bottom:0.1875rem;font-size:0.875rem;}
.link-underline:hover{border-color:var(--color-accent);}

/* ---------- 5. ANNOUNCEMENT (Figma 3:11) ---------- */
.announcement_bar{background:var(--color-accent);}
.announcement_inner{
  display:flex;align-items:center;justify-content:center;padding:0.6875rem 0;
  font-weight:500;font-size:0.75rem;letter-spacing:.14em;color:var(--color-paper);
  line-height:normal;white-space:pre;
}

/* ---------- 6. NAV (Figma 52:14) ----------
   GSAP note from the Figma component doc:
   "Global header. Hide on scroll down, reveal on scroll up; hairline fades in past 40px." */
.nav_bar{background:var(--color-paper);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;height:5.25rem;line-height:normal;}
.nav_brand{font-family:var(--font-display);font-size:1.875rem;letter-spacing:.08em;}
.nav_menu{display:flex;align-items:center;gap:2.5rem;font-size:0.875rem;letter-spacing:.01em;}
.nav_utility{display:flex;align-items:center;gap:1.75rem;font-size:0.875rem;letter-spacing:.01em;}
.nav_utility .is-muted{color:var(--color-muted);}
.nav_utility .is-bag{font-weight:500;}

/* ---------- 7. FOOTER (Figma 52:43) ---------- */
.footer_shell{background:var(--color-paper);padding-bottom:2.25rem;}
.footer_band{height:13.75rem;width:100%;object-fit:cover;}
.footer_cols{display:flex;gap:var(--space-6);align-items:flex-start;padding:var(--space-8) 0 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-size:1.875rem;letter-spacing:.08em;line-height:normal;}
.footer_blurb{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}
.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-muted);}
.footer_link{font-size:0.875rem;}
.footer_fine{
  display:flex;align-items:center;justify-content:space-between;padding-top:1.75rem;
  border-top:0.0625rem solid var(--color-line);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;
}
.footer_fine p{white-space:pre;}

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width:1024px){
  :root{--margin-global:2.5rem;}
  .nav_menu{display:none;}
  .footer_cols{flex-wrap:wrap;gap:var(--space-6) var(--space-5);}
  .footer_brand,.footer_col{flex:1 1 44%;}
}
@media (max-width:720px){
  :root{--margin-global:1.25rem;}
  .footer_brand,.footer_col{flex:1 1 100%;}
  .footer_fine{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .announcement_inner{white-space:normal;text-align:center;font-size:0.625rem;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ============================================================
   9. HERO — Figma 3:13 (1440 × 840)
   ============================================================ */
.hero_shell{background:var(--color-paper);padding:3.5rem 0;}
.hero_inner{display:flex;flex-direction:column;gap:var(--space-7);}
.hero_meta{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;
}
.hero_meta p{white-space:pre;}
.hero_title{font-size:7.375rem;line-height:.88;letter-spacing:-.03em;}
.hero_body{display:flex;gap:3.75rem;align-items:stretch;}
.hero_copy{width:25rem;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);}
.hero_lead{font-size:1.125rem;line-height:1.58;}
.hero_ctas{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem;}
.button.is-hero{padding:1.1875rem 2.125rem;font-size:0.75rem;letter-spacing:.1em;}
.hero_link{font-size:0.875rem;color:var(--color-muted);}
.hero_image{flex:1;min-width:0;min-height:26.25rem;object-fit:cover;}

/* ============================================================
   10. CREDENTIALS — Figma 3:14 (1440 × 131)
   ============================================================ */
.cred_shell{
  position:relative;overflow:hidden;background:var(--color-paper);
  border-top:0.0625rem solid var(--color-line);border-bottom:0.0625rem solid var(--color-line);
}
.cred_texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;pointer-events:none;}
.cred_row{position:relative;display:flex;align-items:center;padding:2.125rem 0;}
.cred_stat{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.625rem;padding:0 2.25rem;border-left:0.0625rem solid var(--color-line);}
.cred_stat:first-child{border-left:0;padding-left:0;padding-right:2.25rem;}
.cred_num{font-family:var(--font-display);font-size:2.375rem;line-height:1;letter-spacing:-.01em;}
.cred_label{font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:1.5;color:var(--color-muted);}

@media (max-width:1024px){
  .hero_title{font-size:4rem;}
  .hero_body{flex-direction:column;}
  .hero_copy{width:100%;}
  .hero_meta{flex-wrap:wrap;gap:var(--space-2);}
  .cred_row{flex-wrap:wrap;gap:var(--space-5);}
  .cred_stat{flex:1 1 44%;border-left:0;padding:0;}
}
@media (max-width:720px){ .hero_title{font-size:2.75rem;} .cred_stat{flex:1 1 100%;} }

/* ============================================================
   11. FORMULAS — A (offset carousel) — Figma 103:1990
   ============================================================ */
.sec_pad{padding:5.5rem 0;}
.formulas_shell{background:var(--color-paper);}
.formulas_inner{display:flex;flex-direction:column;gap:2.75rem;}
.section_head{display:flex;align-items:flex-end;gap:var(--space-5);padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.section_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
/* Spacer Figma ("flex-[1_0_0]") dipakai di banyak header — dijadikan aturan global
   supaya varian baru gak perlu bikin rule per-induk. */
.head_spacer{flex:1;min-width:0;}
.section_head .head_spacer{flex:1;min-width:0;}
.section_head .head_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);white-space:pre;line-height:normal;}
.formulas_track{display:flex;gap:1.75rem;align-items:flex-start;}
.formula_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.formula_card.is-offset{padding-top:3.5rem;}
.formula_index{font-family:var(--font-display);font-size:4rem;line-height:1;letter-spacing:-.02em;color:var(--color-accent);}
.formula_image{width:100%;height:27.5rem;object-fit:cover;}
.formula_row{display:flex;align-items:flex-end;gap:var(--space-4);}
.formula_name{font-family:var(--font-display);font-size:1.625rem;line-height:1.1;letter-spacing:-.01em;}
.formula_row .head_spacer{flex:1;min-width:0;}
.formula_price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;line-height:normal;}
.formula_spec{font-size:0.875rem;line-height:1.55;color:var(--color-muted);}

/* ============================================================
   12. INGREDIENT STUDY — B (macro + accordion) — Figma 103:2021
   ============================================================ */
.study_shell{background:var(--color-surface);}
.study_inner{display:flex;gap:var(--space-8);align-items:flex-start;}
.study_macro{width:32.5rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);}
.study_macro_img{width:100%;height:32.5rem;object-fit:cover;}
.study_swatches{display:flex;gap:var(--space-3);}
.study_swatches img{flex:1;min-width:0;height:6.875rem;object-fit:cover;}
.study_caption{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.study_copy{flex:1;min-width:0;display:flex;flex-direction:column;}
.study_head{display:flex;flex-direction:column;gap:1.125rem;padding-bottom:var(--space-6);}
.study_eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;color:var(--color-muted);line-height:normal;}
.study_head h2{font-size:3.25rem;line-height:1;letter-spacing:-.02em;}
.study_head p{font-size:1rem;line-height:1.72;color:var(--color-muted);max-width:35rem;}

.study_row{border-top:0.0625rem solid var(--color-line);}
.study_row > summary{
  display:flex;align-items:center;gap:1.125rem;padding:1.25rem 0;cursor:pointer;list-style:none;line-height:normal;
}
.study_row > summary::-webkit-details-marker{display:none;}
.study_num{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);width:1.625rem;flex:none;}
.study_name{flex:1;min-width:0;font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;}
.study_pct{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;color:var(--color-accent);}
.study_sign{font-size:1rem;color:var(--color-muted);width:0.75rem;text-align:center;}
.study_sign::before{content:"+";}
.study_row[open] .study_sign::before{content:"−";}
.study_body{display:flex;flex-direction:column;gap:0.625rem;padding:0 0 1.25rem 2.75rem;}
.study_body p{font-size:0.875rem;line-height:1.72;color:var(--color-muted);}
.study_ref{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;color:var(--color-accent);line-height:normal;}

@media (max-width:1024px){
  .sec_pad{padding:3.5rem 0;}
  .section_head{flex-wrap:wrap;}
  .section_head h2{font-size:2rem;}
  .formulas_track{flex-direction:column;gap:2.5rem;}
  .formula_card.is-offset{padding-top:0;}
  .study_inner{flex-direction:column;gap:2.5rem;}
  .study_macro{width:100%;}
  .study_head h2{font-size:2.25rem;}
}

/* ============================================================
   13. THE RITUAL — Figma 3:17
   ============================================================ */
.ritual_shell{background:var(--color-surface);padding:6.5rem 0;}
.ritual_inner{display:flex;flex-direction:column;gap:3.5rem;}
.ritual_head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.ritual_head h2{font-size:2.875rem;line-height:1;letter-spacing:-.02em;}
.ritual_head .head_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);white-space:pre;line-height:normal;}
.ritual_steps{display:flex;gap:var(--space-6);align-items:flex-start;}
.ritual_step{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding-top:1.625rem;border-top:0.0625rem solid var(--color-ink);}
.ritual_step img{width:100%;height:15rem;object-fit:cover;}
.ritual_num{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.ritual_step h3{font-size:2rem;line-height:1.05;letter-spacing:-.01em;}
.ritual_step p{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}
.ritual_tag{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-accent);line-height:normal;}

/* ============================================================
   14. JOURNAL — Figma 3:18
   ============================================================ */
.journal_shell{background:var(--color-paper);padding:6.5rem 0;}
.journal_inner{display:flex;flex-direction:column;gap:2.75rem;}
.journal_grid{display:flex;gap:var(--space-6);align-items:flex-start;}
.journal_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.375rem;}
.journal_card img{width:100%;height:21.125rem;object-fit:cover;}
.journal_meta{display:flex;align-items:flex-start;justify-content:space-between;font-size:0.625rem;line-height:normal;}
.journal_cat{font-weight:500;letter-spacing:.12em;color:var(--color-accent);}
.journal_read{font-family:var(--font-mono);letter-spacing:.06em;color:var(--color-muted);}
.journal_card h3{font-size:1.875rem;line-height:1.12;letter-spacing:-.01em;}

/* ============================================================
   15. NEWSLETTER — Figma 3:19
   ============================================================ */
.news_shell{position:relative;overflow:hidden;background:var(--color-ink);color:var(--color-paper);padding:7rem 0;}
.news_bg{position:absolute;left:0;top:0;width:100%;height:31.9375rem;object-fit:cover;opacity:.42;pointer-events:none;}
.news_inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.375rem;text-align:center;}
.news_eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;line-height:normal;}
.news_inner h2{font-size:3.25rem;line-height:.98;letter-spacing:-.02em;max-width:43.75rem;color:var(--color-paper);}
.news_lead{font-size:1rem;line-height:1.6;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:1.375rem;padding-bottom:var(--space-4);border-bottom:0.0625rem solid var(--color-paper);}
.news_form input{
  flex:1;min-width:0;background:none;border:0;padding:0;color:var(--color-paper);
  font-family:var(--font-body);font-size:1rem;line-height:normal;
}
.news_form input::placeholder{color:var(--color-paper);opacity:.75;}
.news_form input:focus{outline:none;}
.news_form button{
  background:none;border:0;padding:0;cursor:pointer;color:var(--color-paper);
  font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.1em;white-space:pre;
}

@media (max-width:1024px){
  .ritual_shell,.journal_shell,.news_shell{padding:var(--space-8) 0;}
  .ritual_head{flex-wrap:wrap;}
  .ritual_head h2{font-size:2rem;}
  .ritual_steps,.journal_grid{flex-direction:column;gap:2.5rem;}
  .news_inner h2{font-size:2.25rem;}
}

/* ============================================================
   16. FOOTER — A (mega + newsletter) — Figma 103:2069
   Homepage-only variant. Reuses the footer_* classes above and
   adds a newsletter band on top; the image band sits after the
   columns here, not before them.
   ============================================================ */
.footer_shell.is-mega{padding-bottom:0;}
.footer_signup{display:flex;align-items:center;gap:3.5rem;padding:var(--space-8) 0 3.5rem;line-height:normal;}
.footer_signup_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.625rem;}
.footer_signup_copy h2{font-size:2.375rem;letter-spacing:-.02em;}
.footer_signup_copy p{font-size:1rem;color:var(--color-muted);}
.footer_signup_field{
  display:flex;align-items:center;gap:var(--space-4);width:26.25rem;max-width:100%;
  padding-bottom:0.875rem;border-bottom:0.0625rem solid var(--color-ink);
}
.footer_signup_field 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;
}
.footer_signup_field input::placeholder{color:var(--color-muted);}
.footer_signup_field input:focus{outline:none;}
.footer_signup_field button{
  background:none;border:0;padding:0;cursor:pointer;color:var(--color-ink);
  font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.1em;white-space:pre;
}
.footer_shell.is-mega .footer_cols{padding:var(--space-7) 0 3.5rem;}
.footer_shell.is-mega .footer_band{height:11.25rem;}
.footer_locale{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}

@media (max-width:1024px){
  .footer_signup{flex-direction:column;align-items:flex-start;gap:1.75rem;padding:var(--space-7) 0 2.5rem;}
  .footer_signup_copy h2{font-size:1.75rem;}
}

/* ============================================================
   17. PRODUCT — breadcrumb + main product (Figma 54:53, 54:60)
   ============================================================ */
.crumb_shell{background:var(--color-paper);padding:2.5rem 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-paper);padding:2.5rem 0 var(--space-9);}
.pdp_inner{display:flex;gap:4.5rem;align-items:flex-start;}
.pdp_gallery{width:43.75rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);}
.pdp_hero_img{width:100%;height:51.25rem;object-fit:cover;}
.pdp_thumbs{display:flex;gap:var(--space-4);}
.pdp_thumbs img{flex:1;min-width:0;height:11.25rem;object-fit:cover;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:1.625rem;}
.pdp_eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);white-space:pre;line-height:normal;}
.pdp_title{font-size:3.5rem;line-height:1;letter-spacing:-.02em;}
.pdp_price_row{display:flex;align-items:center;gap:var(--space-4);line-height:normal;}
.pdp_price{font-family:var(--font-display);font-size:2rem;letter-spacing:-.01em;}
.pdp_unit{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);white-space:pre;}
.pdp_rating{display:flex;align-items:center;gap:var(--space-2);line-height:normal;}
.pdp_stars{color:var(--color-accent);font-size:0.75rem;letter-spacing:0.375rem;}
.pdp_rating_text{font-size:0.75rem;color:var(--color-muted);white-space:pre;}
.pdp_lead{font-size:1rem;line-height:1.72;}
.pdp_group{display:flex;flex-direction:column;gap:var(--space-3);}
.pdp_grouphead{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}
.pdp_opts{display:flex;gap:var(--space-3);}
.pdp_opt{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:0.8125rem 1.125rem;border:0.0625rem solid var(--color-border);background:none;cursor:pointer;
  font-family:var(--font-body);font-size:0.75rem;color:var(--color-ink);line-height:normal;
}
.pdp_opt.is-active{border:0.09375rem solid var(--color-ink);background:var(--color-surface);font-weight:500;}
.pdp_buy{display:flex;gap:0.875rem;}
.pdp_qty{display:flex;align-items:center;gap:1.25rem;padding:1.1875rem 1.25rem;border:0.0625rem solid var(--color-border);line-height:normal;}
.pdp_qty button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body);font-size:1rem;color:var(--color-ink);}
.pdp_qty button:first-of-type{color:var(--color-muted);}
.pdp_qty output{font-family:var(--font-mono);font-size:0.875rem;}
.button.is-block{width:100%;padding:1.1875rem 2.125rem;font-size:0.75rem;letter-spacing:.1em;}
.pdp_buy .button{flex:1;}
.pdp_trust{display:flex;gap:var(--space-5);padding-top:0.375rem;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;}
.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.3125rem;letter-spacing:-.01em;}
.pdp_sign{font-size:1.125rem;color:var(--color-muted);width:0.75rem;text-align:center;}
.pdp_sign::before{content:"+";}
.pdp_row[open] .pdp_sign::before{content:"−";}
.pdp_row p{font-size:0.875rem;line-height:1.72;color:var(--color-muted);padding-bottom:1.25rem;}

@media (max-width:1024px){
  .pdp_shell{padding:var(--space-5) 0 var(--space-8);}
  .pdp_inner{flex-direction:column;gap:2.5rem;}
  .pdp_gallery{width:100%;}
  .pdp_hero_img{height:auto;}
  .pdp_title{font-size:2.375rem;}
  .pdp_opts{flex-wrap:wrap;}
}

/* ============================================================
   18. PRODUCT — index, how-to, reviews, related (54:122 / 145 / 166 / 199)
   ============================================================ */
.pindex_shell{background:var(--color-surface);padding:5.5rem 0;}
.pindex_inner{display:flex;gap:var(--space-8);align-items:center;}
.pindex_img{width:32.5rem;height:32.5rem;flex:none;object-fit:cover;}
.pindex_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.pindex_copy h2{font-size:3rem;line-height:1;letter-spacing:-.02em;max-width:32.5rem;}
.pindex_row{display:flex;gap:1.25rem;align-items:flex-start;padding:1.125rem 0;border-top:0.0625rem solid var(--color-line);}
.pindex_num{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);width:1.625rem;flex:none;line-height:normal;}
.pindex_meat{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;}
.pindex_meat h3{font-family:var(--font-display);font-size:1.3125rem;letter-spacing:-.01em;line-height:normal;}
.pindex_meat p{font-size:0.875rem;line-height:1.55;color:var(--color-muted);}
.pindex_ref{width:10.625rem;flex:none;text-align:right;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;color:var(--color-muted);line-height:normal;}

.howto_shell{background:var(--color-paper);padding:var(--space-9) 0;}
.howto_inner{display:flex;flex-direction:column;gap:2.75rem;}
.howto_steps{display:flex;gap:var(--space-6);align-items:flex-start;}
.howto_step{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.howto_step img{width:100%;height:15rem;object-fit:cover;}
.howto_step h3{font-size:1.6875rem;line-height:1.1;letter-spacing:-.01em;}
.howto_step p{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}

.reviews_shell{background:var(--color-surface);padding:var(--space-9) 0;}
.reviews_inner{display:flex;flex-direction:column;gap:2.75rem;}
.reviews_grid{display:flex;gap:var(--space-6);align-items:flex-start;}
.review_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding-top:1.375rem;border-top:0.0625rem solid var(--color-ink);}
.review_stars{color:var(--color-accent);font-size:0.75rem;letter-spacing:0.25rem;line-height:normal;}
.review_card blockquote{font-family:var(--font-display);font-size:1.4375rem;line-height:1.35;letter-spacing:-.01em;}
.review_by{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;color:var(--color-muted);white-space:pre;line-height:normal;}

.related_shell{background:var(--color-paper);padding:var(--space-9) 0;}
.related_inner{display:flex;flex-direction:column;gap:2.75rem;}
.related_grid{display:flex;gap:var(--space-6);align-items:stretch;}
.related_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.25rem;}
.related_card img{width:100%;height:29.375rem;object-fit:cover;}
.related_indexrow{display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.related_indexrow .is-price{color:var(--color-ink);}
.related_card h3{font-size:1.6875rem;line-height:1.1;letter-spacing:-.01em;}
.related_card .related_spec{font-size:0.875rem;line-height:1.55;color:var(--color-muted);}
.bundle_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.25rem;padding:var(--space-6);background:var(--color-surface);}
.bundle_eyebrow{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-accent);line-height:normal;}
.bundle_card h3{font-size:2.125rem;line-height:1.05;letter-spacing:-.01em;}
.bundle_card p{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}
.bundle_price{font-family:var(--font-display);font-size:1.75rem;letter-spacing:-.01em;line-height:normal;}

@media (max-width:1024px){
  .pindex_shell,.howto_shell,.reviews_shell,.related_shell{padding:var(--space-8) 0;}
  .pindex_inner{flex-direction:column;gap:var(--space-6);}
  .pindex_img{width:100%;height:auto;}
  .pindex_copy h2{font-size:2.125rem;}
  .pindex_ref{width:auto;text-align:left;}
  .pindex_row{flex-wrap:wrap;}
  .howto_steps,.reviews_grid,.related_grid{flex-direction:column;gap:2.5rem;}
}

/* ============================================================
   19. COLLECTION — banner, filter bar, grid (54:267 / 277 / 288)
   ============================================================ */
.collbanner_shell{background:var(--color-surface);padding:2.5rem 0 4.5rem;}
.collbanner_inner{display:flex;flex-direction:column;gap:var(--space-5);}
.collbanner_row{display:flex;gap:var(--space-8);align-items:center;}
.collbanner_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.collbanner_copy h1{font-size:3.875rem;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:32.5rem;height:16.25rem;flex:none;object-fit:cover;}

.filterbar_shell{background:var(--color-paper);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:var(--space-6) 0;}
.chip{
  padding:0.5625rem var(--space-4);border:0.0625rem solid var(--color-border);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-paper);font-weight:500;}
.filterbar .head_spacer{flex:1;min-width:0;}
.sort_control{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);white-space:pre;line-height:normal;
}

.collgrid_shell{background:var(--color-paper);padding:4.5rem 0 var(--space-9);}
.collgrid_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.collgrid{display:flex;gap:var(--space-6);align-items:flex-start;}
.card_flag{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-accent);line-height:normal;}
.collgrid_note{display:flex;justify-content:center;padding-top:var(--space-5);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;color:var(--color-muted);line-height:normal;}

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

.related_name{font-family:var(--font-display);font-size:1.6875rem;line-height:1.1;letter-spacing:-.01em;}

/* ============================================================
   20. LIST-COLLECTIONS — header + tiles (54:356 / 54:361)
   ============================================================ */
.pagehead_shell{background:var(--color-paper);padding:var(--space-9) 0 3.5rem;}
.pagehead_inner{display:flex;flex-direction:column;gap:1.375rem;}
.pagehead_inner h1{font-size:3.875rem;line-height:1;letter-spacing:-.03em;}
.pagehead_lead{font-size:1.125rem;line-height:1.7;color:var(--color-muted);max-width:43.75rem;}
.crumb.is-flat{color:var(--color-ink);}

.tiles_shell{background:var(--color-paper);padding:var(--space-6) 0 var(--space-9);}
.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.25rem;}
.tile img{width:100%;height:25rem;object-fit:cover;}
.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_head .head_spacer{flex:1;min-width:0;}
.tile_count{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.tile p{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}

@media (max-width:1024px){
  .pagehead_shell{padding:3.5rem 0 var(--space-6);}
  .pagehead_inner h1{font-size:2.5rem;}
  .tiles_row{flex-direction:column;gap:2.5rem;}
  .tiles_shell{padding:var(--space-5) 0 var(--space-8);}
}

/* ============================================================
   21. PAGE (rich text) — header + TOC + body (55:167 / 55:174)
   ============================================================ */
.pagehead_shell.is-tight{padding:4.5rem 0 3.5rem;}
.pagehead_shell.is-tight h1{font-size:4rem;}
.pagehead_shell.is-tight .pagehead_lead{font-size:1.125rem;max-width:47.5rem;}

.rich_shell{background:var(--color-paper);padding:var(--space-9) 0;}
.rich_inner{display:flex;gap:var(--space-8);align-items:flex-start;}
.rich_toc{width:15rem;flex:none;display:flex;flex-direction:column;gap:0.875rem;position:sticky;top:6.5rem;}
.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 h2{font-size:1.875rem;line-height:1.1;letter-spacing:-.01em;}
.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-accent);}
.rich_quote p{font-family:var(--font-display);font-size:1.6875rem;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.5rem;}
}

/* ============================================================
   22. CONTACT — form + info (Figma 55:249)
   ============================================================ */
.contact_shell{background:var(--color-paper);padding:var(--space-9) 0;}
.contact_inner{display:flex;gap:var(--space-8);align-items:flex-start;}
.contact_form{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.375rem;padding:2.5rem;background:var(--color-surface);}
.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,.field select{
  width:100%;padding:var(--space-4) 1.125rem;background:var(--color-paper);border:0.0625rem solid var(--color-border);
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;border-radius:0;
}
.field textarea{height:8.125rem;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--color-muted);}
.field input:focus,.field textarea:focus,.field select: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{width:26.25rem;flex:none;display:flex;flex-direction:column;gap:1.25rem;}
.contact_block{display:flex;flex-direction:column;gap:0.5625rem;padding-top:1.375rem;border-top:0.0625rem solid var(--color-line);}
.contact_kind{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-accent);line-height:normal;}
.contact_mail{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;line-height:normal;}
.contact_block p:last-child{font-size:0.875rem;line-height:1.6;color:var(--color-muted);}
.contact_address{display:flex;flex-direction:column;gap:var(--space-3);padding-top:1.375rem;border-top:0.0625rem solid var(--color-line);}
.contact_address address{font-style:normal;font-size:1rem;line-height:1.65;}
.contact_address img{width:100%;height:11.25rem;object-fit:cover;}

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

/* ============================================================
   23. BLOG — header, filters, featured, grid (55:330 / 335 / 346 / 356)
   ============================================================ */
.bloghead_shell{background:var(--color-paper);padding:4.5rem 0 var(--space-7);}
.blogfilter_shell{background:var(--color-paper);padding:var(--space-9) 0 2.5rem;}
.blogfilter{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;}

.feat_shell{background:var(--color-paper);padding:var(--space-9) 0 var(--space-8);}
.feat_inner{display:flex;gap:var(--space-7);align-items:center;}
.feat_img{flex:1;min-width:0;height:26.25rem;object-fit:cover;}
.feat_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.125rem;}
.feat_meta{display:flex;align-items:center;gap:0.875rem;font-size:0.625rem;line-height:normal;}
.feat_copy h2{font-size:2.625rem;line-height:1.12;letter-spacing:-.02em;max-width:35rem;}
.feat_copy .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-paper);padding:var(--space-9) 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:1.125rem;}
.post_card img{width:100%;height:16.25rem;object-fit:cover;}
.post_card h3{font-size:1.5625rem;line-height:1.2;letter-spacing:-.01em;}
.pagination{display:flex;justify-content:center;gap:0.625rem;padding-top:var(--space-5);}
.pagination a,.pagination span{
  padding:0.6875rem var(--space-4);border:0.0625rem solid var(--color-line);
  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-paper);}

@media (max-width:1024px){
  .bloghead_shell{padding:3.5rem 0 var(--space-6);}
  .blogfilter_shell{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;}
}

/* ============================================================
   24. ARTICLE — header, hero, body, keep reading (55:445 / 451 / 453 / 477)
   ============================================================ */
.arthead_shell{background:var(--color-paper);padding:4.5rem 0 var(--space-7);}
.arthead_inner{display:flex;flex-direction:column;align-items:center;gap:1.375rem;text-align:center;}
.arthead_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;color:var(--color-muted);white-space:pre;line-height:normal;}
.arthead_inner h1{font-size:3.75rem;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-paper);padding:var(--space-9) 0 var(--space-8);}
.arthero_shell img{width:100%;height:32.5rem;object-fit:cover;}

.artbody_shell{background:var(--color-paper);padding:var(--space-9) 0 5.5rem;}
.artbody_shell .rich_toc{width:13.75rem;}
.rich_callout{display:flex;flex-direction:column;gap:0.625rem;padding:var(--space-5) 1.75rem;background:var(--color-surface);}
.rich_callout .rich_callout_kind{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-accent);line-height:normal;}
.rich_callout p:last-child{font-size:1rem;line-height:1.72;color:var(--color-ink);}

.keep_shell{background:var(--color-surface);padding:5rem 0;}
.keep_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.keep_head{display:flex;align-items:flex-end;gap:var(--space-5);padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.keep_head h2{font-size:2.375rem;letter-spacing:-.02em;line-height:normal;}
.keep_grid{display:flex;gap:var(--space-6);align-items:flex-start;}
.keep_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.keep_card img{width:100%;height:13.75rem;object-fit:cover;}
.keep_card h3{font-size:1.4375rem;line-height:1.2;letter-spacing:-.01em;}

@media (max-width:1024px){
  .arthead_inner h1{font-size:2.125rem;}
  .arthero_shell{padding:var(--space-6) 0;}
  .arthero_shell img{height:auto;}
  .artbody_shell{padding:var(--space-7) 0;}
  .keep_shell{padding:3.5rem 0;}
  .keep_head{flex-wrap:wrap;}
  .keep_grid{flex-direction:column;gap:2.5rem;}
}

/* ============================================================
   25. SEARCH — field, tabs, product results, journal results
        (56:319 / 325 / 334 / 354)
   ============================================================ */
.searchhead_shell{background:var(--color-paper);padding:4.5rem 0 2.5rem;}
.searchhead_inner{display:flex;flex-direction:column;gap:var(--space-5);}
.searchhead_inner h1{font-size:3.625rem;line-height:1;letter-spacing:-.03em;}
.search_field{display:flex;align-items:center;gap:0.875rem;padding-bottom:1.125rem;border-bottom:0.09375rem 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:2rem;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-paper);border-bottom:0.0625rem solid var(--color-line);}
.tabs{display:flex;align-items:center;gap:0.625rem;}
.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-paper);padding:3.5rem 0 var(--space-8);}
.sres_inner{display:flex;flex-direction:column;gap:var(--space-6);}
.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(--space-6);align-items:stretch;}
.sres_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.25rem;}
.sres_card img{width:100%;height:27.5rem;object-fit:cover;}
.sres_card h3{font-size:1.625rem;line-height:1.1;letter-spacing:-.01em;}
.sres_empty{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
  padding:0 var(--space-6);background:var(--color-surface);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-surface);padding:var(--space-8) 0 5.5rem;}
.jres_inner{display:flex;flex-direction:column;gap:1.75rem;}
.jres_item{display:flex;flex-direction:column;gap:0.625rem;padding:1.375rem 0;border-top:0.0625rem solid var(--color-line);}
.jres_item h3{font-size:1.6875rem;line-height:1.18;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.375rem;}
  .search_field input{font-size:1.375rem;}
  .sres_grid{flex-direction:column;gap:2.5rem;}
  .sres_empty{padding:2.5rem var(--space-5);}
  .tabs{flex-wrap:wrap;}
}

/* ============================================================
   26. CART — head + progress, line items + summary, empty state
        (56:405 / 56:411 / 56:468)
   ============================================================ */
.carthead_shell{background:var(--color-paper);padding:4.5rem 0 var(--space-6);}
.carthead_inner{display:flex;flex-direction:column;gap:1.25rem;}
.carthead_inner h1{font-size:3.625rem;line-height:1;letter-spacing:-.03em;}
.ship_meter{display:flex;flex-direction:column;gap:var(--space-3);}
.ship_meter p{font-size:0.875rem;color:var(--color-muted);line-height:normal;}
.ship_track{height:0.25rem;width:100%;background:var(--color-surface);}
.ship_fill{display:block;height:100%;background:var(--color-accent);}

.cart_shell{background:var(--color-paper);padding:2.5rem 0 var(--space-9);}
.cart_inner{display:flex;gap:var(--space-8);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-5);padding-bottom:var(--space-4);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 .head_spacer{flex:1;min-width:0;}
.cart_colhead .is-gap{width:5rem;flex:none;}
.cart_line{display:flex;gap:var(--space-5);align-items:center;padding:var(--space-5) 0;border-bottom:0.0625rem solid var(--color-line);}
.cart_line img{width:6.875rem;height:8.125rem;flex:none;object-fit:cover;}
.cart_item{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.4375rem;line-height:normal;}
.cart_item h2{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;}
.cart_variant{font-size:0.875rem;color:var(--color-muted);}
.cart_remove{background:none;border:0;padding:0;cursor:pointer;align-self:flex-start;
  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:1.125rem;padding:var(--space-3) var(--space-4);border:0.0625rem solid var(--color-border);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_note{display:flex;flex-direction:column;gap:0.625rem;padding-top:var(--space-5);}
.cart_note label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);line-height:normal;}
.cart_note textarea{
  width:100%;height:5.625rem;padding:var(--space-4) 1.125rem;background:var(--color-surface);border:0;resize:vertical;
  font-family:var(--font-body);font-size:0.875rem;color:var(--color-ink);line-height:normal;
}
.cart_note textarea::placeholder{color:var(--color-muted);}

.cart_summary{width:26.25rem;flex:none;display:flex;flex-direction:column;gap:1.125rem;padding:2.125rem;background:var(--color-surface);}
.cart_summary h2{font-size:1.875rem;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 .head_spacer{flex:1;min-width:0;}
.kv dd{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.kv.is-total{padding-top:1.125rem;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.625rem;letter-spacing:-.01em;color:var(--color-ink);}
.cart_fine{font-size:0.75rem;line-height:1.65;color:var(--color-muted);}

.emptybag_shell{background:var(--color-surface);padding:4.5rem 0;}
.emptybag_inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;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.375rem;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.375rem;}
  .cart_inner{flex-direction:column;gap:2.5rem;}
  .cart_summary{width:100%;}
  .cart_line{flex-wrap:wrap;}
  .cart_colhead{display:none;}
  .emptybag_inner h2{font-size:1.75rem;}
}

/* ============================================================
   27. 404 — message + suggestions (56:518 / 56:533)
   ============================================================ */
.err_shell{background:var(--color-paper);padding:7.5rem 0;}
.err_inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);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:4rem;line-height:1.04;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;}
.err_links{display:flex;gap:1.75rem;flex-wrap:wrap;justify-content:center;padding-top:var(--space-4);font-size:0.875rem;color:var(--color-muted);line-height:normal;}

.suggest_shell{background:var(--color-surface);padding:5rem 0 5.5rem;}
.suggest_inner{display:flex;flex-direction:column;gap:var(--space-6);}

@media (max-width:1024px){
  .err_shell{padding:4.5rem 0;}
  .err_inner h1{font-size:2.25rem;}
  .suggest_shell{padding:3.5rem 0;}
}

/* ============================================================
   28. PASSWORD gate (56:589) — 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:var(--space-5);
  padding:var(--space-9);background:var(--color-paper);
}
.gate_wordmark{font-family:var(--font-display);font-size:2.125rem;letter-spacing:.08em;line-height:normal;}
.gate_panel h1{font-size:3.25rem;line-height:1.04;letter-spacing:-.03em;}
.gate_panel .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:var(--space-3) 0 var(--space-4);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:.1em;white-space:pre;color:var(--color-ink);}
.gate_enter{display:flex;flex-direction:column;gap:0.875rem;padding-top:var(--space-6);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:var(--space-4) 1.125rem;background:var(--color-surface);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 (56:606) — no nav, no footer
   ============================================================ */
.gift_shell{background:var(--color-paper);padding:var(--space-9) 0;}
.gift_inner{display:flex;flex-direction:column;align-items:center;gap:1.75rem;text-align:center;}
.gift_wordmark{font-family:var(--font-display);font-size:2rem;letter-spacing:.08em;line-height:normal;}
.gift_kind{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;color:var(--color-muted);line-height:normal;}
.gift_card{
  display:flex;flex-direction:column;width:38.75rem;max-width:100%;height:21.25rem;
  padding:2.25rem 2.5rem;background:var(--color-clay);color:var(--color-paper);text-align:left;
}
.gift_card_brand{font-family:var(--font-display);font-size:1.875rem;letter-spacing:.08em;line-height:normal;}
.gift_card .head_spacer{flex:1;}
.gift_amount{font-family:var(--font-display);font-size:4rem;letter-spacing:-.02em;line-height:normal;}
.gift_card_meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;white-space:pre;line-height:normal;}
.gift_code{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:1.75rem 2.5rem;background:var(--color-surface);}
.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.5rem;letter-spacing:.06em;line-height:normal;}
.gift_qr{width:7.5rem;height:7.5rem;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:2.125rem;}
  .gate_img{width:100%;height:20rem;}
  .gift_shell{padding:3.5rem 0;}
  .gift_card{height:auto;gap:2.5rem;}
  .gift_amount{font-size:2.75rem;}
}

/* ============================================================
   30. AUTH — split form + image (57:433 / 466 / 507 / 536)
   ============================================================ */
.auth_wrap{display:flex;align-items:stretch;min-height:45rem;}
.auth_side{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:5.5rem var(--space-9);background:var(--color-paper);}
.auth_card{display:flex;flex-direction:column;gap:1.375rem;width:100%;}
.auth_card h1{font-size:2.75rem;line-height:1.04;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 .head_spacer{flex:1;min-width:0;}
.auth_extra a{font-weight:500;font-size:0.875rem;color:var(--color-ink);}
.button.is-auth{width:100%;padding:1.125rem 2.125rem;font-size:0.75rem;letter-spacing:.1em;}
.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, subscription card, orders table
        (57:569 / 57:572)
   ============================================================ */
.acchead_shell{background:var(--color-paper);padding:4.5rem 0 2.5rem;}
.acchead_inner{display:flex;flex-direction:column;gap:var(--space-4);}
.acchead_inner h1{font-size:3.25rem;line-height:1;letter-spacing:-.03em;}
.acchead_meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);white-space:pre;line-height:normal;}

.acc_shell{background:var(--color-paper);padding:5.5rem 0;}
.acc_inner{display:flex;gap:var(--space-8);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.75rem;}

.sub_card{display:flex;flex-direction:column;gap:var(--space-4);padding:1.75rem 1.875rem;background:var(--color-surface);}
.sub_head{display:flex;align-items:center;gap:var(--space-4);}
.sub_flag{font-weight:500;font-size:0.625rem;letter-spacing:.12em;color:var(--color-accent);line-height:normal;}
.sub_head .head_spacer{flex:1;min-width:0;}
.sub_next{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-muted);line-height:normal;}
.sub_row{display:flex;gap:1.25rem;align-items:center;}
.sub_row img{width:5.625rem;height:6.875rem;flex:none;object-fit:cover;}
.sub_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;line-height:normal;}
.sub_copy h2{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;}
.sub_copy p{font-size:0.875rem;color:var(--color-muted);white-space:pre;}
.button.is-manage{padding:1.125rem 2.125rem;font-size:0.75rem;letter-spacing:.1em;}

.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.125rem;letter-spacing:-.02em;line-height:normal;}
.orders_count{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;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-muted{color:var(--color-muted);}
.table td.is-action{text-align:right;white-space:pre;}
.table td.is-action a{font-weight:500;font-size:0.75rem;}

@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%;}
  .sub_row{flex-wrap:wrap;}
  .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, line items, totals + addresses (57:704 / 57:711)
   ============================================================ */
.order_shell{background:var(--color-paper);padding:5.5rem 0;}
.order_inner{display:flex;gap:var(--space-8);align-items:flex-start;}
.order_items{flex:1;min-width:0;display:flex;flex-direction:column;}
.order_line{display:flex;gap:var(--space-5);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;}
.order_item{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;line-height:normal;}
.order_item h2{font-family:var(--font-display);font-size:1.4375rem;letter-spacing:-.01em;}
.order_item .order_variant{font-size:0.875rem;color:var(--color-muted);}
.order_item a{font-weight:500;font-size:0.75rem;}
.order_qty{font-family:var(--font-mono);font-size:0.75rem;color:var(--color-muted);line-height:normal;}
.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:var(--space-5);}
.order_totals{display:flex;flex-direction:column;gap:0.875rem;padding:1.75rem;background:var(--color-surface);}
.order_totals .kv dt{font-size:0.875rem;}
.order_totals .kv.is-total{padding-top:var(--space-4);}
.order_totals .kv.is-total dt,.order_totals .kv.is-total dd{font-size:1.5rem;}
.order_block{display:flex;flex-direction:column;gap:0.625rem;padding-top:1.375rem;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 (57:801 / 57:804)
   ============================================================ */
.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-surface);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-accent);line-height:normal;}
.addr_cardhead .head_spacer{flex:1;min-width:0;}
.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_actions .head_spacer{flex:1;min-width:0;}
.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;padding:1.125rem 2.125rem;font-size:0.75rem;letter-spacing:.1em;}

@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: 1.125rem di cart, 0.875rem di order) */
.cart_summary dl{display:flex;flex-direction:column;gap:1.125rem;margin:0;}
.order_totals{gap:0.875rem;margin:0;}

/* ============================================================
   34. VARIANT GALLERY chrome — cuma dipakai di variants.html,
   bukan bagian desain AKTA. Label mono di atas tiap section,
   meniru label frame di area varian Figma.
   ============================================================ */
.vg_head{background:var(--color-ink);color:var(--color-paper);padding:var(--space-8) 0 3.5rem;}
.vg_head h1{font-size:3.625rem;line-height:1;letter-spacing:-.03em;color:var(--color-paper);}
.vg_head p{font-size:1rem;line-height:1.7;color:var(--color-paper);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(245,242,236,.32);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-paper);line-height:normal;
}
.vg_toc a:hover{background:var(--color-paper);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-accent);}
.vg_item{border-top:0.0625rem solid var(--color-line);}

/* ============================================================
   35. VARIAN — HERO A (evidence ledger) — 116:703
   ============================================================ */
.hv_led{display:flex;align-items:stretch;background:var(--color-paper);}
.hv_led_copy{flex:1;min-width:0;min-height:52.5rem;display:flex;flex-direction:column;justify-content:center;padding:5.5rem 3.5rem 5.5rem var(--space-8);}
.hv_kicker{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.14em;color:var(--color-muted);line-height:normal;margin-bottom:1.25rem;}
.hv_led_copy h1{font-size:4.5rem;line-height:1;letter-spacing:-.02em;max-width:35rem;margin-bottom:1.125rem;}
.hv_led_lede{font-size:1rem;line-height:1.72;color:var(--color-muted);max-width:30rem;margin-bottom:1.875rem;}
.hv_actions{display:flex;gap:0.625rem;flex-wrap:wrap;}
.button.is-hv{padding:0.9375rem 1.75rem;font-size:0.75rem;letter-spacing:.1em;}
.hv_led_side{width:41.25rem;flex:none;min-height:52.5rem;display:flex;flex-direction:column;justify-content:center;padding:5.5rem var(--space-8) 5.5rem 3.5rem;background:var(--color-surface);}
.hv_ledger{display:flex;flex-direction:column;padding:1.75rem 1.875rem;background:var(--color-paper);border:0.0625rem solid var(--color-line);}
.hv_ledger_h{display:flex;align-items:center;gap:var(--space-4);margin-bottom:1.25rem;line-height:normal;}
.hv_ledger_h h2{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.14em;color:var(--color-accent);}
.hv_ledger_h p:last-child{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--color-muted);}
.hv_claim{display:flex;flex-direction:column;gap:0.4375rem;padding:var(--space-4) 0;border-top:0.0625rem solid var(--color-line);}
.hv_claim:last-of-type{border-bottom:0.0625rem solid var(--color-line);}
.hv_claim h3{font-family:var(--font-display);font-size:1.375rem;line-height:1.26;letter-spacing:-.01em;}
.hv_claim_m{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;}
.hv_claim_m .is-ref{color:var(--color-muted);}
.hv_claim_m .is-n{color:var(--color-accent);}
.hv_ledger_f{display:flex;align-items:center;gap:var(--space-3);padding-top:1.125rem;}
.hv_ledger_f img{width:2.75rem;height:2.75rem;flex:none;object-fit:cover;border-radius:0.25rem;}
.hv_ledger_f p{font-size:0.75rem;line-height:1.58;color:var(--color-muted);max-width:26.25rem;}

@media (max-width:1024px){
  .hv_led{flex-direction:column;}
  .hv_led_copy{min-height:0;padding:3.5rem var(--space-5);}
  .hv_led_copy h1{font-size:2.5rem;}
  .hv_led_side{width:100%;min-height:0;padding:2.5rem var(--space-5);}
  .hv_ledger{padding:var(--space-5);}
}

/* ============================================================
   36. VARIAN — HERO B (the index, full-bleed) — 116:757
   ============================================================ */
.hv_idx_stage{
  position:relative;min-height:52.5rem;display:flex;flex-direction:column;align-items:center;
  padding:4.5rem var(--space-8);overflow:hidden;background:var(--color-paper);
}
.hv_idx_stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hv_idx_card{
  position:relative;width:61.25rem;max-width:100%;display:flex;flex-direction:column;
  padding:var(--space-7) 3.5rem 2.75rem;background:var(--color-paper);
}
.hv_idx_h{display:flex;align-items:center;gap:var(--space-4);margin-bottom:1.375rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.14em;line-height:normal;}
.hv_idx_h .is-lab{color:var(--color-muted);white-space:pre;}
.hv_idx_h .is-issue{color:var(--color-accent);}
.hv_idx_card h1{font-size:3.875rem;line-height:1.02;letter-spacing:-.02em;text-align:center;max-width:53.75rem;align-self:center;margin-bottom:0.875rem;}
.hv_idx_lede{font-size:1rem;line-height:1.7;color:var(--color-muted);text-align:center;max-width:37.5rem;align-self:center;margin-bottom:var(--space-6);}
.hv_idx_cols{display:flex;gap:2.5rem;align-items:flex-start;}
.hv_idx_col{flex:1;min-width:0;display:flex;flex-direction:column;}
.hv_idx_row{display:flex;align-items:center;gap:0.875rem;padding:0.6875rem 0;border-top:0.0625rem solid var(--color-line);line-height:normal;}
.hv_idx_col .hv_idx_row:last-child{border-bottom:0.0625rem solid var(--color-line);}
.hv_idx_row .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;color:var(--color-accent);}
.hv_idx_row .is-name{font-size:0.875rem;}
.hv_idx_row .is-pct{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;}
.hv_idx_actions{display:flex;gap:0.625rem;justify-content:center;flex-wrap:wrap;margin-top:1.875rem;}

@media (max-width:1024px){
  .hv_idx_stage{min-height:0;padding:2.5rem var(--space-5);}
  .hv_idx_card{padding:1.75rem var(--space-5);}
  .hv_idx_card h1{font-size:2rem;}
  .hv_idx_cols{flex-direction:column;gap:0;}
}

/* ============================================================
   37. VARIAN — ANNOUNCEMENT A (countdown) 59:578 · B (rotating) 59:596
   ============================================================ */
.va_cd{display:flex;gap:1.25rem;align-items:center;padding:0.875rem 5rem;background:var(--color-accent);}
.va_cd_msg{font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.14em;line-height:normal;color:var(--color-paper);white-space:nowrap;}
.va_cd_clock{display:flex;gap:var(--space-2);align-items:center;}
.va_cd_unit{display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.3125rem 0.5625rem;background:var(--color-paper);color:var(--color-accent);font-family:var(--font-mono);line-height:normal;}
.va_cd_unit b{font-weight:400;font-size:0.875rem;letter-spacing:.02em;}
.va_cd_unit span{font-size:0.625rem;letter-spacing:.1em;}
.va_cd_link{font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.12em;color:var(--color-paper);white-space:pre;text-decoration:none;}

.va_rot{display:flex;gap:var(--space-4);align-items:center;padding:0.8125rem 5rem;background:var(--color-ink);color:var(--color-paper);}
.va_rot button{background:none;border:0;padding:0;color:inherit;font-family:var(--font-body);cursor:pointer;line-height:normal;}
.va_rot .is-arrow{font-size:1rem;}
.va_rot .is-close{font-size:0.75rem;}
.va_rot_msg{display:flex;flex-direction:column;align-items:center;}
.va_rot_msg p{font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.14em;line-height:normal;white-space:pre;}
/* Dots di Figma satu SVG gabungan (172c8679…) — dibangun ulang sebagai list
   biar state aktifnya bisa diprogram, bukan gambar mati. */
.va_rot_dots{display:flex;gap:0.3125rem;align-items:center;margin:0;padding:0.375rem 0 0;list-style:none;}
.va_rot_dots li{width:0.3125rem;height:0.3125rem;border-radius:50%;background:var(--color-paper);opacity:.3;}
.va_rot_dots li[aria-current="true"]{opacity:1;}

@media (max-width:1024px){
  .va_cd,.va_rot{padding-left:var(--space-5);padding-right:var(--space-5);flex-wrap:wrap;}
  .va_cd_msg,.va_rot_msg p{white-space:normal;}
}

/* ============================================================
   38. VARIAN — CREDENTIALS A (over image) 59:609 · B (evidence rows) 59:625
   ============================================================ */
.vc_over{position:relative;display:flex;flex-direction:column;background:var(--color-paper);}
.vc_over > img{display:block;width:100%;height:15rem;object-fit:cover;}
/* Sama seperti CTA — B: opacity 86% di Figma dipasang pada frame Stats sehingga
   angkanya ikut pudar. DEVIASI: lapisan gelap dipindah ke ::before, teks penuh. */
.vc_over_stats{position:absolute;inset:0;display:flex;align-items:center;padding:0 5rem;color:var(--color-paper);}
.vc_over_stats::before{content:"";position:absolute;inset:0;background:var(--color-ink);opacity:.86;}
.vc_stat{position:relative;}
.vc_stat{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:0.625rem;padding:0 2.25rem;border-left:0.0625rem solid var(--color-paper);}
.vc_stat:first-child{padding:0 2.25rem 0 0;border-left:0;}
.vc_stat b{font-family:var(--font-display);font-weight:400;font-size:2.75rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;}
.vc_stat span{font-family:var(--font-body);font-weight:500;font-size:0.625rem;line-height:1.5;letter-spacing:.12em;}

.vc_rows{display:flex;flex-direction:column;padding:4.5rem 5rem;background:var(--color-surface);}
.vc_rows_head{display:flex;align-items:flex-end;padding-bottom:var(--space-5);border-bottom:0.0625rem solid var(--color-line);}
.vc_rows_head h2{font-size:2.5rem;line-height:normal;letter-spacing:-.02em;white-space:nowrap;}
.vc_rows_head .is-meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);}
.vc_row{display:flex;gap:1.75rem;align-items:center;padding:1.375rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vc_row .is-fig{width:6.875rem;flex:none;font-family:var(--font-display);font-size:2.375rem;line-height:normal;letter-spacing:-.01em;color:var(--color-accent);}
.vc_row .is-claim{flex:1;min-width:0;font-size:1.125rem;line-height:1.6;}
.vc_row .is-ref{width:18.75rem;flex:none;text-align:right;font-family:var(--font-mono);font-size:0.625rem;line-height:1.6;letter-spacing:.04em;color:var(--color-muted);}

@media (max-width:1024px){
  .vc_over_stats{position:static;flex-wrap:wrap;opacity:1;padding:1.75rem var(--space-5);gap:1.25rem 0;}
  .vc_over > img{display:none;}
  .vc_stat{flex:0 0 50%;}
  .vc_rows{padding:var(--space-7) var(--space-5);}
  .vc_rows_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vc_rows_head h2{font-size:1.75rem;white-space:normal;}
  .vc_row{flex-wrap:wrap;gap:var(--space-2) 1.25rem;}
  .vc_row .is-ref{width:auto;text-align:left;}
}

/* ============================================================
   39. VARIAN — CTA A (split image) 59:647 · B (full-bleed scrim) 59:659
   ============================================================ */
.vcta_split{display:flex;align-items:center;background:var(--color-surface);}
.vcta_split > img{width:38.75rem;height:27.5rem;flex:none;object-fit:cover;display:block;}
.vcta_split_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.375rem;align-items:flex-start;padding:4.5rem 5rem;}
.vcta_eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);}
.vcta_split_copy h2{font-size:2.875rem;line-height:1.04;letter-spacing:-.02em;max-width:32.5rem;}
.vcta_split_copy p.is-lede{font-size:1rem;line-height:1.72;color:var(--color-muted);max-width:30rem;}
.vcta_actions{display:flex;gap:0.875rem;}
.button.is-vcta{padding:1.125rem 2.125rem;font-size:0.75rem;letter-spacing:.1em;}

.vcta_bleed{position:relative;display:flex;flex-direction:column;background:var(--color-ink);}
.vcta_bleed > img{display:block;width:100%;height:32.5rem;object-fit:cover;}
/* Di Figma opacity 62% dipasang pada frame Scrim, jadi teksnya ikut pudar.
   DEVIASI: lapisan gelapnya dipindah ke ::before supaya teks tetap 100% —
   itu yang dimaksud sebuah scrim, dan kontrasnya lolos WCAG. */
.vcta_bleed_scrim{position:absolute;inset:0;display:flex;flex-direction:column;gap:1.375rem;align-items:center;justify-content:center;padding:0 5rem;}
.vcta_bleed_scrim::before{content:"";position:absolute;inset:0;background:var(--color-ink);opacity:.62;}
.vcta_bleed_scrim > *{position:relative;}
.vcta_bleed_scrim .vcta_eyebrow{color:var(--color-paper);letter-spacing:.1em;}
.vcta_bleed_scrim h2{font-size:3.375rem;line-height:1.04;letter-spacing:-.02em;text-align:center;color:var(--color-paper);max-width:56.25rem;}
.vcta_bleed_scrim p.is-lede{font-size:1rem;line-height:1.65;text-align:center;color:var(--color-paper);max-width:37.5rem;}

@media (max-width:1024px){
  .vcta_split{flex-direction:column;align-items:stretch;}
  .vcta_split > img{width:100%;height:17.5rem;}
  .vcta_split_copy{padding:2.5rem var(--space-5);}
  .vcta_split_copy h2{font-size:1.875rem;}
  .vcta_bleed > img{height:26.25rem;}
  .vcta_bleed_scrim{padding:0 var(--space-5);}
  .vcta_bleed_scrim h2{font-size:2rem;}
}

/* ============================================================
   40. VARIAN — FORMULAS B (catalogue list) 61:609
   ============================================================ */
.vf_list{display:flex;flex-direction:column;padding:5.5rem 5rem;background:var(--color-surface);}
.vf_list_head{display:flex;align-items:flex-end;padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vf_list_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.vf_list_head .is-meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vf_row{display:flex;gap:var(--space-6);align-items:center;padding:1.75rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vf_row .is-n{width:2.125rem;flex:none;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vf_row > img{width:9.375rem;height:11.25rem;flex:none;object-fit:cover;display:block;}
.vf_row_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);}
.vf_row_copy h3{font-size:1.875rem;line-height:1.1;letter-spacing:-.01em;}
.vf_row_copy .is-role{font-family:var(--font-body);font-weight:500;font-size:0.875rem;letter-spacing:.02em;color:var(--color-accent);}
.vf_row_copy .is-inci{font-size:0.875rem;line-height:1.6;color:var(--color-muted);}
.vf_row_buy{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-end;flex:none;}
.vf_row_buy .is-price{font-family:var(--font-display);font-size:1.75rem;line-height:normal;letter-spacing:-.01em;}
.button.is-vf{padding:var(--space-4) 1.875rem;font-size:0.75rem;letter-spacing:.1em;}

@media (max-width:1024px){
  .vf_list{padding:var(--space-7) var(--space-5);}
  .vf_list_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vf_list_head h2{font-size:1.875rem;white-space:normal;}
  .vf_row{flex-wrap:wrap;gap:var(--space-4) 1.25rem;}
  .vf_row > img{width:6.875rem;height:8.25rem;}
  .vf_row_buy{flex-direction:row;align-items:center;gap:var(--space-4);width:100%;justify-content:space-between;}
}

/* ============================================================
   41. VARIAN — RELATED A (bundle bar) 61:648
   ============================================================ */
.vrel_bundle{display:flex;flex-direction:column;gap:2.25rem;padding:5.5rem 5rem;background:var(--color-paper);}
.vrel_head{display:flex;align-items:flex-end;padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vrel_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.vrel_head .is-meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vrel_row{display:flex;gap:var(--space-5);align-items:center;}
.vrel_item{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;align-items:center;}
.vrel_item img{width:100%;height:18.75rem;object-fit:cover;display:block;}
.vrel_item h3{font-size:1.375rem;line-height:normal;letter-spacing:-.01em;}
.vrel_item .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;color:var(--color-muted);}
.vrel_plus{font-family:var(--font-display);font-size:2.125rem;line-height:normal;color:var(--color-muted);}
.vrel_bar{display:flex;gap:1.75rem;align-items:center;padding:1.625rem var(--space-6);background:var(--color-surface);}
.vrel_bar_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;}
.vrel_bar_copy h3{font-size:1.625rem;line-height:normal;letter-spacing:-.01em;}
.vrel_bar_copy p{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vrel_bar_price{display:flex;gap:var(--space-3);align-items:center;}
.vrel_bar_price s{font-size:1rem;line-height:normal;color:var(--color-muted);text-decoration:line-through;}
.vrel_bar_price .is-now{font-family:var(--font-display);font-size:1.875rem;line-height:normal;letter-spacing:-.01em;}
.button.is-vrel{padding:var(--space-4) 1.875rem;font-size:0.75rem;letter-spacing:.1em;}

@media (max-width:1024px){
  .vrel_bundle{padding:var(--space-7) var(--space-5);gap:var(--space-5);}
  .vrel_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vrel_head h2{font-size:1.875rem;white-space:normal;}
  .vrel_row{flex-direction:column;align-items:stretch;}
  .vrel_item img{height:15rem;}
  .vrel_bar{flex-wrap:wrap;gap:var(--space-4);}
}

/* ============================================================
   42. VARIAN — RELATED B (compact strip) 61:678
   ============================================================ */
.vrs_strip{display:flex;flex-direction:column;gap:1.75rem;padding:4.5rem 5rem;background:var(--color-surface);}
.vrs_head{display:flex;align-items:center;}
.vrs_head h2{font-size:2.125rem;line-height:normal;letter-spacing:-.02em;white-space:nowrap;}
.vrs_nav{display:flex;gap:0.625rem;}
.vrs_nav button{background:none;border:0;padding:0;font-family:var(--font-body);font-size:1rem;line-height:normal;color:var(--color-muted);cursor:pointer;}
.vrs_nav button:hover{color:var(--color-ink);}
.vrs_track{display:flex;gap:var(--space-4);align-items:flex-start;}
.vrs_item{flex:1;min-width:0;display:flex;gap:0.875rem;align-items:center;padding:0.875rem 1.125rem 0.875rem 0.875rem;background:var(--color-paper);}
/* The photo is wrapped in a link now, so a direct-child selector no longer reaches
   it — the image lost its size and pushed the title through the add button. */
.vrs_item > a{flex:none;display:block;line-height:0;}
.vrs_item img{width:4.5rem;height:5.375rem;flex:none;object-fit:cover;display:block;}
.vrs_item_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem;}
.vrs_item_t h3{font-size:1.125rem;line-height:1.15;letter-spacing:-.01em;}
.vrs_item_t .is-size{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}
.vrs_item_t .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.vrs_add{width:2.125rem;height:2.125rem;flex:none;display:flex;align-items:center;justify-content:center;
  background:none;border:0.0625rem solid var(--color-ink);color:var(--color-ink);
  font-family:var(--font-body);font-size:1rem;line-height:normal;cursor:pointer;}
.vrs_add:hover{background:var(--color-ink);color:var(--color-paper);}

@media (max-width:1024px){
  .vrs_strip{padding:var(--space-7) var(--space-5);}
  .vrs_head h2{font-size:1.625rem;white-space:normal;}
  .vrs_track{flex-wrap:wrap;}
  .vrs_item{flex:1 1 46%;}
}
@media (max-width:720px){ .vrs_item{flex:1 1 100%;} }

/* ============================================================
   43. VARIAN — FILTER A (sticky bar) 61:717
   ============================================================ */
.vfl_bar{display:flex;flex-direction:column;padding:0 5rem;background:var(--color-paper);}
.vfl_row{display:flex;gap:0.625rem;align-items:center;padding:1.375rem 0;border-top:0.0625rem solid var(--color-line);border-bottom:0.0625rem solid var(--color-line);flex-wrap:wrap;}
.vfl_chip{padding:0.5625rem var(--space-4);background:none;border:0.0625rem solid var(--color-border);
  font-family:var(--font-body);font-size:0.75rem;line-height:normal;color:var(--color-ink);cursor:pointer;}
.vfl_chip[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper);font-weight:500;}
.vfl_active{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-2) 0.625rem var(--space-2) var(--space-3);background:var(--color-surface);
  border:0;font-family:var(--font-body);font-size:0.75rem;line-height:normal;color:var(--color-ink);cursor:pointer;}
.vfl_active span{font-size:0.625rem;color:var(--color-muted);}
.vfl_sort{background:none;border:0;padding:0;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;
  line-height:normal;color:var(--color-muted);white-space:pre;cursor:pointer;}
.vfl_count{display:flex;align-items:center;padding:1.125rem 0;}
.vfl_count p{font-size:0.875rem;line-height:normal;color:var(--color-muted);white-space:pre;}
.vfl_count button{background:none;border:0;padding:0;font-family:var(--font-body);font-weight:500;font-size:0.75rem;
  line-height:normal;color:var(--color-ink);cursor:pointer;text-decoration:underline;text-underline-offset:0.1875rem;}

@media (max-width:1024px){ .vfl_bar{padding:0 var(--space-5);} }

/* ============================================================
   44. VARIAN — FILTER B (sidebar panel) 61:739
   ============================================================ */
.vfb{display:flex;gap:3.5rem;align-items:flex-start;padding:var(--space-8) 5rem;background:var(--color-paper);}
.vfb_side{width:18.75rem;flex:none;display:flex;flex-direction:column;}
.vfb_side_head{display:flex;align-items:center;padding-bottom:1.125rem;border-bottom:0.0625rem solid var(--color-ink);}
.vfb_side_head h2{font-size:1.625rem;line-height:normal;letter-spacing:-.01em;}
.vfb_clear{background:none;border:0;padding:0;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;
  line-height:normal;color:var(--color-muted);cursor:pointer;}
.vfb_group{display:flex;flex-direction:column;gap:var(--space-3);padding:1.375rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vfb_group_head{display:flex;align-items:center;}
.vfb_group_head h3{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);}
.vfb_group_head .is-toggle{font-family:var(--font-body);font-size:0.875rem;line-height:normal;color:var(--color-muted);}
/* Kotak centang di Figma cuma frame + glyph ✓ — dibangun ulang sebagai
   <input type="checkbox"> beneran, tampilannya disamakan lewat::before. */
.vfb_opt{display:flex;gap:var(--space-3);align-items:center;cursor:pointer;}
.vfb_opt input{appearance:none;-webkit-appearance:none;margin:0;width:1rem;height:1rem;flex:none;
  border:0.0625rem solid var(--color-border);background:var(--color-paper);display:grid;place-items:center;cursor:pointer;}
.vfb_opt input:checked{background:var(--color-ink);border-color:var(--color-ink);}
.vfb_opt input:checked::before{content:"\2713";font-family:var(--font-body);font-size:0.625rem;color:var(--color-paper);}
.vfb_opt .is-label{flex:1;min-width:0;font-size:0.875rem;line-height:normal;}
.vfb_opt .is-count{font-family:var(--font-mono);font-size:0.625rem;line-height:normal;color:var(--color-muted);}
.vfb_price{display:flex;flex-direction:column;gap:0.875rem;padding-top:1.375rem;}
.vfb_price h3{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);}
.vfb_track{height:0.1875rem;background:var(--color-surface);}
.vfb_track span{display:block;height:100%;width:10.625rem;background:var(--color-ink);}
.vfb_range{display:flex;align-items:center;font-family:var(--font-mono);font-size:0.75rem;line-height:normal;}
.vfb_results{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-5);}
.vfb_res_head{display:flex;align-items:center;padding-bottom:1.125rem;border-bottom:0.0625rem solid var(--color-line);}
.vfb_res_head p{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vfb_grid{display:flex;gap:1.75rem;align-items:flex-start;}
.vfb_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.vfb_card > img{width:100%;height:26.25rem;object-fit:cover;display:block;}
.vfb_card_row{display:flex;align-items:flex-end;}
.vfb_card_row h3{font-size:1.5rem;line-height:normal;letter-spacing:-.01em;}
.vfb_card_row .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;line-height:normal;}
.vfb_card .is-spec{font-size:0.875rem;line-height:1.55;color:var(--color-muted);}

@media (max-width:1024px){
  .vfb{flex-direction:column;gap:var(--space-6);padding:var(--space-7) var(--space-5);}
  .vfb_side{width:100%;}
  .vfb_card > img{height:20rem;}
}

/* ============================================================
   45. VARIAN — INGREDIENT STUDY A (index tiles) 62:578
   ============================================================ */
.vis_index{display:flex;flex-direction:column;gap:2.5rem;padding:5.5rem 5rem;background:var(--color-paper);}
.vis_head{display:flex;align-items:flex-end;padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vis_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.vis_head .is-meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vis_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.vis_tile{display:flex;gap:var(--space-4);align-items:center;padding:1.125rem 1.375rem 1.125rem 1.125rem;background:var(--color-surface);}
.vis_tile > img{width:4rem;height:4rem;flex:none;object-fit:cover;display:block;}
.vis_tile_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem;}
.vis_tile_nr{display:flex;align-items:flex-end;}
.vis_tile_nr h3{font-size:1.25rem;line-height:1.1;letter-spacing:-.01em;}
.vis_tile_nr .is-pct{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;color:var(--color-accent);}
.vis_tile_t .is-role{font-size:0.75rem;line-height:1.5;color:var(--color-muted);}
.vis_tile .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}

@media (max-width:1024px){
  .vis_index{padding:var(--space-7) var(--space-5);gap:var(--space-5);}
  .vis_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vis_head h2{font-size:1.875rem;white-space:normal;}
  .vis_grid{grid-template-columns:1fr;}
}

/* ============================================================
   46. VARIAN — RITUAL A (AM / PM timeline) 62:716
   ============================================================ */
.vrt_tl{display:flex;flex-direction:column;gap:2.75rem;padding:5.5rem 5rem;background:var(--color-paper);}
.vrt_head{display:flex;align-items:flex-end;padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vrt_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.vrt_head .is-meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vrt_part{display:flex;flex-direction:column;gap:var(--space-5);padding-top:1.625rem;border-top:0.0625rem solid var(--color-ink);}
.vrt_part_head{display:flex;gap:var(--space-4);align-items:center;}
.vrt_part_head h3{font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.14em;line-height:normal;color:var(--color-accent);}
.vrt_part_head .is-time{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}
.vrt_part_head .is-dur{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vrt_steps{display:flex;gap:1.75rem;align-items:flex-start;}
.vrt_step{flex:1;min-width:0;display:flex;gap:var(--space-4);align-items:flex-start;}
.vrt_step > img{width:6.875rem;height:8.125rem;flex:none;object-fit:cover;display:block;}
.vrt_step_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);}
.vrt_step_t .is-n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vrt_step_t h4{font-family:var(--font-display);font-weight:400;font-size:1.375rem;line-height:1.12;letter-spacing:-.01em;}
.vrt_step_t p{font-size:0.875rem;line-height:1.6;color:var(--color-muted);}

@media (max-width:1024px){
  .vrt_tl{padding:var(--space-7) var(--space-5);gap:var(--space-6);}
  .vrt_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vrt_head h2{font-size:1.875rem;white-space:normal;}
  .vrt_steps{flex-direction:column;gap:1.25rem;}
}

/* ============================================================
   47. VARIAN — RITUAL B (alternating steps) 62:772
   ============================================================ */
.vra_alt{display:flex;flex-direction:column;gap:3.5rem;padding:5.5rem 5rem;background:var(--color-surface);}
.vra_head{display:flex;align-items:flex-end;padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vra_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.vra_head .is-meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vra_step{display:flex;gap:3.5rem;align-items:center;}
.vra_step > img{flex:1;min-width:0;height:22.5rem;object-fit:cover;display:block;}
.vra_step_c{width:32.5rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);}
.vra_step_c .is-n{font-family:var(--font-display);font-size:3.5rem;line-height:1;letter-spacing:-.02em;color:var(--color-accent);}
.vra_step_c h3{font-size:2.375rem;line-height:1.05;letter-spacing:-.02em;}
.vra_step_c p{font-size:1rem;line-height:1.74;color:var(--color-muted);max-width:30.625rem;}
.vra_step_c .is-tag{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-accent);}
.vra_step.is-flip{flex-direction:row-reverse;}

@media (max-width:1024px){
  .vra_alt{padding:var(--space-7) var(--space-5);gap:2.5rem;}
  .vra_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vra_head h2{font-size:1.75rem;white-space:normal;}
  .vra_step,.vra_step.is-flip{flex-direction:column;gap:1.25rem;align-items:stretch;}
  .vra_step > img{width:100%;height:16.25rem;}
  .vra_step_c{width:100%;}
  .vra_step_c h3{font-size:1.75rem;}
}

/* ============================================================
   48. VARIAN — REVIEW A (summary + distribution) 62:799
   ============================================================ */
.vrv_sum{display:flex;flex-direction:column;gap:2.75rem;padding:5.5rem 5rem;background:var(--color-paper);}
.vrv_head{display:flex;align-items:flex-end;padding-bottom:1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vrv_head h2{font-size:2.75rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.vrv_head .is-meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;color:var(--color-muted);}
.vrv_body{display:flex;gap:var(--space-8);align-items:flex-start;}
.vrv_panel{width:22.5rem;flex:none;display:flex;flex-direction:column;gap:1.25rem;}
.vrv_score{display:flex;gap:0.875rem;align-items:flex-end;}
.vrv_score .is-avg{font-family:var(--font-display);font-size:4rem;line-height:1;letter-spacing:-.02em;}
.vrv_score_t{display:flex;flex-direction:column;gap:0.375rem;}
/* Bintang di Figma lima text node terpisah — dijadikan satu span ber-aria-label
   supaya pembaca layar bilang "4.8 dari 5", bukan "bintang bintang bintang…". */
.vrv_stars{display:flex;gap:var(--space-1);font-size:0.875rem;line-height:normal;color:var(--color-accent);}
.vrv_score_t .is-count{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vrv_dist{display:flex;gap:var(--space-3);align-items:center;}
.vrv_dist .is-star{font-family:var(--font-mono);font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vrv_dist .is-track{flex:1;min-width:0;height:0.375rem;background:var(--color-surface);}
.vrv_dist .is-track span{display:block;height:100%;background:var(--color-accent);}
.vrv_dist .is-n{width:2.125rem;flex:none;text-align:right;font-family:var(--font-mono);font-size:0.625rem;line-height:normal;color:var(--color-muted);}
.vrv_stat{display:flex;flex-direction:column;gap:0.625rem;padding-top:1.375rem;border-top:0.0625rem solid var(--color-line);}
.vrv_stat p{font-size:0.875rem;line-height:1.65;}
.vrv_stat .is-src{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vrv_list{flex:1;min-width:0;display:flex;flex-direction:column;}
.vrv_item{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) 0;border-top:0.0625rem solid var(--color-line);}
.vrv_item .vrv_stars{font-size:0.75rem;}
.vrv_item blockquote{margin:0;font-family:var(--font-display);font-size:1.4375rem;line-height:1.4;letter-spacing:-.01em;}
.vrv_item figcaption{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);white-space:pre;}

@media (max-width:1024px){
  .vrv_sum{padding:var(--space-7) var(--space-5);gap:var(--space-6);}
  .vrv_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vrv_head h2{font-size:1.875rem;white-space:normal;}
  .vrv_body{flex-direction:column;gap:var(--space-6);}
  .vrv_panel{width:100%;}
  .vrv_item blockquote{font-size:1.1875rem;}
}

/* ============================================================
   49. VARIAN — REVIEW B (photo cards) 62:873
   ============================================================ */
.vrp_cards{display:flex;flex-direction:column;gap:2.5rem;padding:5.5rem 5rem;background:var(--color-surface);}
.vrp_grid{display:flex;gap:1.75rem;align-items:flex-start;}
.vrp_card{flex:1;min-width:0;display:flex;flex-direction:column;}
.vrp_card > img{width:100%;height:18.75rem;object-fit:cover;display:block;}
.vrp_card_b{display:flex;flex-direction:column;gap:0.875rem;padding:1.375rem;background:var(--color-paper);}
.vrp_card_b .is-tag{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-accent);}
.vrp_card_b blockquote{margin:0;font-family:var(--font-display);font-size:1.25rem;line-height:1.38;letter-spacing:-.01em;}
.vrp_card_b .vrv_stars{font-size:0.625rem;gap:0.1875rem;}
.vrp_card_b figcaption{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);white-space:pre;}

@media (max-width:1024px){
  .vrp_cards{padding:var(--space-7) var(--space-5);gap:var(--space-5);}
  .vrp_grid{flex-wrap:wrap;}
  .vrp_card{flex:1 1 46%;}
}
@media (max-width:720px){ .vrp_card{flex:1 1 100%;} }

/* ============================================================
   50. VARIAN — ATC A (inline block) 63:578
   ============================================================ */
.vat_inline{display:flex;flex-direction:column;padding:4.5rem 5rem;background:var(--color-paper);}
.vat_block{width:35rem;max-width:100%;display:flex;flex-direction:column;gap:1.625rem;}
.vat_price{display:flex;gap:0.875rem;align-items:flex-end;}
.vat_price .is-amt{font-family:var(--font-display);font-size:2.125rem;line-height:normal;letter-spacing:-.01em;}
.vat_price .is-unit{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vat_price .is-stock{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-accent);}
.vat_field{display:flex;flex-direction:column;gap:var(--space-3);}
.vat_field legend,.vat_field .is-legend{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);padding:0;}
.vat_opts{display:flex;gap:var(--space-3);}
.vat_opt{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0.8125rem 1.125rem;
  background:none;border:0.0625rem solid var(--color-border);font-family:var(--font-body);font-size:0.75rem;line-height:normal;cursor:pointer;}
.vat_opt[aria-pressed="true"]{background:var(--color-surface);border:0.09375rem solid var(--color-ink);font-weight:500;}
.vat_row{display:flex;gap:0.875rem;}
.vat_qty{display:flex;gap:1.25rem;align-items:center;padding:1.125rem 1.25rem;border:0.0625rem solid var(--color-border);}
.vat_qty button{font-family:var(--font-body);font-size:1rem;line-height:normal;}
.vat_qty button:first-child{color:var(--color-muted);}
.vat_qty output{font-family:var(--font-mono);font-size:0.875rem;line-height:normal;}
.button.is-vat{flex:1;min-width:0;padding:1.125rem 1.875rem;font-size:0.75rem;letter-spacing:.1em;}
.vat_sub{display:flex;gap:0.875rem;align-items:center;padding:var(--space-4) 1.25rem;background:var(--color-surface);}
/* Toggle di Figma cuma SVG (2efaab4f…) — dibangun ulang sebagai
   <button role="switch" aria-checked> supaya bisa dipakai keyboard. */
.vat_switch{width:2.375rem;height:1.375rem;flex:none;padding:0.1875rem;border-radius:0.6875rem;
  background:var(--color-border);display:flex;align-items:center;transition:background .2s ease;}
.vat_switch::before{content:"";width:1rem;height:1rem;border-radius:50%;background:var(--color-paper);transition:transform .2s ease;}
.vat_switch[aria-checked="true"]{background:var(--color-accent);}
.vat_switch[aria-checked="true"]::before{transform:translateX(1rem);}
.vat_sub_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.vat_sub_t .is-title{font-family:var(--font-body);font-weight:500;font-size:0.875rem;line-height:normal;}
.vat_sub_t .is-note{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vat_sub .is-price{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.02em;line-height:normal;}
.vat_trust{display:flex;gap:var(--space-5);flex-wrap:wrap;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}

@media (max-width:1024px){ .vat_inline{padding:var(--space-7) var(--space-5);} }

/* ============================================================
   51. VARIAN — ATC B (purchase panel) 63:613
   ============================================================ */
.vpp_shell{display:flex;flex-direction:column;padding:4.5rem 5rem;background:var(--color-surface);}
.vpp_panel{width:35rem;max-width:100%;display:flex;flex-direction:column;gap:1.25rem;
  padding:2.125rem;background:var(--color-paper);border:0.0625rem solid var(--color-ink);}
.vpp_panel h2{font-size:1.75rem;line-height:normal;letter-spacing:-.01em;}
/* Radio di Figma cuma lingkaran + SVG (8ab4a93a…) — dibangun ulang sebagai
   <input type="radio"> beneran, jadi keyboard & pembaca layar dapat grup pilihan. */
.vpp_plan{display:flex;gap:var(--space-4);align-items:center;padding:1.25rem;border:0.0625rem solid var(--color-border);cursor:pointer;}
.vpp_plan:has(input:checked){background:var(--color-surface);border:0.09375rem solid var(--color-ink);}
.vpp_plan input{appearance:none;-webkit-appearance:none;margin:0;width:1.125rem;height:1.125rem;flex:none;
  border:0.0625rem solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-paper);display:grid;place-items:center;cursor:pointer;}
.vpp_plan input:checked{border:0.09375rem solid var(--color-ink);}
.vpp_plan input:checked::before{content:"";width:0.5rem;height:0.5rem;border-radius:var(--radius-pill);background:var(--color-ink);}
.vpp_plan_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem;}
.vpp_plan_t .is-title{font-family:var(--font-body);font-weight:500;font-size:0.875rem;line-height:normal;}
.vpp_plan_t .is-note{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vpp_plan .is-price{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.02em;line-height:normal;}
.vpp_freq{display:flex;flex-direction:column;gap:var(--space-3);}
.vpp_freq legend{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);padding:0;}
.vpp_freq_opts{display:flex;gap:0.625rem;}
.vpp_freq_opt{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0.6875rem var(--space-4);
  background:none;border:0.0625rem solid var(--color-border);font-family:var(--font-body);font-size:0.75rem;line-height:normal;cursor:pointer;}
.vpp_freq_opt[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper);font-weight:500;}
.vpp_break{display:flex;flex-direction:column;gap:0.625rem;padding-top:1.25rem;border-top:0.0625rem solid var(--color-line);}
.vpp_kv{display:flex;align-items:center;}
.vpp_kv dt{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vpp_kv dd{margin:0;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.vpp_total{display:flex;align-items:flex-end;padding-top:0.875rem;border-top:0.0625rem solid var(--color-line);
  font-family:var(--font-display);font-size:1.375rem;line-height:normal;letter-spacing:-.01em;}
.vpp_total dt,.vpp_total dd{font:inherit;margin:0;}
.button.is-vpp{width:100%;padding:1.125rem 1.875rem;font-size:0.75rem;letter-spacing:.1em;}
.vpp_fine{font-size:0.75rem;line-height:1.65;color:var(--color-muted);}

@media (max-width:1024px){ .vpp_shell{padding:var(--space-7) var(--space-5);} .vpp_panel{padding:var(--space-5);} }

/* ============================================================
   52. VARIAN — STICKY ATC A (slim bottom bar) 63:659 · B (tabbed top bar) 63:673
   ============================================================ */
.vsa_bottom{display:flex;gap:1.25rem;align-items:center;padding:1.125rem 5rem;
  background:var(--color-paper);border-top:0.0625rem solid var(--color-line);}
.vsa_bottom > img{width:3.25rem;height:3.875rem;flex:none;object-fit:cover;display:block;}
.vsa_t{display:flex;flex-direction:column;gap:var(--space-1);}
.vsa_t h3,.vsa_t h2{font-size:1.25rem;line-height:normal;letter-spacing:-.01em;}
.vsa_t .is-meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}
.vsa_bottom .is-price{font-family:var(--font-display);font-size:1.5rem;line-height:normal;letter-spacing:-.01em;}
.vsa_qty{display:flex;gap:1.25rem;align-items:center;padding:0.8125rem 1.25rem;border:0.0625rem solid var(--color-border);}
.vsa_qty button{font-family:var(--font-body);font-size:0.875rem;line-height:normal;}
.vsa_qty button:first-child{color:var(--color-muted);}
.vsa_qty output{font-family:var(--font-mono);font-size:0.75rem;line-height:normal;}
.button.is-vsa{padding:0.9375rem 1.875rem;font-size:0.75rem;letter-spacing:.1em;}

.vsa_top{display:flex;align-items:center;padding:0 5rem;background:var(--color-surface);border-bottom:0.0625rem solid var(--color-line);}
.vsa_top_name{display:flex;flex-direction:column;gap:0.1875rem;padding:1.125rem 0;}
.vsa_top_name h3,.vsa_top_name h2{font-size:1.25rem;line-height:normal;letter-spacing:-.01em;}
.vsa_top_name .is-meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}
.vsa_tabs{display:flex;padding-left:var(--space-7);}
.vsa_tab{padding:var(--space-5) var(--space-4);background:none;border:0;border-bottom:0.125rem solid transparent;
  font-family:var(--font-body);font-size:0.875rem;line-height:normal;color:var(--color-muted);cursor:pointer;}
.vsa_tab[aria-selected="true"]{border-bottom-color:var(--color-ink);color:var(--color-ink);font-weight:500;}
.vsa_top_p{display:flex;gap:0.875rem;align-items:center;}
.vsa_top_p .is-price{font-family:var(--font-display);font-size:1.5rem;line-height:normal;letter-spacing:-.01em;}
.button.is-vsb{padding:0.875rem 1.875rem;font-size:0.75rem;letter-spacing:.1em;}

@media (max-width:1024px){
  .vsa_bottom{padding:0.875rem var(--space-5);flex-wrap:wrap;}
  .vsa_top{padding:0 var(--space-5);flex-wrap:wrap;}
  .vsa_tabs{padding-left:0;overflow-x:auto;}
}

/* ============================================================
   53. VARIAN — GIFT CARD A (voucher) 63:694 · B (purchase flow) 63:713
   ============================================================ */
.vgc_voucher{display:flex;flex-direction:column;gap:1.75rem;align-items:center;padding:5rem;background:var(--color-paper);}
.vgc_voucher .is-brand{font-family:var(--font-display);font-size:1.875rem;letter-spacing:.08em;line-height:normal;}
.vgc_voucher .is-kind{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);}
.vgc_card{width:38.75rem;max-width:100%;height:20rem;display:flex;flex-direction:column;
  padding:2.125rem 2.5rem;background:var(--color-clay);color:var(--color-paper);}
.vgc_card .is-wordmark{font-family:var(--font-display);font-size:1.75rem;letter-spacing:.08em;line-height:normal;}
.vgc_card .is-amount{font-family:var(--font-display);font-size:3.75rem;letter-spacing:-.02em;line-height:normal;}
.vgc_card .is-fine{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;white-space:pre;}
.vgc_code{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;padding:1.625rem 2.5rem;background:var(--color-surface);}
.vgc_code .is-hint{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vgc_code .is-code{font-family:var(--font-mono);font-size:1.375rem;letter-spacing:.06em;line-height:normal;}
/* QR di Figma masih kotak solid — dibiarkan kotak, sama seperti gift-card.html. */
.vgc_qr{width:6.875rem;height:6.875rem;background:var(--color-ink);}
.button.is-vgc{padding:1.125rem 1.875rem;font-size:0.75rem;letter-spacing:.1em;}

.vgc_flow{display:flex;gap:var(--space-8);align-items:flex-start;padding:5rem;background:var(--color-surface);}
.vgc_preview{width:32.5rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);}
.vgc_preview .vgc_card{width:100%;height:18.75rem;padding:1.875rem 2.125rem;}
.vgc_preview .vgc_card .is-wordmark{font-size:1.5rem;}
.vgc_preview .vgc_card .is-amount{font-size:3.25rem;}
.vgc_preview .vgc_card .is-fine{font-size:0.625rem;}
.vgc_themes{display:flex;gap:var(--space-3);}
.vgc_theme{flex:1;min-width:0;height:4rem;border:0;cursor:pointer;}
.vgc_theme[aria-pressed="true"]{border:0.09375rem solid var(--color-ink);}
.vgc_theme.is-clay{background:var(--color-clay);}
.vgc_theme.is-accent{background:var(--color-accent);}
.vgc_theme.is-ink{background:var(--color-ink);}
.vgc_theme.is-surface{background:var(--color-surface);border:0.0625rem solid var(--color-border);}
.vgc_preview .is-note{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}
.vgc_form{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.375rem;}
.vgc_form h2{font-size:2.5rem;line-height:normal;letter-spacing:-.02em;}
.vgc_amounts{display:flex;gap:var(--space-3);}
.vgc_amount{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0.875rem;
  background:none;border:0.0625rem solid var(--color-line);font-family:var(--font-body);font-size:0.875rem;line-height:normal;cursor:pointer;}
.vgc_amount[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper);font-weight:500;}
.vgc_field{display:flex;flex-direction:column;gap:0.5625rem;}
.vgc_field label,.vgc_field legend{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);padding:0;}
.vgc_field input,.vgc_field textarea{width:100%;padding:0.9375rem 1.125rem;background:var(--color-paper);
  border:0.0625rem solid var(--color-border);font-size:0.875rem;line-height:normal;color:var(--color-ink);}
.vgc_field textarea{height:5.625rem;resize:vertical;}
.vgc_field::placeholder{color:var(--color-muted);}

@media (max-width:1024px){
  .vgc_voucher{padding:var(--space-7) var(--space-5);}
  .vgc_card{height:auto;min-height:15rem;}
  .vgc_flow{flex-direction:column;gap:var(--space-6);padding:var(--space-7) var(--space-5);}
  .vgc_preview{width:100%;}
  .vgc_form h2{font-size:1.75rem;}
  .vgc_amounts{flex-wrap:wrap;}
  .vgc_amount{flex:1 1 30%;}
}

/* ============================================================
   54. VARIAN — MAIN PRODUCT B (full-bleed + overlay card) 64:641
   ============================================================ */
.vmb{position:relative;display:flex;flex-direction:column;background:var(--color-paper);}
.vmb_stage{position:relative;}
.vmb_stage > img{display:block;width:100%;height:47.5rem;object-fit:cover;}
.vmb_card{position:absolute;left:5rem;top:9.375rem;width:32.5rem;display:flex;flex-direction:column;gap:1.375rem;
  padding:2.25rem 2.5rem;background:var(--color-paper);}
.vmb_card .is-eyebrow{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);white-space:pre;}
.vmb_card h2,.vmb_card h1{font-size:2.875rem;line-height:1;letter-spacing:-.02em;}
.vmb_price{display:flex;gap:0.875rem;align-items:flex-end;}
.vmb_price .is-amt{font-family:var(--font-display);font-size:1.75rem;line-height:normal;letter-spacing:-.01em;}
.vmb_price .is-size{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vmb_rating{display:flex;gap:var(--space-2);align-items:center;}
.vmb_rating .vrv_stars{font-size:0.75rem;gap:var(--space-2);}
.vmb_rating .is-avg{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vmb_card .is-lede{font-size:1rem;line-height:1.7;color:var(--color-muted);}
.vmb_thumbs{position:absolute;left:61.25rem;top:35rem;display:flex;gap:var(--space-3);}
.vmb_thumbs img{width:5.625rem;height:6.5625rem;object-fit:cover;display:block;border:0.125rem solid transparent;}
.vmb_thumbs img.is-active{border-color:var(--color-paper);}
.vmb_bar{display:flex;align-items:center;padding:1.625rem 5rem;background:var(--color-surface);}
.vmb_kv{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.4375rem;padding:0 var(--space-6);border-left:0.0625rem solid var(--color-line);}
.vmb_kv:first-child{padding:0 var(--space-6) 0 0;border-left:0;}
.vmb_kv dt{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vmb_kv dd{margin:0;font-family:var(--font-display);font-size:1.25rem;line-height:1.15;letter-spacing:-.01em;}

@media (max-width:1024px){
  .vmb_stage > img{height:26.25rem;}
  .vmb_card{position:static;width:auto;padding:1.75rem var(--space-5);}
  .vmb_card h2,.vmb_card h1{font-size:2rem;}
  .vmb_thumbs{position:static;padding:0 var(--space-5) var(--space-5);flex-wrap:wrap;}
  .vmb_bar{flex-wrap:wrap;gap:1.25rem 0;padding:var(--space-5);}
  .vmb_kv{flex:0 0 50%;}
}

/* ============================================================
   55. VARIAN — MAIN PRODUCT C (editorial evidence) 64:691
   ============================================================ */
.vmc{display:flex;flex-direction:column;gap:var(--space-7);padding:4.5rem 5rem 5.5rem;background:var(--color-surface);}
.vmc_head{display:flex;align-items:flex-end;padding-bottom:var(--space-5);border-bottom:0.0625rem solid var(--color-ink);}
.vmc_head_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3);}
.vmc_head_t .is-eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);white-space:pre;}
.vmc_head_t h2,.vmc_head_t h1{font-size:4.5rem;line-height:.98;letter-spacing:-.03em;}
.vmc_head_p{display:flex;flex-direction:column;gap:0.625rem;align-items:flex-end;}
.vmc_head_p .is-amt{font-family:var(--font-display);font-size:2.75rem;line-height:normal;letter-spacing:-.02em;}
.vmc_body{display:flex;gap:3.5rem;align-items:flex-start;}
.vmc_gallery{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);}
.vmc_gallery > img{width:100%;height:35rem;object-fit:cover;display:block;}
.vmc_gallery_r{display:flex;gap:var(--space-4);}
.vmc_gallery_r img{flex:1;min-width:0;height:17.5rem;object-fit:cover;display:block;}
.vmc_info{width:30rem;flex:none;display:flex;flex-direction:column;gap:var(--space-5);}
.vmc_info .is-lede{font-size:1.125rem;line-height:1.74;}
.vmc_spec{display:flex;flex-direction:column;margin:0;}
.vmc_spec_row{display:flex;align-items:center;padding:0.8125rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vmc_spec dt{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);}
.vmc_spec dd{margin:0;font-size:0.875rem;line-height:normal;}
.vmc_info .is-trust{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}

@media (max-width:1024px){
  .vmc{padding:var(--space-7) var(--space-5);gap:var(--space-6);}
  .vmc_head{flex-direction:column;align-items:flex-start;gap:var(--space-4);}
  .vmc_head_t h2,.vmc_head_t h1{font-size:2.5rem;}
  .vmc_head_p{align-items:flex-start;}
  .vmc_body{flex-direction:column;gap:var(--space-6);}
  .vmc_gallery > img{height:23.75rem;}
  .vmc_info{width:100%;}
}

/* ============================================================
   56. VARIAN — MAIN PRODUCT A (classic split) 64:578
   ============================================================ */
.vma{display:flex;gap:4.5rem;align-items:flex-start;padding:var(--space-8) 5rem 5.5rem;background:var(--color-paper);}
.vma_gallery{width:42.5rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);}
.vma_gallery > img{width:100%;height:48.75rem;object-fit:cover;display:block;}
.vma_thumbs{display:flex;gap:var(--space-4);}
.vma_thumbs img{flex:1;min-width:0;height:10.9375rem;object-fit:cover;display:block;border:0.0625rem solid transparent;}
.vma_thumbs img.is-active{border-color:var(--color-ink);}
.vma_info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.625rem;}
.vma_info .is-eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);white-space:pre;}
.vma_info h2{font-size:3.375rem;line-height:1;letter-spacing:-.02em;}
.vma_price{display:flex;gap:var(--space-4);align-items:flex-end;}
.vma_price .is-amt{font-family:var(--font-display);font-size:2rem;line-height:normal;letter-spacing:-.01em;}
.vma_price .is-unit{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vma_info .is-lede{font-size:1rem;line-height:1.72;}
.vma_info .vat_trust{padding-top:var(--space-1);}
.vma_acc{display:flex;flex-direction:column;}
.vma_acc details{border-top:0.0625rem solid var(--color-line);}
.vma_acc summary{display:flex;align-items:center;gap:var(--space-4);padding:1.25rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.3125rem;line-height:normal;letter-spacing:-.01em;}
.vma_acc summary::-webkit-details-marker{display:none;}
.vma_acc summary .is-sign{margin-left:auto;font-family:var(--font-body);font-size:1.125rem;color:var(--color-muted);}
.vma_acc summary .is-sign::after{content:"+";}
.vma_acc details[open] summary .is-sign::after{content:"\2212";}
.vma_acc details > p{padding-bottom:1.25rem;font-size:0.875rem;line-height:1.72;color:var(--color-muted);}

@media (max-width:1024px){
  .vma{flex-direction:column;gap:var(--space-6);padding:var(--space-7) var(--space-5);}
  .vma_gallery{width:100%;}
  .vma_gallery > img{height:26.25rem;}
  .vma_info h2{font-size:2.125rem;}
}

/* ============================================================
   57. VARIAN — FOOTER B (minimal, giant wordmark) 65:620
   ============================================================ */
.vfo_min{display:flex;flex-direction:column;padding:4.5rem 5rem 0;background:var(--color-paper);border-top:0.0625rem solid var(--color-line);}
.vfo_row{display:flex;gap:var(--space-8);align-items:flex-start;padding-bottom:3.5rem;}
.vfo_stmt{width:32.5rem;flex:none;display:flex;flex-direction:column;gap:var(--space-4);}
.vfo_stmt h2{font-size:2.125rem;line-height:1.18;letter-spacing:-.02em;}
.vfo_field{display:flex;align-items:center;padding:var(--space-2) 0 var(--space-3);border-bottom:0.0625rem solid var(--color-ink);}
.vfo_field input{flex:1;min-width:0;background:none;border:0;padding:0;font-size:0.875rem;line-height:normal;color:var(--color-ink);}
.vfo_field input::placeholder{color:var(--color-muted);}
.vfo_field button{font-family:var(--font-body);font-weight:500;font-size:0.875rem;line-height:normal;}
.vfo_links{display:flex;gap:3.5rem;}
.vfo_col{display:flex;flex-direction:column;gap:0.8125rem;}
.vfo_col h3{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);}
.vfo_col a{font-size:0.875rem;line-height:normal;}
.vfo_fine{display:flex;align-items:center;padding:1.375rem 0 1.75rem;border-top:0.0625rem solid var(--color-line);
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vfo_fine p:first-child{white-space:pre;}
.vfo_giant{height:5.375rem;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
.vfo_giant p{font-family:var(--font-display);font-size:11rem;line-height:normal;letter-spacing:.14em;color:var(--color-surface);white-space:nowrap;}

@media (max-width:1024px){
  .vfo_min{padding:var(--space-7) var(--space-5) 0;}
  .vfo_row{flex-direction:column;gap:var(--space-6);}
  .vfo_stmt{width:100%;}
  .vfo_stmt h2{font-size:1.625rem;}
  .vfo_links{flex-wrap:wrap;gap:var(--space-6);}
  .vfo_fine{flex-direction:column;align-items:flex-start;gap:0.375rem;}
  .vfo_giant{height:auto;}
  .vfo_giant p{font-size:4.5rem;}
}

/* ============================================================
   58. VARIAN — COUNTDOWN A (full band) 65:651 · B (split with product) 65:674
   ============================================================ */
.vcd_band{display:flex;flex-direction:column;gap:1.875rem;align-items:center;padding:5rem;background:var(--color-accent);color:var(--color-paper);}
.vcd_band .is-eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.12em;line-height:normal;white-space:pre;}
.vcd_band h2{font-size:3.25rem;line-height:1.04;letter-spacing:-.02em;text-align:center;max-width:56.25rem;color:var(--color-paper);}
.vcd_timer{display:flex;gap:var(--space-4);}
.vcd_unit{display:flex;flex-direction:column;gap:var(--space-2);align-items:center;padding:1.25rem 1.625rem;
  background:var(--color-paper);color:var(--color-accent);}
.vcd_unit b{font-family:var(--font-display);font-weight:400;font-size:2.875rem;line-height:1;letter-spacing:-.01em;}
.vcd_unit span{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;}
.vcd_band .is-note{font-size:0.875rem;line-height:1.65;max-width:37.5rem;}
.button.is-vcd{padding:1.0625rem 1.875rem;font-size:0.75rem;letter-spacing:.1em;}

.vcd_split{display:flex;align-items:center;background:var(--color-surface);}
.vcd_split > img{width:38.75rem;height:32.5rem;flex:none;object-fit:cover;display:block;}
.vcd_split_copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.625rem;padding:4.5rem 5rem 4.5rem 4.5rem;}
.vcd_split_copy .is-eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.1em;line-height:normal;color:var(--color-accent);white-space:pre;}
.vcd_split_copy h2{font-size:2.875rem;line-height:1.04;letter-spacing:-.02em;max-width:35rem;}
.vcd_row{display:flex;align-items:center;}
.vcd_row_unit{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;padding:0 var(--space-5);border-left:0.0625rem solid var(--color-line);}
.vcd_row_unit:first-child{padding:0 var(--space-5) 0 0;border-left:0;}
.vcd_row_unit b{font-family:var(--font-display);font-weight:400;font-size:2.75rem;line-height:1;letter-spacing:-.01em;}
.vcd_row_unit span{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vcd_field{display:flex;align-items:center;padding-bottom:0.875rem;border-bottom:0.0625rem solid var(--color-ink);}
.vcd_field input{flex:1;min-width:0;background:none;border:0;padding:0;font-size:1rem;line-height:normal;color:var(--color-ink);}
.vcd_field input::placeholder{color:var(--color-muted);}
.vcd_field button{font-family:var(--font-body);font-weight:500;font-size:0.75rem;letter-spacing:.1em;line-height:normal;white-space:pre;}
.vcd_split_copy .is-note{font-size:0.875rem;line-height:1.65;color:var(--color-muted);}

@media (max-width:1024px){
  .vcd_band{padding:var(--space-7) var(--space-5);}
  .vcd_band h2{font-size:1.875rem;}
  .vcd_timer{flex-wrap:wrap;justify-content:center;}
  .vcd_split{flex-direction:column;align-items:stretch;}
  .vcd_split > img{width:100%;height:18.75rem;}
  .vcd_split_copy{padding:2.5rem var(--space-5);}
  .vcd_split_copy h2{font-size:1.875rem;}
}

/* ============================================================
   59. VARIAN — MEGA MENU A (columns + featured) 65:697
   ============================================================ */
.vmm{display:flex;flex-direction:column;background:var(--color-paper);}
.vmm_nav{display:flex;align-items:center;padding:1.625rem 5rem;background:var(--color-paper);border-bottom:0.0625rem solid var(--color-line);}
.vmm_nav .is-brand{font-family:var(--font-display);font-size:1.75rem;letter-spacing:.08em;line-height:normal;}
.vmm_menu,.vmm_util{display:flex;align-items:center;}
.vmm_menu{gap:2.25rem;}
.vmm_util{gap:1.625rem;}
.vmm_menu a,.vmm_util a{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vmm_menu a[aria-current="page"]{color:var(--color-ink);font-weight:500;}
.vmm_panel{display:flex;gap:3.5rem;align-items:flex-start;padding:2.75rem 5rem 3.25rem;background:var(--color-paper);border-bottom:0.0625rem solid var(--color-line);}
.vmm_col{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;}
.vmm_col h3{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-muted);}
.vmm_col a{font-family:var(--font-display);font-size:1.375rem;line-height:1.18;letter-spacing:-.01em;}
.vmm_feat{width:35rem;flex:none;display:flex;gap:1.25rem;align-items:flex-start;}
.vmm_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3);}
.vmm_card > img{width:100%;height:15rem;object-fit:cover;display:block;}
.vmm_card .is-tag{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-accent);}
.vmm_card_r{display:flex;align-items:flex-end;}
.vmm_card_r h4{font-family:var(--font-display);font-weight:400;font-size:1.25rem;line-height:1.15;letter-spacing:-.01em;}
.vmm_card_r .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}

@media (max-width:1024px){
  .vmm_nav{padding:1.125rem var(--space-5);flex-wrap:wrap;gap:var(--space-3);}
  .vmm_menu{gap:1.25rem;flex-wrap:wrap;}
  .vmm_panel{flex-wrap:wrap;gap:var(--space-6);padding:var(--space-6) var(--space-5);}
  .vmm_col{flex:1 1 40%;}
  .vmm_feat{width:100%;}
}

/* ============================================================
   60. VARIAN — MEGA MENU B (image tiles) 65:747
   ============================================================ */
.vmt_panel{display:flex;flex-direction:column;gap:var(--space-6);padding:2.5rem 5rem var(--space-7);background:var(--color-surface);border-bottom:0.0625rem solid var(--color-line);}
.vmt_tiles{display:flex;gap:var(--space-5);align-items:flex-start;}
.vmt_tile{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;}
.vmt_tile > img{width:100%;height:13.75rem;object-fit:cover;display:block;}
.vmt_tile h3{font-size:1.5rem;line-height:1.12;letter-spacing:-.01em;}
.vmt_tile p{font-size:0.75rem;line-height:1.55;color:var(--color-muted);}
.vmt_quick{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;padding-top:1.625rem;border-top:0.0625rem solid var(--color-line);}
.vmt_quick a{font-size:0.875rem;line-height:normal;}
.vmt_quick .is-all{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;color:var(--color-muted);white-space:pre;}

@media (max-width:1024px){
  .vmt_panel{padding:var(--space-6) var(--space-5);}
  .vmt_tiles{flex-wrap:wrap;}
  .vmt_tile{flex:1 1 46%;}
  .vmt_quick{gap:var(--space-4) 1.25rem;}
}
@media (max-width:720px){ .vmt_tile{flex:1 1 100%;} }

/* ============================================================
   61. VARIAN — SEARCH POPUP A (full overlay) 67:578
   ============================================================ */
.vsp_overlay{display:flex;flex-direction:column;gap:2.75rem;padding:3.5rem 5rem 4.5rem;background:var(--color-paper);}
.vsp_top{display:flex;align-items:center;}
.vsp_top .is-brand{font-family:var(--font-display);font-size:1.625rem;letter-spacing:.08em;line-height:normal;}
.vsp_close{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);white-space:pre;}
.vsp_field{display:flex;gap:var(--space-4);align-items:center;padding-bottom:1.25rem;border-bottom:0.09375rem solid var(--color-ink);}
.vsp_field input{flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--font-display);font-size:2.75rem;line-height:normal;letter-spacing:-.02em;color:var(--color-ink);}
.vsp_field .is-count{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);}
.vsp_body{display:flex;gap:3.5rem;align-items:flex-start;}
.vsp_side{width:18.75rem;flex:none;display:flex;flex-direction:column;gap:var(--space-5);}
.vsp_group{display:flex;flex-direction:column;gap:var(--space-3);}
.vsp_group h3{font-family:var(--font-mono);font-weight:400;font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vsp_group a{font-size:1rem;line-height:normal;}
.vsp_results{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.25rem;}
.vsp_results h3{font-family:var(--font-mono);font-weight:400;font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vsp_grid{display:flex;gap:1.25rem;align-items:flex-start;}
.vsp_card{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3);}
.vsp_card > img{width:100%;height:15rem;object-fit:cover;display:block;}
.vsp_card_r{display:flex;align-items:flex-end;}
.vsp_card_r h4{font-family:var(--font-display);font-weight:400;font-size:1.1875rem;line-height:1.15;letter-spacing:-.01em;}
.vsp_card_r .is-price{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.02em;line-height:normal;}
.vsp_card .is-spec{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vsp_journal{display:flex;flex-direction:column;gap:var(--space-3);padding-top:1.25rem;border-top:0.0625rem solid var(--color-line);}
.vsp_journal a{font-family:var(--font-display);font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em;}

@media (max-width:1024px){
  .vsp_overlay{padding:var(--space-6) var(--space-5) var(--space-7);gap:1.75rem;}
  .vsp_field input{font-size:1.75rem;}
  .vsp_body{flex-direction:column;gap:var(--space-6);}
  .vsp_side{width:100%;}
  .vsp_grid{flex-wrap:wrap;}
  .vsp_card{flex:1 1 46%;}
}

/* ============================================================
   62. VARIAN — SEARCH POPUP B (dropdown panel) 67:628
   ============================================================ */
.vsd{display:flex;flex-direction:column;background:var(--color-surface);}
.vsd_panel{display:flex;flex-direction:column;gap:1.75rem;padding:var(--space-6) 5rem 2.5rem;background:var(--color-paper);border-bottom:0.0625rem solid var(--color-line);}
.vsd_field{display:flex;gap:0.875rem;align-items:center;padding:var(--space-4) 1.25rem;background:var(--color-surface);}
.vsd_field .is-icon{font-size:1rem;line-height:normal;color:var(--color-muted);}
.vsd_field input{flex:1;min-width:0;background:none;border:0;padding:0;font-size:1rem;line-height:normal;color:var(--color-ink);}
.vsd_field .is-esc{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;line-height:normal;color:var(--color-muted);}
.vsd_body{display:flex;gap:var(--space-7);align-items:flex-start;}
.vsd_col{flex:1;min-width:0;display:flex;flex-direction:column;}
.vsd_col.is-journal{width:26.25rem;flex:none;}
.vsd_col h3{font-family:var(--font-mono);font-weight:400;font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vsd_res{display:flex;gap:var(--space-4);align-items:center;padding:0.875rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vsd_res > img{width:3.5rem;height:4.125rem;flex:none;object-fit:cover;display:block;}
.vsd_res_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem;}
.vsd_res_t h4{font-family:var(--font-display);font-weight:400;font-size:1.1875rem;line-height:1.15;letter-spacing:-.01em;}
.vsd_res_t p{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vsd_res .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.vsd_art{display:flex;flex-direction:column;gap:0.4375rem;padding:0.875rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vsd_art .is-tag{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-accent);}
.vsd_art h4{font-family:var(--font-display);font-weight:400;font-size:1.125rem;line-height:1.25;letter-spacing:-.01em;}
.vsd_all{display:flex;align-items:center;padding-top:var(--space-2);}
.vsd_all p{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vsd_all a{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;white-space:pre;}

@media (max-width:1024px){
  .vsd_panel{padding:var(--space-5);}
  .vsd_body{flex-direction:column;gap:var(--space-6);}
  .vsd_col.is-journal{width:100%;}
}

/* ============================================================
   63. VARIAN — CART DRAWER A (right drawer) 67:676
   ============================================================ */
.vcdr{display:flex;align-items:flex-start;background:var(--color-surface);}
.vcdr_scrim{flex:1;min-width:0;height:47.5rem;background:var(--color-ink);opacity:.35;border:0;}
.vcdr_panel{width:31.25rem;flex:none;height:47.5rem;display:flex;flex-direction:column;background:var(--color-paper);}
.vcdr_head{display:flex;align-items:center;padding:1.625rem var(--space-6) 1.375rem;border-bottom:0.0625rem solid var(--color-line);}
.vcdr_head h2{font-size:1.75rem;line-height:normal;letter-spacing:-.01em;}
.vcdr_head button{font-family:var(--font-body);font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vcdr_ship{display:flex;flex-direction:column;gap:0.625rem;padding:1.125rem var(--space-6);background:var(--color-surface);}
.vcdr_ship p{font-size:0.75rem;line-height:normal;}
.vcdr_ship .is-track{height:0.25rem;background:var(--color-paper);}
.vcdr_ship .is-track span{display:block;height:100%;width:80%;background:var(--color-accent);}
.vcdr_items{display:flex;flex-direction:column;padding:0 var(--space-6);}
.vcdr_line{display:flex;gap:var(--space-4);align-items:flex-start;padding:1.375rem 0;border-bottom:0.0625rem solid var(--color-line);}
.vcdr_line > img{width:4.75rem;height:5.625rem;flex:none;object-fit:cover;display:block;}
.vcdr_line_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;}
.vcdr_line_r{display:flex;align-items:flex-start;width:100%;}
.vcdr_line_r h3{font-family:var(--font-display);font-weight:400;font-size:1.1875rem;line-height:1.15;letter-spacing:-.01em;}
.vcdr_line_r .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.vcdr_line_t .is-spec{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vcdr_qty{display:flex;gap:var(--space-4);align-items:center;padding:0.4375rem var(--space-3);border:0.0625rem solid var(--color-border);}
.vcdr_qty button{font-family:var(--font-body);font-size:0.875rem;line-height:normal;}
.vcdr_qty button:first-child{color:var(--color-muted);}
.vcdr_qty output{font-family:var(--font-mono);font-size:0.75rem;line-height:normal;}
.vcdr_up{display:flex;flex-direction:column;gap:var(--space-3);padding:1.25rem var(--space-6);background:var(--color-surface);}
.vcdr_up h3{font-family:var(--font-mono);font-weight:400;font-size:0.625rem;letter-spacing:.1em;line-height:normal;color:var(--color-muted);}
.vcdr_up_r{display:flex;gap:var(--space-3);align-items:center;}
.vcdr_up_r > img{width:3rem;height:3.625rem;flex:none;object-fit:cover;display:block;}
.vcdr_up_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.vcdr_up_t h4{font-family:var(--font-display);font-weight:400;font-size:1.125rem;line-height:normal;letter-spacing:-.01em;}
.vcdr_up_t .is-meta{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.02em;line-height:normal;color:var(--color-muted);}
.vcdr_up_add{padding:0.5625rem 0.875rem;border:0.0625rem solid var(--color-ink);background:none;
  font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.1em;line-height:normal;cursor:pointer;}
.vcdr_up_add:hover{background:var(--color-ink);color:var(--color-paper);}
.vcdr_sum{display:flex;flex-direction:column;gap:0.875rem;padding:1.375rem var(--space-6) 1.625rem;border-top:0.0625rem solid var(--color-line);}
.vcdr_total{display:flex;align-items:flex-end;font-family:var(--font-display);font-size:1.375rem;line-height:normal;letter-spacing:-.01em;}
.vcdr_sum .is-fine{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.04em;line-height:normal;color:var(--color-muted);}
.button.is-vcdr{width:100%;padding:1.0625rem 1.75rem;font-size:0.75rem;letter-spacing:.1em;}

@media (max-width:1024px){
  .vcdr_scrim{display:none;}
  .vcdr_panel{width:100%;height:auto;}
}

/* ============================================================
   64. VARIAN — CART DRAWER B (top slide-down) 67:731
   ============================================================ */
.vctd{display:flex;flex-direction:column;background:var(--color-surface);}
.vctd_panel{display:flex;flex-direction:column;gap:var(--space-5);padding:1.875rem 5rem 2.125rem;background:var(--color-paper);border-bottom:0.0625rem solid var(--color-line);}
.vctd_head{display:flex;align-items:center;}
.vctd_head h2{font-size:1.625rem;line-height:normal;letter-spacing:-.01em;}
.vctd_head .is-ship{font-size:0.875rem;line-height:normal;color:var(--color-muted);}
.vctd_body{display:flex;gap:2.5rem;align-items:flex-start;}
.vctd_items{flex:1;min-width:0;display:flex;gap:1.25rem;align-items:flex-start;}
.vctd_line{flex:1;min-width:0;display:flex;gap:0.875rem;align-items:center;padding:0.875rem 1.125rem 0.875rem 0.875rem;background:var(--color-surface);}
.vctd_line > img{width:4rem;height:4.75rem;flex:none;object-fit:cover;display:block;}
.vctd_line_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3125rem;}
.vctd_line_t h3{font-size:1.125rem;line-height:1.15;letter-spacing:-.01em;}
.vctd_line_t .is-spec{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vctd_line_t .is-price{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.02em;line-height:normal;}
.vctd_sum{width:20rem;flex:none;display:flex;flex-direction:column;gap:0.875rem;}

@media (max-width:1024px){
  .vctd_panel{padding:var(--space-5);}
  .vctd_head{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  .vctd_body{flex-direction:column;gap:var(--space-5);}
  .vctd_items{flex-wrap:wrap;}
  .vctd_sum{width:100%;}
}

/* ============================================================
   65. VARIAN — USER DROPDOWN A (compact) 67:775 · B (rich panel) 67:808
   ============================================================ */
.vud_wrap{display:flex;align-items:flex-start;padding:0.875rem 5rem 5rem;}
.vud_panel{background:var(--color-paper);border:0.0625rem solid var(--color-line);display:flex;flex-direction:column;}
.vud_panel.is-compact{width:17.5rem;flex:none;padding:var(--space-2) 0;}
.vud_panel.is-rich{width:25rem;flex:none;}
.vud_head{display:flex;flex-direction:column;gap:0.3125rem;padding:var(--space-3) 1.25rem var(--space-4);border-bottom:0.0625rem solid var(--color-line);}
.vud_head h3{font-size:1.25rem;line-height:normal;letter-spacing:-.01em;}
.vud_head .is-mail{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.02em;line-height:normal;color:var(--color-muted);}
.vud_item{display:flex;align-items:center;padding:0.6875rem 1.25rem;font-size:0.875rem;line-height:normal;}
.vud_item .is-badge{font-family:var(--font-mono);font-size:0.625rem;line-height:normal;color:var(--color-accent);}
.vud_out{padding:0.8125rem 1.25rem 0.6875rem;border-top:0.0625rem solid var(--color-line);font-size:0.875rem;line-height:normal;color:var(--color-muted);}

.vud_rich_head{display:flex;gap:0.875rem;align-items:center;padding:1.375rem var(--space-5) 1.25rem;background:var(--color-surface);}
/* Avatar di Figma cuma <ellipse> SVG kosong (06f1cbdd…) — dibangun ulang sebagai
   inisial di lingkaran clay, biar gak perlu aset dan tetap identik ukurannya. */
.vud_avatar{width:2.75rem;height:2.75rem;flex:none;border-radius:50%;background:var(--color-clay);
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.125rem;color:var(--color-paper);}
.vud_rich_head_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.vud_rich_head_t h3{font-size:1.25rem;line-height:normal;letter-spacing:-.01em;}
.vud_rich_head_t .is-since{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);}
.vud_sub{display:flex;flex-direction:column;gap:0.625rem;padding:1.125rem var(--space-5);border-bottom:0.0625rem solid var(--color-line);}
.vud_sub_r{display:flex;align-items:center;}
.vud_sub_r h4{font-family:var(--font-body);font-weight:500;font-size:0.625rem;letter-spacing:.12em;line-height:normal;color:var(--color-accent);}
.vud_sub_r .is-manage{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;color:var(--color-muted);}
.vud_sub_i{display:flex;gap:var(--space-3);align-items:center;}
.vud_sub_i > img{width:2.625rem;height:3.125rem;flex:none;object-fit:cover;display:block;}
.vud_sub_t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.vud_sub_t .is-name{font-family:var(--font-body);font-weight:500;font-size:0.875rem;line-height:normal;}
.vud_sub_t .is-next{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vud_order{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-bottom:0.0625rem solid var(--color-line);}
.vud_order_r{display:flex;align-items:center;}
.vud_order_r .is-id{font-family:var(--font-body);font-weight:500;font-size:0.875rem;line-height:normal;}
.vud_order_r .is-state{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;line-height:normal;color:var(--color-accent);}
.vud_order .is-meta{font-size:0.75rem;line-height:normal;color:var(--color-muted);}
.vud_panel.is-rich .vud_item{padding:0.6875rem var(--space-5);}
.vud_panel.is-rich .vud_out{padding:0.8125rem var(--space-5) var(--space-4);}

@media (max-width:1024px){
  .vud_wrap{padding:0.875rem var(--space-5) var(--space-7);}
  .vud_panel.is-compact,.vud_panel.is-rich{width:100%;}
}


/* ============================================================
   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;
  }
}


/* ============================================================
   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(26,26,22,.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-paper);
    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; }
}