/* TheBodyMelt · site styles
   Logical properties only — one stylesheet serves LTR and RTL.
   Imports the token layer; never hard-codes a brand colour. */

@import url("tokens.css");

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Candy Dots — decision log #9 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--ground);
  background-image: radial-gradient(circle at 50% 50%,
    rgba(var(--pattern-ink), var(--pattern-alpha)) 2px, transparent 2.4px);
  background-size: var(--pattern-size) var(--pattern-size);
}

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

/* Clip rather than offset: an off-screen offset lands outside the viewport on
   the wrong side in RTL and can create a horizontal scrollbar. */
.skip {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--ink); color: var(--ground);
}
.skip:focus {
  inline-size: auto; block-size: auto;
  margin: 0; padding: var(--space-3) var(--space-5);
  overflow: visible; clip-path: none;
  inset-inline-start: var(--space-4); inset-block-start: var(--space-4);
  z-index: 100;
}

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

.wrap { max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }

.lbl {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-38);
}

/* ---------- chrome ---------- */
.topbar {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-align: center; padding: var(--space-4); color: var(--ink-55);
  border-block-end: 1px solid var(--hairline);
}
nav { display: flex; align-items: center; gap: var(--space-7); padding-block: var(--space-6); }
.logo {
  font-family: var(--font-logo);
  font-size: clamp(1.6rem, 1.3rem + .9vw, 2.15rem);
  color: var(--accent); line-height: 1; direction: ltr;
  /* Bagel Fat One sits on a tall body; trim the optical gap it leaves. */
  letter-spacing: -.005em;
}
footer .logo { font-size: clamp(1.5rem, 1.2rem + .7vw, 1.9rem); }
.links { display: flex; gap: var(--space-6); margin-inline-start: auto; font-size: .85rem; font-weight: var(--weight-medium); }
.links a { padding-block-end: 3px; border-block-end: 1.5px solid transparent; transition: border-color var(--fast) var(--ease); }
.links a:hover { border-block-end-color: var(--accent); }
.lang {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  border: 1px solid var(--hairline); padding: .45em 1em;
  transition: background var(--fast), color var(--fast);
}
.lang:hover { background: var(--ink); color: var(--ground); }
.cart { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; }

/* ---------- hero ---------- */
.hero { position: relative; height: min(84vh, 46rem); overflow: hidden; }
/* Product shots put the subject slightly below centre, and the copy sits at the
   bottom-left. Biasing the crop upward keeps the bars clear of the headline. */
.hero > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 32%, transparent 58%),
    linear-gradient(to var(--grad-dir, right), rgba(0,0,0,.48) 0%, rgba(0,0,0,.2) 44%, transparent 70%);
}
[dir="rtl"] .hero::after { --grad-dir: left; }
.hero-copy {
  position: absolute; z-index: 2;
  inset-inline-start: var(--gutter); inset-block-end: clamp(2.5rem, 6vw, 5rem);
  max-inline-size: 32rem; color: #fff;
  display: flex; flex-direction: column; gap: var(--space-5);
}
.hero-copy .lbl { color: rgba(255,255,255,.75); }
.hero-copy h1 {
  margin: 0; font-weight: var(--weight-display); font-size: var(--text-hero);
  line-height: 1.05; letter-spacing: var(--tracking-display); text-wrap: balance;
}
.hero-copy p { margin: 0; max-inline-size: 31ch; color: rgba(255,255,255,.88); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 1.15em 2.4em; border: 1px solid currentColor; border-radius: var(--radius);
  background: none; cursor: pointer; align-self: flex-start;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn-light { color: #fff; }
.btn-light:hover { background: #fff; color: var(--ink); }
.btn-ink { color: var(--ink); border-color: var(--hairline); }
.btn-ink:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- sections ---------- */
section { padding-block: clamp(4rem, 8vw, 8rem); }
.head { display: grid; gap: var(--space-4); margin-block-end: clamp(2.5rem, 5vw, 4rem); max-inline-size: 44rem; }
h2 { margin: 0; font-weight: var(--weight-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-display); line-height: 1.15; }
.sub { margin: 0; color: var(--ink-55); max-inline-size: var(--measure); }
.more { margin-block-start: var(--space-6); }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(2.2rem,4vw,3.2rem) clamp(1.4rem,2.4vw,2.4rem); }
.card { position: relative; display: block; }
.card figure { margin: 0; overflow: hidden; aspect-ratio: 3/4; background: var(--band); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.card:hover img { transform: scale(1.045); }
.card h3 { margin: var(--space-5) 0 .3rem; font-size: .94rem; font-weight: var(--weight-medium); }
.card .price { margin: 0; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; color: var(--ink-55); direction: ltr; text-align: start; }

/* ---------- band ---------- */
.band { background: var(--band); }
.band-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items: center; }
.band-in > img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.col { display: grid; gap: var(--space-5); align-content: center; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lines li { display: flex; justify-content: space-between; gap: var(--space-4); border-block-end: 1px solid var(--hairline); padding-block-end: .55rem; }
.lines em { font-style: normal; color: var(--ink-38); font-size: .82rem; }
.specs { display: flex; gap: var(--space-7); flex-wrap: wrap; padding-block-start: var(--space-5); border-block-start: 1px solid var(--hairline); }
.specs b { display: block; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 400; line-height: 1; }
.specs span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-38); }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.pdp-img { margin: 0; }
.pdp-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pdp-info { display: grid; gap: var(--space-4); }
.pdp-info h1 { margin: 0; font-weight: var(--weight-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
.pdp-price { margin: 0; font-family: var(--font-mono); font-size: 1.05rem; direction: ltr; text-align: start; }
.pdp-long { margin: 0; color: var(--ink-55); max-inline-size: var(--measure); }
.pdp-meta { border-block-start: 1px solid var(--hairline); padding-block-start: var(--space-5); margin-block-start: var(--space-4); }
.pdp-meta h3 { margin: 0 0 var(--space-3); font-size: .8rem; font-weight: var(--weight-strong); }
.ing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ing li { font-size: .78rem; color: var(--ink-55); border: 1px solid var(--hairline); padding: .35em .8em; }
.pdp-benefits { border-block-start: 1px solid var(--hairline); padding-block-start: var(--space-5); margin-block-start: var(--space-4); }
.pdp-benefits h3 { margin: 0 0 var(--space-3); font-size: .8rem; font-weight: var(--weight-strong); }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.benefits li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.55; }
.benefits .b-ico { flex: 0 0 auto; }
.pdp-note { border-block-start: 1px dashed var(--hairline); padding-block-start: var(--space-4); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 0; max-inline-size: 48rem; }
.faq details { border-block-start: 1px solid var(--hairline); }
.faq details:last-child { border-block-end: 1px solid var(--hairline); }

/* The whole row is the hit area, and it clears 44px on its own. */
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 44px;
  padding-block: var(--space-4);
  font-size: 1rem;
  font-weight: var(--weight-medium);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink-38);
  flex: none;
  transition: transform var(--fast) var(--ease), color var(--fast);
}
.faq details[open] summary::after { content: "−"; color: var(--accent-deep); }
.faq summary:hover::after { color: var(--accent-deep); }
.faq p {
  margin: 0;
  padding-block-end: var(--space-5);
  padding-inline-end: var(--space-6);
  color: var(--ink-55);
  max-inline-size: var(--measure);
}

/* FAQ block on a product page sits below the two-column split */
.pdp-faq { padding-block-start: 0; }
.pdp-faq .head { margin-block-end: var(--space-5); }

.mono-big { font-family: var(--font-mono); font-size: 1.6rem; direction: ltr; text-align: start; }

/* ---------- trust + footer ---------- */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem,1fr)); gap: clamp(2rem,4vw,3.5rem); padding-block: clamp(3rem,5vw,4.5rem); border-block-start: 1px solid var(--hairline); }
.trust h4 { margin: .8rem 0 .3rem; font-size: .88rem; font-weight: var(--weight-medium); }
.trust p { margin: 0; font-size: .8rem; color: var(--ink-55); max-inline-size: 26ch; }
footer { border-block-start: 1px solid var(--hairline); padding-block: var(--space-7); }
.foot-in { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
/* The ownership line. Quiet on purpose — it is a fact the reader should be
   able to find, not a banner. Sits under the wordmark row, full width, so it
   does not fight the logo for the same flex line on a phone. */
.foot-social { display: flex; gap: var(--space-4); }
.foot-social a { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-55); text-decoration: none; }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--ink); text-decoration: underline; }

.foot-legal { margin: var(--space-4) 0 0; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .04em; color: var(--ink-38); }

/* ---------- responsive: tablet then mobile ---------- */
@media (max-width: 900px) {
  .band-in, .pdp { grid-template-columns: 1fr; }
  .hero { height: min(72vh, 34rem); }
}
@media (max-width: 640px) {
  .links { display: none; }
  nav { gap: var(--space-4); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

  /* Touch targets ≥44px — BUILD-PLAN §7. Enforced by the e2e suite.
     min-block-size alone is not enough on inline elements, so each one
     also becomes a flex box that centres its own label. */
  .btn,
  .lang,
  .logo,
  .more a,
  .cart {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn { padding-inline: 1.9em; }
  .lang { padding-inline: 1em; }
}

/* ================= cart ================= */
.cart-lines { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.cart-lines li {
  display: grid; grid-template-columns: 90px 1fr auto auto auto;
  gap: var(--space-4); align-items: center;
  padding-block: var(--space-4); border-block-start: 1px solid var(--hairline);
}
.cart-lines img { inline-size: 90px; block-size: 120px; object-fit: cover; background: var(--band); }
.cl-main { display: grid; gap: .2rem; }
.cl-qty { display: grid; gap: .25rem; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-38); }
.cl-qty input { inline-size: 4rem; padding: .5em; border: 1px solid var(--hairline);
  background: var(--ground); color: var(--ink); font-family: var(--font-mono); min-block-size: 44px; }
.cl-total { font-family: var(--font-mono); font-size: .9rem; }
.cl-rm { background: none; border: 0; color: var(--ink-38); cursor: pointer;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; min-block-size: 44px; padding-inline: .5rem; }
.cl-rm:hover { color: var(--accent-deep); }

.summary { border-block-start: 1px solid var(--ink); padding-block-start: var(--space-5);
  max-inline-size: 26rem; margin-inline-start: auto; display: grid; gap: .6rem; }
.summary .row { display: flex; justify-content: space-between; gap: var(--space-4); }
.summary .row b { font-family: var(--font-mono); font-weight: 400; }
.summary .total { border-block-start: 1px solid var(--hairline); padding-block-start: .6rem;
  font-size: 1.05rem; }
.summary .hint { margin: 0; font-size: .78rem; color: var(--accent-deep); }
.summary .btn { margin-block-start: var(--space-4); justify-self: stretch; text-align: center; }
.sum-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: .45rem; }
.sum-lines li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: .88rem; }
.sum-lines b { font-family: var(--font-mono); font-weight: 400; }

/* ================= checkout ================= */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
#checkout-form { display: grid; gap: var(--space-4); }
#checkout-form label { display: grid; gap: .35rem; font-size: .85rem; }
#checkout-form .opt { color: var(--ink-38); font-size: .72rem; }
#checkout-form input, #checkout-form select, #checkout-form textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--ground);
  border: 1px solid var(--hairline); border-radius: 0; padding: .8em .9em; min-block-size: 44px;
}
#checkout-form input:focus, #checkout-form select:focus, #checkout-form textarea:focus {
  border-color: var(--ink); outline: none;
}
#checkout-form [aria-invalid="true"] { border-color: var(--accent-deep); }
.err { color: var(--accent-deep); font-size: .78rem; }
.methods { border: 1px solid var(--hairline); padding: var(--space-4); display: grid; gap: .5rem; margin: 0; }
.methods legend { font-size: .85rem; padding-inline: .4rem; }
.method { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  padding: .6rem; min-block-size: 44px; }
.method input { margin-block-start: .35rem; accent-color: var(--accent-deep); }
.method b { display: block; font-weight: var(--weight-medium); }
.method em { font-style: normal; color: var(--ink-55); font-size: .8rem; }
.form-note { margin: 0; font-size: .78rem; color: var(--ink-38); }
.done { border: 1px solid var(--hairline); padding: var(--space-6); display: grid; gap: .6rem;
  max-inline-size: 34rem; }

/* ---------- thanks — the brand-kit card ---------- */
.thanks { display: grid; gap: var(--space-6); justify-items: center; }
.ty-card { inline-size: min(100%, 24rem); aspect-ratio: 39/51; border-radius: 22px;
  background-color: var(--accent);
  background-image:
    radial-gradient(ellipse 44px 12px at 25% 12%, rgba(255,255,255,.10) 60%, transparent 61%),
    radial-gradient(ellipse 44px 12px at 80% 22%, rgba(255,255,255,.10) 60%, transparent 61%),
    radial-gradient(ellipse 44px 12px at 15% 38%, rgba(255,255,255,.10) 60%, transparent 61%),
    radial-gradient(ellipse 44px 12px at 88% 52%, rgba(255,255,255,.10) 60%, transparent 61%),
    radial-gradient(ellipse 44px 12px at 22% 68%, rgba(255,255,255,.10) 60%, transparent 61%),
    radial-gradient(ellipse 44px 12px at 78% 82%, rgba(255,255,255,.10) 60%, transparent 61%),
    radial-gradient(ellipse 44px 12px at 45% 92%, rgba(255,255,255,.10) 60%, transparent 61%);
  color: #FFFAF2; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: .6rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  /* الكارت إنجليزي بالكامل — من غير دي، صفحة العربي بتقلب «!» */
  direction: ltr; unicode-bidi: isolate; }
.ty-note { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .3em;
  margin-block-end: auto; }
.ty-big { font-family: 'Bagel Fat One', var(--font-display, Fredoka), cursive;
  font-size: clamp(3.2rem, 13vw, 4.6rem); line-height: .95; }
.ty-script { font-family: Caveat, cursive; font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 600; }
.ty-foot { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em;
  margin-block-start: auto; }
.thanks .done { inline-size: min(100%, 34rem); }

/* ---------- customer account ---------- */
/* display:grid on forms would silently defeat the hidden attribute — the two
   auth forms rendered stacked on top of each other until this line. */
.account [hidden] { display: none !important; }
.account form { display: grid; gap: var(--space-4); max-inline-size: 26rem; }
.account form label { display: grid; gap: .35rem; font-size: .85rem; }
.account .opt { color: var(--ink-38); font-size: .72rem; }
.account input, .account select, .account textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--ground);
  border: 1px solid var(--hairline); border-radius: 0; padding: .8em .9em; min-block-size: 44px;
}
.account input:focus, .account select:focus, .account textarea:focus {
  border-color: var(--ink); outline: none;
}
.acc-tabs { display: flex; border-block-end: 1px solid var(--hairline); margin-block: var(--space-4); }
.acc-tabs [role="tab"] { font: inherit; background: none; border: none; cursor: pointer;
  padding: .7em 1.1em; min-block-size: 44px; color: var(--ink-55);
  border-block-end: 2px solid transparent; margin-block-end: -1px; }
.acc-tabs [aria-selected="true"] { color: var(--ink); font-weight: var(--weight-medium);
  border-block-end-color: var(--accent-deep); }
.acc-hello { font-size: 1.15rem; margin-block: var(--space-4); }
.acc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 900px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-box h3 { margin: 0 0 var(--space-3); font-size: 1rem; font-weight: var(--weight-strong); }
.acc-order { border: 1px solid var(--hairline); padding: var(--space-4); display: grid; gap: .4rem;
  margin-block-end: .8rem; }
.acc-order-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.acc-order .mono { font-family: var(--font-mono); direction: ltr; }
.acc-status { font-size: .72rem; border: 1px solid var(--hairline); padding: .25em .7em;
  color: var(--ink-55); white-space: nowrap; }
.acc-status.s-delivered { color: var(--ink); border-color: var(--ink); }
.acc-status.s-cancelled { color: var(--ink-38); text-decoration: line-through; }
.linklike { font: inherit; font-size: .82rem; background: none; border: none; padding: 0;
  color: var(--accent-deep); text-decoration: underline; cursor: pointer; min-block-size: 44px; }
#forgot-body { display: grid; gap: var(--space-3); margin-block-start: .3rem; }
.acc-later { margin-block-start: var(--space-5) !important; }
.acc-sub-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acc-sub-actions select { font: inherit; font-size: .85rem; border: 1px solid var(--hairline);
  background: var(--ground); padding: .5em .7em; min-block-size: 44px; }
.acc-sub-actions .btn { min-block-size: 44px; }
.acc-coupon { display: flex; align-items: center; gap: .7rem; font-size: .85rem;
  border: 1px dashed var(--hairline); padding: .6rem .8rem; margin-block-end: .6rem; }
.coupon-code { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .08em;
  background: var(--ground); border: 1px solid var(--ink); padding: .45em .9em;
  cursor: pointer; min-block-size: 40px; direction: ltr; }
.coupon-auto { font-size: 1rem; }
.acc-pass { margin-block-start: var(--space-4); }
.acc-pass summary { cursor: pointer; font-size: .85rem; min-block-size: 44px; display: flex; align-items: center; }
.acc-pass form { margin-block-start: var(--space-3); }
.acct-link { display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px; color: var(--ink); }
.acct-link svg { inline-size: 20px; block-size: 20px; }

/* ---------- Melt Match — icon on the photo, skin types on hover/tap ---------- */
.card figure, .pdp-img { position: relative; }
.mm-hint { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem;
  min-block-size: 30px; border-radius: 999px; padding: .3rem .5rem;
  background: var(--ground); display: inline-flex; align-items: center; gap: .15rem;
  box-shadow: 0 1px 5px rgba(58, 31, 42, .2); cursor: help; }
.mm-hint svg { inline-size: 15px; block-size: 15px; }
.pdp-img .mm-hint { min-block-size: 38px; padding: .4rem .65rem; gap: .2rem;
  inset-block-end: .9rem; inset-inline-start: .9rem; }
.pdp-img .mm-hint svg { inline-size: 19px; block-size: 19px; }
.mm-hint::after { content: attr(data-tip); position: absolute;
  inset-block-end: calc(100% + 8px); inset-inline-start: 0;
  background: var(--ink); color: var(--ground); font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .04em; white-space: nowrap;
  padding: .5em .9em; border-radius: 6px; opacity: 0; pointer-events: none;
  transition: opacity .15s ease; }
.mm-hint:hover::after, .mm-hint:focus-visible::after, .mm-hint:focus::after { opacity: 1; }
.done h3 { margin: 0; font-weight: var(--weight-display); font-size: 1.5rem; }

/* ================= assistant ================= */
.assist-open {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 60;
  background: var(--ink); color: var(--ground); border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 1.15em 1.9em; min-block-size: 48px;
}
.assist-open:hover { background: var(--accent-deep); }
.assist {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 61;
  inline-size: min(23rem, calc(100vw - 2.5rem)); max-block-size: min(34rem, calc(100vh - 2.5rem));
  background: var(--ground); border: 1px solid var(--ink);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
/* A class-level display wins over the UA rule for [hidden], so the panel would
   render open on first paint. Restate it. Same for any [hidden] we set in JS. */
.assist[hidden], #checkout-done[hidden], #checkout-form[hidden],
#checkout-summary[hidden] { display: none; }
.assist-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); padding: var(--space-4); border-block-end: 1px solid var(--hairline); }
.assist-head b { display: block; font-weight: var(--weight-medium); }
.assist-head em { font-style: normal; font-size: .78rem; color: var(--ink-55); }
.assist-close { background: none; border: 0; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: var(--ink-55); min-block-size: 44px; min-inline-size: 44px; }
.assist-log { flex: 1; overflow-y: auto; padding: var(--space-4); display: grid;
  gap: .6rem; align-content: start; }
.msg { padding: .7em .9em; font-size: .88rem; line-height: 1.6; white-space: pre-wrap; max-inline-size: 92%; }
.msg.me { background: var(--ink); color: var(--ground); justify-self: end; }
.msg.bot { background: var(--band); justify-self: start; }
.msg.pending { opacity: .55; }
.assist-form { display: flex; gap: .5rem; padding: var(--space-4);
  border-block-start: 1px solid var(--hairline); }
.assist-form input { flex: 1; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--hairline); padding: .7em .8em; min-block-size: 44px; }
.assist-form input:focus { border-color: var(--ink); outline: none; }
.assist-form .btn { padding: 1em 1.2em; }
.assist-note { margin: 0; padding: 0 var(--space-4) var(--space-4);
  font-size: .68rem; color: var(--ink-38); }

@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cart-lines li { grid-template-columns: 70px 1fr auto; row-gap: .5rem; }
  .cart-lines img { inline-size: 70px; block-size: 94px; }
  .cl-total { grid-column: 2; }
  .summary { max-inline-size: none; margin-inline-start: 0; }
  .assist { inset-inline: 1rem; inline-size: auto; inset-block-end: 1rem; }
  .assist-open { inset-inline-end: 1rem; inset-block-end: 1rem; }
}

/* ================= journal ================= */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem,1fr));
  gap: clamp(2.2rem,4vw,3.2rem) clamp(1.4rem,2.4vw,2.4rem); }
.post figure { margin: 0 0 var(--space-4); overflow: hidden; aspect-ratio: 4/3; background: var(--band); }
.post img { inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--slow) var(--ease); }
.post:hover img { transform: scale(1.04); }
.post h3 { margin: .5rem 0 .35rem; font-size: 1.05rem; font-weight: var(--weight-medium); }
.post p { margin: 0; color: var(--ink-55); font-size: .88rem; }
.post-body { max-inline-size: 44rem; margin-inline: auto; }
.post-head { display: grid; gap: var(--space-3); margin-block-end: var(--space-6); }
.post-head h1 { margin: 0; font-weight: var(--weight-display); font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display); line-height: 1.15; }
.post-cover { margin: 0 0 var(--space-6); }
.post-cover img { inline-size: 100%; aspect-ratio: 3/2; object-fit: cover; }
.prose p { margin: 0 0 var(--space-5); font-size: 1.02rem; line-height: 1.85; }
.prose strong { font-weight: var(--weight-strong); }

/* ================= discount + coupon ================= */
.summary .discount { color: var(--accent-deep); }
.coupon { display: flex; gap: .5rem; margin-block-start: var(--space-4); }
.coupon input { flex: 1; font: inherit; font-size: .85rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--hairline); padding: .7em .8em;
  min-block-size: 44px; text-transform: uppercase; }
.coupon input:focus { border-color: var(--ink); outline: none; }
.coupon .btn { padding: 1em 1.3em; }
.coupon-msg { margin: .4rem 0 0; font-size: .78rem; min-block-size: 1rem; }
.coupon-msg.ok { color: var(--accent-deep); }
.coupon-msg.bad { color: var(--accent-deep); opacity: .8; }

/* ================= popup ================= */
.popup-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(26,20,24,.45); padding: var(--space-5); }
.popup { background: var(--ground); border: 1px solid var(--ink); position: relative;
  max-inline-size: 26rem; padding: clamp(1.75rem,4vw,2.75rem); display: grid; gap: var(--space-4); }
.popup h2 { margin: 0; font-size: 1.6rem; }
.popup p { margin: 0; color: var(--ink-55); }
.popup .btn { justify-self: start; }
.popup-x { position: absolute; inset-block-start: .25rem; inset-inline-end: .25rem;
  background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--ink-55); min-block-size: 44px; min-inline-size: 44px; }

/* ================= page banner ================= */
.page-banner { position:relative; block-size:min(46vh,22rem); overflow:hidden; }
.page-banner img { inline-size:100%; block-size:100%; object-fit:cover; }
.page-banner::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 45%, transparent 78%); }
.pb-copy { position:absolute; z-index:2; inset-inline-start:var(--gutter);
  inset-block-end:clamp(1.5rem,4vw,3rem); color:#fff; display:grid; gap:.5rem;
  max-inline-size:34rem; }
.pb-copy .lbl { color:rgba(255,255,255,.75); }
.pb-copy h1 { margin:0; font-weight:var(--weight-display); font-size:var(--text-2xl);
  letter-spacing:var(--tracking-display); line-height:1.12; text-wrap:balance; }

/* ================= cart icon ================= */
.cart { position:relative; background:none; border:0; cursor:pointer; color:inherit;
  padding:.4rem; display:inline-flex; align-items:center;
  min-block-size:44px; min-inline-size:44px; justify-content:center; }
.cart svg { inline-size:22px; block-size:22px; }
.cart-n { position:absolute; inset-block-start:2px; inset-inline-end:0;
  background:var(--accent-deep); color:#fff; font-family:var(--font-mono);
  font-size:.58rem; line-height:1; min-inline-size:16px; block-size:16px;
  border-radius:999px; display:grid; place-items:center; padding-inline:.25em; }
.cart[data-empty="1"] .cart-n { background:var(--ink-38); }

/* ================= product badges + quick action ================= */
.card { display:grid; gap:0; }
.card-link { display:block; }
.badge { position:absolute; inset-block-start:.75rem; inset-inline-start:.75rem;
  z-index:2; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; padding:.45em .7em; background:var(--ground);
  color:var(--ink); box-shadow:0 1px 6px rgba(58,31,42,.12); }
.b-new        { background:var(--ink); color:var(--ground); }
.b-bestseller { background:var(--accent-deep); color:#fff; }
.b-offer      { background:var(--brand-butter); color:var(--brand-cocoa); }
.b-limited    { background:var(--brand-mint); color:var(--brand-cocoa); }
.b-sold_out   { background:var(--ground); color:var(--ink-38); }
.card.is-sold figure img { opacity:.55; }

.quick { margin-block-start:.7rem; inline-size:100%; text-align:center;
  border:1px solid var(--hairline); background:var(--ground); color:var(--ink);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:var(--tracking-label);
  text-transform:uppercase; padding:.95em 1em; cursor:pointer; min-block-size:44px;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease); }
.quick:hover { background:var(--ink); color:var(--ground); border-color:var(--ink); }
.quick[disabled] { opacity:.6; cursor:default; }
.quick-off { display:block; color:var(--ink-38); cursor:default; }
.quick-off:hover { background:var(--ground); color:var(--ink-38); border-color:var(--hairline); }

/* ================= slide-out cart ================= */
body.no-scroll { overflow:hidden; }
.mini-wrap { position:fixed; inset:0; z-index:80; background:rgba(26,20,24,.4);
  display:flex; justify-content:flex-end; }
.mini-wrap[hidden] { display:none; }
.mini { background:var(--ground); inline-size:min(24rem,100vw); block-size:100vh;
  display:flex; flex-direction:column; border-inline-start:1px solid var(--ink); }
.mini header { display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 1.25rem; border-block-end:1px solid var(--hairline); }
.mini h2 { margin:0; font-size:1.05rem; font-weight:var(--weight-medium); }
.mini-x { background:none; border:0; font-size:1.5rem; cursor:pointer;
  color:var(--ink-55); min-block-size:44px; min-inline-size:44px; }
/* flex:1 here stretched the body to fill the drawer, which pushed the coupon
   form to the very bottom of the screen — on a tall phone with one item in the
   cart that left a screen-height gap between the buttons and the coupon, and
   the coupon fell below the fold. min-height:0 keeps it scrollable when the
   cart is long; flex-grow:0 stops it padding out when the cart is short. */
.mini-body { flex:0 1 auto; min-block-size:0; overflow-y:auto; padding:1.25rem;
  display:grid; gap:1.25rem; align-content:start; }
.mini-lines { list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.mini-lines li { display:grid; grid-template-columns:64px 1fr auto; gap:.8rem;
  align-items:center; }
.mini-lines img { inline-size:64px; block-size:86px; object-fit:cover; background:var(--band); }
.mini-lines b { display:block; font-size:.88rem; font-weight:var(--weight-medium); }
.mini-lines .price { font-family:var(--font-mono); font-size:.74rem; color:var(--ink-55); }
.mini-sums { display:grid; gap:.45rem; border-block-start:1px solid var(--hairline);
  padding-block-start:.9rem; }
.mini-sums .row { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; }
.mini-sums .row b { font-family:var(--font-mono); font-weight:400; }
.mini-sums .discount { color:var(--accent-deep); }
.mini-sums .total { border-block-start:1px solid var(--hairline); padding-block-start:.5rem;
  font-size:1rem; }
.mini-go { display:grid; gap:.5rem; }
.mini-go .btn { text-align:center; }
.btn-go { background:var(--ink); color:var(--ground); border-color:var(--ink); }
.btn-go:hover { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }

@media (max-width:640px){
  .page-banner { block-size:min(38vh,15rem); }
  .mini { inline-size:100vw; }
}

/* ---------- product page buy block ---------- */
.pdp-buy { display:grid; gap:.6rem; justify-items:start; margin-block-start:var(--space-3); }
.pdp-badge { position:static; box-shadow:none; }
.quick-lg { inline-size:auto; min-inline-size:min(18rem,100%); padding:1.15em 2.6em;
  font-size:.66rem; }
.stock-note { margin:0; font-size:.78rem; color:var(--ink-55); }

/* ================= brand patterns (from the design system) ================= */
.pb-pattern { display:grid; place-items:start; align-content:end; overflow:hidden; }
.pb-pattern .pb-copy { position:relative; inset:auto; padding:var(--gutter);
  padding-block-start:0; color:var(--brand-cocoa); }
.pb-pattern .pb-copy .lbl { color:rgba(58,31,42,.55); }
.pb-pattern::after { content:none; }

.pat-candy-dots {
  background-color:var(--brand-baby-pink);
  background-image:
    radial-gradient(var(--brand-cream) 14px, transparent 15px),
    radial-gradient(var(--brand-butter) 10px, transparent 11px),
    radial-gradient(var(--brand-hot-pink) 7px, transparent 8px),
    radial-gradient(var(--brand-mint) 8px, transparent 9px);
  background-size:220px 220px;
  background-position:30px 40px,140px 120px,90px 190px,190px 30px;
}
.pat-candy-stripes {
  background:repeating-linear-gradient(45deg,
    var(--brand-hot-pink) 0 28px, var(--brand-baby-pink) 28px 56px, var(--brand-cream) 56px 84px);
}
/* Every pattern gets the copy on a cream card. The patterns are busy by
   design — that is the point of them — so the words need their own ground.
   The hard offset shadow is the brand's, from the design system. */
.pb-pattern .pb-copy {
  background:var(--brand-cream); padding:1.1rem 1.4rem; margin:var(--gutter);
  box-shadow:4px 4px 0 var(--brand-baby-pink);
}
.pat-pink-dots {
  background-color:var(--brand-hot-pink);
  background-image:radial-gradient(rgba(247,199,220,.45) 12px, transparent 13px);
  background-size:110px 110px;
}
.pat-melt { background:var(--brand-hot-pink); }
.pb-melt { position:absolute; inset:0; font-family:"Caveat",cursive; font-weight:600;
  font-size:1.8rem; line-height:1.5; color:var(--brand-baby-pink); padding:.4rem .8rem;
  overflow:hidden; word-spacing:.3em; }
.pat-monogram { background:var(--brand-cream); }
.pb-mono { position:absolute; inset:0; font-family:var(--font-logo); color:var(--brand-hot-pink);
  font-size:1.5rem; line-height:2.2; padding:.3rem .8rem; letter-spacing:.4em;
  overflow:hidden; opacity:.5; }
.pat-sparkle { background:var(--brand-mint); }
.pb-sparkle { position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 28%, var(--brand-hot-pink) 5px, transparent 6px),
    radial-gradient(circle at 34% 68%, var(--brand-butter) 4px, transparent 5px),
    radial-gradient(circle at 61% 22%, var(--brand-cream) 6px, transparent 7px),
    radial-gradient(circle at 82% 60%, var(--brand-hot-pink) 4px, transparent 5px),
    radial-gradient(circle at 48% 44%, var(--brand-cream) 3px, transparent 4px);
  background-size:340px 200px; }

/* ================= language icon + home ================= */
.lang { display:inline-flex; align-items:center; gap:.4rem; }
.lang svg { inline-size:17px; block-size:17px; }
.lang-code { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; }

/* ================= filters ================= */
.filters { display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.5rem);
  padding-block-end:var(--space-5); margin-block-end:var(--space-6);
  border-block-end:1px solid var(--hairline); }
.filters fieldset { border:0; margin:0; padding:0; display:grid; gap:.5rem; }
.filters legend { padding:0; margin-block-end:.35rem; }
.filters label { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-size:.85rem; min-block-size:32px; }
.filters input { accent-color:var(--accent-deep); }
.empty-filter { color:var(--ink-55); padding-block:2rem; }
.empty-filter[hidden] { display:none; }
.card[hidden] { display:none; }

/* ================= related ================= */
.related { padding-block-start:0; }
.grid-rel { grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); }

@media (max-width:640px){
  .filters { gap:1.1rem; }
  .pb-melt, .pb-mono { font-size:1.2rem; }
}

/* ================= hero reel ================= */
.hero-reel {
  position: absolute; z-index: 3;
  inset-inline-end: var(--gutter); inset-block-end: clamp(2.5rem, 6vw, 5rem);
  inline-size: clamp(9rem, 15vw, 13rem);
  margin: 0; aspect-ratio: 9/16; overflow: hidden;
  background: var(--brand-cocoa);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.6);
}
.hero-reel[hidden] { display: none; }
.hero-reel video {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  /* Grading, applied at playback rather than baked in: phone footage runs cool
     and flat, and the site is warm and quiet. No re-encode, so no second
     generation of compression loss — and it can be retuned in one line. */
  filter: saturate(.86) contrast(1.06) brightness(1.03) sepia(.08);
}
.reel-cap { position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: .6rem .75rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent); }
.reel-cap .lbl { color: rgba(255,255,255,.85); font-size: .55rem; }
.reel-mute { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
  inline-size: 34px; block-size: 34px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; }
.reel-mute svg { inline-size: 18px; block-size: 18px; }
.reel-mute.is-on .reel-x { display: none; }
.reel-mute[hidden] { display: none; }

@media (max-width: 900px) { .hero-reel { display: none; } }

/* ================= favourites ================= */
.favs-link { position: relative; display: inline-flex; align-items: center;
  justify-content: center; min-block-size: 44px; min-inline-size: 44px; }
.favs-link svg { inline-size: 20px; block-size: 20px; }
.favs-n { position: absolute; inset-block-start: 4px; inset-inline-end: 0;
  background: var(--accent-deep); color: #fff; font-family: var(--font-mono);
  font-size: .56rem; line-height: 1; min-inline-size: 15px; block-size: 15px;
  border-radius: 999px; display: grid; place-items: center; padding-inline: .2em; }
.favs-n[hidden] { display: none; }

.fav { position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem; z-index: 3;
  inline-size: 34px; block-size: 34px; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.9); display: grid; place-items: center;
  transition: transform var(--fast) var(--ease); }
.fav svg { inline-size: 17px; block-size: 17px; fill: none;
  stroke: var(--ink-55); stroke-width: 1.5; transition: fill var(--fast), stroke var(--fast); }
.fav:hover { transform: scale(1.08); }
.fav.is-on svg { fill: var(--accent-deep); stroke: var(--accent-deep); }

.pdp-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }
.fav-lg { position: static; inline-size: auto; block-size: auto;
  min-block-size: 44px; padding-inline: 1.2em; gap: .5rem;
  grid-auto-flow: column; background: none; border: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); }
.fav-lg:hover { transform: none; background: var(--band); }

/* ================= subscription ================= */
.sub-opt { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1px solid var(--hairline); padding: 1rem; background: var(--band);
  min-block-size: 44px; }
.sub-opt input { margin-block-start: .3rem; accent-color: var(--accent-deep); }
.sub-opt b { display: block; font-weight: var(--weight-medium); font-size: .92rem; }
.sub-opt em { font-style: normal; color: var(--ink-55); font-size: .8rem; }
.done-sub { border-block-start: 1px solid var(--hairline); padding-block-start: var(--space-4);
  margin-block-start: var(--space-3); display: grid; gap: .3rem; }

/* ================= language toggle (quiet) ================= */
.lang { border: 0; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .18rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  min-block-size: 44px; color: var(--ink-38); }
.lang:hover { background: none; color: var(--ink); }
.lang-on { color: var(--ink); }
.lang-sep { opacity: .45; }
.lang-off { transition: color var(--fast); }
.lang:hover .lang-off { color: var(--accent-deep); }

/* ================= cart (lighter) ================= */
.cart svg { inline-size: 20px; block-size: 20px; }
.cart-n { inset-block-start: 4px; inset-inline-end: 2px; background: var(--accent-deep);
  min-inline-size: 15px; block-size: 15px; font-size: .55rem; }
.cart-n[hidden] { display: none; }

/* ================= banner: let the pattern breathe ================= */
.pb-pattern { position: relative; }
/* The patterns are packaging artwork — at full strength behind a heading they
   fight it. A cream veil keeps them recognisable and lets the type lead. */
.pb-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--ground) 62%, transparent);
}
.pb-pattern .pb-copy { z-index: 2; }
/* The text patterns are the densest of the six. At the strength the geometric
   ones can carry, the words compete with the heading instead of sitting behind
   it — so they run lighter. All six should read as texture, not as content. */
.pb-sparkle { opacity: .75; }
.pb-melt, .pb-mono { opacity: .38; }
.pb-pattern .pb-copy { background: none; box-shadow: none; margin: 0;
  padding: var(--gutter); padding-block-start: 0; }

/* ================= shop: filters in a sidebar ================= */
.shop-layout { display: grid; grid-template-columns: 13rem 1fr;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.side-filters { position: sticky; inset-block-start: var(--space-5); }
.filters { display: grid; gap: var(--space-5); padding: 0; margin: 0; border: 0; }
.filters-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding-block-end: .6rem; border-block-end: 1px solid var(--hairline); }
.filters-reset { background: none; border: 0; cursor: pointer; color: var(--ink-38);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .2rem; }
.filters-reset:hover { color: var(--accent-deep); }
.filters fieldset { display: grid; gap: .35rem; }
.result-count { margin: 0 0 var(--space-5); font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .14em; color: var(--ink-38); text-transform: uppercase; }

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }
  .side-filters { position: static; }
  .filters { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    padding-block-end: var(--space-5); border-block-end: 1px solid var(--hairline); }
  .filters-head { grid-column: 1 / -1; }
}

/* ================= discount row, offer name on its own line ================= */
.offer-name { margin: -.15rem 0 .35rem; font-size: .72rem; color: var(--ink-38);
  line-height: 1.4; text-wrap: pretty; }
.summary .row, .mini-sums .row { align-items: baseline; }
.summary .row b, .mini-sums .row b { white-space: nowrap; }
.summary .row span, .mini-sums .row span { min-inline-size: 0; }

/* ================= coupon in the slide-out ================= */
.mini-coupon { display: flex; gap: .5rem; padding: 0 var(--space-5);
  padding-block-start: var(--space-4); border-block-start: 1px solid var(--hairline); }
.mini-coupon input { flex: 1; min-inline-size: 0; font: inherit; font-size: .82rem;
  border: 1px solid var(--hairline); padding: .6em .7em; min-block-size: 40px;
  text-transform: uppercase; background: var(--ground); color: var(--ink); }
.mini-coupon input:focus { border-color: var(--ink); outline: none; }
.mini-coupon .btn { padding: .9em 1.1em; }
#mini-coupon-msg { margin: .35rem var(--space-5) 0; }

/* ================= assistant greeting ================= */
.assist-chips { display: grid; gap: .4rem; margin-block-start: .2rem; }
.assist-chip { text-align: start; background: none; border: 1px solid var(--hairline);
  padding: .55em .8em; font-size: .8rem; cursor: pointer; color: var(--ink);
  min-block-size: 38px; transition: background var(--fast), border-color var(--fast); }
.assist-chip:hover { background: var(--band); border-color: var(--accent-deep); }

/* ================= header ================= */
/* Sticky: the shop and journal are long pages, and losing the cart and the nav
   the moment you scroll is the most common reason people leave a basket. */
.site-head { position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid var(--hairline); }

.site-head nav { gap: var(--space-5); padding-block: var(--space-4); }

/* The three controls are one cluster, not three sections. They were spaced with
   the nav's global 48px gap, which read as separate groups. */
.head-tools { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.links { margin-inline-start: auto; gap: var(--space-6); }

/* Where you are. The style existed; nothing set the attribute until now. */
.links a[aria-current="page"] { border-block-end-color: var(--accent); color: var(--ink); }

/* ---- burger ---- */
.burger { display: none; background: none; border: 0; cursor: pointer;
  inline-size: 44px; block-size: 44px; padding: 10px 9px;
  flex-direction: column; justify-content: space-between; }
.burger span { display: block; block-size: 1.5px; background: var(--ink);
  transition: transform var(--fast) var(--ease), opacity var(--fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---- mobile menu ---- */
.mobile-menu { position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 39; background: var(--ground); padding: 6.5rem var(--gutter) 2rem;
  block-size: 100vh; overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mm-links { display: grid; gap: 0; }
.mm-links a { padding-block: 1.1rem; font-size: 1.15rem;
  border-block-end: 1px solid var(--hairline); min-block-size: 44px;
  display: flex; align-items: center; }
.mm-links a[aria-current="page"] { color: var(--accent-deep); }

@media (max-width: 860px) {
  /* flex-shrink 0: with the account icon aboard, the row can overflow a
     phone's width — and the squeezed-to-zero item was the burger itself. */
  .burger { display: flex; flex: 0 0 44px; }
  .links { display: none; }
  /* Bagel Fat One is wide; at the desktop size "The Body Melt" wraps to two
     lines on a phone and the header grows a row. */
  .logo { font-size: 1.28rem; white-space: nowrap; }
  .site-head nav { gap: var(--space-4); }
  /* The logo sits between the burger and the tools, so it needs the middle. */
  .site-head nav > .logo { margin-inline-end: auto; }
  .head-tools { gap: 0; flex-shrink: 0; }
}
@media (max-width: 480px) {
  /* The account still has a home — inside the burger menu. */
  .head-tools .acct-link { display: none; }
  .site-head nav { gap: var(--space-3); }
}
@media (min-width: 861px) { .mobile-menu { display: none !important; } }

/* Filter controls on a phone. A radio input is 13px whatever you do to it — the
   label around it is the real hit target, so that is what has to reach 44px.
   The Clear button was 18px, which is a thumb-sized miss on a small screen. */
@media (max-width: 860px) {
  .filters label { min-block-size: 44px; padding-block: .3rem; }
  .filters-reset { min-block-size: 44px; padding-inline: .6rem; display: inline-flex;
    align-items: center; }
}

/* The heart is 34px, which is fine with a mouse and a miss with a thumb —
   and it sits close to the card's own link, so a near-miss navigates instead. */
@media (max-width: 860px) {
  .fav { inline-size: 44px; block-size: 44px; inset-block-start: .4rem; inset-inline-end: .4rem; }
  .fav svg { inline-size: 19px; block-size: 19px; }
}

/* The touch-target rules were written at 640px, but the header switches to the
   burger layout at 860px — so between those two widths the logo link was 20px
   tall. Breakpoints that disagree are how gaps like this survive review. */
@media (max-width: 860px) {
  .logo { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* The coupon Apply button sits inside a flex row, so the .btn padding alone
   left it at 35px — under the thumb target on every screen, not just phones. */
.mini-coupon .btn, .mini-coupon input { min-block-size: 44px; }
.mini-coupon .btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- brand stickers ----------
   Brand kit page 9. Pill-shaped stamps in the display face, each with a hard
   offset shadow so it reads as something stuck on rather than printed in.
   These carry the brand's voice — "melt me!", "hand poured" — which is why the
   add-to-cart button no longer does. A phrase repeated on eight buttons stops
   being a phrase and becomes furniture. */
.sticker {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-logo); font-size: .82rem; line-height: 1;
  padding: .62em 1.15em; border-radius: 999px;
  background: var(--accent); color: #fff;
  box-shadow: 4px 4px 0 rgba(26, 20, 24, .12);
  transform: rotate(-2deg);
  white-space: nowrap;
}
/* Arabic display type has no Bagel equivalent, and forcing it produces
   fake-bold mush. Arabic stickers use the body face, tightened up. */
[dir="rtl"] .sticker {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0;
  transform: rotate(2deg);
}
.sticker-mint   { background: var(--brand-mint);   color: var(--ink); }
.sticker-butter { background: var(--brand-butter); color: var(--ink); }
.sticker-soft   { background: var(--accent-soft, #F7C9DC); color: var(--accent-deep); }
.sticker-cream  { background: var(--ground); color: var(--accent); }

/* Mono-face stamps — the all-caps ones in the kit read as stamped, not written */
.sticker-stamp {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* On a photograph, over the corner of the frame */
.sticker-on-photo {
  position: absolute; z-index: 3;
  inset-block-start: .8rem; inset-inline-start: .8rem;
}

/* A row of them, e.g. under the hero copy or in the footer */
.sticker-row {
  display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center;
  padding: 0; margin: 0; list-style: none;
}
.sticker-row .sticker:nth-child(even) { transform: rotate(1.5deg); }
[dir="rtl"] .sticker-row .sticker:nth-child(even) { transform: rotate(-1.5deg); }

@media (prefers-reduced-motion: reduce) {
  .sticker { transform: none; }
}

/* ---------- filters as a bottom sheet on phones ----------
   The sidebar stacked above the grid on mobile: six skin types, four lines,
   price and availability pushed the products a screen and a half down. The
   same form now lives in a sheet that slides up, so the products are the first
   thing on the page and filtering is one deliberate tap. */
.filter-open, .sheet-head, .sheet-go, .sheet-veil { display: none; }

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }

  .filter-open {
    display: inline-flex; align-items: center; gap: .5rem;
    position: sticky; inset-block-start: calc(var(--head-h, 3.6rem) + .5rem);
    z-index: 40; margin-block-end: var(--space-5);
    min-block-size: 44px; padding-inline: 1.1rem;
    font-family: var(--font-mono); font-size: .66rem;
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    background: var(--ground); color: var(--ink);
    border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer;
  }
  .filter-n {
    display: inline-grid; place-items: center;
    min-inline-size: 1.35rem; min-block-size: 1.35rem;
    border-radius: 999px; background: var(--accent); color: #fff;
    font-size: .62rem;
  }

  .side-filters {
    position: fixed; z-index: 90;
    /* The desktop rule sets inset-block-start for the sticky sidebar. Leave it
       set and it wins over inset-block-end here, so the sheet anchors to the
       top of the viewport and slides only part of the way out — 121px of it
       stayed on screen while it was supposedly closed. */
    inset-block-start: auto;
    inset-inline: 0; inset-block-end: 0;
    max-block-size: 82vh; overflow-y: auto;
    background: var(--ground);
    border-start-start-radius: 1.1rem; border-start-end-radius: 1.1rem;
    padding: 0 var(--gutter) var(--space-6);
    box-shadow: 0 -8px 40px rgba(26,20,24,.18);
    /* Slid out of view rather than hidden, so it can animate and so the inputs
       stay in the form — a display:none panel still submits its values. */
    transform: translateY(101%);
    transition: transform var(--slow) var(--ease);
  }
  .side-filters[data-open="true"] { transform: translateY(0); }

  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; inset-block-start: 0; z-index: 1;
    padding-block: var(--space-5); background: var(--ground);
    border-block-end: 1px solid var(--hairline); margin-block-end: var(--space-5);
  }
  .sheet-x { background: none; border: 0; font-size: 1.5rem; cursor: pointer;
    color: var(--ink-55); min-block-size: 44px; min-inline-size: 44px; }
  /* Stick the primary action to the foot of the sheet. Left in the flow it sat
     below eleven filter rows, so confirming a choice meant scrolling past every
     option you had just decided against. */
  .sheet-go {
    display: block; position: sticky; inset-block-end: 0;
    margin-block-start: var(--space-6); padding-block: var(--space-4);
    background: var(--ground); border-block-start: 1px solid var(--hairline);
  }
  .sheet-go .btn { inline-size: 100%; text-align: center; min-block-size: 48px;
    display: inline-flex; align-items: center; justify-content: center; }

  .sheet-veil {
    display: block; position: fixed; inset: 0; z-index: 89;
    background: rgba(26,20,24,.4);
  }
  .sheet-veil[hidden] { display: none; }

  .filters { gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .side-filters { transition: none; }
}

/* ---------- quantity stepper ----------
   Unstyled buttons came out 24x22 — well under a thumb. The row reads as one
   control: a hairline box with the number boxed in between, so it is obvious
   the minus and plus belong to that line and not to the one above it. */
.qty {
  display: inline-flex; align-items: center;
  margin-block-start: .5rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; direction: ltr;      /* − 2 + reads the same either language */
}
.qty-b {
  min-inline-size: 40px; min-block-size: 40px;
  display: inline-grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--ink);
  transition: background var(--fast) var(--ease);
}
.qty-b:hover { background: var(--band); }
.qty-n {
  min-inline-size: 2.2rem; text-align: center;
  font-family: var(--font-mono); font-size: .82rem;
  border-inline: 1px solid var(--hairline);
  align-self: stretch; display: grid; place-items: center;
}
@media (max-width: 860px) {
  .qty-b { min-inline-size: 44px; min-block-size: 44px; }
}
/* The cart page lays lines out in a grid; the stepper takes its own column. */
.cart-lines .qty { margin-block-start: 0; }

/* ---------- where the stickers sit ----------
   One per section, each earning its place, rather than a row of them lined up
   like a badge shelf. A sticker reads as something someone stuck on; six of
   them in a line reads as a navigation bar. */

/* On the hero, in the corner the copy does not occupy. */
.sticker-on-hero {
  position: absolute; z-index: 3;
  inset-block-start: clamp(1.2rem, 4vw, 2.5rem);
  inset-inline-end: clamp(1.2rem, 4vw, 3rem);
  font-size: clamp(.85rem, .7rem + .5vw, 1.15rem);
}

/* Beside a section heading, sitting on the baseline of the label above it. */
.head-sticker { margin: .2rem 0 0; }

/* On a photograph — the figure needs to be the positioning context. */
.band-fig { position: relative; margin: 0; }
.band-fig img { inline-size: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* Trailing a "view all" link, so the row ends in the brand's own voice. */
.more .sticker { margin-inline-start: var(--space-5); vertical-align: middle; }

@media (max-width: 640px) {
  /* The hero sticker competes with the burger at phone width; drop it below the
     header line rather than letting two things fight for the same corner. */
  .sticker-on-hero { inset-block-start: auto; inset-block-end: 1rem;
    inset-inline-end: 1rem; }
  .more .sticker { display: block; margin: var(--space-5) 0 0; }
}

/* ---------- consultation nudge ----------
   Offered where someone is actually hesitating: on a product page under the
   buy button, and in the empty state when filters return nothing. Quiet by
   design — a nudge that shouts is an interruption. */
.consult-nudge {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-block-start: var(--space-5); padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--hairline);
  font-size: .88rem; color: var(--ink-55);
}
.consult-nudge em { font-style: normal; font-size: .78rem; color: var(--ink-38);
  flex-basis: 100%; }
.consult-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent-deep); font-weight: var(--weight-medium);
  border-block-end: 1.5px solid currentColor;
  min-block-size: 44px;
}
.empty-filter .consult-btn { display: block; margin: var(--space-5) auto 0; }

/* ---------- newsletter ----------
   Added because the assistant was about to tell people to sign up and there
   was nowhere to do it. A promise needs somewhere to land. */
.news {
  display: grid; gap: var(--space-5);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--hairline);
}
.news h3 { margin: 0; font-size: 1.15rem; font-weight: var(--weight-medium); }
.news-row { display: flex; flex-wrap: wrap; gap: .6rem; max-inline-size: 30rem; }
.news-row input {
  flex: 1; min-inline-size: 12rem; min-block-size: 48px;
  font: inherit; font-size: .9rem; padding-inline: .9rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--ground); color: var(--ink);
}
.news-row input:focus { border-color: var(--ink); outline: none; }
.news-row .btn { min-block-size: 48px; display: inline-flex; align-items: center; }
.news-msg { margin: 0; font-size: .85rem; min-block-size: 1.2em; }
.news-msg.ok  { color: var(--accent-deep); }
.news-msg.bad { color: var(--ink-55); }
@media (min-width: 700px) {
  .news { grid-template-columns: 1fr auto; align-items: center; }
  .news-msg { grid-column: 1 / -1; }
}

/* ---------- the logo melts in ----------
   The same drop-and-drip from the coming-soon page, moved into the header.
   TWO CHANGES from the original, both deliberate:

   1. It runs ONCE, not on an infinite loop. Eight seconds repeating forever in
      a sticky header on every page is not delight, it is a tic — and it repaints
      a fixed element for as long as the tab is open.
   2. The drip is scaled to header size. At hero scale it hung past the nav.

   Letters are <i> so each can be delayed; the delays are nth-child rules rather
   than inline custom properties because the CSP forbids inline style. */

.melt-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Reserve the drip's space so nothing below it shifts when it appears. */
  padding-block-end: 4px;
}
.melt-logo .melt-word { display: inline-flex; }
.melt-logo i {
  font-style: normal;
  display: inline-block;
  opacity: 0;
  animation: logo-drop .62s cubic-bezier(.34, 1.4, .5, 1) forwards;
}
.melt-logo .sp { inline-size: .28em; }

/* Stagger. Thirteen glyphs including the two spaces. */
.melt-logo i:nth-child(1)  { animation-delay: .05s }
.melt-logo i:nth-child(2)  { animation-delay: .09s }
.melt-logo i:nth-child(3)  { animation-delay: .13s }
.melt-logo i:nth-child(4)  { animation-delay: .17s }
.melt-logo i:nth-child(5)  { animation-delay: .21s }
.melt-logo i:nth-child(6)  { animation-delay: .25s }
.melt-logo i:nth-child(7)  { animation-delay: .29s }
.melt-logo i:nth-child(8)  { animation-delay: .33s }
.melt-logo i:nth-child(9)  { animation-delay: .37s }
.melt-logo i:nth-child(10) { animation-delay: .41s }
.melt-logo i:nth-child(11) { animation-delay: .45s }
.melt-logo i:nth-child(12) { animation-delay: .49s }
.melt-logo i:nth-child(13) { animation-delay: .53s }

@keyframes logo-drop {
  0%   { transform: translate3d(0, -.3em, 0) scale3d(.94, 1.08, 1); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* The drip forms under the T of Melt, then one drop falls off it. */
/* Sized in px, not em. The em ratios were tuned on the coming-soon page where
   the wordmark is hero-sized; against the header's 20px font they produced a
   1.7px drop — invisible, which Mostafa reported as "hidden or eaten". A drip
   has a physical size; it does not shrink with the type around it. */
.melt-logo .melt-drip,
.melt-logo .melt-drop {
  position: absolute;
  inset-inline-end: 2px;
  background: currentColor;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.melt-logo .melt-drip {
  inset-block-end: -2px;
  inline-size: 4px; block-size: 9px;
  /* Tapers: full width where it meets the letter, narrowing to a tail —
     a closed rounded rectangle read as a stub, not as liquid. */
  border-radius: 40% 40% 70% 70% / 15% 15% 85% 85%;
  transform-origin: 50% 0;
  /* Forms, holds while the drop falls, then retracts. Left with forwards on
     the grown state it hung under the T permanently, which reads as a
     rendering fault rather than a detail. */
  animation: logo-ooze 1.5s cubic-bezier(.4, 0, .6, 1) .62s forwards;
}
.melt-logo .melt-drop {
  inset-block-end: -10px;
  inline-size: 5px; block-size: 7px;
  /* A perfect circle is geometry, not liquid — Mostafa's note. A drop is a
     teardrop: pointed where it let go, full at the bottom. Small vertical
     radii up top, large below. */
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  animation: logo-fall .62s cubic-bezier(.42, 0, 1, 1) 1.02s forwards;
}
@keyframes logo-ooze {
  0%   { transform: scaleY(.15); opacity: 0; }
  33%  { transform: scaleY(1);   opacity: 1; }   /* formed, drop about to go */
  66%  { transform: scaleY(1);   opacity: 1; }   /* holds while it falls */
  100% { transform: scaleY(.1);  opacity: 0; }   /* retracts, gone */
}
@keyframes logo-fall {
  /* Swells out of the drip, stretches long mid-fall — falling liquid
     elongates, it does not stay round — then relaxes as it fades. */
  0%   { transform: translate3d(0, 0, 0) scale(.6, .45);        opacity: 0; }
  18%  { transform: translate3d(0, 2px, 0) scale(1, 1);         opacity: 1; }
  55%  { transform: translate3d(0, 7px, 0) scale(.82, 1.35);    opacity: 1; }
  100% { transform: translate3d(0, 14px, 0) scale(.75, 1.05);   opacity: 0; }
}

/* Motion is decoration here. Without it the logo must simply be there. */
@media (prefers-reduced-motion: reduce) {
  .melt-logo i { opacity: 1; animation: none; }
  .melt-logo .melt-drip, .melt-logo .melt-drop { display: none; }
}

/* ---------- assistant links ----------
   The row of doors under a bot answer: product pages and journal articles.
   Chip-shaped so they read as actions, not as underlined words in a sentence. */
.assist-links {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: .35rem 0 .6rem;
}
.assist-links { align-items: flex-start; }
.assist-links a {
  font-size: .78rem; font-weight: var(--weight-medium); line-height: 1.3;
  color: var(--accent-deep);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .45em 1em;
  /* block-size, not min-: inside the chat log the anchors were inheriting a
     stretch and rendering 101px tall — buttons the size of the message. */
  block-size: 40px; display: inline-flex; align-items: center;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.assist-links a:hover { border-color: var(--accent-deep); background: var(--band); }

/* ---------- sizes: one tap, not a dropdown ---------- */
.pdp-weight { margin: 0; color: var(--ink-55); }
.sizes { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sizes legend { padding: 0; margin-block-end: .4rem; }
.size-opt { display: flex; align-items: center; gap: .6rem; cursor: pointer;
  border: 1px solid var(--hairline); padding: .7rem .9rem; min-block-size: 48px;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.size-opt:hover { border-color: var(--ink-38); }
.size-opt.is-on { border-color: var(--ink); background: var(--band); }
.size-opt input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); }
.size-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.size-name { font-weight: var(--weight-medium); }
.size-price { margin-inline-start: auto; font-family: var(--font-mono);
  font-size: .85rem; color: var(--ink-55); }
.size-opt.is-on .size-price { color: var(--ink); }
/* the chosen size, under the product name in cart lines */
.cl-size { display: block; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .05em; color: var(--ink-55); margin-block-start: .15rem; }

/* ---------- 404 ---------- */
.notfound { max-inline-size: 42rem; }
.notfound .btn { margin-inline-end: .6rem; }
.dashed-rule { border: 0; border-block-start: 2px dashed var(--hairline);
  margin-block: var(--space-6); }