:root{
  --ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --glass-edge:rgba(255,255,255,.78);
  --glass-line:rgba(74,13,31,.09);
  --glass-shadow:0 18px 48px rgba(74,13,31,.10),inset 0 1px 0 rgba(255,255,255,.82);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--ui-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
}
::selection{background:rgba(74,13,31,.16);color:var(--ink)}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.perfume-price,.product-price,.result-count,.bag-total,#checkout-totals{font-variant-numeric:tabular-nums}

/* One hero system at every breakpoint: use the photographic banner carousel
   already shown on phones, and retire the older white campaign composition. */
.photo-hero{
  height:auto;
  min-height:0;
  padding-bottom:86px;
  background:#fff;
}
.photo-hero>.hero-campaign,
.photo-hero>.campaign-product,
.photo-hero>.campaign-copy{display:none!important}
.mobile-campaign{display:block;position:relative;padding:0}
.mobile-banner-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.mobile-banner-track::-webkit-scrollbar{display:none}
.mobile-banner{
  position:relative;
  display:block;
  flex:0 0 100%;
  min-width:0;
  height:clamp(330px,38vw,540px);
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#fff;
}
.mobile-banner .banner-art{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center}
.mobile-banner-copy{position:absolute;left:clamp(34px,6vw,92px);top:50%;width:min(40%,520px);transform:translateY(-50%)}
.mobile-banner-copy>span:first-child{font-size:clamp(9px,.8vw,12px);letter-spacing:.16em}
.mobile-banner-copy h2{font-size:clamp(34px,4vw,64px);line-height:1.02;letter-spacing:-.035em;margin:20px 0 13px}
.mobile-banner-copy p,.mobile-banner-copy .banner-discover{font-size:clamp(12px,1vw,15px)}
.mobile-banner-copy .banner-discover{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 25px;
  border:1px solid rgba(255,255,255,.43);
  border-radius:999px;
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.31),0 7px 22px rgba(25,8,18,.12);
  color:inherit;
  font-weight:600;
  letter-spacing:.015em;
  text-shadow:none;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
@media(hover:hover){.mobile-banner:hover .banner-discover{background:rgba(255,255,255,.32);box-shadow:inset 0 1px rgba(255,255,255,.4),0 10px 26px rgba(25,8,18,.16)}}
.mobile-banner:active .banner-discover{transform:scale(.97)}
.mobile-banner:focus-visible .banner-discover{outline:2px solid currentColor;outline-offset:3px}
.banner-dots{display:flex;justify-content:center;gap:4px;height:38px;align-items:center}
.banner-dots button{width:30px;height:30px;background:none;border:0;display:grid;place-items:center;padding:0}
.banner-dots button:after{content:'';width:5px;height:5px;border-radius:50%;background:#dacdd0;transition:width .2s}
.banner-dots button[aria-pressed=true]:after{width:22px;border-radius:4px;background:var(--accent)}
.photo-hero>.campaign-search{
  left:50%;
  right:auto;
  bottom:17px;
  width:min(600px,calc(100% - 40px));
  max-width:none;
  transform:translateX(-50%);
}

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,251,246,.68));
  border-bottom:1px solid var(--glass-edge);
  box-shadow:0 1px 0 var(--glass-line),inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
}
.scrolled .site-header{box-shadow:0 10px 34px rgba(74,13,31,.09),inset 0 1px 0 rgba(255,255,255,.95)}
.dropdown-panel,.search-panel,.primary-nav.open{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,250,244,.82));
  border-color:var(--glass-edge);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  backdrop-filter:saturate(180%) blur(28px);
}

a,button,summary,input,select,textarea{
  transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
button:active,.primary:active,.secondary:active,.chip:active,.product-card .quick-add:active{transform:scale(.97)}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid rgba(74,13,31,.72);
  outline-offset:3px;
}
.hero-search:focus-within,.brand-directory-search:focus-within,.search-panel form:focus-within{
  box-shadow:0 0 0 4px rgba(74,13,31,.10),0 18px 50px rgba(74,13,31,.12);
}

@media (hover:hover) and (pointer:fine){
  .product-card{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .product-card:hover{transform:translateY(-4px)}
  .product-card:hover .product-image-link{box-shadow:0 20px 38px rgba(74,13,31,.08)}
  .brand-shop-tile:hover,.format-card:hover{transform:translateY(-3px)}
}

@media(max-width:900px){
  .site-header{background:rgba(255,253,250,.82)}
  .primary-nav.open{border-top-color:rgba(74,13,31,.06)}
}

@media(max-width:600px){
  .photo-hero{padding-bottom:68px}
  .mobile-banner{height:215px}
  .mobile-banner-copy{left:22px;top:28px;width:56%;transform:none}
  .mobile-banner-copy>span:first-child{font-size:8px;letter-spacing:.12em}
  .mobile-banner-copy h2{font-size:25px;line-height:1.14;letter-spacing:-.4px;margin:14px 0 10px}
  .mobile-banner:first-child .mobile-banner-copy h2{font-size:23px;line-height:1.1;margin-bottom:8px}
  .mobile-banner-copy p{margin-bottom:12px}
  .mobile-banner-copy p,.mobile-banner-copy .banner-discover{font-size:11px}
  .mobile-banner-copy .banner-discover{min-height:34px;padding-inline:18px}
  .banner-dots{height:28px;gap:3px}
  .banner-dots button{width:28px;height:28px}
  .banner-dots button[aria-pressed=true]:after{width:19px}
  .photo-hero>.campaign-search{left:18px;right:18px;bottom:14px;width:auto;transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(prefers-reduced-transparency:reduce){
  .site-header,.dropdown-panel,.search-panel,.primary-nav.open{background:#fffdf9;-webkit-backdrop-filter:none;backdrop-filter:none}
}

@media(prefers-contrast:more){
  .site-header,.dropdown-panel,.search-panel,.primary-nav.open{background:#fff;border-color:#4a0d1f}
  :where(a,button,summary,input,select,textarea):focus-visible{outline-width:3px;outline-color:#4a0d1f}
}