/* ── AURE · SHOP PAGES ─────────────────────────────────────────────────────────────────────
   cart.html, wishlist.html, checkout.html and order-confirmed.html. One stylesheet, because
   they are one flow and must not drift apart.

   The tokens, the type and the buttons are the product pages' (top of islamabad.html),
   copied value for value, so going from a bottle into the cart does not change the room:
   white page, Manrope for everything, Cormorant only for names, prices and the page title.
   The footer and the dock are copied from there too. */
:root{
  --ink:#111;
  --grey:#9a9a9a;          /* the product pages' grey: labels and decoration only */
  --mute:#6b6b6b;          /* running text and hints. #9a9a9a is 2.8:1 on white, too faint
                              for anything a buyer has to actually read, like a total */
  --line:#e3e3e3;
  --field:rgba(17,17,17,.24);
  --page:#fff;
  --tint:#f7f7f7;
  --bad:#a4261b;
  --gutter:clamp(22px,5vw,92px);
  --band:clamp(40px,7vh,104px);
  --colgap:clamp(28px,4.5vw,80px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--page);color:var(--ink);font-family:'Manrope',sans-serif;
     -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.crumb{padding:var(--gutter) 0 clamp(16px,2.4vh,34px);
       font-size:clamp(11px,.82vw,13px);color:var(--grey)}
.crumb a:hover{color:var(--ink)}
.crumb strong{font-weight:500;color:var(--ink)}

.eyebrow{font-size:clamp(9px,.66vw,12px);letter-spacing:.3em;text-transform:uppercase;
         font-weight:600}
.label{font-size:clamp(10px,.76vw,12.5px);letter-spacing:.12em;text-transform:uppercase;
       font-weight:600}

/* the page title, with its rule under it. The rule is the top of the content, so a page
   with nothing in it still has a floor under the heading. */
.page-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
           gap:12px 24px;padding-bottom:clamp(20px,3vh,40px);border-bottom:1px solid var(--line)}
.page-head h1{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1;
              font-size:clamp(38px,4.6vw,74px);letter-spacing:.005em}
.page-head .count{font-size:clamp(11px,.8vw,13px);color:var(--mute)}

/* buttons: the product page's pill ------------------------------------------------------ */
.btn{display:inline-block;text-align:center;padding:1.35em 3.2em;border:1px solid var(--ink);
     border-radius:999px;cursor:pointer;background:transparent;
     font-size:clamp(10px,.72vw,12px);letter-spacing:.18em;text-transform:uppercase;
     font-weight:600;transition:background .3s ease,color .3s ease}
.btn.solid{background:var(--ink);color:var(--page)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--page)}
.btn.block{display:block;width:100%}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn.solid[disabled]:hover{background:var(--ink);color:var(--page)}

/* a text button: Remove, Move to wishlist. Underlined, because on a line of small caps an
   unadorned word does not read as something you can press. */
.tbtn{background:none;border:0;padding:.2em 0;cursor:pointer;
      font-size:clamp(10px,.7vw,11.5px);letter-spacing:.14em;text-transform:uppercase;
      font-weight:600;color:var(--mute);text-decoration:underline;text-underline-offset:.35em;
      text-decoration-color:rgba(17,17,17,.25);transition:color .2s ease}
.tbtn:hover{color:var(--ink);text-decoration-color:currentColor}
.tbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the product page's size radios, verbatim */
.sizes{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.4vw,40px)}
.sizes label{display:inline-flex;align-items:center;gap:.7em;cursor:pointer;
             font-size:clamp(11px,.8vw,13px)}
.sizes input{appearance:none;-webkit-appearance:none;flex:none;width:13px;height:13px;
             border-radius:50%;margin:0;border:1px solid rgba(17,17,17,.42);
             background:transparent;transition:background .2s ease,border-color .2s ease}
.sizes input:checked{background:var(--ink);border-color:var(--ink);
                     box-shadow:inset 0 0 0 2.5px var(--page)}
.sizes input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the quantity stepper and the size select: same height, same pill, side by side */
.qty{display:inline-flex;align-items:center;height:40px;border:1px solid var(--field);
     border-radius:999px}
.qty button{width:38px;height:100%;background:none;border:0;cursor:pointer;
            font-size:16px;line-height:1;border-radius:999px;transition:background .2s ease}
.qty button:hover:not([disabled]){background:rgba(17,17,17,.06)}
.qty button[disabled]{opacity:.3;cursor:not-allowed}
.qty button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.qty output{min-width:2.2ch;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.pick-size{appearance:none;-webkit-appearance:none;height:40px;padding:0 36px 0 16px;
           border:1px solid var(--field);border-radius:999px;background:transparent
           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
           no-repeat right 15px center/9px;font-size:12px;cursor:pointer}
.pick-size:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── the cart ───────────────────────────────────────────────────────────────────────────
   The product page's 1.55fr / 1fr: lines where the pictures were, the summary where the
   buy rail was, sticky for the same reason. */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--colgap);align-items:start;
       padding-bottom:var(--band)}
.lines{list-style:none}
.line{display:grid;grid-template-columns:clamp(96px,9.5vw,156px) 1fr auto;
      grid-template-areas:"shot info end";gap:clamp(16px,2vw,34px);align-items:start;
      padding-block:clamp(20px,3.2vh,38px);border-bottom:1px solid var(--line)}
.line-shot{grid-area:shot;display:block;background:var(--tint);aspect-ratio:1;overflow:hidden}
.line-shot img{width:100%;height:100%;object-fit:cover}
.line-info{grid-area:info;min-width:0}
.line-name{display:inline-block;font-family:'Cormorant Garamond',serif;font-weight:400;
           font-size:clamp(26px,2.2vw,38px);line-height:1;margin-top:.3em}
.line-name:hover{opacity:.6}
.line-vol{font-size:clamp(11px,.8vw,13px);color:var(--mute);margin-top:.5em}
.line-opts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
           margin-top:clamp(14px,2.2vh,24px)}
.line-acts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(14px,2.2vh,22px)}
.line-end{grid-area:end;text-align:right}
.line-price{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,1.8vw,30px);
            white-space:nowrap;line-height:1.1}
.line-unit{font-size:11px;color:var(--mute);margin-top:.3em;white-space:nowrap}

.summary{position:sticky;top:var(--gutter);border:1px solid var(--line);
         padding:clamp(22px,2.4vw,40px)}
.summary > .label{padding-bottom:clamp(12px,1.8vh,20px);border-bottom:1px solid var(--line)}
.totals{display:grid;margin-top:.4em}
.totals div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
            padding-block:.7em;font-size:clamp(12px,.86vw,14px)}
.totals dt{color:var(--mute)}
.totals dd{font-variant-numeric:tabular-nums;text-align:right}
.totals .grand{border-top:1px solid var(--line);margin-top:.5em;padding-top:1em}
.totals .grand dt{color:var(--ink);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
                  font-size:clamp(10px,.74vw,12px)}
.totals .grand dd{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,2.4vw,40px);
                  line-height:1}
.summary .btn{margin-top:clamp(18px,2.6vh,30px)}
.summary .more{display:block;text-align:center;margin-top:16px}
.fine{margin-top:clamp(14px,2vh,22px);font-size:clamp(11px,.76vw,12.5px);color:var(--mute);
      line-height:1.6}

/* the compact lines in the checkout and confirmation summaries */
.mini{list-style:none;display:grid;gap:14px;padding-block:clamp(14px,2vh,22px);
      border-bottom:1px solid var(--line)}
.mini li{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center}
.mini .shot{position:relative;background:var(--tint);aspect-ratio:1}
.mini .shot img{width:100%;height:100%;object-fit:cover}
.mini .n{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;
         border-radius:10px;background:var(--ink);color:var(--page);
         font-size:10px;font-weight:600;line-height:19px;text-align:center}
.mini .what{font-family:'Cormorant Garamond',serif;font-size:clamp(19px,1.4vw,23px);line-height:1}
.mini .what small{display:block;font-family:'Manrope',sans-serif;font-size:11px;
                  color:var(--mute);margin-top:.45em}
.mini .amt{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── empty states and the three fragrances ───────────────────────────────────────────── */
.empty{padding-block:clamp(30px,5vh,64px) var(--band)}
.empty h2{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1.1;
          font-size:clamp(28px,2.6vw,44px)}
.empty > p{margin-top:.6em;max-width:46ch;font-size:clamp(13px,.94vw,15.5px);color:var(--mute)}
.empty > .btn{margin-top:clamp(20px,3vh,32px)}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--colgap);
       margin-top:clamp(30px,5vh,64px)}
/* the product pages' Also try card */
.pick{display:block}
.pick-shot{background:var(--tint);aspect-ratio:1233/1159;overflow:hidden}
.pick-shot img{width:100%;height:100%;object-fit:contain;
               transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.pick:hover .pick-shot img{transform:scale(1.03)}
.pick-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
           margin-top:clamp(12px,1.8vh,20px)}
.pick-name{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,2vw,34px);line-height:1}
.pick-price{font-size:clamp(12px,.9vw,15px);color:var(--mute);white-space:nowrap}
.pick-note{margin-top:.5em;font-size:clamp(12px,.9vw,14.5px);color:var(--mute);max-width:36ch}
.pick-go{display:inline-flex;align-items:center;gap:.7em;margin-top:clamp(12px,1.8vh,20px);
         font-size:clamp(10px,.74vw,12px);letter-spacing:.16em;text-transform:uppercase;
         font-weight:600}
.pick-go svg{width:2.6em;height:auto;stroke:currentColor;fill:none;stroke-width:1;
             stroke-linecap:round;stroke-linejoin:round;
             transition:transform .4s cubic-bezier(.22,.9,.24,1)}
.pick:hover .pick-go svg{transform:translateX(5px)}
.pick:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* ── the wishlist ────────────────────────────────────────────────────────────────────── */
.wish{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,6vh,70px) var(--colgap);
      padding-block:clamp(26px,4vh,50px) var(--band)}
.wish-card{display:flex;flex-direction:column}
.wish-card .pick-shot{display:block}
.wish-card .eyebrow{margin-top:clamp(16px,2.4vh,26px)}
.wish-name{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1;
           font-size:clamp(30px,2.6vw,44px);margin-top:.25em}
.wish-name a:hover{opacity:.6}
.wish-card .sizes{margin-top:clamp(16px,2.4vh,26px)}
.wish-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
           margin-top:clamp(18px,2.6vh,30px)}

/* ── checkout ────────────────────────────────────────────────────────────────────────── */
.form fieldset{border:0;margin-top:clamp(30px,4.4vh,52px)}
.form fieldset:first-child{margin-top:clamp(20px,3vh,36px)}
/* MARGIN, not padding: a fieldset's padding goes below its legend, so the legend sat flush
   against whatever ended the fieldset above, an error line included. */
.form legend{padding:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vh,24px) clamp(14px,1.6vw,26px);
        margin-top:clamp(14px,2vh,22px)}
.field{display:grid;gap:.55em;align-content:start}
.field.full{grid-column:1/-1}
.field label,.field .field-label{font-size:clamp(10px,.7vw,11.5px);letter-spacing:.12em;
             text-transform:uppercase;font-weight:600}
.field label .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;height:50px;padding:0 16px;
  border:1px solid var(--field);border-radius:12px;background:var(--page);font-size:15px;
  transition:border-color .2s ease}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background:var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 17px center/10px}
.field textarea{height:auto;min-height:96px;padding:14px 16px;resize:vertical;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(17,17,17,.5)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.field .static{height:50px;display:flex;align-items:center;font-size:15px;color:var(--mute)}
.field .hint,.field .err{font-size:12px;line-height:1.4}
.field .hint{color:var(--mute)}
/* :user-invalid, not :invalid: an empty required field is invalid from the moment the page
   loads, and a form that greets you in red before you have typed is a scold, not a guide.
   This only fires once the visitor has touched the field, or tried to submit. */
.field .err{display:none;color:var(--bad)}
/* :hover is listed so a field still reads red while the pointer is over it */
.field :user-invalid,.field :user-invalid:hover{border-color:var(--bad)}
.field :user-invalid ~ .err{display:block}
.form-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
          margin-top:clamp(28px,4vh,48px)}
.notice{margin-top:clamp(18px,2.6vh,28px);padding:16px 20px;border:1px solid var(--line);
        border-left:2px solid var(--ink);font-size:13px;line-height:1.6;max-width:62ch}

/* ── order confirmed ─────────────────────────────────────────────────────────────────── */
.done h1{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1;
         font-size:clamp(42px,5.4vw,88px);margin-top:.25em}
.done .lede{margin-top:clamp(14px,2vh,24px);max-width:48ch;font-size:clamp(14px,1.02vw,17px);
            line-height:1.7}
.tag{display:inline-block;padding:.55em 1.1em;border:1px dashed rgba(17,17,17,.4);
     border-radius:999px;font-size:clamp(9px,.66vw,11px);letter-spacing:.18em;
     text-transform:uppercase;font-weight:600}
.steps{list-style:none;counter-reset:s;margin-top:clamp(28px,4vh,48px);border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2em 1fr;
          padding-block:clamp(14px,2vh,22px);border-bottom:1px solid var(--line);
          font-size:clamp(13px,.92vw,15px)}
.steps li::before{content:'0' counter(s);font-size:11px;letter-spacing:.14em;font-weight:600;
                  color:var(--grey);padding-top:.25em}
.steps strong{display:block;font-weight:600}
.steps span{color:var(--mute)}
.addr{font-style:normal;font-size:13px;line-height:1.7;color:var(--mute);
      padding-block:clamp(14px,2vh,22px);border-bottom:1px solid var(--line)}
.addr .label{color:var(--ink);display:block;margin-bottom:.6em}

/* ── the site footer, from the product pages ─────────────────────────────────────────── */
#site-foot{position:relative;background:var(--page);color:var(--ink);
           border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,6vw,140px);
          align-items:start;padding:clamp(44px,8vh,110px) var(--gutter) clamp(20px,3vh,42px)}
.foot-cols{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:clamp(28px,4.5vw,96px)}
.foot-mark{width:clamp(150px,19vw,330px);height:auto;color:var(--ink);display:block}
.foot-col h3{font-size:clamp(10px,.72vw,12px);letter-spacing:.16em;text-transform:uppercase;
             font-weight:600}
.foot-col ul{list-style:none;margin-top:clamp(12px,1.8vh,24px);display:grid;
             gap:clamp(7px,1vh,13px)}
.foot-col a{font-size:clamp(13px,.92vw,15px);opacity:.85;transition:opacity .25s ease}
.foot-col a:hover{opacity:.5}
.foot-col a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.foot-art{position:relative;aspect-ratio:3000/1250;overflow:hidden}
.foot-art img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.foot-legal{position:absolute;left:var(--gutter);bottom:clamp(14px,3vh,40px);
            display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,42px);
            font-size:clamp(11px,.78vw,13px)}
.foot-legal a{opacity:.85;transition:opacity .25s ease}
.foot-legal a:hover{opacity:.5}

/* ── the dock, from the product pages ────────────────────────────────────────────────── */
#dock{position:fixed;right:clamp(16px,2.2vw,34px);bottom:clamp(16px,2.4vh,34px);z-index:9000;
      width:var(--dock-w);height:var(--dock-h);
      --dock-w:var(--dock-pill-w,150px);--dock-h:52px;
      background:#fff;color:var(--ink);border-radius:26px;overflow:hidden;
      font-family:'Manrope',sans-serif;
      box-shadow:inset 0 0 0 1px rgba(17,17,17,.12),
                 0 2px 4px rgba(17,17,17,.10), 0 14px 38px rgba(17,17,17,.16);
      transition:width .5s cubic-bezier(.22,.9,.24,1), height .5s cubic-bezier(.22,.9,.24,1),
                 opacity .4s ease, transform .4s cubic-bezier(.22,.9,.24,1)}
#dock[data-open="true"]{--dock-w:var(--dock-open-w,268px);--dock-h:var(--dock-open-h,297px)}
#dock.is-gone{opacity:0;pointer-events:none;transform:translateY(14px)}
#dock-toggle{position:absolute;left:0;bottom:0;width:100%;height:52px;
             display:flex;align-items:center;justify-content:space-between;gap:20px;
             padding:0 20px;background:none;border:0;cursor:pointer;color:inherit;
             font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
             font-weight:600;white-space:nowrap}
.dock-brand{flex:none;line-height:0;color:inherit}
.dock-brand svg{width:62px;height:auto;display:block}
.dock-end{display:flex;align-items:center;gap:11px;flex:none}
#dock-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:22px}
.dock-ico{position:relative;width:15px;height:11px;flex:none}
.dock-ico i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;
            border-radius:1px;transition:transform .5s cubic-bezier(.22,.9,.24,1)}
.dock-ico i:nth-child(1){top:0}
.dock-ico i:nth-child(2){bottom:0}
#dock[data-open="true"] .dock-ico i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
#dock[data-open="true"] .dock-ico i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)}
.dock-word{position:relative;display:grid;justify-items:end}
.dock-word span{grid-area:1/1;transition:opacity .3s ease,transform .3s ease}
.dock-word .dock-close{opacity:0;transform:translateY(6px)}
#dock[data-open="true"] .dock-word .dock-now{opacity:0;transform:translateY(-6px)}
#dock[data-open="true"] .dock-word .dock-close{opacity:1;transform:none}
#dock-panel{position:absolute;left:0;right:0;bottom:52px;padding:12px 0 4px;
            visibility:hidden;transition:visibility 0s linear .5s}
#dock[data-open="true"] #dock-panel{visibility:visible;transition-delay:0s}
.dock-link{display:block;padding:0 20px;line-height:42px;color:inherit;
           font-size:15px;letter-spacing:-.005em;white-space:nowrap;text-align:right;
           opacity:0;transform:translateY(10px);
           transition:opacity .34s ease,transform .44s cubic-bezier(.22,.9,.24,1),
                      background-color .2s ease}
#dock[data-open="true"] .dock-link{opacity:1;transform:none;
  transition-delay:calc(.10s + var(--i) * .045s)}
.dock-link:hover{background:rgba(17,17,17,.06)}
.dock-link:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.dock-link[aria-current="page"]{color:var(--grey)}
.dock-sep{margin:9px 20px;height:1px;background:rgba(17,17,17,.14);
          opacity:0;transition:opacity .3s ease}
#dock[data-open="true"] .dock-sep{opacity:1;transition-delay:.22s}

/* ── smaller screens ──────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:clamp(26px,4vh,40px)}
  /* one column: nothing beside the summary to pin against */
  .summary{position:static}
  .wish,.picks{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;gap:clamp(22px,4vh,36px);
            padding:clamp(32px,5vh,56px) 6vw clamp(22px,3.5vh,40px)}
  .foot-cols{justify-content:flex-start;gap:clamp(24px,7vw,52px)}
  .foot-legal{position:static;padding:clamp(16px,3vh,26px) 6vw clamp(20px,4vh,34px)}
}
@media (max-width:560px){
  /* the price drops under the name rather than squeezing the stepper off the line */
  .line{grid-template-columns:84px 1fr;grid-template-areas:"shot info" "shot end"}
  .line-end{text-align:left;display:flex;align-items:baseline;gap:12px}
  .wish,.picks{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .form-end .btn{width:100%}
  .btn.wide-sm{display:block;width:100%}
}
@media (prefers-reduced-motion:reduce){
  #dock,.dock-ico i,.dock-link,.dock-word span,.dock-sep{transition-duration:.01ms !important;
                                                          transition-delay:0s !important}
  .pick-shot img,.pick-go svg{transition:none}
}