/* VA HOME v13.3.0 — page-specific cascade: site-info. Shared rules live in core.css. */

/* ===== v11-3-final-polish.css ===== */
/* VA HOME v11.3 — final cross-site polish */
:root{--tap-min:44px;--content-measure:68ch}
html{scroll-padding-top:92px}
body{overflow-wrap:normal;word-break:normal;text-wrap:pretty}
h1, h2, h3{overflow-wrap:normal;word-break:keep-all;text-wrap:balance}
p{max-width:var(--content-measure)}
a, button, input, select, textarea{-webkit-tap-highlight-color:transparent}
button, .btn{min-height:var(--tap-min)}
img{background-color:transparent}


/* Keep editorial sections readable on narrow laptops and tablets */

@media (max-width:760px){
  html{scroll-padding-top:74px}
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (max-width:390px){
  
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===== v11-4-mobile-product-polish.css ===== */
/* VA HOME v11.4 — mobile hero reliability + editorial polish */

/* HOME CAROUSEL: all slides always own a complete painted viewport. */
.home-page .hero.hero--editorial{
  position:relative;
  height:100svh;
  min-height:620px;
  background:#17130f;
  isolation:isolate;
}
.home-page .hero.hero--editorial .hero-slide, .home-page .hero.hero--editorial .hero-slide.is-active{
  position:absolute!important;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
}
.home-page .hero.hero--editorial .hero-slide__media{
  background:#17130f;
}
.home-page .hero.hero--editorial .hero-slide__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  visibility:visible;
  background:#17130f;
}
.home-page .hero.hero--editorial .hero-slide:not(.is-active){
  pointer-events:none;
}
@media(max-width:900px){
  .home-page .hero.hero--editorial{min-height:640px;height:100svh}
  .home-page .hero.hero--editorial .hero-slide__media img{object-position:center center}
  .home-page .hero.hero--editorial .hero-slide:nth-child(2) .hero-slide__media img{object-position:58% center}
  .home-page .hero.hero--editorial .hero-slide:nth-child(3) .hero-slide__media img{object-position:62% center}
  .home-page .hero.hero--editorial .hero-slide__content{
    padding:calc(var(--header-height,72px) + 28px) 20px max(88px,calc(62px + env(safe-area-inset-bottom)));
  }
  .home-page .hero.hero--editorial .hero-slide__title{
    font-size:clamp(40px,12.2vw,58px);
    line-height:.96;
    max-width:10ch;
  }
  .home-page .hero.hero--editorial .hero-slide__subtitle{
    font-size:15px;
    line-height:1.55;
    max-width:34ch;
  }
  .home-page .hero.hero--editorial .hero-slide__actions{max-width:360px}
  .home-page .hero.hero--editorial .hero-nav{bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-width:390px){
  .home-page .hero.hero--editorial{min-height:610px}
  .home-page .hero.hero--editorial .hero-slide__title{font-size:clamp(38px,12vw,50px)}
  .home-page .hero.hero--editorial .hero-slide__content{padding-inline:16px}
}

/* ABOUT: restore hierarchy and prevent the manifesto headline colliding with copy. */


/* PRODUCT REVIEWS + RECOMMENDATIONS: social proof first, consulting tone second. */


/* ===== v11-5-mobile-perfection.css ===== */
/* VA HOME v11.5 — Mobile Perfection
   Final responsive safety layer. It deliberately avoids redesigning pages and
   only corrects viewport behaviour, hierarchy, touch targets and text flow. */

html{overflow-x:clip}
body{overflow-x:clip;min-width:320px}
img, video, svg{max-width:100%}

/* Never split luxury headings inside a word. Long URLs and user content may wrap,
   but editorial titles must retain natural Ukrainian word boundaries. */
h1, h2, h3{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
}

button, a, input, select, textarea{touch-action:manipulation}
.btn{
  min-height:44px;
}

/* HOME HERO — stable paint on every slide, including iOS Safari/local preview. */
.home-page .hero.hero--editorial{
  height:100vh;
  height:100svh;
  min-height:620px;
  background:
    radial-gradient(circle at 70% 35%,rgba(181,138,75,.13),transparent 42%),
    #17130f;
}
.home-page .hero-slide{background:#17130f}
.home-page .hero-slide__media{
  opacity:1;
  background:
    radial-gradient(circle at 70% 35%,rgba(181,138,75,.12),transparent 45%),
    linear-gradient(135deg,#211b15,#0e0d0b 72%);
}
.home-page .hero-slide__media img{
  transform:scale(1.015);
  transition:transform 9s cubic-bezier(.2,.65,.25,1),opacity .45s ease;
}
.home-page .hero-slide.is-active .hero-slide__media img{transform:scale(1)}
.home-page .hero-slide:not(.is-media-ready) .hero-slide__media img{opacity:0}
.home-page .hero-slide.is-media-ready .hero-slide__media img{opacity:1}
.home-page .hero-slide.is-media-missing .hero-slide__media img{display:none}
.home-page .hero-slide__content{width:min(100%,720px)}

/* Shared inner-page hero geometry. */
.delivery-hero, .contact-hero{
  min-height:min(820px,calc(100svh - var(--header-height-mobile,72px)));
}

/* Product gallery polish shared across desktop and touch devices. */


@media(hover:hover) and (pointer:fine){
  
  .btn:active{transform:translateY(1px) scale(.992);transition-duration:90ms}
}

@media(max-width:900px){
  :root{--mobile-page-pad:clamp(16px,5vw,24px)}
  .container{padding-inline:var(--mobile-page-pad)}

  /* Home: content remains readable on short iPhones and does not overlap dots. */
  .home-page .hero.hero--editorial{min-height:600px}
  .home-page .hero-slide__content{
    padding-top:calc(var(--header-height-mobile,72px) + env(safe-area-inset-top) + 24px);
    padding-right:var(--mobile-page-pad);
    padding-bottom:max(104px,calc(88px + env(safe-area-inset-bottom)));
    padding-left:var(--mobile-page-pad);
  }
  
  
  
  
  

  /* Catalog: filter sheet and cards are comfortable at 320–430px. */
  
  
  
  
  

  /* Collections: one visual scene at a time, no compressed text columns. */
  
  
  
  
  
  
  
  
  

  /* Discovery: cards and picker no longer fight the viewport. */
  
  
  
  
  
  
  
  

  /* Scent guide: consultation remains usable without horizontal overflow. */
  
  
  
  
  
  

  /* About: editorial hierarchy from the approved correction. */
  
  
  
  
  

  /* Delivery and contacts: facts/cards remain legible and tappable. */
  .delivery-hero__facts{grid-template-columns:1fr;gap:12px}
  .delivery-steps, .contact-cards{grid-template-columns:1fr}
  .delivery-split, .delivery-return__grid, .contact-details{grid-template-columns:1fr}
  .contact-hero__actions{align-items:stretch;flex-direction:column}
  .contact-hero__actions .btn{width:100%}

  /* Product: preserve the approved structure, refine only flow and touch UX. */
  
  
  
  
  
  
  
  .product-primary-actions .btn{width:100%}
  
  
  

  /* Cart/checkout: predictable one-column purchase flow. */
  
  
  
  
  
}

@media(max-width:600px){
  
  
  .delivery-hero h1, .contact-hero h1{
    font-size:clamp(2.75rem,13.5vw,4.5rem);
    line-height:.92;
  }
  
}

@media(max-width:390px){
  :root{--mobile-page-pad:16px}
  .home-page .hero.hero--editorial{min-height:580px}
  
  
  
  
  
  
  
  
}

@media(max-height:700px) and (max-width:900px){
  .home-page .hero.hero--editorial{min-height:560px}
  .home-page .hero-slide__content{padding-top:calc(var(--header-height-mobile,72px) + 12px);padding-bottom:82px}
  
  
  
}

@media(prefers-reduced-motion:reduce){
  .home-page .hero-slide__media img{transition:none!important;transform:none!important}
}

/* v11.8.1 hero copy reliability: motion layer must never blank active copy. */
.motion-ready .home-page .hero--editorial .hero-slide.is-active .hero-slide__content > *{
  opacity:1;
  transform:none;
}
.home-page .hero--editorial .hero-slide:not(.is-active) .hero-slide__content{
  pointer-events:none;
}

/* ===== v11-6-luxury-product-polish.css ===== */
/* VA HOME v11.6 — Luxury & Product Polish */

/* About: quieter editorial hierarchy */


/* Footer: stronger final scene */


/* Buttons: more tactile, restrained */
.btn, button{
  transition-property: transform, background-color, color, border-color, opacity, box-shadow;
  transition-duration: .42s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}
.btn:active, button:active{ transform: translateY(1px) scale(.985); transition-duration: .12s; }

/* Product gallery: only a 2% cinematic movement */


/* Reviews: editorial trust treatment */


/* Similar scents: consultant-like recommendations */


.similar-grid .product-card{ position: relative; }

.similar-grid .product-card__body{ gap: 8px; }


/* Collections: slower, cinematic reveal without over-animation */
.collection-world.reveal .collection-world__media, .collection-world.reveal .collection-world__content{
  transition-duration: 1.15s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}


/* ===== v11-8-21-unified-page-heroes.css ===== */
/* VA HOME v11.8.21 — unified inner-page hero viewport system
   All main inner-page heroes now use the same viewport logic as the home hero:
   one first-screen composition, responsive typography and controlled overflow. */

:root{
  --va-desktop-header-h: 88px;
  --va-mobile-header-h: 68px;
}

@media (min-width: 761px) {
  /* Pages with a single hero directly below the desktop header */
  .delivery-hero, .contact-hero{
    box-sizing: border-box;
    height: calc(100svh - var(--va-desktop-header-h));
    min-height: 560px;
    max-height: 900px;
    overflow: hidden;
  }

  /* Collections also contains a 46px breadcrumb strip above its hero. */
  

  /* Hero images always fill the available first-screen canvas. */
  .scent-experience__hero-media img, .delivery-hero__media img, .contact-hero__media img, .collections-v2-hero__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Prevent oversized copy from forcing an inner hero beyond the viewport. */
  .delivery-hero h1, .contact-hero h1{
    font-size: clamp(3.7rem, 6.6vw, 7.4rem);
    line-height: .88;
  }

  

  
}

@media (max-width: 760px) {
  .delivery-hero, .contact-hero{
    box-sizing: border-box;
    min-height: calc(100svh - var(--va-mobile-header-h));
    height: auto;
    overflow: hidden;
  }

  
}

/* Every collection title follows one identical typographic system.
   Entry is no longer treated as a one-off smaller heading. */


/* Short laptop screens: keep the whole composition visible without browser zoom. */
@media (min-width: 761px) and (max-height: 760px) {
  .delivery-hero, .contact-hero{
    min-height: 500px;
  }

  

  .delivery-hero h1, .contact-hero h1{
    font-size: clamp(3.2rem, 6.2vw, 6.25rem);
  }
}

/* ===== v11-8-24-hero-dna.css ===== */
/* VA HOME v11.8.24 — stronger home hero typography + readable fragrance DNA */
@media (min-width: 901px) {
  .home-page .hero.hero--editorial .hero-slide__content{width:min(100%,760px)}
  .home-page .hero.hero--editorial .hero-slide__title{
    font-size:clamp(4rem,5.15vw,5.4rem);line-height:.92;letter-spacing:-.035em;margin-bottom:1.4rem
  }
  .home-page .hero.hero--editorial .hero-slide__subtitle{
    max-width:34ch;font-size:clamp(1.08rem,1.32vw,1.34rem);line-height:1.55;margin-bottom:1.65rem
  }
  .home-page .hero.hero--editorial .hero-slide__actions .btn{
    min-height:58px;padding-inline:1.9rem;font-size:.98rem
  }
}
@media (min-width:901px) and (max-height:820px) {
  .home-page .hero.hero--editorial .hero-slide__title{font-size:clamp(3.55rem,4.7vw,4.65rem)}
  .home-page .hero.hero--editorial .hero-slide__subtitle{font-size:1.05rem;margin-bottom:1.25rem}
  .home-page .hero.hero--editorial .hero-slide__actions .btn{min-height:52px}
}


/* v11.8.26 — mobile checkout trust strip: 2 + 1 layout */
@media (max-width: 560px) {
  

  .checkout-trust-strip .container.checkout-trust-strip__grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    white-space: normal;
  }

  

  

  

  

  

  
}


/* ===== v11-8-42-unified-hero-font-reveal.css ===== */
/* VA HOME v11.8.42 — stable hero typography reveal
   Keeps hero copy hidden only until display/body fonts are ready,
   then reveals it with a subtle 8px lift. */

html.va-hero-fonts-loading :is(
  .home-page .hero--editorial .hero-slide__content,
  .brand-hero__copy,
  .editorial-page-hero__content,
  .delivery-hero__copy,
  .contact-hero__copy,
  .discovery-hero__content,
  .scent-experience__hero-content,
  .product-hero__info,
  .cart-hero > div:first-child,
  .account-auth > div:first-child,
  .journal-hero .container,
  .order-track__intro
){
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
}

html.va-hero-fonts-ready :is(
  .home-page .hero--editorial .hero-slide__content,
  .brand-hero__copy,
  .editorial-page-hero__content,
  .delivery-hero__copy,
  .contact-hero__copy,
  .discovery-hero__content,
  .scent-experience__hero-content,
  .product-hero__info,
  .cart-hero > div:first-child,
  .account-auth > div:first-child
){
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: opacity 560ms ease, transform 560ms cubic-bezier(.22,.61,.36,1) !important;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html.va-hero-fonts-loading :is(
    .home-page .hero--editorial .hero-slide__content,
  .brand-hero__copy,
    .editorial-page-hero__content,
    .delivery-hero__copy,
    .contact-hero__copy,
    .discovery-hero__content,
    .scent-experience__hero-content,
    .product-hero__info,
    .cart-hero > div:first-child,
    .account-auth > div:first-child,
    .journal-hero .container,
    .order-track__intro
  ){
    transform: none !important;
  }

  html.va-hero-fonts-ready :is(
    .home-page .hero--editorial .hero-slide__content,
  .brand-hero__copy,
    .editorial-page-hero__content,
    .delivery-hero__copy,
    .contact-hero__copy,
    .discovery-hero__content,
    .scent-experience__hero-content,
    .product-hero__info,
    .cart-hero > div:first-child,
    .account-auth > div:first-child,
    .journal-hero .container,
    .order-track__intro
  ){
    transform: none !important;
    transition: opacity 180ms linear !important;
    will-change: auto;
  }
}

/* ===== compare.css ===== */
/* VA HOME — Scent Comparison / Editorial dark experience */
.va-compare-add{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;background:transparent;color:inherit;font:600 11px/1.2 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:.65rem 0;opacity:.72;transition:opacity .2s ease,color .2s ease}.va-compare-add:hover, .va-compare-add.is-active{opacity:1;color:#b89a63}.va-compare-add svg{width:15px;height:15px}.product-card .va-compare-add{width:100%;border-top:1px solid rgba(30,27,23,.1);margin-top:.65rem}.va-compare-product-btn.is-active{background:rgba(255,255,255,.12);color:#e2c38d}

.va-compare-dock{position:fixed;left:50%;bottom:22px;z-index:9990;transform:translate(-50%,18px);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);padding:10px 12px 10px 16px;border:1px solid rgba(211,183,132,.35);border-radius:999px;background:rgba(13,12,10,.94);box-shadow:0 18px 60px rgba(0,0,0,.34);backdrop-filter:blur(18px);color:#fff;opacity:0;pointer-events:none;transition:.28s ease}.va-compare-dock.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.va-compare-dock__thumbs{display:flex}.va-compare-dock__open{border:0;border-radius:999px;background:#efe8dc;color:#16130f;padding:11px 17px;font:700 10px/1 Manrope,sans-serif;letter-spacing:.11em;text-transform:uppercase;cursor:pointer}.va-compare-dock__clear{border:0;background:transparent;color:#fff;opacity:.5;font-size:18px;cursor:pointer;padding:4px}

.va-compare-modal{position:fixed;inset:0;z-index:10000;background:#0b0a08;color:#f4efe7;opacity:0;visibility:hidden;transition:opacity .28s ease}.va-compare-modal::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -10%,rgba(184,148,87,.12),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.015),transparent 36%)}.va-compare-modal.is-open{opacity:1;visibility:visible}.va-compare-modal__close{width:48px;height:48px;flex:0 0 auto;border:1px solid rgba(244,239,231,.2);border-radius:50%;background:rgba(255,255,255,.025);color:#f4efe7;font:300 27px/1 Manrope,sans-serif;cursor:pointer;transition:.2s ease}.va-compare-modal__close:hover{border-color:#b9955d;transform:rotate(7deg)}

.va-compare-tab{position:relative;border:0;background:transparent;color:rgba(244,239,231,.48);padding:7px 2px;font:600 10px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color .2s ease}.va-compare-tab::after{content:"";position:absolute;left:0;right:100%;bottom:-19px;height:1px;background:#c6a269;transition:right .25s ease}.va-compare-tab.is-active{color:#f4efe7}.va-compare-tab.is-active::after{right:0}


.va-compare-panel{display:none;padding:24px;min-height:266px}.va-compare-panel.is-active{display:block;animation:vaCompareFade .28s ease both}@keyframes vaCompareFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}


.va-compare-buy.is-added{background:#efe7db;border-color:#efe7db}

body.va-compare-lock{overflow:hidden}


@media(max-width:600px){.va-compare-dock{bottom:12px;gap:9px;padding-left:12px}.va-compare-dock__open{padding:11px 13px}.va-compare-modal__close{width:42px;height:42px}.va-compare-panel{padding-left:20px;padding-right:20px}.va-compare-panel{min-height:250px}}
@media(prefers-reduced-motion:reduce){.va-compare-modal, .va-compare-dock, .va-compare-panel{transition:none!important;animation:none!important}}

/* v11.8.69 — mobile comparison geometry fix */
.va-compare-modal__close{
  box-sizing:border-box;
  aspect-ratio:1 / 1;
  padding:0;
  display:grid;
  place-items:center;
  line-height:1;
}


@media(max-width:600px){
  
  
  .va-compare-modal__close{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    border-radius:999px;
    font-size:24px;
  }
  
  
  
  
  
}

/* v12.1 — compact adaptive compare */


.va-compare-modal__close{width:42px;height:42px;font-size:24px}

.va-compare-tab::after{bottom:-14px}


.va-compare-panel{padding:20px;min-height:230px}


@media (min-width:901px) and (max-height:820px){
  
  
  
  
  .va-compare-tab::after{bottom:-11px}
  
  
  
  .va-compare-panel{padding-top:16px;min-height:210px}
}


/* v12.2 — laptop-first comparison composition */


.va-compare-panel{
  padding:20px 22px;
  min-height:238px;
}


@media (min-width:901px) and (max-height:900px){
  
  
  
  .va-compare-tab::after{bottom:-14px}
  
  
}

@media(max-width:900px){
  
  
  .va-compare-panel{padding:20px;min-height:0}
}


/* v12.3 — VA HOME Macro Lens comparison */


/* v12.4 — VA HOME Olfactive Dossier comparison */


.va-compare-card__portrait-image{
  width:100%;height:100%;min-height:164px;display:block;
  object-fit:cover;object-position:center;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease;
}
.va-compare-card:hover .va-compare-card__portrait-image{transform:scale(1.025)}


@media(min-width:901px) and (max-height:900px){
  
  .va-compare-card__portrait-image{min-height:142px}
  
}
@media(max-width:900px){
  
  .va-compare-card__portrait-image{min-height:146px}
}
@media(max-width:520px){
  
  .va-compare-card__portrait-image{min-height:128px}
  
  
}

/* v12.5 — Material Sample Compare polish */


.va-compare-card__portrait-image{
  width:100%;height:100%;min-height:0;
  object-fit:cover;
  object-position:center center;
}


/* ===== v12-0-rc1.css ===== */
/* ==========================================================================
   VA HOME v12.0 RC1 — Production design-system and interaction polish
   Scope: shared cards, account wishlist, scent comparison, focus/touch UX.
   ========================================================================== */

:root{
  --ui-border:rgba(184,138,75,.22);
  --ui-border-hover:rgba(184,138,75,.48);
  --ui-surface:#12100d;
  --ui-surface-deep:#0b0a08;
  --ui-gold:#b88a4b;
  --ui-radius:2px;
  --ui-shadow-rest:0 12px 32px rgba(0,0,0,.18);
  --ui-shadow-lift:0 24px 64px rgba(0,0,0,.32);
  --ui-ease:cubic-bezier(.2,.7,.2,1);
  --ui-fast:180ms;
  --ui-base:360ms;
}

/* Consistent, visible keyboard focus without changing pointer interactions. */


/* Shared product-card geometry. Keeps every catalogue surface aligned. */
.product-card{
  min-width:0;
  height:100%;
  border-color:var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow-rest);
  transition:transform var(--ui-base) var(--ui-ease),border-color var(--ui-fast) ease,box-shadow var(--ui-base) var(--ui-ease);
}


.product-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
}


@media(hover:hover) and (pointer:fine){
  .product-card:hover{
    transform:translateY(-3px);
    border-color:var(--ui-border-hover);
    box-shadow:var(--ui-shadow-lift);
  }
}

/* Account: quieter private-space treatment and stable wishlist cards. */


@media(max-width:520px){
  
  
  
  
  
  .wishlist-card__actions .btn{min-height:36px;padding:8px 11px}
  
}

/* Comparison: editorial cards with predictable image ratio and safer mobile flow. */

.va-compare-modal__close{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  padding:0;
}


.va-compare-panel{flex:1}
.va-compare-dock__open{transition:background var(--ui-fast) ease,border-color var(--ui-fast) ease,transform var(--ui-fast) ease}
@media(hover:hover) and (pointer:fine){
  .va-compare-dock__open:hover{transform:translateY(-1px)}
}

@media(max-width:600px){
  .va-compare-dock{bottom:calc(12px + env(safe-area-inset-bottom))}
  
  
  
  
}

/* Keep touch controls comfortably tappable. */
@media(pointer:coarse){
  .va-compare-add{min-height:44px}
  
}

@media(prefers-reduced-motion:reduce){
  .product-card, .va-compare-dock__open{transition:none!important;transform:none!important}
}

/* ===== v12-0-rc2.css ===== */
/* ==========================================================================
   VA HOME v12.0 RC2 — Production QA hardening
   Scope: mobile stability, accessibility, safe-area and overflow protection.
   No visual redesign and no commerce logic changes.
   ========================================================================== */

:root{
  --tap-target:44px;
  --focus-ring:rgba(184,138,75,.95);
}

html{
  overflow-x:clip;
  scrollbar-gutter:stable;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
body{min-width:0;overflow-wrap:break-word}
main, section, article, aside, nav, header, footer{min-width:0}
img, video, canvas, svg{max-width:100%}

/* Anchored sections remain visible below the sticky header. */
:where([id]){scroll-margin-top:96px}

/* Production-grade focus that remains visible on dark and light surfaces. */


/* Reliable touch behaviour without changing desktop sizing. */
:where(button,[role="button"],input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"]){
  touch-action:manipulation;
}
@media(pointer:coarse){
  :where(.icon-btn,.header-action,.wishlist-remove,.va-compare-add,.va-compare-card__remove,.va-compare-modal__close){
    min-width:var(--tap-target);
    min-height:var(--tap-target);
  }
}

/* Prevent iOS form zoom and clipping in checkout/account forms. */
@media(max-width:760px){
  :where(input,select,textarea){font-size:16px}
  
}

/* Stable account/wishlist geometry across long titles and small screens. */


/* Comparison modal: no accidental page scroll and no clipped final card. */
.va-compare-modal[aria-hidden="false"], .va-compare-modal.is-open{overscroll-behavior:contain}


/* Better behaviour for users who request less motion. */
@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto!important}
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

/* High-contrast fallback keeps controls understandable. */
@media(forced-colors:active){
  :where(button,.btn,input,select,textarea,.product-card,.wishlist-card){border:1px solid CanvasText}
}

/* ===== v12-1-site-audit.css ===== */
/* VA HOME v12.1 — final adaptive/site-wide polish
   Safe layout corrections only: no redesign, loaders, blur, skeletons or reveal logic. */

html, body{ max-width: 100%; overflow-x: clip; }
img, picture, video, canvas, svg{ max-width: 100%; }
/* Do not force global image height: hero media relies on height:100%. */

/* Prevent long labels, prices and controls from forcing horizontal overflow. */
button, input, select, textarea, a{ min-width: 0; }
.product-card{ min-width: 0; }


/* Cart: remove the oversized empty gap between breadcrumbs and the hero. */

.cart-hero + .checkout-progress{ margin-top: clamp(18px, 2.2vw, 30px); }


/* Laptop viewport: keep first checkout screen composed and readable. */
@media (min-width: 901px) and (max-height: 900px) {
  
  
  
  
  
  .checkout-progress{ margin-bottom: 30px; }
}

/* Compact notebook widths without shrinking touch targets. */
@media (min-width: 901px) and (max-width: 1440px) {
  .container{ width: min(100% - 48px, var(--container-max)); }
  .btn{ min-height: 46px; }
  .product-card__actions .btn{ padding-inline: 16px; }
}

/* Mobile: preserve breathing room and avoid edge collisions. */
@media (max-width: 760px) {
  html, body{ overflow-x: hidden; }
  
  
  .checkout-progress{ margin-top: 14px; }
  .btn, button, input, select, textarea{ max-width: 100%; }
}

/* Very small screens: keep dense controls usable. */
@media (max-width: 380px) {
  .container{ width: min(100% - 28px, var(--container-max)); }
  
  .product-card__actions .btn{ padding-inline: 10px; }
}


/* ===== Info responsive component — consolidated from legacy mobile layers ===== */
@media (max-width: 900px){
.info-hero,
  .delivery-hero{padding-block: clamp(46px, 10vw, 78px);}
.info-content{padding-block: var(--va-mobile-section-tight);}
.info-content h2{margin-top: 2em; margin-bottom: .65em;}
.info-content p{font-size: clamp(1rem, 3.8vw, 1.12rem);}
}
@media (max-width:900px){
.info-hero,
  .delivery-hero{padding-block:var(--qa-section-tight);}
.info-content{padding-block:var(--qa-section);}
.contact-layout{grid-template-columns:minmax(0,1fr);gap:24px;}
.info-content{max-width:760px;margin-inline:auto;}
.info-content p{font-size:clamp(16px,2.1vw,18px);line-height:1.72;}
.info-content h2{margin-top:1.55em!important;}
}