/* Frosted and smoked glass are reserved for navigation and controls. */
:root {
  --glass-light: rgba(255,255,255,.66);
  --glass-edge: rgba(255,255,255,.72);
  --glass-ink: #30352e;
  --glass-smoke: rgba(38,46,35,.78);
  --glass-blur: 18px;
}
.announcement {position:absolute;inset:0 0 auto;z-index:4;background:transparent;color:#fff;height:36px;text-shadow:0 1px 3px #0008}
.header {position:fixed;top:48px;left:3.4%;right:3.4%;height:88px;padding:0 28px;border:1px solid transparent;border-radius:14px;background:transparent;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;text-shadow:0 1px 4px #0009;z-index:5;transition:background .25s,border-color .25s,color .25s,transform .25s}
.header.is-scrolled {transform:translateY(-32px);background:rgba(249,248,243,.84);border-color:var(--glass-edge);color:var(--glass-ink);-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%);box-shadow:inset 0 1px 0 #fff9;text-shadow:none}
.header .brand {font-size:22px;letter-spacing:4px}
.desktop-nav {gap:10px}
.desktop-nav a {padding:10px 14px;border:1px solid transparent;border-radius:8px;transition:background .2s}
.desktop-nav a:hover {background:#fff7;border-color:#fff9}
.header-actions {gap:8px}
.header .bag-toggle {padding:8px 12px;min-height:42px;border-radius:9px}
.hero {position:relative;isolation:isolate;display:block;height:100vh;height:100svh;min-height:700px;color:#fff;overflow:hidden;background:#3c3930}
.hero-photo {position:absolute;inset:0;min-height:0;height:100%;width:100%;z-index:-2;background:#3c3930}
.hero-photo>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:59% center;animation:none}
.hero-photo>img.is-changing {animation:hero-image-in .8s ease-out}
@keyframes hero-image-in {from{opacity:.55}to{opacity:1}}
/* A tonal scrim keeps real text legible without putting it in a glass card. */
.hero::before {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,22,17,.58) 0%,rgba(18,22,17,.58) 38%,transparent 72%),linear-gradient(180deg,rgba(18,22,17,.1),transparent 48%,rgba(18,22,17,.3))}
.hero-copy {padding:clamp(175px,20vh,230px) 6% 140px;max-width:850px;align-items:flex-start;justify-content:flex-start}
.hero-copy .eyebrow {font-size:10px;letter-spacing:2px;margin-bottom:20px;color:#fff}
.hero h1 {font-size:clamp(56px,6.2vw,88px);line-height:1.03;letter-spacing:-.035em;margin-bottom:24px;text-shadow:0 2px 16px #0002}
.hero h1 em {color:#fff}
.hero-description {font-size:14px;line-height:1.8;max-width:410px;color:#fff;margin-bottom:28px;text-shadow:0 1px 4px #0005}
.hero-note {display:none}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero :focus-visible {outline:2px solid #fff;outline-offset:5px}

/* Shared control finish; image buttons remain unobscured image hit areas. */
:is(.button,.icon-button,.bag-toggle,.product-plus,.underlined,.filter,.scent-tabs button,.stepper button,.text-button,.remove-item,.product-heading button) {
  background:var(--glass-light);border:1px solid var(--glass-edge);border-radius:9px;color:var(--glass-ink);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  box-shadow:inset 0 1px 0 #fff9;transition:background .2s,border-color .2s,transform .2s;
}
:is(.button,.icon-button,.bag-toggle,.product-plus,.underlined,.filter,.scent-tabs button,.stepper button,.text-button,.remove-item,.product-heading button):hover:not(:disabled) {background:rgba(255,255,255,.9);border-color:#fff}
:is(.button,.icon-button,.bag-toggle,.product-plus,.underlined,.filter,.scent-tabs button,.stepper button,.text-button,.remove-item,.product-heading button):active:not(:disabled) {transform:translateY(1px)}
.button {min-height:50px;font-size:12px;gap:20px;padding:13px 18px}
.button.dark {background:var(--glass-smoke);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 #fff2}
.button.dark:hover {background:rgba(43,55,37,.92);border-color:rgba(255,255,255,.52)}
.hero .button {background:rgba(247,247,240,.82);color:#283022;border-color:#ffffffb3;box-shadow:inset 0 1px 0 #fffc}
.hero .button:hover {background:rgba(255,255,250,.95)}
.underlined {padding:12px 17px;min-height:46px;gap:30px}
.filters {gap:10px;padding:5px 0 16px}
.filter {padding:10px 14px;min-height:44px;color:#505649}
.filter.active,.scent-tabs button[aria-selected=true] {background:rgba(76,88,62,.86);border-color:rgba(255,255,255,.35);color:white;box-shadow:inset 0 1px 0 #fff3}
.filter.active:hover,.scent-tabs button[aria-selected=true]:hover {background:rgba(76,88,62,.96)}
.scent-tabs {gap:10px;padding-bottom:12px}
.scent-tabs button {padding:10px 14px;min-height:44px;color:#505649}
.icon-button {min-width:40px}
.product-plus {width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:25px}
.product-heading button {padding:4px 7px;margin-left:-7px;border-radius:5px}
.stepper {border:0;gap:3px}
.stepper button {width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}
.bag-item-bottom .stepper button {width:32px;height:32px}
.text-button {padding:9px 12px;text-decoration:none;min-height:40px}
.remove-item {padding:5px 9px;text-decoration:none;margin-top:6px}
.product-dialog>.close-dialog {background:var(--glass-light);border:1px solid var(--glass-edge)}
.mobile-nav {border:1px solid var(--glass-edge);border-radius:12px;background:rgba(249,248,243,.95);color:var(--glass-ink);text-shadow:none;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #fffa}
.mobile-nav a {border-radius:6px;padding:12px}
.mobile-nav a:hover {background:#fff9}
/* At the top, only the wordmark and controls sit on the photograph. */
.header:not(.is-scrolled) :is(.icon-button,.bag-toggle) {background:transparent;border-color:transparent;box-shadow:none;color:inherit;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0 1px 2px #0008)}
.header:not(.is-scrolled) :is(.desktop-nav a,.icon-button,.bag-toggle):hover {background:#ffffff1a;border-color:#ffffff40}
.header:not(.is-scrolled) :focus-visible {outline-color:#fff}
html {scroll-padding-top:125px}

@media(min-width:1600px) {.hero{min-height:760px}.hero-photo{min-height:0}.hero-copy{max-width:1000px;padding-left:6%}}
@media(max-width:1050px) {
  .header{padding:0 18px;height:80px;left:24px;right:24px}
  .header .brand{font-size:19px;letter-spacing:3px}
  .desktop-nav{gap:2px;font-size:11px}.desktop-nav a{padding:9px}
  .hero{min-height:700px}.hero-photo{min-height:0}
  .hero-copy{padding-top:175px;max-width:660px}
  .hero h1{font-size:70px}
}
@media(max-width:760px) {
  .announcement{height:28px;font-size:7px;gap:10px;letter-spacing:.8px}.announcement span{font-size:7px;padding-left:10px}
  .header{top:38px;left:12px;right:12px;height:70px;padding:0 14px;border-radius:12px}
  .header.is-scrolled{transform:translateY(-22px)}
  .header .brand{font-size:16px;letter-spacing:2px}
  html{scroll-padding-top:108px}
  .header-actions{gap:5px}.header .icon-button{width:36px;min-width:36px;height:38px}.header .bag-toggle{min-height:38px;padding:6px 8px;gap:5px;font-size:10px}
  .header svg{width:18px;height:18px}.mobile-nav{top:calc(100% + 8px);left:0;right:0;padding:12px}
  .hero{height:100vh;height:100svh;min-height:620px}
  .hero-photo{height:100%;min-height:0}.hero-photo>img{object-position:59% center}
  .hero::before{background:linear-gradient(180deg,rgba(18,22,17,.6),rgba(18,22,17,.58) 43%,transparent 64%,rgba(18,22,17,.5))}
  .hero-copy{min-height:max(620px,100svh);padding:max(145px,22svh) 7% max(110px,23svh);max-width:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;align-items:start;row-gap:16px}
  .hero-copy .eyebrow{font-size:8px;letter-spacing:1.6px;margin:0}
  .hero h1{font-size:clamp(43px,12vw,58px);line-height:1.04;letter-spacing:-.035em;margin:0;align-self:center}
  .hero-description{font-size:12px;line-height:1.7;max-width:310px;margin:0}
  .hero .button{min-height:46px;font-size:11px;padding:11px 16px;gap:18px;width:max-content;max-width:100%}
  .filters{gap:8px}.filter{font-size:10px;padding:9px 12px}
  .scent-tabs{gap:6px}.scent-tabs button{font-size:9px;padding:9px 10px}
  .product-plus{width:36px;height:36px;font-size:23px}
}
@media(max-width:370px) {.header{padding:0 10px}.header .brand{font-size:14px;letter-spacing:1.7px}.header-actions{gap:4px}.header .icon-button{width:32px;min-width:32px}.hero h1{font-size:43px}.hero-copy{padding-left:6%;padding-right:6%}}
@media(max-height:650px) and (min-width:761px) {.hero{min-height:650px}.hero-copy{padding-top:160px}.hero h1{font-size:62px}.hero-description{margin-bottom:18px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header.is-scrolled,.mobile-nav{background:#eeeee7}
  :is(.button,.icon-button,.bag-toggle,.product-plus,.underlined,.filter,.scent-tabs button,.stepper button,.text-button,.remove-item,.product-heading button){background:#eeeee7}
  .button.dark,.filter.active,.scent-tabs button[aria-selected=true]{background:#3c4932;color:#fff}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Navigation actions share the header surface in both scroll states. */
.header .header-actions :is(.icon-button,.bag-toggle),
.header .header-actions :is(.icon-button,.bag-toggle):hover:not(:disabled){
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* A quieter, more useful closing section. */
.footer{background:#343d32;color:#f5f3e9;border:0;padding:72px 6% 26px}
.footer-main{display:grid;grid-template-columns:minmax(270px,1.8fr) minmax(150px,.7fr) minmax(220px,1fr);gap:8%;padding-bottom:68px}
.footer .brand{font-size:25px;letter-spacing:4px}
.footer-identity>p:last-child{max-width:320px;color:#d1d6c9;font-size:12px;line-height:1.8}
.footer .footer-signature{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.2;margin:30px 0 16px;color:#e4e8d8}
.footer-label{font-size:9px;letter-spacing:2px;color:#b9c2ad;margin:5px 0 26px}
.footer-links,.footer-contact{display:flex;flex-direction:column;align-items:flex-start}
.footer-links a{font-size:13px;margin-bottom:16px}
.footer-contact>p:not(.footer-label){font-size:13px;color:#d1d6c9;line-height:1.7;max-width:220px}
.footer-contact>a:not(.footer-phone){display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid #d1d6c9;padding:7px 0;font-size:13px}
.footer-contact .footer-phone{font-size:12px;color:#d1d6c9;margin-top:20px}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.footer-bottom{border-top:1px solid #ffffff3d;padding-top:23px;color:#c5cbbd;font-size:10px;letter-spacing:.25px}

.hero-copy{padding-top:clamp(195px,23vh,260px)}
.hero h1{margin-bottom:40px}

@media(max-width:760px){
  .hero-copy{display:flex;min-height:max(620px,100svh);justify-content:center;align-items:flex-start;padding:165px 7% 70px;gap:0}
  .hero-copy .eyebrow{margin:0 0 10px}
  .hero h1{align-self:auto;margin:0 0 34px}
  .hero-description{margin:0 0 22px}
  .footer{padding:50px 7% 27px}
  .footer-main{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:42px;padding-bottom:42px}
  .footer-identity{grid-column:1/-1}
  .footer .footer-signature{margin:20px 0 12px;font-size:25px}
  .footer-label{margin:0 0 18px}
  .footer-bottom{grid-template-columns:1fr;gap:9px;font-size:10px}
  .footer-bottom>:nth-child(even){text-align:left}
}
@media(max-width:370px){.hero-copy{padding-top:145px;padding-bottom:60px}.hero h1{font-size:42px}.footer-main{grid-template-columns:1fr}.footer-identity{grid-column:auto}}
/* Fragrance-linked diffuser gallery inside the existing product dialog. */
.detail-gallery{min-width:0;overflow:hidden;background:var(--cream)}
.gallery-main{display:block;position:relative;width:100%;height:500px;padding:0;overflow:hidden;background:var(--cream)}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-enlarge-label{position:absolute;right:15px;bottom:15px;padding:8px 11px;background:rgba(248,246,241,.88);border:1px solid rgba(255,255,255,.7);font-size:10px;letter-spacing:.04em}
.gallery-main:hover .gallery-enlarge-label,.gallery-main:focus-visible .gallery-enlarge-label{background:var(--paper)}
.gallery-thumbs{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:10px 12px 12px}
.gallery-thumb{flex:0 0 54px;width:54px;height:68px;padding:2px;border:1px solid transparent;opacity:.7;transition:opacity .2s,border-color .2s}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb:hover,.gallery-thumb[aria-pressed="true"]{opacity:1}
.gallery-thumb[aria-pressed="true"]{border-color:var(--ink)}
.image-lightbox{width:min(900px,96vw);max-height:95dvh;padding:20px;background:var(--paper);text-align:center;overflow:auto}
.image-lightbox>.close-dialog{position:sticky;top:0;float:right;z-index:1;background:var(--paper);border:1px solid var(--line);border-radius:50%}
.image-lightbox img{width:auto;height:auto;max-width:100%;max-height:calc(90dvh - 95px);margin:auto;object-fit:contain}
.image-lightbox p{margin:10px 0 0;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){.gallery-main{height:auto;aspect-ratio:4/5;max-height:480px}.gallery-thumbs{gap:6px;padding:8px 10px 10px}.gallery-thumb{flex-basis:50px;width:50px;height:63px}.image-lightbox{padding:12px}.image-lightbox img{max-height:calc(88dvh - 75px)}}

/* The fragrance explorer pairs each mood with its own diffuser scene. */
#scent-panel{min-height:270px;gap:26px;padding:18px 0}
#scent-panel>div:last-child{min-width:0}
.scent-visual{flex:0 0 180px;width:180px;aspect-ratio:4/5;overflow:hidden;background:#e9e5db}
.scent-visual img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1050px){.scent-visual{flex-basis:145px;width:145px}#scent-panel{gap:20px}}
@media(max-width:760px){.scent-visual{flex-basis:135px;width:135px}#scent-panel{min-height:0;padding:24px 0}}
@media(max-width:420px){.scent-visual{flex-basis:100px;width:100px}#scent-panel{gap:14px}#scent-panel h3{font-size:24px}}

/* Quartet fragrance choices and a readable product action hover state. */
.quartet-picker{border:0;margin:20px 0 0;padding:0;min-width:0}
.quartet-picker legend{font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.quartet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.quartet-choice{min-width:0}
.quartet-choice label{display:block;font-size:10px;color:var(--muted);margin-bottom:6px}
.detail-copy .quartet-choice select{padding:11px 7px;font-size:11px}
#add-to-bag:hover,#add-to-bag:focus-visible{background:#344430;color:#fff;border-color:#344430}
#add-to-bag:hover span,#add-to-bag:focus-visible span{color:#fff}
@media(max-width:380px){.quartet-grid{grid-template-columns:1fr}}

.footer-bottom strong{font-weight:700;letter-spacing:.08em;color:#fff}