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

/* ===== product.css ===== */
/* ==========================================================================
   VA HOME — Product page
   ========================================================================== */


/* ---- Product experience: atmospheric story + scent DNA ---- */


.product-gallery-thumb.is-active{
  border-color: var(--color-gold);
}


.product-wishlist.is-active{color:var(--color-gold);border-color:var(--color-gold)}

/* Delivery and payment information */


/* ---- Product detail sections ---- */
.product-detail-section{
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}


.product-detail-section__title{
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: var(--space-2);
}


.product-detail-section .scent-scale{
  margin-top: var(--space-2);
}


/* Image and formula are one visual stack, so the formula starts immediately
   below the photograph instead of waiting for the taller product-info column. */


@media(max-width:760px){
  body{padding-bottom:76px}
  
  
  
  
  .product-mobile-buy.is-visible{transform:translateY(0)}
  
  
  
  
}


/* ---- Similar products ---- */


/* ===== Real reviews / Supabase ===== */


.review-form__message.is-error{background:#f7ece9;color:#8a382d}


/* ---- Quiet product proof: factual, not comparative ---- */


/* ==========================================================================
   VA HOME v6.1 — Luxury product gallery & purchase experience
   ========================================================================== */


.product-gallery .product-gallery-thumb.is-active{
  opacity:1;
  transform:translateX(2px);
}


.product-purchase-row .qty-stepper{min-height:54px}


@media (max-width:900px){
  
  
  
  
  
  .product-gallery .product-gallery-thumb.is-active{transform:translateY(-2px)}
  
  
}

@media (max-width:520px){
  
  .product-purchase-row .qty-stepper{width:100%;justify-content:space-between}
  .product-purchase-row .qty-stepper input{flex:1}
}

/* ==========================================================================
   VA HOME v7.1 — Gallery Engine
   ========================================================================== */


/* VA HOME v7.3.2 — clean product slider, no hover zoom */


/* VA HOME v7.3.3 — restore v6.6 image presentation */


/* VA HOME v7.3.4 — smooth gallery crossfade */


.product-gallery .product-hero__media>img.product-main-image-transition.is-visible{opacity:1}


/* v7.3.6 — technical gallery labels are not customer-facing */


/* ========================================================================== 
   VA HOME v7.3.13 — Premium product page refinement
   ========================================================================== */


.product-gallery .product-gallery-thumb.is-active{
  border-color:var(--color-gold);
  box-shadow:0 0 0 1px rgba(184,138,75,.24);
}


.product-purchase-row .qty-stepper{min-height:60px}


.product-wishlist.is-active{border-color:transparent;color:var(--color-gold)}


@media (max-width:620px){
  
  
  
  
  
  
  
  .product-purchase-row .qty-stepper{width:100%}
  
  
  
  
  
}

/* ========================================================================== 
   VA HOME v7.3.14 — Compact premium flow + cinematic gallery transition
   ========================================================================== */


/* Two-layer crossfade: slower opacity, subtle cinematic breathing, no hard flash. */


.product-gallery .product-hero__media>img.product-main-image-transition.is-visible{
  opacity:1;
  transform:scale(1.075)!important;
}
@media (max-width:900px){
  
  
  .product-gallery .product-hero__media>img.product-main-image-transition.is-visible{transform:scale(1.045)!important}
}


/* ==========================================================================
   VA HOME v7.3.15 — Editorial product story
   A calmer, magazine-like sequence after the purchase hero.
   ========================================================================== */


.product-image-switcher .product-main-image-transition.is-visible{transform:scale(1)}


/* ========================================================================== 
   VA HOME v8.0 — Cinematic product story
   ========================================================================== */


/* ==========================================================================
   VA HOME v9 — Render-faithful cinematic composition
   ========================================================================== */


/* ========================================================================== 
   VA HOME v9.1 — Render-faithful product stories
   All product pages share the same cinematic structure while using each
   fragrance's own gallery and atmosphere photography.
   ========================================================================== */


/* Notes: three real product-specific scenes, edge-to-edge like the render. */


/* Render-faithful ritual: one compact horizontal scene, not a giant heading. */


/* Bring the lower story closer to the dense, cinematic render. */


/* ========================================================================== 
   VA HOME v9.3 — Render spacing + full-width assurance row + ritual fix
   ========================================================================== */


/* Atmosphere begins directly after the assurance strip. */


/* Ritual mirrors the render: slim heading, three equal steps, one image. */


/* ========================================================================== 
   VA HOME v9.4 — Final render alignment
   ========================================================================== */


/* ========================================================================== 
   VA HOME v9.5 — Hero photo/support seamless join
   The left gallery now stretches to the full height of the purchase column,
   so the reassurance strip starts directly beneath both columns.
   ========================================================================== */


/* ========================================================================== 
   VA HOME v9.6 — exact gallery/purchase baseline alignment
   The visible photo edge ends on the same baseline as the purchase module.
   ========================================================================== */


/* ========================================================================== 
   VA HOME v9.7.1 — balanced product photo baseline
   A small premium breathing space between the gallery and assurance strip.
   ========================================================================== */


/* ========================================================================== 
   VA HOME v11.8.58 — Ambient product gallery
   The active gallery image softly dissolves into a blurred copy beneath it.
   Both ambient layers crossfade in sync with the 6-second gallery rotation.
   ========================================================================== */


.product-image-switcher--ambient .product-gallery-ambient__layer.is-active{
  opacity: .72;
}


/* VA HOME v12.0.8 — product gallery thumbnail paint fix
   Prevent visible grey tiles before eager gallery images are painted. */


/* v13.1.2 — strict product-story gallery source */


/* ===== final-polish.css ===== */
/* VA HOME v10.0 — final supporting pages polish */


.status-premium>.container, .thank-premium>.container, .not-found-premium>.container{position:relative;z-index:1}


.status-premium .order-status-step.is-active i{background:var(--gold)}


.collections-premium-hero .container{position:relative;z-index:1;padding-bottom:clamp(50px,8vw,100px)}


.not-found-premium .container{padding-top:80px;padding-bottom:80px}


.legal-premium{padding-top:40px;padding-bottom:90px}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(40px,7vw,100px);align-items:start;max-width:1120px}
.legal-copy{max-width:760px}
.legal-copy>h1{font-family:var(--font-display);font-size:clamp(3.7rem,7vw,6.4rem);font-weight:500;line-height:.95;max-width:10ch}
.legal-copy .product-detail-section{scroll-margin-top:120px;padding:34px 0}
.legal-copy .product-detail-section__title{font-family:var(--font-display);font-weight:500!important;font-size:clamp(1.7rem,3vw,2.5rem)!important}
.legal-nav{position:sticky;top:110px;padding:24px;border:1px solid var(--border-hairline);background:#0d0c0a}
.legal-nav strong{display:block;margin-bottom:16px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:.76rem}
.legal-nav a{display:block;padding:10px 0;color:var(--text-secondary);border-bottom:1px solid var(--border-hairline);font-size:.9rem}
.legal-nav a:last-child{border-bottom:0}
.legal-nav a:hover{color:var(--text-primary)}
@media(max-width:900px){.legal-layout{grid-template-columns:1fr}.legal-nav{position:static;order:-1}}

/* VA HOME v10.1 — final hero alignment + product typography/mobile repair */
@media (min-width: 901px) {
  .collections-premium-hero .container, .journal-hero .container{
    transform: translate(-56px,-34px);
  }

  

  .collections-premium-hero .container{
    padding-bottom: 0;
  }

  

  

  

  
}

/* Product names must never break inside words. */


/* Fix the cinematic product story on phones: no squeezed 2–4 letter columns. */


@media (max-width: 620px) {
  

  .collections-premium-hero .container, .journal-hero .container{
    transform: none;
  }

  
}

/* VA HOME v10.2 — delivery-style internal heroes + guaranteed product title wrapping */
@media (min-width: 901px) {
  

  .collections-premium-hero .container, .not-found-premium .container{
    transform: none !important;
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .collections-premium-hero .container, .not-found-premium .container{
    padding-top: clamp(52px,7vh,86px) !important;
    padding-bottom: clamp(42px,6vh,72px) !important;
  }

  .collections-premium-hero .container > *, .not-found-premium .container > *{
    max-width: 690px;
  }

  

  

  .collections-premium-hero .container{
    padding-bottom: clamp(42px,6vh,72px) !important;
  }

  

  

  
}


/* VA HOME v10.4 — editorial refinement */


.scent-experience__hero--consultation .scent-experience__hero-media img{filter:saturate(.78) contrast(1.05)}


/* ==========================================================
   VA HOME v11.0 — Creative Direction Polish
   ========================================================== */

/* Shared cinematic hero entrance for Discovery + Scent Guide */
.motion-ready .discovery-hero::before, .motion-ready .scent-experience__hero-media img{
  animation: vaV11HeroDrift 16s var(--motion-ease-soft) both;
  transform-origin: 68% 48%;
  will-change: transform;
}

@keyframes vaV11HeroDrift {
  from { transform: scale(1.015) translate3d(0,0,0); }
  to { transform: scale(1.07) translate3d(-.7%,-.35%,0); }
}

.motion-ready .discovery-hero__content > *, .motion-ready .scent-experience__hero-content > *{
  opacity: 0;
  transform: translate3d(0,24px,0);
  transition: opacity 900ms var(--motion-ease-luxury), transform 1100ms var(--motion-ease-luxury);
}

.motion-ready .discovery-hero__content.is-visible > *, .motion-ready .scent-experience__hero-content.is-visible > *{
  opacity: 1;
  transform: none;
}

.motion-ready .discovery-hero__content > *:nth-child(1), .motion-ready .scent-experience__hero-content > *:nth-child(1){transition-delay:100ms}
.motion-ready .discovery-hero__content > *:nth-child(2), .motion-ready .scent-experience__hero-content > *:nth-child(2){transition-delay:220ms}
.motion-ready .discovery-hero__content > *:nth-child(3), .motion-ready .scent-experience__hero-content > *:nth-child(3){transition-delay:350ms}
.motion-ready .discovery-hero__content > *:nth-child(4), .motion-ready .scent-experience__hero-content > *:nth-child(4){transition-delay:480ms}
.motion-ready .discovery-hero__content > *:nth-child(5), .motion-ready .scent-experience__hero-content > *:nth-child(5){transition-delay:600ms}

/* Collections: remove cramped four-column card wall and restore editorial scale */


/* Product pages: final polish without redesigning their structure */

body[class*="has-product-story"] h1, body[class*="has-product-story"] h2{overflow-wrap:normal;word-break:normal;hyphens:none}


@media(prefers-reduced-motion:reduce){
  .motion-ready .discovery-hero::before, .motion-ready .scent-experience__hero-media img{animation:none!important;transform:none!important}
  .motion-ready .discovery-hero__content > *, .motion-ready .scent-experience__hero-content > *{opacity:1!important;transform:none!important;transition:none!important}
}

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



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


/* 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. */


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


@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. */
  
  
  
  
  

  /* Product: preserve the approved structure, refine only flow and touch UX. */
  
  
  
  
  
  
  
  
  
  
  

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


@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 */
button{
  transition-property: transform, background-color, color, border-color, opacity, box-shadow;
  transition-duration: .42s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}
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-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;
  }

  

  

  

  

  

  
}


/* ===== 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. */


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

/* Mobile: preserve breathing room and avoid edge collisions. */
@media (max-width: 760px) {
  html, body{ overflow-x: hidden; }
  
  
  .checkout-progress{ margin-top: 14px; }
  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)); }
  
  
}


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