/* ============================================================
   Phones and tablets, every page.

   Loaded last on every page, the hand-built ones included (they carry
   their own copy of the header and footer styles, so a fix made only in
   site.css would miss them). For the same reason the details every page
   shares, the signed-in mark, the bag count, the quick add sheet and the
   added-to-bag moment, live here too.
   Otherwise what is here changes nothing on a desktop beyond giving a few
   small controls a larger area to press.
   ============================================================ */

/* ---- touch areas ----
   Thin controls keep their look but get a press area a finger can find:
   the gallery and slider rules are 2px lines drawn inside a taller
   button. */
.pgal__dots button, .fdots button{height:26px; padding:12px 0; background-clip:content-box}
/* the lit rule sets its colour with the background shorthand, which would
   fill the whole press area; keep the fill to the line */
.pgal__dots button.on, .fdots button.on{background-clip:content-box}
.pgal__dots{margin-top:-12px}
.fdots{margin-bottom:-12px}

/* ---- signed in: a small gold mark on the account icon ---- */
.head__icons a[aria-label="Account"]{position:relative}
.head__icons a.is-in::after{
  content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; margin:4px 0 0 6px;
  border-radius:50%; background:var(--gold, #c9aa60); box-shadow:0 0 0 2px #000;
}

/* ---- zoom: pinch only, and never past the page's edges ----
   A double tap never zooms anywhere on the site (manipulation keeps
   panning and pinching, and drops double-tap zoom; set on the root, it
   holds for everything inside). The page can never be moved sideways:
   nothing is allowed to reach past its left or right edge, so a pinch
   only ever shows the site itself, and a bounce at the ends shows the
   site's own black, not the browser's white. */
html{touch-action:manipulation; background:#000; overflow-x:clip; overscroll-behavior-x:none}
body{overflow-x:clip}

/* ---- no zoom on quick taps ----
   A phone treats two quick taps as zoom in. On anything pressed (arrows,
   dots, buttons) that is never wanted, and it also lets the press land
   without the browser waiting to see if a second tap follows. */
a, button, [role="button"], label, input, select, textarea{touch-action:manipulation}

/* ---- the live count on the bag icon ----
   Placed from the icon's centre, so it sits on the bag's shoulder however
   large the press area around it is. */
.head__icons a.bag{position:relative}
.bagcount{
  position:absolute; top:50%; left:50%; margin:-17px 0 0 4px;
  min-width:15px; height:15px; padding:0 3px; border-radius:9px;
  background:var(--gilt, #c9aa60); background-size:100% 100%;
  color:#120e05; font-size:9.5px; line-height:15px; text-align:center;
  font-weight:600; letter-spacing:0; pointer-events:none;
}

/* the newsletter block, hidden until its Klaviyo list is set (services.js) */
.news[hidden]{display:none !important}

/* the contact form's spam trap: there for bots, never seen or reached by people */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---- the empty bag's two ways out: side by side, the same size, centred ---- */
.bagempty__cta{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:6px}
@media (max-width:600px){
  .bagempty__cta{flex-wrap:nowrap; gap:10px}
  .bagempty__cta .btn-out{flex:1 1 0; min-width:0; height:50px; padding:0 8px; font-size:10.5px; letter-spacing:.14em; white-space:nowrap}
}
@media (max-width:359px){ .bagempty__cta{flex-direction:column} .bagempty__cta .btn-out{flex:none; width:100%} }

/* ---- one line for every name, three for every description ----
   The name never breaks: site.js scales its type down only when it would
   not fit the column. The description runs the width of the column and
   stops at three lines; when there is more, a quiet "Read more" opens it. */
.phero__name, .fslide__name, .cyl__name{white-space:nowrap}
.phero__tag{max-width:600px !important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
.phero__tag.is-open{display:block; -webkit-line-clamp:unset; overflow:visible}
.phero__more{
  appearance:none; background:none; border:0; padding:0; margin:-18px 0 24px; cursor:pointer; align-self:flex-start;
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--p2l, var(--gold, #c9aa60)); border-bottom:1px solid currentColor; -webkit-tap-highlight-color:transparent;
}
.phero__more[hidden]{display:none}

/* ---- the total, beside the reviews: the chosen size times how many ---- */
.pmeta{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px; margin:-6px 0 22px}
.pmeta .prate{margin:0}
.ptotal{margin:0; display:flex; align-items:baseline; gap:10px}
.ptotal b{font-weight:400; font-size:24px; letter-spacing:.03em; color:var(--white, #fff)}

/* ---- back in stock: the waitlist that stands in for Add to bag (services.js) ---- */
.is-waitlist .qpick, .is-waitlist [data-add], .is-waitlist .phero__ship{display:none !important}
.wl{width:100%; max-width:430px; margin-top:14px}
.wl[hidden], .wl__form[hidden], .wl__open[hidden]{display:none !important}
.wl__row{display:flex; border:1px solid rgba(255,255,255,.35); height:54px}
.wl__row input{flex:1; min-width:0; background:transparent; border:0; color:#fff; font:inherit; font-size:15px; padding:0 16px}
.wl__row input::placeholder{color:#8f8b86}
.wl__row input:focus{outline:none}
.wl__row:focus-within{border-color:rgba(255,255,255,.7)}
.wl__row button{
  flex:none; appearance:none; border:0; background:#fff; color:#000; padding:0 20px; cursor:pointer;
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.wl__row button:disabled{opacity:.7; cursor:progress}
.wl__fine{margin:10px 0 0; font-size:12px; line-height:1.5; color:#a9a5a0}
.wl__msg{margin:0; font-size:13.5px; line-height:1.55}
.wl__msg:empty{display:none}
.wl__form + .wl__msg{margin-top:10px}
.wl__msg.is-ok{color:var(--p2l, var(--gold-soft, #dcc48c))}
.wl__msg.is-err{color:#e08a7a}

/* ---- how many: the − 1 + beside Add to bag ---- */
.qpick{display:inline-flex; align-items:stretch; flex:none; border:1px solid rgba(255,255,255,.35); height:clamp(52px,4vw,62px)}
/* the + and − never change how they look: no hover wash, no tap flash,
   no dimming at the ends; pressing one only changes the number */
.qpick button, .qty button{appearance:none; background:none !important; -webkit-tap-highlight-color:transparent; outline:none}
.qpick button{border:0; color:#fff; width:42px; font:inherit; font-size:18px; cursor:pointer}
.qpick button:disabled{opacity:1; color:#fff; cursor:default}
.qty button:hover{color:var(--white, #fff)}
.qpick button:focus-visible, .qty button:focus-visible{outline:1px solid rgba(255,255,255,.6); outline-offset:-4px}
.qpick output{display:grid; place-items:center; min-width:26px; font-size:15px; font-weight:500}
.qa__buy{display:flex; gap:10px}
.qa__buy .qpick{height:54px}
.qa__buy .qa__add{flex:1; width:auto; min-width:0}
/* the bag page: the picture and the name lead to the fragrance */
.baglink{color:inherit; display:block}
.bagrow h3 .baglink{display:inline; transition:color .25s ease}
.bagrow h3 .baglink:hover{color:var(--gold-lit, #f7ecd0)}
.bagrow .baglink img{transition:opacity .25s ease}
.bagrow .baglink:hover img{opacity:.85}

/* ---- added to the bag (site.js): the press, the flight, the landing, the note ---- */
@keyframes teGot{0%{transform:scale(1)} 35%{transform:scale(.95)} 70%{transform:scale(1.03)} 100%{transform:scale(1)}}
.got{animation:teGot .45s ease}
.flyer{
  position:fixed; left:0; top:0; z-index:9700; width:64px; height:64px; border-radius:50%; overflow:hidden;
  pointer-events:none; background:#111; border:1px solid var(--gold, #c9aa60);
  box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 26px rgba(201,170,96,.35); will-change:transform;
}
.flyer img{width:100%; height:100%; object-fit:cover; display:block}
@keyframes teBump{0%{transform:scale(1)} 30%{transform:scale(1.3) rotate(-8deg)} 55%{transform:scale(.92) rotate(4deg)} 78%{transform:scale(1.06)} 100%{transform:none}}
@keyframes teRing{0%{transform:scale(.4); opacity:.9} 100%{transform:scale(2.3); opacity:0}}
@keyframes tePop{0%{transform:scale(.3)} 50%{transform:scale(1.5)} 100%{transform:scale(1)}}
.head__icons a.bag.bump svg{animation:teBump .6s cubic-bezier(.3,.7,.4,1)}
.head__icons a.bag::after{
  content:""; position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; border:1px solid var(--gold, #c9aa60); opacity:0; pointer-events:none;
}
.head__icons a.bag.bump::after{animation:teRing .75s ease-out}
.bagcount.pop{animation:tePop .5s cubic-bezier(.3,.7,.4,1)}
.tadd{
  position:fixed; z-index:9650; right:var(--pad, 20px); top:120px; width:min(360px, calc(100vw - 32px));
  display:flex; align-items:center; gap:14px; padding:10px 16px 10px 10px;
  background:#0b0b0b; border:1px solid rgba(201,170,96,.45); box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.6,.3,1), visibility .35s;
}
.tadd.on{opacity:1; visibility:visible; transform:none}
.tadd img{width:44px; height:58px; object-fit:cover; flex:none; background:#151515}
.tadd__txt{min-width:0}
.tadd__txt b{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold, #c9aa60)}
.tadd__txt span{display:block; margin-top:5px; font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tadd a{margin-left:auto; flex:none; padding:8px 0; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.4)}
.tadd a:hover{color:var(--gold-lit, #f7ecd0); border-color:currentColor}
@media (max-width:600px){
  /* on a phone the note sits at the foot, in reach of a thumb */
  .tadd{left:16px; right:16px; width:auto; top:auto !important; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateY(12px)}
}
@media (prefers-reduced-motion:reduce){ .tadd{transition:opacity .2s ease, visibility .2s; transform:none} .got{animation:none} }

/* ---- quick add: choose a size without leaving the page (site.js builds it) ---- */
.qa{position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:20px;
  visibility:hidden; pointer-events:none}
.qa.on{visibility:visible; pointer-events:auto}
.qa__scrim{position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:opacity .35s ease}
.qa.on .qa__scrim{opacity:1}
.qa__card{
  position:relative; width:min(440px,100%); background:#0b0b0b; color:#fff;
  border:1px solid rgba(255,255,255,.14); padding:30px 28px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .35s cubic-bezier(.2,.6,.3,1), transform .45s cubic-bezier(.2,.6,.3,1);
}
.qa.on .qa__card{opacity:1; transform:none}
.qa__x{position:absolute; top:6px; right:6px; width:44px; height:44px; display:grid; place-items:center;
  appearance:none; background:none; border:0; color:#cfccc7; cursor:pointer}
.qa__x:hover{color:#fff}
.qa__x svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5}
.qa__top{display:flex; gap:18px; align-items:center; margin:0 34px 22px 0}
.qa__img{width:72px; height:96px; object-fit:cover; flex:none; background:#151515}
.qa__eyebrow{margin:0 0 6px; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold, #c9aa60)}
.qa__name{margin:0; font-size:21px; font-weight:500; letter-spacing:.04em; line-height:1.2}
.qa__notes{margin:6px 0 0; font-size:12.5px; letter-spacing:.04em; color:#a9a5a0}
.qa__sizes{display:flex; gap:10px; margin:0 0 18px}
.qa__sizes button{
  flex:1 1 0; min-width:0; appearance:none; cursor:pointer; text-align:left; font:inherit; color:#fff;
  background:transparent; border:1px solid rgba(255,255,255,.2); padding:12px 14px;
  transition:border-color .3s ease, background .3s ease;
}
.qa__sizes button b{display:block; font-weight:500; font-size:13.5px; letter-spacing:.06em}
.qa__sizes button span{display:block; margin-top:4px; font-size:11.5px; letter-spacing:.1em; color:#a9a5a0; white-space:nowrap}
.qa__sizes button:hover{border-color:rgba(255,255,255,.45)}
.qa__sizes button:focus-visible, .qa__add:focus-visible, .qa__x:focus-visible{outline:1px solid rgba(255,255,255,.7); outline-offset:3px}
.qa__sizes button.on{border-color:var(--gold, #c9aa60); background:rgba(201,170,96,.1)}
.qa__sizes button.on span{color:var(--gold-soft, #dcc48c)}
.qa__sizes button.sold b, .qa__sizes button.sold span{text-decoration:line-through; opacity:.55}
.qa__add{
  display:flex; align-items:center; justify-content:center; width:100%; height:54px;
  appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#000; background:#fff; border:1px solid #fff; transition:background .35s ease, color .35s ease;
}
.qa__add:hover{background:transparent; color:#fff}
.qa__add.sold{opacity:.55; cursor:default}
.qa__add.busy{opacity:.75; cursor:progress}
.qa__more{display:block; width:max-content; margin:14px auto 0; padding:8px 0;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#cfccc7;
  border-bottom:1px solid rgba(255,255,255,.25)}
.qa__more:hover{color:#fff; border-color:#fff}
html.qa-open, html.qa-open body{overflow:hidden}
@media (max-width:600px){
  /* a sheet up from the bottom, in reach of a thumb */
  .qa{place-items:end stretch; padding:0}
  .qa__card{width:100%; padding:26px 20px calc(20px + env(safe-area-inset-bottom)); border-width:1px 0 0;
    transform:translateY(100%)}
  .qa__sizes button{padding:12px 10px}
}
@media (prefers-reduced-motion:reduce){ .qa__card, .qa__scrim{transition:none} }

/* ---- the menu behind the burger (site.js builds the panel) ---- */
.burger{appearance:none; background:none; border:0; padding:0; color:#fff; cursor:pointer}
.mnav{
  position:fixed; inset:0; z-index:9000; background:#000;
  display:flex; flex-direction:column; padding:22px var(--pad, 20px) 34px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
  overflow-y:auto; overscroll-behavior:contain;
}
.mnav.on{opacity:1; visibility:visible}
.mnav__top{display:flex; justify-content:space-between; align-items:center; min-height:44px}
.mnav__top .wordmark{text-align:left; margin-left:0; padding-left:0}
.mnav__close{
  appearance:none; background:none; border:0; color:#fff; width:44px; height:44px;
  display:grid; place-items:center; cursor:pointer; margin-right:-10px;
}
.mnav__close svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5}
.mnav__links{list-style:none; margin:clamp(26px,6vh,54px) 0 0; padding:0}
.mnav__links a, .mnav__links button{
  display:block; width:100%; text-align:left; padding:13px 0;
  appearance:none; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff; font:inherit; font-size:clamp(20px,5.6vw,26px); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
}
.mnav__links a.on{color:var(--gold-lit)}
.mnav__links .mnav__small a, .mnav__links .mnav__small button{
  font-size:14px; letter-spacing:.16em; color:#cfccc7; padding:12px 0; border-bottom:0;
}
.mnav__links .mnav__small:first-of-type{margin-top:22px}
html.mnav-open, html.mnav-open body{overflow:hidden}

/* ---- the contact page's two columns ---- */
.contactgrid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,72px); align-items:start}

@media (max-width:1100px){
  /* the header: menu and search on the left, the wordmark in the middle,
     account and bag on the right. The icons leave their group and take a
     column each, so the two sides are the same width and the wordmark
     sits dead centre. Each icon gets a 44px press area; the outer two
     reach past the page margin so the icon, not its press area, lines up
     with the edge. */
  .head{grid-template-columns:44px 44px minmax(0,1fr) 44px 44px !important; gap:0 !important}
  .head__icons{display:contents}
  .head__icons a, .burger{width:44px !important; height:44px !important; display:grid !important; place-items:center}
  .head .burger{grid-column:1; grid-row:1; margin-left:-11px}
  .head__icons a[aria-label="Search"]{grid-column:2; grid-row:1; margin-left:-6px}
  .head .wordmark{grid-column:3; grid-row:1; justify-self:center; text-align:center}
  .head__icons a[aria-label="Account"]{grid-column:4; grid-row:1; justify-self:end; margin-right:-6px}
  .head__icons a.bag{grid-column:5; grid-row:1; justify-self:end; margin-right:-11px}
}
@media (max-width:1100px){ .head .wordmark b, .head .wordmark small{white-space:nowrap} }

/* one header on every page: solid black, one height, always at the top.
   Pages whose header floated over a picture (home, Discovery, the
   fragrances) keep it fixed; the rest hold it with sticky, so nothing
   below moves. The bag is gold everywhere, not tinted per painting. */
@media (max-width:1100px){
  #top:not(.top){position:sticky; top:0; z-index:70}
  #top .head, #top.stuck .head, .top.stuck .head, body.product #top .head, body.product #top.stuck .head{
    background:#000 !important; padding:14px var(--pad, 20px) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important; transition:none !important;
  }
  body.product #top .head__icons a.bag{color:var(--gold, #c9aa60)}
  /* what sits under a fixed header starts exactly where it ends */
  .page-clear, .disc.page-clear{padding-top:110px !important}
}
@media (max-width:370px){
  /* the narrowest phones: slightly tighter icons and a smaller wordmark,
     so it stays on one line between them */
  .head{grid-template-columns:40px 40px minmax(0,1fr) 40px 40px !important}
  .head__icons a, .burger{width:40px !important; height:44px !important}
  .head .burger{margin-left:-9px}
  .head__icons a.bag{margin-right:-10px}
  .head__icons a[aria-label="Search"]{margin-left:-4px}
  .head__icons a[aria-label="Account"]{margin-right:-4px}
  .head .wordmark{padding-left:0; padding-right:0; margin-left:0; margin-right:0}
  .head .wordmark b{font-size:15.5px !important; letter-spacing:.12em !important}
  .head .wordmark small{font-size:6.5px !important; letter-spacing:.24em !important; margin-top:4px}
}

/* ---- the very bottom ----
   No dead black under the footer: the 40px the body used to keep for a
   bar that no longer exists is gone, and the footer ends just under its
   last line (plus the phone's home bar, where there is one). The
   credit is a touch larger, in the same gold as the footer headings. */
body{padding-bottom:0 !important}
.foot{padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important}
.foot__bar span:last-child, .foot__bar a.cc{color:var(--gold, #c9aa60)}
.foot__bar span:last-child{font-size:11.5px}
.foot__bar a.cc:hover{color:var(--gold-lit, #f7ecd0)}

/* ---- the footer on phones ----
   The house line and the compliance line take the full width; Navigation
   and Help sit side by side beneath, so the footer is short rather than
   one long column. */
@media (max-width:820px){
  .foot__grid{grid-template-columns:1fr 1fr; column-gap:24px; row-gap:30px}
  .foot__brand{grid-column:1 / -1}
  .foot__brand p, .foot__compliance{max-width:none}
}

@media (max-width:900px){
  .contactgrid{grid-template-columns:1fr}
  .contactgrid a{overflow-wrap:anywhere}

  /* footer and breadcrumb links: room to press */
  .foot li{margin-bottom:0}
  .foot li a{display:inline-block; padding:9px 0}
  .foot h4{font-size:11px}
  .pagehead .crumb a{display:inline-block; padding:10px 0; margin:-10px 0}
  .foot__bar a{display:inline-block; padding:10px 0}

  /* the wheel's numerals */
  .cyl__dots button{width:42px !important; height:38px !important}
}