/* 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?v=c06fb98f");

*, *::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-3); }
.foot-social a { display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; color: var(--ink-55); border-radius: 999px; }
.foot-social a svg { inline-size: 22px; block-size: 22px; display: block; }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--accent-deep); background: var(--band); }
/* Visually hidden, still read by crawlers and screen readers. */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.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.05em 1.6em; min-block-size: 48px;
  display: inline-flex; align-items: center; gap: .6em; line-height: 1;
}
.assist-mark { inline-size: 19px; block-size: 19px; flex: none; display: block; }
/* DM Mono has no Arabic glyphs, so the Arabic label would silently fall out of
   the brand into whatever the browser had lying around. Alexandria is the
   Arabic face everywhere else on the site; uppercase and mono tracking do
   nothing for Arabic but cost it its joins, so both come off here. */
[dir="rtl"] .assist-open {
  font-family: var(--font-arabic); font-size: .82rem; font-weight: 300;
  letter-spacing: 0; text-transform: none;
}
.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); color: var(--voice-bot); 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); color:#fff; }
.b-offer      { background:var(--brand-butter); color:var(--brand-cocoa); }
.b-limited    { background:var(--brand-mint); color:var(--brand-cocoa); }
/* New and Sold out are stickers, not chips — see badge_html() in the build.
   The chip class is kept so an old build or a script cannot render nothing. */
.b-sold_out   { background:var(--ground); color:var(--accent); }
.card .sticker-on-photo { inset-block-start: .75rem; inset-inline-start: .75rem; }
.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); }

/* ================= reviews ================= */
/* Stars: brand pink lit, white unlit, cocoa outline on both — the same
   language as the Melt Match drops. The half star is an SVG gradient whose
   stops take their colour from these two classes, so a palette change moves
   the stars with it. */
:root { --star-on: var(--accent); --star-off: var(--ground); --star-line: var(--ink); }
.st-on  { stop-color: var(--star-on); }
.st-off { stop-color: var(--star-off); }
.stars { display: inline-flex; gap: .1rem; vertical-align: middle; }
.st { inline-size: 1em; block-size: 1em; }
.st path { stroke: var(--star-line); stroke-width: 1.3; stroke-linejoin: round; fill: var(--star-off); }
.st-full path { fill: var(--star-on); }
.st-half path { fill: url(#tbm-star-half); }

/* The row on a card and under a bar's price. Hidden until the summary says
   there is something to show — no reviews is not zero stars. */
.rating { margin: .35rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-55);
  direction: ltr; justify-content: flex-start; }
/* One line, always: on a two-column phone grid "No reviews yet" does not fit
   beside the stars, so it drops under them whole rather than breaking mid-way
   and dragging the stars off centre. */
.rating-n { white-space: nowrap; }
[dir="rtl"] .rating { direction: rtl; }
.rating[hidden] { display: none; }
.rating .stars { font-size: .82rem; }
.rating em { font-style: normal; color: var(--ink-38); }
.rating a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.rating a:hover .rating-n { color: var(--ink); }
.pdp-rating { margin: 0; font-size: .78rem; }
.pdp-rating .stars { font-size: 1rem; }

.reviews { padding-block-start: 0; }
.home-bundles { padding-block-end: clamp(2rem, 4vw, 4rem); }
.reviews .head { margin-block-end: var(--space-6); }
.rv-summary { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-5) var(--space-6);
  align-items: center; max-inline-size: 40rem; margin-block-end: var(--space-6);
  padding: var(--space-5); border: 1px solid var(--hairline); }
.rv-summary[hidden] { display: none; }
.rv-avg { display: grid; justify-items: center; gap: .2rem; }
.rv-avg b { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 400; line-height: 1; direction: ltr; }
.rv-avg-stars { display: grid; gap: .4rem; }
.rv-avg-stars .stars { font-size: 1.15rem; }
.rv-avg-stars .sub { font-size: .82rem; }
.rv-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; min-inline-size: 11rem; }
.rv-bar { display: grid; grid-template-columns: 1.2rem 1fr 1.6rem; gap: .5rem; align-items: center;
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-55); }
.rv-bar-k::after { content: "★"; color: var(--ink-38); margin-inline-start: .1em; }
.rv-bar-track { display: block; block-size: .45rem; background: var(--band); overflow: hidden; }
.rv-bar-fill { display: block; block-size: 100%; inline-size: 0; background: var(--accent);
  transition: inline-size var(--slow) var(--ease); }
.rv-bar-n { text-align: end; }

.rv-list { display: grid; gap: 0; max-inline-size: 48rem; margin-block-end: var(--space-7); }
.rv { padding-block: var(--space-5); border-block-start: 1px solid var(--hairline); display: grid; gap: .5rem; }
.rv:last-child { border-block-end: 1px solid var(--hairline); }
.rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: .82rem; }
.rv-top .stars { font-size: .9rem; }
.rv-who { font-weight: var(--weight-medium); }
.rv-noname { color: var(--ink-55); font-weight: var(--weight-body); font-style: italic; }
.rv-verified { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--brand-mint); color: var(--brand-cocoa); padding: .3em .6em; margin-inline-start: .3rem; }
.rv-when { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-38); margin-inline-start: auto; }
.rv-title { margin: 0; font-size: 1rem; font-weight: var(--weight-strong); }
.rv-body { margin: 0; max-inline-size: var(--measure); white-space: pre-line; }

/* The form. Same fields as the account page, so the same rules. */
.rv-form { display: grid; gap: var(--space-4); max-inline-size: 30rem; }
.rv-form h3 { margin: 0; font-size: 1.1rem; font-weight: var(--weight-strong); }
.rv-form label { display: grid; gap: .35rem; font-size: .85rem; }
.rv-form .opt { color: var(--ink-38); font-size: .72rem; }
.rv-form input:not([type="radio"]):not([type="checkbox"]), .rv-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; }
.rv-form input:focus, .rv-form textarea:focus { border-color: var(--ink); outline: none; }
.rv-form [hidden] { display: none !important; }
.rv-who { min-block-size: 1.2em; }
.rv-who em { display: block; font-style: normal; color: var(--accent-deep); margin-block-start: .25rem; }
.rv-who a { color: var(--ink); }
.rv-anon { display: flex !important; align-items: center; gap: .6rem; min-block-size: 44px; cursor: pointer; }
.rv-anon input { accent-color: var(--accent-deep); inline-size: 1.1rem; block-size: 1.1rem; }
.rv-done { margin: 0; color: var(--ink); font-weight: var(--weight-medium); }
/* The honeypot: off-screen, not display:none — the bots that matter read
   computed styles and skip what is not rendered. */
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* Star picker. Inputs stay in the tab order (moved off-screen, not
   display:none); the labels are the 44px targets. Lit = the checked star and
   every star after it in DOM order, which is every star below it. */
.rv-stars { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.rv-stars legend { padding: 0; margin-block-end: .2rem; }
.rv-stars-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.rv-stars input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; overflow: hidden; }
.rv-stars label { cursor: pointer; inline-size: 44px; block-size: 44px; display: grid; place-items: center; }
.rv-stars label svg { inline-size: 1.8rem; block-size: 1.8rem; }
.rv-stars label svg path { fill: var(--star-off); stroke: var(--star-line); stroke-width: 1.3; stroke-linejoin: round;
  transition: fill var(--fast) var(--ease); }
.rv-stars input:checked ~ label svg path { fill: var(--star-on); }
/* Hovering previews a rating: everything goes out, then the hovered star and
   the ones below it come on. Specificity is deliberate — the two "on" rules
   must beat the "off" rule, which must beat the checked rule above it. */
.rv-stars-row:hover input ~ label svg path { fill: var(--star-off); }
.rv-stars-row:hover label:hover svg path,
.rv-stars-row:hover label:hover ~ label svg path { fill: var(--star-on); }
.rv-stars input:focus-visible + label { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

@media (max-width: 640px) {
  .rv-summary { grid-template-columns: auto 1fr; }
  .rv-dist { grid-column: 1 / -1; }
  .rv-when { margin-inline-start: 0; inline-size: 100%; }
}

/* The owner's moderation page (/api/reviews/moderate). */
.moderate { background: var(--ground); }
.moderate-in { padding-block: var(--space-7); max-inline-size: 40rem; display: grid; gap: var(--space-4); }
.moderate h1 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-strong); }
.moderate .meta { margin: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-55); }
.moderate blockquote { margin: 0; padding: var(--space-4); border-inline-start: 3px solid var(--accent); background: var(--band);
  white-space: pre-line; }
.moderate .state { margin: 0; }
.moderate button { font: inherit; background: var(--ink); color: var(--ground); border: 0; padding: .9em 1.6em;
  min-block-size: 44px; cursor: pointer; }