/* ============================================================================
   WEAR ME — "The Essential".
   Ported from the Claude Design project ed645417-e254-43d3-bcef-33b926f7ed15,
   file `Wear Me Essential.dc.html`. Replaces the colour-journey design: white
   paper, black ink, one grotesque (Archivo) set uppercase and tight, square
   corners everywhere. Two colours, one product, and a vote on the next one.

     home → collection → product → bag → vote → checkout → thanks

   style.css is still loaded for the account modal and the toast.
   ============================================================================ */
:root{
  --e-bg:#fff;
  --e-ink:#000;
  --e-sans:Archivo,system-ui,-apple-system,sans-serif;
  --e-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
}

html,body{height:100%;margin:0;padding:0;background:var(--e-bg);overflow:hidden}

.e-root{
  position:fixed;inset:0;overflow:hidden;container-type:size;
  background:var(--e-bg);color:var(--e-ink);
  font-family:var(--e-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.e-root :where(button){font-family:inherit;color:inherit;border:0;background:transparent;padding:0;cursor:pointer}
.e-root :where(input){font-family:inherit}
.e-root :where(input)::placeholder{color:rgba(0,0,0,.38)}
.e-root img{display:block}

/* ---------- chrome ---------- */
.e-head{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(14px,2.4cqi,26px) clamp(16px,3.4cqi,40px);
  background:rgba(255,255,255,0);border-bottom:1px solid rgba(0,0,0,0);
  transition:background 300ms ease,border-color 300ms ease}
/* The collection is the only screen that scrolls under the chrome. */
.e-head-solid{background:rgba(255,255,255,.94);border-bottom-color:rgba(0,0,0,.1)}
.e-mark{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start}
.e-mark-name{white-space:nowrap;font-weight:500;font-size:13px;letter-spacing:.34em}
/* The brand line, not a caption: it carries the promise, so it is set to be
   read rather than noticed. Shown at every width — it used to be wide-only,
   which hid it on exactly the screens most customers arrive on. */
.e-mark-sub{white-space:nowrap;font-weight:500;font-size:11px;letter-spacing:.2em;
  color:rgba(0,0,0,.72)}
[dir="rtl"] .e-mark-sub{font-size:12.5px;letter-spacing:0;font-family:var(--e-ar)}
/* On a phone the line has to earn its width: the header still has to fit the
   shop, language and bag buttons on one row, and 390px is the common case. */
@container (max-width:560px){
  .e-mark-sub{font-size:8.5px;letter-spacing:.06em}
  [dir="rtl"] .e-mark-sub{font-size:10px;letter-spacing:0}
  .e-mark{min-width:0}
}
.e-head-right{display:flex;align-items:center;gap:clamp(8px,1.4cqi,16px)}
.e-shopbtn,.e-bagbtn{display:grid;place-items:center;min-height:44px;white-space:nowrap;
  padding:0 4px;font-weight:500;font-size:11px;letter-spacing:.18em}
.e-shopbtn{color:rgba(0,0,0,.7)}
.e-lang{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 8px;
  font-weight:500;font-size:12px;letter-spacing:.18em;color:rgba(0,0,0,.7)}
[data-narrow-only]{display:none}
@container (max-width:520px){
  [data-wide-only]{display:none !important}
  [data-narrow-only]{display:block !important}
}
.e-back{position:absolute;inset-inline-start:clamp(12px,2.6cqi,34px);top:clamp(64px,9.4cqi,98px);
  z-index:20;display:flex;align-items:center;min-height:44px;padding:0 10px;
  font-weight:500;font-size:11px;letter-spacing:.18em;color:rgba(0,0,0,.5)}
.e-back[hidden]{display:none}

/* ---------- stage ---------- */
.e-stage{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.e-screen{min-height:100%;
  transition:opacity 500ms cubic-bezier(.2,.7,.3,1),transform 600ms cubic-bezier(.2,.7,.3,1)}
.e-screen.e-enter{opacity:0;transform:translateY(16px)}
/* Screens that centre their content rather than starting at the top. */
.e-centred{display:grid;place-items:center;align-content:center;
  padding:clamp(84px,11cqi,120px) clamp(18px,3.4cqi,44px) clamp(26px,4.4cqi,52px)}
.e-page{padding:clamp(96px,12cqi,132px) clamp(18px,3.4cqi,44px) clamp(28px,4.6cqi,54px)}

/* ---------- type ----------
   style.css still dresses the account modal, and it puts the previous design's
   serif on every h1–h3. This design is one grotesque, so take the headings back. */
.e-root :where(h1,h2,h3){font-family:var(--e-sans)}
.e-root :where(h1,h2,h3) .e-ar{font-family:var(--e-ar)}
/* The slogan on the page, not the caption under the wordmark: large enough to
   be read as a statement, spaced so it holds its own line. */
.e-slogan{font-weight:500;letter-spacing:.26em;color:var(--e-ink);text-align:center;
  font-size:clamp(11px,1.5vw,15px);margin:clamp(14px,2.4cqi,22px) 0 0}
.e-slogan-hero{margin-top:clamp(16px,3cqi,28px);opacity:.85}
.e-slogan-inline{text-align:start;margin-top:10px;font-size:clamp(10px,1.2vw,12px);opacity:.7}
[dir="rtl"] .e-slogan{letter-spacing:0;font-family:var(--e-ar);font-size:clamp(13px,1.8vw,17px)}
.e-eyebrow{font-weight:500;font-size:11px;letter-spacing:.3em;color:rgba(0,0,0,.4)}
.e-eyebrow-wide{letter-spacing:.34em}
.e-h1{margin:clamp(16px,2.6cqi,30px) 0 0;font-weight:500;font-size:clamp(34px,8.6cqi,104px);
  line-height:.94;letter-spacing:-.03em;text-transform:uppercase}
.e-h2{margin:clamp(12px,2cqi,20px) 0 0;font-weight:500;font-size:clamp(26px,5.4cqi,60px);
  line-height:1;letter-spacing:-.025em;text-transform:uppercase}
.e-lede{margin:clamp(14px,2.2cqi,22px) auto 0;max-width:44ch;
  font-size:clamp(13px,1.3cqi,15px);line-height:1.65;color:rgba(0,0,0,.55)}
.e-kicker{margin:clamp(16px,2.4cqi,26px) 0 0;font-weight:500;
  font-size:clamp(12px,1.5cqi,15px);letter-spacing:.2em;color:rgba(0,0,0,.5)}
/* Arabic drops the Latin tracking and the uppercasing it implies. */
.e-ar{font-family:var(--e-ar);font-weight:400;letter-spacing:0;text-transform:none}
.e-h1 .e-ar,.e-h2 .e-ar{font-size:.82em}
.e-kicker .e-ar,.e-eyebrow .e-ar{font-size:1.15em;font-weight:500}

/* ---------- buttons (square, by design) ---------- */
.e-btn{border:1px solid var(--e-ink);background:var(--e-ink);color:#fff;
  padding:16px 34px;font-weight:500;font-size:12px;letter-spacing:.2em}
.e-btn-ghost{border:1px solid rgba(0,0,0,.25);background:transparent;color:var(--e-ink);padding:16px 30px}
.e-btn-wide{width:100%;padding:17px}
.e-btn .e-ar,.e-btn-link .e-ar{letter-spacing:0}
.e-btn-link{border-bottom:1px solid rgba(0,0,0,.3);padding:0 0 3px;
  font-weight:500;font-size:11px;letter-spacing:.2em;color:rgba(0,0,0,.5)}
.e-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(24px,3.8cqi,42px)}

/* ---------- home ---------- */
.e-home{text-align:center;max-width:min(94%,860px)}

/* ---------- collection ---------- */
.e-collection{width:100%}
.e-col-head{padding:clamp(96px,13cqi,150px) clamp(18px,3.4cqi,44px) clamp(24px,4cqi,44px);text-align:center}
.e-col-head .e-lede{max-width:42ch}
.e-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2.6cqi,32px);padding:0 clamp(18px,3.4cqi,44px) clamp(40px,7cqi,96px);
  max-width:1080px;margin:0 auto}
.e-card{border:1px solid rgba(0,0,0,.12);text-align:start;transition:border-color 300ms ease}
.e-card:hover{border-color:var(--e-ink)}
.e-card-plate{display:grid;place-items:center;padding:clamp(20px,3.4cqi,44px)}
.e-card-plate img{width:min(84%,300px)}
.e-card-body{display:block;padding:clamp(14px,2cqi,20px) clamp(14px,2cqi,20px) clamp(16px,2.4cqi,24px);
  border-top:1px solid rgba(0,0,0,.12)}
.e-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.e-card-name{font-weight:500;font-size:clamp(17px,2cqi,22px);letter-spacing:-.01em;text-transform:uppercase}
.e-card-price{font-weight:500;font-size:clamp(15px,1.7cqi,18px);white-space:nowrap}
.e-card-meta{display:block;margin-top:6px;font-weight:500;font-size:10.5px;
  letter-spacing:.18em;color:rgba(0,0,0,.45)}
.e-card-cta{display:block;margin-top:14px;font-weight:500;font-size:11px;letter-spacing:.2em}
.e-card-cta .e-ar{letter-spacing:0}

.e-tick{overflow:hidden;background:var(--e-ink);color:#fff;padding:12px 0}
.e-tick-move{display:flex;will-change:transform}
.e-tick-track{display:flex;flex:0 0 auto;gap:26px;padding-inline-end:26px;
  font-weight:500;font-size:11px;letter-spacing:.22em;white-space:nowrap}
[dir="rtl"] .e-tick-track{font-family:var(--e-ar);letter-spacing:0}
.e-tick-star{opacity:.4}

.e-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(18px,3cqi,40px);padding:clamp(40px,7cqi,96px) clamp(18px,3.4cqi,44px);
  max-width:1080px;margin:0 auto}
.e-note-num{font-weight:500;font-size:11px;letter-spacing:.24em;color:rgba(0,0,0,.4)}
.e-note h3{margin:10px 0 6px;font-weight:500;font-size:16px;text-transform:uppercase;letter-spacing:-.005em}
.e-note h3 .e-ar{font-weight:500}
.e-note p{margin:0;font-size:14px;line-height:1.6;color:rgba(0,0,0,.55)}

/* ---------- product ---------- */
.e-pdp{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(20px,4cqi,56px);align-items:start;max-width:1020px;margin:0 auto}
.e-pdp-plate{display:grid;place-items:center;padding:clamp(20px,3.6cqi,50px)}
.e-pdp-plate img{width:min(88%,360px)}
.e-pdp-name{margin:0;font-weight:500;font-size:clamp(28px,5cqi,54px);
  line-height:1;letter-spacing:-.025em;text-transform:uppercase}
.e-pdp-sub{margin:clamp(8px,1.4cqi,14px) 0 0;font-weight:500;font-size:12px;
  letter-spacing:.2em;color:rgba(0,0,0,.5)}
.e-price-row{display:flex;align-items:baseline;gap:12px;margin-top:clamp(14px,2.2cqi,22px)}
.e-price{font-weight:500;font-size:clamp(20px,2.4cqi,26px)}
.e-pieces{font-weight:500;font-size:10.5px;letter-spacing:.18em;color:rgba(0,0,0,.45)}
.e-copy{margin:clamp(14px,2.2cqi,22px) 0 0;max-width:40ch;font-size:14px;line-height:1.65;color:rgba(0,0,0,.55)}
.e-label{margin:clamp(20px,3cqi,30px) 0 10px;font-weight:500;font-size:11px;
  letter-spacing:.22em;color:rgba(0,0,0,.45)}
.e-label .e-ar{font-size:12.5px}
.e-sizes{display:flex;flex-wrap:wrap;gap:8px}
.e-size{min-width:52px;min-height:48px;border:1px solid rgba(0,0,0,.2);padding:0 14px;
  font-weight:500;font-size:13px;letter-spacing:.06em;transition:background 220ms ease,color 220ms ease,border-color 220ms ease}
.e-size:hover{border-color:var(--e-ink)}
.e-size.on{border-color:var(--e-ink);background:var(--e-ink);color:#fff}
.e-add{width:100%;max-width:340px;margin-top:clamp(20px,3cqi,30px);border:1px solid var(--e-ink);
  background:var(--e-ink);color:#fff;padding:17px;font-weight:500;font-size:12px;letter-spacing:.2em;
  transition:background 220ms ease,color 220ms ease}
.e-add[disabled]{background:transparent;color:rgba(0,0,0,.4);cursor:not-allowed}
.e-add .e-ar{letter-spacing:0}
.e-fineprint{margin:10px 0 0;font-size:12px;color:rgba(0,0,0,.42)}

/* ---------- bag / checkout ---------- */
.e-narrow{width:100%;max-width:520px;margin:0 auto}
.e-empty{text-align:center;margin-top:clamp(20px,3.4cqi,32px)}
.e-empty p{margin:0 0 22px;font-weight:500;font-size:clamp(20px,3cqi,30px);
  letter-spacing:-.015em;color:rgba(0,0,0,.45);text-transform:uppercase}
.e-lines{margin-top:clamp(20px,3.4cqi,32px);border-top:1px solid rgba(0,0,0,.14)}
.e-line{display:flex;align-items:center;gap:clamp(14px,2.4cqi,20px);
  border-bottom:1px solid rgba(0,0,0,.14);padding:clamp(16px,2.4cqi,22px) 0}
.e-line-img{display:grid;place-items:center;flex:0 0 auto;
  width:clamp(74px,11cqi,96px);height:clamp(74px,11cqi,96px)}
.e-line-img img{width:76%}
.e-line-body{flex:1 1 auto}
.e-line-name{display:block;font-weight:500;font-size:clamp(16px,1.9cqi,19px);
  text-transform:uppercase;letter-spacing:-.005em}
.e-line-meta{display:block;margin-top:4px;font-weight:500;font-size:10.5px;
  letter-spacing:.16em;color:rgba(0,0,0,.5)}
.e-line-price{flex:0 0 auto;font-weight:500;font-size:16px}
.e-qty{display:inline-flex;align-items:center;gap:10px;margin-top:7px}
.e-qty button{width:24px;height:24px;border:1px solid rgba(0,0,0,.2);font-size:13px;line-height:1;color:rgba(0,0,0,.6)}
.e-qty span{font-weight:500;font-size:11px;letter-spacing:.14em}
.e-total{display:flex;align-items:baseline;justify-content:space-between;padding:clamp(14px,2cqi,18px) 0}
.e-total-label{font-weight:500;font-size:11px;letter-spacing:.2em;color:rgba(0,0,0,.5)}
.e-total-label .e-ar{font-size:12.5px}
.e-total-value{font-weight:500;font-size:clamp(19px,2.2cqi,23px)}
.e-co-line{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,3cqi,28px);padding:14px 0;
  border-top:1px solid rgba(0,0,0,.14);border-bottom:1px solid rgba(0,0,0,.14)}
.e-co-line .e-line-img{width:62px;height:62px}
.e-co-name{display:block;font-weight:500;font-size:17px;text-transform:uppercase;letter-spacing:-.005em}
.e-co-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.e-co-grid .full{grid-column:1/-1}
.e-co-grid input{width:100%;border:1px solid rgba(0,0,0,.18);background:transparent;
  padding:14px 15px;font-size:14px;color:var(--e-ink)}
.e-co-grid input:focus{outline:none;border-color:var(--e-ink)}
.e-co-grid input[aria-invalid="true"]{border-color:#B9636A}
/* The country code sits inside the field's border, not beside it, so the pair
   reads as one control. It is disabled: the shop ships inside KSA only, and a
   menu with one entry that cannot be changed should look like what it is. */
.e-phone{display:flex;align-items:stretch;border:1px solid rgba(0,0,0,.18)}
.e-phone:focus-within{border-color:var(--e-ink)}
/* width:auto is doing real work here. `.e-co-grid select` sets width:100%, and
   a flex item whose width is 100% claims the whole row — the code filled the
   field and pushed the number box to a 30px sliver off the right edge, which
   is why the control looked like a country code with no number in it. */
.e-co-grid select.e-phone-cc{flex:0 0 auto;width:auto;border:0;
  border-inline-end:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.03);
  padding:14px 8px 14px 12px;font:400 14px var(--e-sans);color:var(--e-ink);
  direction:ltr;cursor:pointer}
.e-co-grid select.e-phone-cc:focus{outline:none}
.e-co-grid .e-phone input{flex:1 1 auto;width:auto;border:0;min-width:0;
  letter-spacing:.04em}
.e-co-grid .e-phone input:focus{outline:none}
.e-co-err{margin-top:10px;font-size:12.5px;color:#B9636A}
.e-co-err[hidden]{display:none}
.e-pays{display:flex;flex-wrap:wrap;gap:9px}
.e-pay{flex:1 1 160px;min-height:48px;border:1px solid var(--e-ink);background:var(--e-ink);color:#fff;
  padding:14px 16px;font-weight:500;font-size:12.5px;text-align:center}
.e-sums{margin-top:clamp(20px,3.2cqi,30px);padding-top:14px;border-top:1px solid rgba(0,0,0,.14)}
.e-sum{display:flex;justify-content:space-between;margin-top:7px;font-size:13.5px;color:rgba(0,0,0,.6)}
.e-sum:first-child{margin-top:0}
.e-sum-total{align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.14)}
.e-sum-total .e-total-value{font-size:21px}

/* ---------- vote ---------- */
.e-vote{max-width:860px;margin:0 auto;text-align:center}
.e-vote .e-lede{max-width:46ch}
.e-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:clamp(10px,1.6cqi,18px);margin-top:clamp(24px,4cqi,44px)}
.e-swatch{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 2px}
.e-chip{display:block;width:100%;aspect-ratio:1;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;
  transition:box-shadow 240ms ease,transform 320ms cubic-bezier(.2,.7,.3,1)}
.e-swatch:hover .e-chip{transform:scale(1.05)}
.e-swatch.on .e-chip{box-shadow:0 0 0 2px #000,0 0 0 4px #fff inset}
.e-chip-name{font-weight:500;font-size:9.5px;letter-spacing:.12em;color:rgba(0,0,0,.5);
  text-align:center;line-height:1.3}
.e-swatch.on .e-chip-name{color:var(--e-ink)}
.e-voted{margin-top:clamp(26px,4.2cqi,46px);padding-top:clamp(20px,3.2cqi,30px);
  border-top:1px solid rgba(0,0,0,.14)}
.e-voted-name{margin:0;font-weight:500;font-size:clamp(19px,2.8cqi,30px);
  letter-spacing:-.015em;text-transform:uppercase}
.e-voted-note{margin:8px 0 0;font-weight:500;font-size:11px;letter-spacing:.22em;color:rgba(0,0,0,.5)}
.e-voted-sub{margin:10px auto 0;max-width:36ch;font-size:13.5px;color:rgba(0,0,0,.5)}

/* ---------- thanks ---------- */
.e-thanks{text-align:center;max-width:44ch}
.e-thanks h2{margin:0;font-weight:500;font-size:clamp(34px,7.4cqi,84px);
  line-height:.96;letter-spacing:-.03em;text-transform:uppercase}
.e-thanks-sub{margin:clamp(14px,2.2cqi,22px) 0 0;font-size:clamp(14px,1.5cqi,17px);color:rgba(0,0,0,.6)}
.e-thanks-meta{margin:10px 0 0;font-weight:500;font-size:10.5px;letter-spacing:.2em;color:rgba(0,0,0,.42)}
.e-next{margin-top:clamp(26px,4.4cqi,48px);padding-top:clamp(22px,3.4cqi,32px);
  border-top:1px solid rgba(0,0,0,.14)}
.e-next-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(14px,2.2cqi,20px)}
.e-next-chip{display:block;width:clamp(38px,5.4cqi,54px);height:clamp(38px,5.4cqi,54px);
  box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
.e-next-name{font-weight:500;font-size:clamp(24px,3.8cqi,42px);letter-spacing:-.02em;text-transform:uppercase}

/* The account modal and toast come from style.css and sit above the flow. */
.drawer,.overlay,.modal-wrap,.toast{z-index:60}

/* ============================================================================
   P6 — the fifteen screens. Same design language as above: white, Archivo,
   uppercase and tight, square corners. Everything below is either a new screen
   or a control the seven-screen flow did not have.
   ============================================================================ */

/* The stage scrolls now (long legal pages, a product page with specs), so the
   header floats over it rather than sitting above it. */
.e-stage{scroll-behavior:smooth}
.e-screen{min-height:auto}

/* ---------- home ---------- */
.e-home-shots{display:flex;justify-content:center;gap:clamp(12px,2.4cqi,28px);
  margin-top:clamp(28px,4.6cqi,52px)}
.e-home-shots img{width:clamp(96px,15cqi,180px)}

/* ---------- collection extras ---------- */
.e-stock{font-weight:500}
.e-stock-in{color:rgba(0,0,0,.45)}
.e-stock-low{color:#8A5A1C}
.e-stock-out{color:#8A1C1C}

/* ---------- product ---------- */
.e-pdp{align-items:start}
.e-pdp-plate{background:#F6F4F1;overflow:hidden}
.e-pdp-plate img{transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
.e-zoom-0 img{transform:scale(1)}
.e-zoom-1 img{transform:scale(1.35)}
.e-zoom-2 img{transform:scale(.82)}
.e-thumbs{display:flex;gap:8px;margin-top:10px}
.e-thumb{width:64px;height:64px;border:1px solid rgba(0,0,0,.14);overflow:hidden;background:#F6F4F1}
.e-thumb.on{border-color:var(--e-ink)}
.e-thumb img{width:100%;height:100%;object-fit:contain}
.e-thumb .e-zoom-1{transform:scale(1.35)}
.e-thumb .e-zoom-2{transform:scale(.82)}

.e-vat-tag{font-weight:500;font-size:9.5px;letter-spacing:.18em;border:1px solid rgba(0,0,0,.2);
  padding:3px 6px;color:rgba(0,0,0,.55)}
.e-vat-line{margin:6px 0 0;font-size:12.5px;color:rgba(0,0,0,.5)}
.e-bnpl{margin:4px 0 0;font-size:12.5px;color:rgba(0,0,0,.55)}
.e-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.e-colors{display:flex;flex-wrap:wrap;gap:8px}
.e-color{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.2);
  padding:9px 14px;font-weight:500;font-size:12.5px;transition:border-color 200ms ease}
.e-color.on{border-color:var(--e-ink)}
.e-color-dot{width:14px;height:14px;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.e-size.out{color:rgba(0,0,0,.25);border-color:rgba(0,0,0,.08);text-decoration:line-through;cursor:not-allowed}
.e-size.out:hover{border-color:rgba(0,0,0,.08)}
.e-stockline{margin:10px 0 0;font-size:13px;color:rgba(0,0,0,.5)}
.e-sku{margin:4px 0 0;font-weight:500;font-size:10.5px;letter-spacing:.16em;color:rgba(0,0,0,.4)}
.e-qty-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(16px,2.4cqi,24px)}
.e-qty-row .e-label{margin:0}
.e-specs{margin-top:clamp(24px,3.6cqi,40px);border-top:1px solid rgba(0,0,0,.14)}
.e-spec{display:grid;grid-template-columns:minmax(90px,120px) 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid rgba(0,0,0,.09)}
.e-spec-k{font-weight:500;font-size:10.5px;letter-spacing:.18em;color:rgba(0,0,0,.45)}
.e-spec-v{font-size:14px;line-height:1.6;color:rgba(0,0,0,.6)}

/* ---------- bag ---------- */
.e-remove{display:block;margin-top:6px;font-size:11.5px;color:rgba(0,0,0,.45);
  text-decoration:underline;text-underline-offset:2px}
.e-coupon{display:flex;gap:8px;margin-top:clamp(16px,2.4cqi,22px)}
.e-coupon input{flex:1 1 auto;border:1px solid rgba(0,0,0,.18);background:transparent;
  padding:13px 15px;font-size:14px;color:var(--e-ink)}
.e-coupon input:focus{outline:none;border-color:var(--e-ink)}
.e-btn-sm{padding:0 18px;font-size:11px}

/* ---------- vote ---------- */
.e-vote-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px}
.e-vote-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,0,0,.16);
  padding:7px 12px;font-weight:500;font-size:11px;letter-spacing:.1em}
.e-chip-sm{width:12px;height:12px;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
.e-skip{display:block;margin:clamp(22px,3.6cqi,36px) auto 0}

/* ---------- checkout ---------- */
.e-co-grid select,.e-co-grid textarea{width:100%;border:1px solid rgba(0,0,0,.18);
  background:transparent;padding:14px 15px;font:400 14px var(--e-sans);color:var(--e-ink)}
.e-co-grid select:focus,.e-co-grid textarea:focus{outline:none;border-color:var(--e-ink)}
.e-co-grid textarea{resize:vertical;min-height:96px}
.e-pays{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.e-pay{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-height:56px;
  border:1px solid rgba(0,0,0,.18);background:transparent;color:var(--e-ink);
  padding:12px 14px;text-align:start;transition:background 200ms ease,color 200ms ease,border-color 200ms ease}
.e-pay.on{border-color:var(--e-ink);background:var(--e-ink);color:#fff}
/* Acceptance marks on the payment tiles. Not `.e-mark` — that is the WEAR ME
   logotype in the header, and reusing the name would restyle the brand. */
/* The mark sits on its own white chip. A brand's colours are fixed — navy VISA,
   black Apple Pay — and the tile turns dark when selected, so without this the
   logo would disappear exactly when the customer has chosen it. */
.e-pay-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(0,0,0,.10);
  border-radius:5px;padding:5px 7px;margin-bottom:5px;line-height:0}
.e-paymark{height:15px;width:auto;display:block}
.e-pay-name{font-weight:500;font-size:12.5px}
.e-pay-note{font-weight:500;font-size:9.5px;letter-spacing:.14em;opacity:.7}
.e-check{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13px;
  line-height:1.5;color:rgba(0,0,0,.7);cursor:pointer}
.e-check input{width:18px;height:18px;margin-top:1px;accent-color:#000;flex:0 0 auto}
.e-check a{text-decoration:underline;text-underline-offset:2px}
.e-btn[disabled]{background:transparent;color:rgba(0,0,0,.4);border-color:rgba(0,0,0,.18);cursor:not-allowed}

/* ---------- thanks / tracking ---------- */
.e-meta{margin-top:clamp(18px,3cqi,28px);border-top:1px solid rgba(0,0,0,.14)}
.e-meta-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(0,0,0,.09);font-size:13.5px}
.e-meta-row span:first-child{font-weight:500;font-size:10.5px;letter-spacing:.18em;
  color:rgba(0,0,0,.45);align-self:center}
.e-timeline{list-style:none;margin:clamp(22px,3.4cqi,34px) 0 0;padding:0}
.e-step{position:relative;display:flex;align-items:center;gap:14px;padding:0 0 26px;
  padding-inline-start:4px;color:rgba(0,0,0,.45)}
.e-step:last-child{padding-bottom:0}
.e-step::before{content:"";position:absolute;inset-inline-start:9px;top:16px;bottom:0;
  width:1px;background:rgba(0,0,0,.16)}
.e-step:last-child::before{display:none}
.e-step.done{color:var(--e-ink)}
.e-step.done::before{background:var(--e-ink)}
.e-dot{width:11px;height:11px;border:1px solid var(--e-ink);background:#fff;
  border-radius:999px;flex:0 0 auto;z-index:1}
.e-step.done .e-dot{background:var(--e-ink)}
.e-step-label{font-weight:500;font-size:13px}
.e-track{margin-top:clamp(20px,3.4cqi,32px)}

/* ---------- my orders ---------- */
.e-order{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:clamp(14px,2.4cqi,20px) 0;border-bottom:1px solid rgba(0,0,0,.14);text-align:start}
.e-order-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.e-status{font-weight:500;font-size:9.5px;letter-spacing:.16em;color:rgba(0,0,0,.45)}
.e-status-delivered{color:#2F6360}
.e-status-cancelled,.e-status-payment_failed{color:#8A1C1C}
.e-status-processing,.e-status-shipped{color:#8A5A1C}

/* ---------- info pages ---------- */
.e-info{text-align:start}
.e-info .e-eyebrow{text-align:start}
.e-info-title{text-align:start;margin-bottom:clamp(20px,3.2cqi,32px)}
.e-prose{margin-bottom:clamp(20px,3.2cqi,30px)}
.e-prose h3{margin:0 0 8px;font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:-.005em}
.e-prose h3 .e-ar{font-weight:500}
.e-prose p{margin:0;font-size:14.5px;line-height:1.75;color:rgba(0,0,0,.62)}
.e-table{width:100%;border-collapse:collapse;margin:clamp(16px,2.6cqi,24px) 0}
.e-table th{text-align:start;font-weight:500;font-size:10.5px;letter-spacing:.18em;
  color:rgba(0,0,0,.45);padding:10px 0;border-bottom:1px solid rgba(0,0,0,.2)}
.e-table td{padding:13px 0;border-bottom:1px solid rgba(0,0,0,.09);font-size:14px}
.e-faqs{margin-top:clamp(8px,1.6cqi,16px)}
.e-faq{border-bottom:1px solid rgba(0,0,0,.12)}
.e-faq summary{padding:16px 0;font-weight:500;font-size:14.5px;cursor:pointer;list-style:none}
.e-faq summary::-webkit-details-marker{display:none}
.e-faq summary::after{content:"+";float:inline-end;font-weight:400;font-size:18px;line-height:1}
.e-faq[open] summary::after{content:"−"}
.e-faq p{margin:0 0 18px;font-size:14px;line-height:1.7;color:rgba(0,0,0,.6);max-width:62ch}
.e-entity{margin-top:clamp(22px,3.4cqi,34px);padding-top:16px;border-top:1px solid rgba(0,0,0,.14);
  font-size:12.5px;line-height:1.9;color:rgba(0,0,0,.5)}

/* ---------- footer ---------- */
/* Dark by design — but it has to own that, not inherit it. A bare `footer{}`
   rule left over from the retired marketing layout used to paint this black
   while the links here were still styled dark-on-light, which is how the
   footer ended up as unreadable text on a black band. Colours are set on the
   footer itself now, so nothing upstream decides them.
   `margin-top:auto` keeps it at the bottom of a short screen instead of
   floating halfway up with the drift showing underneath. */
.e-foot{margin-top:auto;background:var(--e-ink);color:rgba(246,242,236,.78);
  padding:clamp(30px,5cqi,56px) clamp(18px,3.4cqi,44px) clamp(20px,3cqi,32px)}
.e-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3cqi,40px);max-width:1080px;margin:0 auto}
.e-foot-mark{font-weight:500;font-size:13px;letter-spacing:.34em;color:rgba(246,242,236,.95)}
.e-foot-slogan{margin-top:10px;font-weight:500;font-size:12px;letter-spacing:.2em;
  color:rgba(246,242,236,.88)}
[dir="rtl"] .e-foot-slogan{letter-spacing:0;font-family:var(--e-ar);font-size:12px}
.e-foot-brand p{margin:10px 0 0;max-width:26ch;font-size:12.5px;line-height:1.6;
  color:rgba(246,242,236,.5)}
[dir="rtl"] .e-foot-brand p{font-family:var(--e-ar)}
.e-foot-title{font-weight:500;font-size:10px;letter-spacing:.22em;color:rgba(246,242,236,.5)}
[dir="rtl"] .e-foot-title{letter-spacing:0;font-family:var(--e-ar);font-size:11.5px}
.e-foot-col nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:12px}
.e-foot-col a{font-size:12.5px;color:rgba(246,242,236,.78);text-align:start}
[dir="rtl"] .e-foot-col a{font-family:var(--e-ar)}
.e-foot-col a:hover{color:rgba(246,242,236,1)}
.e-foot-base{max-width:1080px;margin:clamp(24px,3.6cqi,40px) auto 0;
  padding-top:clamp(16px,2.4cqi,22px);border-top:1px solid rgba(246,242,236,.16)}
.e-foot-entity{display:flex;flex-wrap:wrap;gap:clamp(12px,2.4cqi,32px);font-size:11.5px;
  color:rgba(246,242,236,.5)}
.e-foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px;font-size:11.5px;color:rgba(246,242,236,.5)}
/* The stage is the scroller, so the column has to live on it for the footer's
   auto margin to have anything to push against. */
.e-stage{display:flex;flex-direction:column}
.e-stage > .e-screen{flex:0 0 auto}

/* ---------- small screens ---------- */
@container (max-width:560px){
  .e-pdp{grid-template-columns:1fr}
  .e-spec{grid-template-columns:1fr;gap:4px}
  .e-order{flex-wrap:wrap}
}

/* Continuous drift of the candidate tones. A CSS loop, so it survives every
   re-render; direction follows the writing direction, and reduced motion
   pauses it via animation-play-state rather than removing it. */
@keyframes om-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.e-drift{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.22}
.e-drift-track{display:flex;width:200%;height:100%;animation:om-drift 34s linear infinite;will-change:transform}
.e-drift-track[data-drift="bg"]{animation-duration:48s}
.e-drift-half{display:flex;flex:0 0 50%}
[dir="rtl"] .e-drift-track{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.e-drift-track{animation-play-state:paused}}