/* Variant A "One shot on grey" (04/11/2026).
   Loaded after style.css. Scoped to body.v-a so removing the class restores the previous layout. */

/* Mechanism strip: 45 in · 50 mm · level */
body.v-a .spec-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px}
body.v-a .spec-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
body.v-a .spec-item strong{font:400 40px/1 var(--serif);color:var(--gold);min-width:96px;letter-spacing:-.02em}
body.v-a .spec-item p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
body.v-a .spec-item b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* Checkout: email and the required box first, extras after */
body.v-a .checkout-extras-title{margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
body.v-a .checkout-form>.checkout-bump{border-style:solid;border-color:var(--line)}
body.v-a .checkout-form>.checkout-bump:has(input:checked){border-color:var(--gold)}

@media(max-width:780px){
  /* Hero: the transformation is the first thing on screen, then promise, price and CTA */
  body.v-a .header{height:60px}
  body.v-a .hero{padding-top:0;gap:14px}
  body.v-a .hero .hero-visual{order:0;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  body.v-a .hero-copy{order:1;text-align:left}
  body.v-a .hero-details{order:2;text-align:left}
  body.v-a .hero .hero-main{position:relative;width:100%}
  body.v-a .hero .compare{aspect-ratio:4 / 5}
  body.v-a .hero .compare img{object-fit:cover;object-position:50% 62%}
  body.v-a .hero .photo-caption{display:none}
  body.v-a .hero .hero-proof-note{position:absolute;right:10px;bottom:10px;z-index:3;padding:5px 8px;border-radius:3px;background:#111211cc;font-size:12px;line-height:1.3;pointer-events:none}
  body.v-a .hero h1{font-size:34px;line-height:1.08;margin:0}
  body.v-a .hero .hero-description{margin:0 0 14px;max-width:none;font-size:16px;line-height:1.5}
  body.v-a .hero .hero-currency-note{text-align:left}
  body.v-a .hero .hero-note{margin:10px 0 0;max-width:none}

  body.v-a .spec-items{grid-template-columns:1fr;gap:18px;margin-top:22px}
  body.v-a .spec-item strong{font-size:32px;min-width:84px}
  body.v-a .spec-item p{font-size:15px}

  /* Proof and collections: one swipe row each instead of a long grid */
  body.v-a .proof-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 5vw 8px;margin:0 -5vw;scrollbar-width:none}
  body.v-a .proof-grid::-webkit-scrollbar,body.v-a .collection-grid::-webkit-scrollbar{display:none}
  body.v-a .proof-card{scroll-snap-align:center}
  body.v-a .collection-grid-new,body.v-a .collection-grid-classic{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 5vw 8px;margin:0 -5vw;scrollbar-width:none}
  body.v-a .collection-card{scroll-snap-align:start}
  body.v-a .collection-grid-new .collection-card h3{min-height:0}

  /* Checkout dialog: shorter extras so email, consent and pay fit on one phone screen */
  body.v-a .checkout-form>.checkout-bump{padding:6px 8px;margin-bottom:6px}
  body.v-a .checkout-bump-text strong{font-size:15px}
  body.v-a .checkout-bump-text>span{font-size:12.5px;line-height:1.35}
  body.v-a .checkout-form .checkout-extras-note{font-size:13px;margin:0 0 6px}
}