/* ==========================================================================
   Grassia — Haute Parfumerie
   ========================================================================== */

:root{
  --cream:        #ffffff;
  --cream-deep:   #ffffff;
  --ink:          #141414;
  --ink-soft:     #3a3a3a;
  --taupe:        #6e6e6e;
  --taupe-light:  #a8a8a8;
  --line:         #dcdcdc;
  --gold:         #a9884f;
  --white:        #ffffff;

  --serif: 'Bodoni Moda', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }

/* Some mobile browsers render <button> (and text inputs) with the system
   font by default and ignore an author font-family unless -webkit-appearance
   is reset — without this, buttons (e.g. the "Marques" dropdown toggle)
   visually mismatch the surrounding text set in Jost. Radio/checkbox inputs
   are excluded so their native tick keeps working with accent-color. */
button, input, select, textarea{
  font-family: inherit;
}
button,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea{
  -webkit-appearance: none;
  appearance: none;
}
html{ scroll-behavior: smooth; margin:0; width:100%; overflow-x: hidden; }
section[id], .brand-block[id]{ scroll-margin-top: 100px; }

body{
  margin:0;
  width:100%;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.01em;
}

.eyebrow{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 400;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  transition: opacity .25s ease, border-color .25s ease;
}
.btn:hover{ opacity:.55; }
.btn.btn-light{ color: var(--cream); border-color: var(--cream); }
.btn.btn-light:hover{ opacity:.7; }

.btn-solid{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  transition: background .25s ease;
}
.btn-solid:hover{ background: var(--cream); color:var(--ink); }

/* ---------------------------------------------------------------- header */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 22px 0;
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header.scrolled,
.site-header.drawer-open{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--line);
}
.brand-logo{ height: 30px; width:auto; transition: filter .3s ease; filter: invert(1); }
.site-header.scrolled .brand-logo,
.site-header.drawer-open .brand-logo,
.brand-logo.dark{ filter: invert(0); }

.nav-links{
  display:flex;
  align-items:center;
  gap: 40px;
  list-style:none;
  margin:0; padding:0;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
  color: var(--cream);
  transition: color .4s ease;
}
.site-header.scrolled .nav-links a{ color: var(--ink); }
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: currentColor;
  transition: right .3s ease;
}
.nav-links a:hover::after{ right:0; }

/* ------------------------------------------------------ brands dropdown */
.has-dropdown{ position:relative; }
.dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  font-family: var(--sans);
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--cream);
  transition: color .4s ease;
}
.site-header.scrolled .dropdown-toggle{ color: var(--ink); }
.dropdown-toggle .chevron{ width:11px; height:11px; transition: transform .25s ease; }
.has-dropdown.open .dropdown-toggle .chevron{ transform: rotate(180deg); }

.dropdown-panel{
  position:absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 230px;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  padding: 10px 0;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}
.has-dropdown.open .dropdown-panel{
  opacity:1;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink);
  transition: background .2s ease;
}
.dropdown-panel a:hover{ background: var(--cream-deep); }
.soon-tag{
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 8px;
  flex-shrink:0;
}

.nav-icons{ display:flex; align-items:center; gap:18px; }
.nav-icons a{ color: var(--cream); transition: color .4s ease; }
.site-header.scrolled .nav-icons a{ color: var(--ink); }
.nav-icons svg{ width:18px; height:18px; }

.cart-toggle,
.search-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color: var(--cream);
  transition: color .4s ease;
}
.site-header.scrolled .cart-toggle,
.site-header.drawer-open .cart-toggle,
.site-header.scrolled .search-toggle,
.site-header.drawer-open .search-toggle{ color: var(--ink); }
.cart-toggle svg,
.search-toggle svg{ width:18px; height:18px; }
.cart-count{
  position:absolute;
  top:-7px; right:-9px;
  min-width:15px; height:15px;
  padding: 0 3px;
  border-radius:50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size:9px;
  line-height:15px;
  text-align:center;
  display:none;
}

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:26px; height:20px; position:relative;
  padding:0;
}
.nav-toggle span{
  position:absolute; left:0; width:100%; height:1px;
  background: var(--cream);
  transition: all .3s ease;
}
.site-header.scrolled .nav-toggle span,
.site-header.drawer-open .nav-toggle span{ background: var(--ink); }

/* pages whose hero sits on the light body background (no dark photo behind
   the fixed header) need the header solid/dark from the start, not only
   once .scrolled kicks in on scroll */
.light-header .site-header{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--line);
}
.light-header .brand-logo{ filter: invert(0); }
.light-header .nav-links a{ color: var(--ink); }
.light-header .dropdown-toggle{ color: var(--ink); }
.light-header .nav-icons a{ color: var(--ink); }
.light-header .cart-toggle,
.light-header .search-toggle{ color: var(--ink); }
.light-header .nav-toggle span{ background: var(--ink); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }

.nav-drawer{ display:none; }

/* ------------------------------------------------------------------ hero */
.hero{
  position: relative;
  min-height: 100svh;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background: var(--ink);
}
.hero-bg{
  position:absolute;
  top:-2px; right:-2px; bottom:-2px; left:-2px;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 42%;
  filter: saturate(0.92) brightness(0.74) contrast(1.04);
  transform: scale(1.08);
}
.hero-video{ display:none; }
.hero-video-desktop{
  display:block;
  position:absolute;
  top:-2px; right:-2px; bottom:-2px; left:-2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.92) brightness(0.74) contrast(1.04);
  transform: scale(1.08);
}
.hero::after{
  content:'';
  position:absolute;
  top:-2px; right:-2px; bottom:-2px; left:-2px;
  background: linear-gradient(180deg, rgba(10,9,6,.22) 0%, rgba(10,9,6,0) 30%, rgba(10,9,6,.1) 60%, rgba(10,9,6,.62) 100%);
}
.scroll-cue{
  position:absolute;
  bottom: 34px; left:50%; transform:translateX(-50%);
  z-index:2;
  color: var(--cream);
  opacity:.7;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:38px; background: currentColor; opacity:.6; animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform: scaleY(1); transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* -------------------------------------------------------------- section */
section{ padding: 120px 0; }
.section-head{
  text-align:center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.section-head h2{
  font-size: clamp(30px, 4vw, 44px);
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.section-head p{
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ------------------------------------------------------------- maison */
.maison{
  background: var(--ink);
  color: var(--cream);
  padding: 140px 0;
}
.maison .wrap{
  display:grid;
  grid-template-columns: 1fr;
  place-items:center;
  text-align:center;
}
.maison .eyebrow{ color: var(--taupe-light); }
.maison-logo{ width:min(300px,60vw); margin: 0 auto 30px; }
.maison p.statement{
  font-family: 'Tangerine', cursive;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.015em;
  font-size: clamp(42px, 6.6vw, 72px);
  max-width: 680px;
  line-height: 1.35;
  opacity: .96;
}
.maison .rule{
  width:40px; height:1px; background: var(--taupe-light);
  margin: 34px auto;
}

/* --------------------------------------------------------- brand hero (dedicated brand pages) */
.brand-hero{
  background: var(--ink);
  color: var(--cream);
  padding: 168px 0 80px;
  text-align:center;
}
.brand-hero .wrap{ max-width: 720px; }
.brand-hero .eyebrow{ color: var(--taupe-light); }
.brand-hero h1{
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 5vw, 56px);
  margin-top: 14px;
  line-height: 1.1;
}
.brand-hero-desc{
  margin: 20px auto 0;
  max-width: 560px;
  color: var(--taupe-light);
  font-size: 15px;
  line-height: 1.75;
}
.back-link{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe-light);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  margin-bottom: 34px;
  transition: opacity .25s ease;
}
.back-link:hover{ opacity: .6; }

/* --------------------------------------------------------- product hero (dedicated product pages) */
.product-hero{ padding: 150px 0 110px; }
.product-hero .wrap{ max-width: 960px; }
.product-hero .back-link{ color: var(--taupe); }
.product-hero .card{ flex: initial; background:none; text-align:center; }
.product-hero .card-media{ max-width: 380px; margin: 0 auto 32px; }
.product-hero .card-body{ padding:0; text-align:center; }
.product-hero .card-body .fam{ font-size: 11px; }
.product-hero .card-body h3{
  font-size: clamp(22px, 3vw, 30px);
  text-transform: none;
  font-family: var(--serif);
  font-weight: 500;
  margin-bottom: 16px;
}
.product-hero .card-body .desc{
  font-size: 13.5px;
  max-width: 440px;
  margin-left:auto; margin-right:auto;
}
.product-hero .size-toggle{ margin: 0 auto 18px; }
.product-hero .card-price{ font-size: 21px; margin-bottom: 24px; }
.product-hero .card-actions{ max-width: 300px; margin: 0 auto; }

@media (min-width: 860px){
  .product-hero .card{ display:flex; flex-direction:row; gap:64px; text-align:left; }
  .product-hero .card-media{ flex:0 0 380px; margin:0; }
  .product-hero .card-body{ flex:1; text-align:left; padding-top:6px; }
  .product-hero .card-body .desc{ margin-left:0; margin-right:0; }
  /* .card-body is a column flexbox, and dropping the auto left/right
     margins here (to left-align the toggle instead of centering it) also
     removes the only thing stopping it from being stretched to the full
     width of the text column by the flex layout's default align-items —
     the pill's border then stretched far past its two buttons, empty on
     the right. align-self keeps it sized to its own content instead. */
  .product-hero .size-toggle{ margin:0 0 18px; align-self:flex-start; }
  .product-hero .card-actions{ margin:0; }
}

/* ----------------------------------------------------------- collection */
.brand-block + .brand-block{ margin-top: 100px; }
.mobile-scroll-photo{ display:none; }
.brand-block + .mobile-scroll-photo{ margin-top: 100px; }
.mobile-scroll-photo + .brand-block{ margin-top: 100px; }
.brand-head{
  text-align:center;
  margin-bottom: 40px;
}
.brand-head h3{
  font-size: clamp(22px, 2.6vw, 30px);
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.brand-head h3 a{ color:inherit; text-decoration:none; transition: opacity .2s ease; }
.brand-head h3 a:hover{ opacity:.7; }
.brand-soon .brand-head{ margin-bottom: 26px; }
.soon-panel{
  text-align:center;
  max-width: 480px;
  margin: 0 auto;
  padding: 46px 30px;
  border: 1px solid var(--line);
}
.soon-panel p{
  font-family: var(--serif);
  font-style: italic;
  color: var(--taupe);
  font-size: 15px;
}
.brand-note{
  text-align:center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--taupe);
  margin-top: 10px;
}

/* generic bottle illustration — placeholder visual until real product photos arrive */
.placeholder-media{ background: var(--cream-deep); display:flex; }
.bottle-placeholder{ height:27%; width:auto; display:block; }
.bottle-placeholder .bottle-outline{ stroke: var(--ink-soft); }
.bottle-placeholder .bottle-label{ stroke: var(--taupe); }

.filter-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 56px;
}
.filter-btn{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: transparent;
  cursor:pointer;
  color: var(--ink-soft);
  transition: all .25s ease;
}
.filter-btn:hover{ border-color: var(--ink); color: var(--ink); }
.filter-btn.active{ background: var(--ink); border-color: var(--ink); color: var(--cream); }

.grid{
  display:flex;
  gap: 2px;
  background: var(--cream);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
  margin-bottom: -14px;
  scrollbar-width: none; /* Firefox — swipe/drag still scrolls, no visible bar */
  -ms-overflow-style: none; /* old Edge/IE */
}
.grid::-webkit-scrollbar{ display: none; width: 0; height: 0; } /* Chrome/Safari/Edge */
/* full, non-scrolling grid used on standalone brand pages so every
   product is visible at once instead of hidden in a horizontal carousel */
.grid-full{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  overflow-x: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.card{
  background: var(--cream);
  padding: 0;
  display:flex;
  flex-direction:column;
  position:relative;
  flex: 0 0 clamp(190px, 20vw, 262px);
  scroll-snap-align: start;
}
.card-media{
  position:relative;
  aspect-ratio: 3/4;
  overflow:hidden;
  background: var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
  color:inherit;
  text-decoration:none;
}
.card-media picture{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  width:100%;
}
.card-media img{
  height: 44%;
  width: auto;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-media img{ transform: scale(1.045); }
.card-tag{
  position:absolute;
  top:12px; left:12px;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--taupe);
  background: rgba(255,255,255,.85);
  padding: 4px 9px;
}
.card-body{
  padding: 20px 18px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:center;
}
.card-body .fam{
  font-size: 10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--taupe);
  margin-bottom: 8px;
}
.card-body h3{
  font-size: 15.5px;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.card-body h3 a{ color:inherit; text-decoration:none; }
.card-body h3 a:hover{ opacity:.7; }
.card-body .desc{
  font-size: 12px;
  color: var(--ink-soft);
  line-height:1.6;
  margin-bottom: 16px;
  flex:1;
}
.size-toggle{
  display:inline-flex;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 3px;
  margin: 0 auto 12px;
  gap: 2px;
}
.size-toggle button{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing:.08em;
  padding: 5px 13px;
  border-radius: 30px;
  border:none;
  background: transparent;
  color: var(--taupe);
  cursor:pointer;
  transition: all .2s ease;
}
.size-toggle button.active{ background: var(--ink); color: var(--cream); }
.size-toggle button:disabled{ opacity:.3; cursor:not-allowed; }

.card-price{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 14px;
  letter-spacing:.02em;
}
.card-price .cur{ font-size:12px; margin-left:2px; color: var(--taupe); }

.card-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.add-to-cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background: var(--ink);
  color: var(--cream);
  border:none;
  padding: 12px 15px;
  border-radius: 2px;
  cursor:pointer;
  transition: opacity .25s ease;
}
.add-to-cart:hover{ opacity:.75; }
.add-to-cart.added{ background: var(--taupe); }

/* -------------------------------------------------------------- promise */
.promise{
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.promise .wrap{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 48px;
  text-align:center;
}
.promise-item .num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--taupe);
  display:block;
  margin-bottom: 18px;
}
.promise-item h4{ font-size: 18px; margin-bottom: 12px; }
.promise-item p{ font-size: 13.5px; color: var(--ink-soft); }

/* -------------------------------------------------------------- contact */
.contact{
  background: var(--ink);
  color: var(--cream);
}
.contact .wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:start;
}
.contact .eyebrow{ color: var(--taupe-light); }
.contact h2{
  font-size: clamp(28px,3.6vw,40px);
  margin: 14px 0 26px;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.contact p.copy{ color: var(--taupe-light); font-size:14.5px; margin-bottom:36px; max-width:420px; }

.info-list{ list-style:none; margin:0 0 34px; padding:0; }
.info-list li{
  display:flex; gap:16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
}
.info-list li:last-child{ border-bottom: 1px solid rgba(255,255,255,.14); }
.info-list svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color: var(--taupe-light); }
.info-list .label{
  display:block;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--taupe-light); margin-bottom:4px;
}

.social-row{ display:flex; gap:14px; }
.social-row a{
  width:46px; height:46px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s ease;
}
.social-row a:hover{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.social-row svg{ width:18px; height:18px; }

.map-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  width:100%;
  aspect-ratio: 4/3.4;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  padding: 40px 24px;
  transition: border-color .25s ease, background-color .25s ease;
}
.map-card:hover{ border-color: rgba(255,255,255,.45); background-color: rgba(255,255,255,.03); }
.map-card-pin{
  width:42px; height:42px;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 8px;
  color: var(--cream);
}
.map-card-pin svg{ width:19px; height:19px; }
.map-card-title{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cream);
}
.map-card-sub{ font-size: 13px; color: var(--taupe-light); }
.map-card-link{
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .25s ease;
}
.map-card:hover .map-card-link{ opacity: .6; }

/* ---------------------------------------------------------------- footer */
footer{
  background: var(--ink);
  color: var(--taupe-light);
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 34px 0;
}
footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-logo{ height:20px; opacity:.9; }
footer .fine{ font-size:11px; letter-spacing:.05em; }
footer .fine a{ text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------------------------------------ cart */
.cart-overlay{
  position:fixed;
  inset:0;
  background: rgba(20,20,20,.42);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
  z-index: 200;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width: min(420px, 100%);
  background: var(--cream);
  color: var(--ink);
  z-index: 201;
  display:flex;
  flex-direction:column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
/* shadow only while the drawer is open/sliding in — kept off the base rule
   so it doesn't bleed onto the visible viewport's right edge (as a faint
   grey vertical line) while the drawer sits fully off-screen closed */
.cart-drawer.open{ transform: translateX(0); box-shadow: -20px 0 60px rgba(0,0,0,.18); }

.cart-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 24px var(--pad) 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink:0;
}
.cart-drawer-head h3{
  font-family: var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.08em;
}
.cart-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color: var(--ink);
  padding:0;
  transition: opacity .2s ease;
}
.cart-close:hover{ opacity:.5; }

.cart-body{
  flex:1;
  overflow-y:auto;
  padding: 20px var(--pad) 8px;
}

/* cart drawer is a 2-step flow: step 1 = items + samples, step 2 =
   coordonnées + payment — kept as separate steps (rather than stacked in
   the same scroll area) so the coordonnées form never crowds out or hides
   the samples section on short mobile screens */
.cart-step.hidden{ display:none; }
.cart-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  font-family: var(--sans);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--taupe);
  padding:0 0 20px;
  transition: color .2s ease;
}
.cart-back:hover{ color: var(--ink); }

.cart-empty{
  font-size:13px;
  color: var(--taupe);
  text-align:center;
  padding: 40px 0;
}
.cart-empty.hidden{ display:none; }

.cart-item{
  display:flex;
  gap:14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item-media{
  width:64px; height:80px;
  flex-shrink:0;
  background: var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cart-item-media img{ height:70%; width:auto; object-fit:contain; }
.cart-item-media .mono{
  font-family: var(--sans);
  font-weight:600;
  font-size:13px;
  color: var(--taupe);
  letter-spacing:.04em;
}
.cart-item-info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.cart-item-info .brand{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--taupe); margin-bottom:2px; }
.cart-item-info h4{
  font-family: var(--sans);
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-bottom:4px;
  line-height:1.3;
}
.cart-item-info .size{ font-size:11px; color: var(--taupe); margin-bottom:8px; }
.cart-item-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
}
.qty-stepper{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:30px;
}
.qty-stepper button{
  width:24px; height:24px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:13px;
  color: var(--ink);
  font-family: var(--sans);
}
.qty-stepper span{ min-width:20px; text-align:center; font-size:12px; }
.cart-item-price{ font-size:12.5px; font-weight:500; white-space:nowrap; }
.cart-item-remove{
  align-self:flex-start;
  margin-top:8px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--taupe);
  border:none;
  border-bottom:1px solid currentColor;
  padding:0 0 1px;
  background:none;
  cursor:pointer;
  font-family: var(--sans);
  width:fit-content;
}
.cart-item-remove:hover{ color: var(--ink); }

.cart-samples{ margin-top: 22px; padding-top:18px; border-top: 1px solid var(--line); }
.cart-samples.hidden{ display:none; }
.cart-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink);
  font-weight:600;
  margin-bottom:12px;
}
.samples-count{ color: var(--taupe); font-weight:400; letter-spacing:.04em; }
.sample-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:6px; }
.sample-item{
  border:1px solid var(--line);
  padding:10px 6px 8px;
  text-align:center;
  cursor:pointer;
  transition: border-color .2s ease, opacity .2s ease;
  background:none;
  font-family: var(--sans);
}
.sample-item .sample-media{ height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.sample-item .sample-media img{ height:100%; width:auto; object-fit:contain; }
.sample-item span{ display:block; font-size:9px; letter-spacing:.02em; color: var(--ink-soft); line-height:1.3; }
.sample-item.selected{ border-color: var(--ink); background: var(--cream-deep); }
.sample-item.selected span{ color: var(--ink); }
.sample-item.disabled{ opacity:.35; cursor:not-allowed; }

.cart-footer{
  padding: 18px var(--pad) 26px;
  border-top: 1px solid var(--line);
  flex-shrink:0;
}
.cart-checkout-details{ margin-bottom:20px; }
.cart-checkout-details .cart-section-title{ margin-bottom:10px; }
.cart-checkout-details .cart-section-title + .cart-field-group,
.cart-checkout-details .cart-section-title + .payment-methods{ margin-bottom:18px; }

.cart-field-group{ display:flex; flex-direction:column; gap:8px; }
.cart-field{
  width:100%;
  border:1px solid var(--line);
  background:none;
  padding:10px 12px;
  font-family: var(--sans);
  font-size:12.5px;
  color: var(--ink);
  letter-spacing:.01em;
  border-radius:2px;
  transition: border-color .2s ease;
}
.cart-field::placeholder{ color: var(--taupe); }
.cart-field:focus{ outline:none; border-color: var(--ink); }
.cart-field.field-missing{ border-color: #b3261e; }

.payment-methods{ display:flex; flex-direction:column; gap:8px; }
.payment-option{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:2px;
  padding:11px 12px;
  cursor:pointer;
  transition: border-color .2s ease, opacity .2s ease;
}
.payment-option input[type="radio"]{ accent-color: var(--ink); width:14px; height:14px; flex-shrink:0; }
.payment-option-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family: var(--sans);
  font-size:12px;
  letter-spacing:.02em;
  color: var(--ink);
}
.payment-option-label svg{ width:16px; height:16px; flex-shrink:0; color: var(--taupe); }
.payment-option-label em{ font-style:normal; font-size:9.5px; color: var(--taupe); text-transform:uppercase; letter-spacing:.06em; margin-left:2px; }
.payment-option:has(input:checked){ border-color: var(--ink); }
.payment-option.disabled{ opacity:.45; cursor:not-allowed; }

.cart-subtotal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--taupe);
}
.cart-subtotal span:last-child{ font-weight:600; font-size:16px; color: var(--ink); letter-spacing:.01em; }
.cart-checkout{
  display:flex;
  width:100%;
  justify-content:center;
  border:none;
  cursor:pointer;
}
.cart-checkout.disabled{ opacity:.35; pointer-events:none; }
.cart-checkout.loading{ opacity:.6; pointer-events:none; }
.cart-checkout-msg{
  margin: 10px 0 0;
  font-size: 12px;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.5;
}
.cart-checkout-msg.success{ color: #3a6b39; }
.cart-checkout-msg.error{ color: #b3261e; }

/* after a successful order the cart is emptied, which would otherwise show
   "Votre panier est vide." and a disabled checkout button right alongside
   the confirmation message — hide the whole body (nothing left to show
   there) and turn the footer into a centered confirmation screen instead */
.cart-drawer.order-success .cart-body{ display:none; }
.cart-drawer.order-success .cart-footer{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: none;
  padding: 0 calc(var(--pad) + 10px);
}
.cart-drawer.order-success .cart-footer .cart-subtotal,
.cart-drawer.order-success .cart-footer .cart-checkout{ display:none; }
.cart-drawer.order-success .cart-checkout-msg{ margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------------------------------------------------------------- search */
.search-overlay{
  position:fixed;
  inset:0;
  background: rgba(20,20,20,.42);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
  z-index: 200;
}
.search-overlay.open{ opacity:1; pointer-events:auto; }

.search-panel{
  position:fixed;
  top:0; left:0;
  width:100%;
  max-height:100%;
  background: var(--cream);
  color: var(--ink);
  z-index: 201;
  display:flex;
  flex-direction:column;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.search-panel.open{ transform: translateY(0); }

.search-panel-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 24px var(--pad);
  border-bottom: 1px solid var(--line);
  flex-shrink:0;
  max-width: var(--maxw);
  margin:0 auto;
  width:100%;
}
.search-input-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:14px;
  color: var(--taupe);
  min-width:0;
}
.search-input-wrap svg{ width:18px; height:18px; flex-shrink:0; }
.search-input{
  flex:1;
  min-width:0;
  border:none;
  background:none;
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--ink);
  padding:4px 0;
}
.search-input:focus{ outline:none; }
.search-input::placeholder{ color: var(--taupe-light); }
.search-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color: var(--ink);
  padding:0;
  transition: opacity .2s ease;
  flex-shrink:0;
}
.search-close:hover{ opacity:.5; }

.search-results{
  flex:1;
  overflow-y:auto;
  padding: 24px var(--pad) 48px;
  max-width: var(--maxw);
  margin:0 auto;
  width:100%;
}
.search-hint, .search-empty{
  color: var(--taupe-light);
  font-size:13.5px;
  padding: 4px 0 20px;
}
.search-result-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:2px;
}
.search-result-item{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background: var(--cream-deep);
}
.search-result-item .thumb{
  position:relative;
  aspect-ratio: 3/4;
  overflow:hidden;
  background: var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
}
.search-result-item .thumb img{ height:44%; width:auto; object-fit:contain; }
.search-result-item .info{ padding:10px 12px 14px; }
.search-result-item .fam{
  font-family: var(--sans);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--taupe);
  margin-bottom:3px;
}
.search-result-item h4{
  font-size:14px;
  font-weight:500;
  line-height:1.25;
}

/* ------------------------------------------------------------ reveal fx */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* -------------------------------------------------------------- mobile */
@media (max-width: 980px){
  .card{ flex-basis: clamp(160px, 26vw, 226px); }
  .promise .wrap{ grid-template-columns: 1fr; gap: 40px; }
  .contact .wrap{ grid-template-columns: 1fr; gap:48px; }
}

@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  section{ padding: 84px 0; }
  .maison{ padding: 96px 0; }
  .card{ flex-basis: 58vw; }
  .grid-full{ grid-template-columns: repeat(2, 1fr); }
  .card-body{ padding:16px 14px 20px; }
  .card-body h3{ font-size:16px; }

  /* mobile-only hero video (replaces the static hero photo on small screens) */
  .hero-bg{ display:none; }
  .hero-video-desktop{ display:none; }
  .hero-video{
    display:block;
    position:absolute;
    top:-2px; right:-2px; bottom:-2px; left:-2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    object-position: center 42%;
    filter: saturate(0.92) brightness(0.74) contrast(1.04);
  }

  /* mobile-only banner photo (the former hero photo), shown further down
     the homepage, just before the Etat Libre d'Orange brand block.
     Full-bleed: breaks out of the .wrap padding to span the entire
     screen width edge-to-edge. Uses the wrap's own --pad instead of the
     classic 100vw/50vw trick — 100vw is unreliable on real phones (iOS
     Safari and some Android browsers size it against a layout viewport
     that includes a phantom scrollbar gutter, so it ends up wider than
     the visible screen and the photo no longer lines up edge-to-edge). */
  .mobile-scroll-photo{
    display:block;
    width:auto;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    aspect-ratio: 4 / 5;
    overflow:hidden;
    border-radius: 0;
  }
  .mobile-scroll-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center 42%;
    display:block;
  }

  /* homepage only: reorder the brand blocks on mobile so Etat Libre
     d'Orange (and the banner photo just above it) come before Francesca
     Bianchi; desktop keeps the original order untouched */
  body.home #collection .wrap{ display:flex; flex-direction:column; }
  body.home #brand-parfum-dempire{ order:1; }
  body.home .mobile-scroll-photo{ order:2; }
  body.home #brand-etat-libre-dorange{ order:3; }
  body.home #brand-francesca-bianchi{ order:4; }

  .nav-drawer{
    position: fixed; inset:0;
    background: var(--cream);
    z-index: 99;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap: 30px;
    transform: translateY(-100%);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .nav-drawer.open{ pointer-events:auto; }
  .nav-drawer.open{ transform: translateY(0); }
  .nav-drawer a{
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 22px;
  }
  .nav-drawer .social-row{ margin-top: 20px; }
  .nav-drawer .social-row a{ border-color: var(--line); }
  .nav-drawer .social-row a:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

  .drawer-group{ display:flex; flex-direction:column; align-items:center; }
  .drawer-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 22px;
  }
  .drawer-toggle .chevron{ width:16px; height:16px; transition: transform .25s ease; }
  .drawer-group.open .drawer-toggle .chevron{ transform: rotate(180deg); }
  .drawer-submenu{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 16px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
  }
  .drawer-group.open .drawer-submenu{
    max-height: 220px;
    opacity:1;
    margin-top: 18px;
  }
  .drawer-submenu a{
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--taupe);
  }
}

@media (max-width: 480px){
  .card{ flex-basis: 66vw; }
}