/* ==========================================================================
   ماکیماه — storefront stylesheet
   Built on tokens.css. No colour is ever hardcoded here.
   Order: fonts · reset · type · layout · header · buttons · forms · badges
          · cards · home · pdp · cart · footer · mobile · print
   ========================================================================== */

/* ---------- Fonts: self-hosted only. No CDN, ever. ---------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-RD-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-RD-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-fa);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: var(--leading-tight); text-wrap: balance; }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-black); letter-spacing: -.01em; }
h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -.005em; }
h3 { font-size: var(--text-md); font-weight: var(--weight-bold); }
p  { margin: 0 0 var(--sp-3); }
a  { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em;
  font-weight: var(--weight-bold); color: var(--ink-mute);
}

/* ---------- Layout ---------- */
/* width:100% is load-bearing. `body` is a flex column (for the sticky footer),
   and on a flex item `margin-inline:auto` cancels the default stretch — the
   container silently collapses to shrink-to-fit. */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.container--narrow { max-width: var(--container-narrow); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* The hidden attribute is UA-level display:none at zero specificity — any
   display on a class (like .stack above) silently defeats it. Restore its
   meaning globally so [hidden] always wins. */
[hidden] { display: none !important; }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.section { margin-block: var(--sp-16); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head__link { font-size: var(--text-sm); color: var(--ink-soft); font-weight: var(--weight-medium); }
.section-head__link:hover { color: var(--ink); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.utility {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.utility .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 36px; }
.utility__links { display: flex; gap: var(--sp-4); }
.utility a:hover { color: var(--ink); }
@media (max-width: 720px) { .utility { display: none; } }

.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); }
.masthead .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--weight-black); font-size: var(--text-lg); letter-spacing: .01em; }
.brand__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-red); }
.brand__sub { font-size: 10px; font-weight: var(--weight-normal); color: var(--ink-mute); letter-spacing: .04em; }

.searchbar { position: relative; }
.searchbar input {
  width: 100%; padding: 10px var(--sp-10) 10px var(--sp-4);
  border: 1px solid var(--ghost-border); border-radius: var(--radius);
  background: var(--surface-sunken); font-size: var(--text-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.searchbar input:hover { border-color: var(--ghost-border-hover); }
.searchbar input:focus { outline: none; background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 3px var(--info-tint); }
.searchbar button {
  position: absolute; inset-block: 4px; inset-inline-end: 4px;
  border: 0; background: transparent; padding-inline: var(--sp-3);
  cursor: pointer; color: var(--ink-mute); border-radius: var(--radius-sm);
}
.searchbar button:hover { color: var(--ink); }
@media (max-width: 720px) { .masthead .container { grid-template-columns: auto 1fr auto; } .searchbar { display: none; } }

.header-actions { display: flex; align-items: center; gap: var(--sp-1); }
.header-action {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header-action:hover { background: var(--surface-sunken); color: var(--ink); }
.header-action__count {
  min-width: 19px; height: 19px; padding-inline: 5px;
  display: inline-grid; place-content: center;
  background: var(--ink); color: var(--on-action);
  border-radius: var(--radius-pill); font-size: 11px;
  font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
}
.header-action--cart .header-action__count { background: var(--brand-red); }
@media (max-width: 720px) { .header-action__label { display: none; } }

/* The category bar lives in one place — see CATEGORY BAR at the end of this file. */

.menu-toggle { display: none; background: none; border: 0; padding: var(--sp-2); cursor: pointer; }
@media (max-width: 720px) { .menu-toggle { display: block; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px var(--sp-5); border: 1px solid transparent; border-radius: var(--radius);
  font-weight: var(--weight-bold); font-size: var(--text-base);
  cursor: pointer; text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn--primary:disabled { background: var(--action-disabled); cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ghost-border); }
.btn--ghost:hover { background: var(--ghost-bg-hover); border-color: var(--ghost-border-hover); }
.btn--ghost:disabled { color: var(--ink-mute); cursor: not-allowed; }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-tint); color: var(--danger); }
.btn--sm { padding: 8px var(--sp-4); font-size: var(--text-sm); }
.btn--lg { padding: 14px var(--sp-6); font-size: var(--text-md); }
.btn--block { width: 100%; }

/* Quantity stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--ghost-border); border-radius: var(--radius); overflow: hidden; }
.stepper button {
  width: 34px; border: 0; background: var(--surface); cursor: pointer;
  color: var(--ink-soft); font-size: var(--text-md); line-height: 1;
}
.stepper button:hover { background: var(--surface-sunken); color: var(--ink); }
.stepper input {
  width: 42px; border: 0; text-align: center; background: var(--surface);
  font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); font-size: var(--text-sm);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   FORMS
   ========================================================================== */
/* No `gap` here: spacing lives on the label instead, so a field's height is
   the sum of its own parts and never depends on flex gap resolution. */
.field { display: flex; flex-direction: column; }
.field label {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  margin-block-end: var(--sp-2); line-height: 1.4;
}
.field__hint, .field__error { margin-block-start: var(--sp-2); }
.input, select.input, textarea.input {
  padding: 11px var(--sp-3); border: 1px solid var(--ghost-border);
  border-radius: var(--radius); background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.input:hover { border-color: var(--ghost-border-hover); }
.input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--info-tint); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: var(--text-sm); color: var(--danger); }
.field__hint  { font-size: var(--text-xs); color: var(--ink-mute); }
.input--tel, .input--otp { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.input--otp { font-size: var(--text-lg); font-weight: var(--weight-bold); }

/* Selectable card (address, variant, slot) */
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-4); background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover .choice__box { border-color: var(--ghost-border-hover); }
.choice input:checked + .choice__box { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ==========================================================================
   BADGES & ALERTS
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium); border: 1px solid transparent;
}
.badge--fresh  { background: var(--success-tint); color: var(--success); }
.badge--frozen { background: var(--info-tint);    color: var(--info); }
.badge--warn   { background: var(--warning-tint); color: var(--warning); }
.badge--slot   { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); font-variant-numeric: tabular-nums; }
.badge--sale {
  background: var(--brand-red); color: var(--ink-inverse);
  border-radius: var(--radius-sm); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid transparent; font-size: var(--text-sm); }
.alert--info    { background: var(--info-tint);    color: var(--info);    border-color: var(--info); }
.alert--success { background: var(--success-tint); color: var(--success); border-color: var(--success); }
.alert--warning { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }
.alert--danger, .alert--error { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }

/* ==========================================================================
   CARDS & PRODUCTS
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.card__body { padding: var(--sp-4); }
.card__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-sunken); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--sp-4); }
@media (max-width: 520px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }

.product-card { display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.product-card:hover { border-color: var(--ghost-border-hover); box-shadow: var(--shadow-md); }
.product-card:hover .card__media img { transform: scale(1.04); }
.product-card .card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.product-card__name { font-size: var(--text-base); font-weight: var(--weight-bold); margin: 0; line-height: 1.35; }
.product-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-card__meta { font-size: var(--text-xs); color: var(--ink-mute); margin: 0; }
.product-card__foot { margin-top: auto; padding-top: var(--sp-2); }
.product-card__badges { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.product-card__temp { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); }

/* Price — always ink, never an accent */
.price { font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.price--lg { font-size: var(--text-2xl); }
.price__cur { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-mute); margin-inline-start: 3px; }
.price__old { font-size: var(--text-sm); color: var(--ink-mute); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.price__unit { font-size: var(--text-xs); color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* Honest placeholder until real photography exists */
.ph {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--sp-2);
  text-align: center; padding: var(--sp-4);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(18,18,18,.022) 11px 22px),
    linear-gradient(160deg, #F4F3EF, #E6E4DC);
}
.ph__mark {
  width: 38px; height: 38px; margin-inline: auto; border-radius: 50%;
  border: 1.5px solid var(--ink); display: grid; place-content: center;
  font-weight: var(--weight-black); font-size: 15px;
}
.ph__label { font-size: var(--text-xs); color: var(--ink-mute); }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero {
  background: var(--action); color: var(--on-action);
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
  padding: clamp(var(--sp-8), 6vw, var(--sp-16));
}
.hero::after {
  content: ""; position: absolute; inset-block-start: -34%; inset-inline-start: -10%;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.22), transparent 68%);
}
.hero__inner { position: relative; max-width: 36rem; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: var(--sp-4); font-weight: var(--weight-bold); }
.hero__eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--brand-red); }
.hero h1 { font-size: clamp(26px, 4.6vw, 44px); line-height: 1.16; margin: 0 0 var(--sp-4); color: var(--on-action); }
.hero p { color: rgba(255,255,255,.78); font-size: var(--text-md); margin-bottom: var(--sp-6); max-width: 32rem; }
.hero .btn--primary { background: var(--surface); color: var(--ink); }
.hero .btn--primary:hover { background: #ECECE7; color: var(--ink); }
.hero .btn--ghost { color: var(--on-action); border-color: rgba(255,255,255,.32); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.08); color: var(--on-action); }

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.trust__item { background: var(--surface); padding: var(--sp-5) var(--sp-4); }
.trust__title { font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); }
.trust__title::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-red); flex: none; }
.trust__body { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); line-height: 1.6; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-3); }
.cat-tile {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
  padding: var(--sp-5) var(--sp-4); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat-tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.cat-tile__name { font-weight: var(--weight-bold); display: block; margin-bottom: 2px; }
.cat-tile__count { font-size: var(--text-xs); color: var(--ink-mute); }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(var(--sp-6), 4vw, var(--sp-10)); }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.shop-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (max-width: 880px) { .shop-layout { grid-template-columns: 1fr; } }


.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }
.pdp__gallery { position: sticky; top: var(--sp-4); }
.pdp__buybox { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: var(--sp-5); }

.breadcrumb { font-size: var(--text-sm); color: var(--ink-mute); margin-bottom: var(--sp-4); }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.spec-list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-5); font-size: var(--text-sm); margin: 0; }
.spec-list dt { color: var(--ink-mute); }
.spec-list dd { margin: 0; font-weight: var(--weight-medium); }

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-5); overflow-x: auto; }
.tab {
  padding: var(--sp-3) var(--sp-4); border: 0; background: none; cursor: pointer;
  font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--ink-mute);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: var(--weight-bold); border-bottom-color: var(--ink); }
.tab-panel[hidden] { display: none; }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--text-md); margin-top: var(--sp-6); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-inline-start: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }

/* ==========================================================================
   TABLES / CART
   ========================================================================== */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th { text-align: start; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ink-mute); border-bottom: 1px solid var(--rule); padding: var(--sp-3) var(--sp-2); }
.data-table td { padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.variant-table { composes: data-table; }

.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.summary { position: sticky; top: var(--sp-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: var(--sp-5); }
.summary__row { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--sp-2); font-size: var(--text-sm); }
.summary__row--total { border-top: 1px solid var(--rule); margin-top: var(--sp-2); padding-top: var(--sp-4); }
.cart-thumb { width: 62px; height: 62px; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--surface-sunken); flex: none; }

.tracker { display: flex; list-style: none; gap: var(--sp-2); flex-wrap: wrap; }
.tracker__step { flex: 1 1 130px; padding: var(--sp-3); text-align: center; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink-mute); font-size: var(--text-sm); }
.tracker__step.is-done { background: var(--success-tint); color: var(--success); border-color: var(--success); font-weight: var(--weight-bold); }

.empty-state { text-align: center; padding: var(--sp-16) var(--sp-4); border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); }

/* ==========================================================================
   MOBILE
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer[open], .drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: var(--surface-overlay); opacity: 0; transition: opacity var(--dur) var(--ease); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: min(300px, 84vw);
  background: var(--surface); padding: var(--sp-5);
  transform: translateX(-100%); transition: transform var(--dur) var(--ease);
  overflow-y: auto;
}
/* inset-inline-start already resolves to the RIGHT edge in RTL — only the
   slide direction flips. Re-pinning to inline-end parked the panel mid-screen. */
[dir="rtl"] .drawer__panel { transform: translateX(100%); }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__link { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-soft); font-weight: var(--weight-medium); }

.bottom-nav {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
  background: var(--surface); border-top: 1px solid var(--rule);
  display: none; justify-content: space-around; padding-block: var(--sp-2);
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
}
/* The bar is 8px of top padding + a 57px link + its own bottom padding, and it
   is that bottom padding which absorbs the safe-area inset. The old flat 64px
   was 10px short, so the bar sat over the last 10px of every page. */
@media (max-width: 720px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: calc(68px + max(var(--sp-2), env(safe-area-inset-bottom, 0px))); }
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--ink-mute); padding: var(--sp-1) var(--sp-3); }
.bottom-nav a.is-active { color: var(--ink); font-weight: var(--weight-bold); }
.bottom-nav__badge {
  position: absolute; transform: translate(-10px, -4px);
  background: var(--brand-red); color: #fff; border-radius: var(--radius-pill);
  font-size: 9px; min-width: 15px; height: 15px; display: grid; place-content: center; padding-inline: 4px;
}

/* ---------- Utilities ---------- */
.muted { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }
.nums { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Courier ---------- */
.courier-card { display: block; }
.courier-card:hover { border-color: var(--ghost-border-hover); }
.label-sheet { max-width: 420px; padding: var(--sp-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }

@media print {
  .utility, .masthead, .catnav, .site-footer, .bottom-nav, .no-print { display: none !important; }
  .label-sheet { border: 0; padding: 0; max-width: 100%; }
  body { background: #fff; padding-bottom: 0; }
}

/* ==========================================================================
   REFINEMENT PASS — readability, depth, motion
   Larger type, sticky footer, layered surfaces, restrained motion.
   ========================================================================== */

/* ---------- Sticky footer: never leave a gap below the fold ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; margin-block-start: var(--sp-16); }

/* A page that ends on a full-bleed band should meet the footer flush — the
   band already carries its own generous padding, so main's bottom padding and
   the footer's top margin just leave a strip of bare ground between them. */
main:has(> :last-child.bleed) { padding-block-end: 0 !important; }
main:has(> :last-child.bleed) + .site-footer { margin-block-start: 0; }

/* ---------- Readability ---------- */
h1 { letter-spacing: -.02em; }
h2 { letter-spacing: -.015em; }
h3 { letter-spacing: -.01em; }
p, li { line-height: var(--leading-normal); }
.lede { font-size: var(--text-md); color: var(--ink-soft); line-height: var(--leading-normal); }
/* Nothing may go below the 13px floor. */
.muted, .price__unit, .product-card__meta, .field__hint, .footer-bottom, .ph__label,
.trust__body, .cat-tile__count { font-size: var(--text-xs); }

/* ---------- Surfaces ---------- */
.card { background: var(--grad-surface); transition: transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.utility { background: var(--grad-sunken); }
.masthead { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
            position: sticky; top: 0; z-index: 40; }
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--surface); } }

/* ---------- Buttons ---------- */
.btn--primary { box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--lg { border-radius: var(--radius-pill); padding-inline: var(--sp-8); }

/* ---------- Product cards ---------- */
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card .card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(18,18,18,.07));
}
.cat-tile { background: var(--grad-surface); box-shadow: var(--shadow-sm); }
.cat-tile:hover { box-shadow: var(--shadow-md); }

/* ---------- Hero ---------- */
.hero { background: var(--grad-ink); box-shadow: var(--shadow-lg); }
.hero__media {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 46%;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%);
          mask-image: linear-gradient(to right, transparent, #000 42%);
  opacity: .5;
}
[dir="rtl"] .hero__media {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 42%);
          mask-image: linear-gradient(to left, transparent, #000 42%);
}
@media (max-width: 820px) { .hero__media { display: none; } }
.hero::after { mix-blend-mode: screen; }

/* ---------- Motion: reveal on scroll ----------
   Deliberately small — a 12px rise and a fade. Anything larger turns a shop
   into a slideshow, and it is disabled outright for reduced-motion users. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- Trust / panels ---------- */
.trust__item { background: var(--grad-surface); }
.panel { background: var(--grad-surface); box-shadow: var(--shadow-md); }
.summary { background: var(--grad-surface); box-shadow: var(--shadow-md); }
.pdp__buybox { background: var(--grad-surface); box-shadow: var(--shadow-md); }

/* ---------- Badges: a touch more presence ---------- */
.badge { padding: 5px 12px; }
.badge--sale { box-shadow: var(--shadow-glow-red); }

/* ---------- Focus ---------- */
.btn:focus-visible, .header-action:focus-visible { outline-offset: 3px; }

/* ==========================================================================
   PASS 3 — wide canvas, one hover per element, real depth
   Guiding rules:
     · Content is wide. Squeezing a shop makes it feel small.
     · ONE hover response per element, and it belongs to the thing you click.
       A card that lifts AND zooms AND shadows AND animates its button is four
       animations competing for the same intent.
     · Separation comes from space and tone, not from drawing more borders.
   ========================================================================== */

/* ---------- Canvas ---------- */
.container { padding-inline: clamp(var(--sp-4), 4vw, var(--sp-12)); }
.section { margin-block: clamp(var(--sp-16), 9vw, 128px); }

/* Full-bleed band that still aligns its inner content to the grid */
/* 100vw counts the scrollbar gutter, so a naive `width: 100vw` band is ~15px
   wider than the viewport and the whole page scrolls sideways. --sbw carries the
   real gutter width, measured in the pre-paint script in base.html and refreshed
   on resize; it falls back to 0px, which is the correct value on the overlay
   scrollbars every phone uses.

   Do NOT "fix" this with overflow-x on <html> instead: a non-visible overflow on
   the root propagates to the viewport and silently kills `position: sticky`
   everywhere — the masthead scrolls away with the page. Clipping <main> works but
   crops these bands back to the 1440px container on wider monitors. */
.bleed {
  width: calc(100vw - var(--sbw, 0px));
  margin-inline: calc(50% - 50vw + var(--sbw, 0px) / 2);
  padding-block: clamp(var(--sp-12), 8vw, 112px);
}
.bleed--sunken { background: var(--grad-sunken); }
.bleed--ink { background: var(--grad-ink); color: var(--on-action); }
.bleed--ink h2, .bleed--ink h3 { color: var(--on-action); }
.bleed--ink p { color: rgba(255,255,255,.72); }

/* ---------- Display typography ---------- */
.display {
  font-size: clamp(34px, 5.4vw, var(--text-4xl));
  font-weight: var(--weight-black);
  letter-spacing: -.03em;
  line-height: 1.06;
  margin: 0;
}
.display--md { font-size: clamp(28px, 3.6vw, var(--text-3xl)); letter-spacing: -.025em; line-height: 1.1; }
.subhead {
  font-size: clamp(var(--text-md), 1.5vw, var(--text-lg));
  color: var(--ink-soft); line-height: 1.55; max-width: 46ch; margin: 0;
}
.bleed--ink .subhead { color: rgba(255,255,255,.7); }
.center { text-align: center; }
.center .subhead { margin-inline: auto; }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 28px; height: 28px; stroke-width: 1.5; }

/* ---------- Product card: borderless, one hover, and it's the button ------ */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(var(--sp-4), 2vw, var(--sp-6)); }
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }

.product-card { border: 0; background: transparent; box-shadow: none; border-radius: var(--radius-lg); }
.product-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.product-card .card__media {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 12%, #FFFFFF 0%, #F4F3EF 58%, #EAE8E1 100%);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.05);
}
/* the image itself does NOT move on hover */
.product-card:hover .card__media img { transform: none; }
.product-card .card__media::after { display: none; }
.product-card .card__body { padding: var(--sp-4) var(--sp-1) 0; background: transparent; }
.product-card__name { font-size: var(--text-md); }
.product-card .btn { border-radius: var(--radius-pill); }

/* ---------- Category tiles ---------- */
.cat-grid { gap: var(--sp-4); }
.cat-tile { border: 0; background: var(--grad-sunken); box-shadow: none; border-radius: var(--radius-lg);
            padding: var(--sp-6) var(--sp-5); }
.cat-tile:hover { transform: none; box-shadow: var(--shadow-md); }
.cat-tile__name { font-size: var(--text-md); }

/* ---------- Trust: borderless, icon-led ---------- */
.trust { background: transparent; border: 0; gap: clamp(var(--sp-5), 3vw, var(--sp-8)); }
.trust__item { background: transparent; padding: 0; }
.trust__icon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: var(--sp-3);
  display: grid; place-content: center;
  background: var(--grad-sunken); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.05);
}
.trust__title { font-size: var(--text-base); }
.trust__title::before { display: none; }
.trust__body { font-size: var(--text-sm); color: var(--ink-mute); }
.bleed--ink .trust__icon { background: rgba(255,255,255,.08); color: var(--on-action);
                           box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.bleed--ink .trust__body { color: rgba(255,255,255,.62); }

/* ---------- Hero ---------- */
.hero { border-radius: var(--radius-lg); padding: clamp(var(--sp-10), 7vw, 132px) clamp(var(--sp-6), 6vw, 96px); }
.hero__inner { max-width: 40rem; }
.hero h1 { font-size: clamp(32px, 5.2vw, 68px); letter-spacing: -.032em; line-height: 1.05; }
.hero p { font-size: clamp(var(--text-base), 1.4vw, var(--text-lg)); max-width: 34rem; }
.hero__media { width: 52%; opacity: .58; }

/* ---------- PDP ---------- */
/* Photo left, copy right. Source order stays gallery-then-copy so a phone (and
   a screen reader) still meets the product picture first; the swap is purely a
   grid placement, and in RTL column 1 is the right-hand one. */
.pdp { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(var(--sp-8), 5vw, 88px); }
@media (min-width: 901px) {
  .pdp__gallery { grid-column: 2; grid-row: 1; }
  .pdp__col     { grid-column: 1; grid-row: 1; }
}
.pdp__stage {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1;
  background: radial-gradient(120% 90% at 50% 10%, #FFFFFF 0%, #F4F3EF 56%, #E9E7E0 100%);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.05);
}
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.pdp__thumb {
  width: 76px; height: 76px; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--grad-sunken); box-shadow: inset 0 0 0 1px rgba(18,18,18,.06);
  padding: 0; border: 0; transition: box-shadow var(--dur) var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-active { box-shadow: 0 0 0 2px var(--ink); }
.pdp h1 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.028em; line-height: 1.08; }
.pdp__buybox { border: 0; border-radius: var(--radius-lg); padding: clamp(var(--sp-5), 2.5vw, var(--sp-8)); }
.pdp__price { font-size: clamp(28px, 3vw, 40px); }

/* ---------- Buttons: the one element that should react ---------- */
.btn { border-radius: var(--radius-pill); }
.btn--primary { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }

/* ---------- Filter rail ---------- */
.shop-layout { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(var(--sp-6), 4vw, var(--sp-12)); }

/* ---------- Panels ---------- */
.panel { border: 0; border-radius: var(--radius-lg); }
.summary { border: 0; border-radius: var(--radius-lg); }
.card { border-radius: var(--radius-lg); }

/* ---------- Card hover: a cross-fade to the second photo ----------
   The single hover response on a card. It reveals information (what the
   product looks like served) instead of just animating for its own sake. */
.card__media-alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.product-card:hover .card__media-alt,
.product-card:focus-within .card__media-alt { opacity: 1; }
@media (hover: none) { .card__media-alt { display: none; } }
@media (prefers-reduced-motion: reduce) { .card__media-alt { transition: none; } }

/* ---------- Split feature block ---------- */
.splitter { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--sp-6), 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .splitter { grid-template-columns: 1fr; } }
.splitter__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.splitter__media img { width: 100%; height: 100%; object-fit: cover; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-2) 0 0; }
.ticks li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-base); color: var(--ink-soft); }
.ticks .icon { color: var(--success-bright); }

/* Hero banner is already dark and dramatic — let more of it through and
   fade toward the text side rather than dimming the whole frame. */
.hero__media { width: 62%; opacity: .82; }
.hero { background: #0E0E0E; }
.hero::after { opacity: .55; }

/* ==========================================================================
   PASS 4 — gradients you can actually see
   Colour arrives through gradient, glow and tint rather than flat fills.
   ========================================================================== */

/* ---------- Gradient text ---------- */
.grad-text {
  background: linear-gradient(100deg, #FF5A6E 0%, var(--brand-red) 42%, #7E0A1B 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad-text--light {
  background: linear-gradient(100deg, #FFFFFF 0%, #FFD9DE 46%, #FF97A6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- Signature red band ---------- */
.bleed--brand {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 130% at 18% 0%, rgba(255,120,140,.42) 0%, transparent 62%),
    radial-gradient(60% 120% at 88% 100%, rgba(120,0,22,.55) 0%, transparent 60%),
    linear-gradient(128deg, #E01B37 0%, var(--brand-red) 44%, #7C0A1B 100%);
}
.bleed--brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 70% at 50% 42%, rgba(255,255,255,.16), transparent 70%);
}
.bleed--brand h2, .bleed--brand h3 { color: #fff; }
.bleed--brand p, .bleed--brand .subhead { color: rgba(255,255,255,.86); }
.bleed--brand .btn--primary { background: #fff; color: var(--brand-red); }
.bleed--brand .btn--primary:hover { background: #FFF0F2; color: var(--brand-red); box-shadow: 0 10px 34px -8px rgba(0,0,0,.4); }

/* ---------- Hero: half the height, wide banner, gradient wash ---------- */
.hero {
  min-height: clamp(300px, 34vw, 460px);
  display: flex; align-items: center;
  padding: clamp(var(--sp-6), 4vw, var(--sp-12)) clamp(var(--sp-6), 5vw, 72px);
  background:
    radial-gradient(80% 140% at 84% 50%, rgba(200,16,46,.30) 0%, transparent 58%),
    linear-gradient(122deg, #1A1A1A 0%, #0E0E0E 58%, #000 100%);
}
.hero__media {
  position: absolute; inset: 0; width: 100%; opacity: 1;
  background-size: cover; background-position: center left;
  -webkit-mask-image: linear-gradient(to left, transparent 34%, #000 72%);
          mask-image: linear-gradient(to left, transparent 34%, #000 72%);
}
[dir="rtl"] .hero__media {
  background-position: center left;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 68%);
          mask-image: linear-gradient(to right, transparent 30%, #000 68%);
}
.hero::after { display: none; }
.hero__inner { max-width: 32rem; }
.hero h1 { font-size: clamp(28px, 3.8vw, 52px); }
.hero p { font-size: clamp(var(--text-base), 1.15vw, var(--text-md)); margin-bottom: var(--sp-5); }
@media (max-width: 820px) {
  .hero { min-height: 0; }
  .hero__media { opacity: .3; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Product card: quieter, less content ---------- */
.product-card .card__media {
  background:
    radial-gradient(110% 80% at 50% 8%, #FFFFFF 0%, #F5F4F0 52%, #E8E6DE 100%);
}
.product-card .card__body { gap: var(--sp-1); padding-top: var(--sp-3); }
.product-card__name { font-size: var(--text-base); font-weight: var(--weight-bold); }
.product-card__meta { margin-bottom: var(--sp-1); }
.product-card__foot { padding-top: var(--sp-2); display: flex; align-items: center;
                      justify-content: space-between; gap: var(--sp-3); }
.product-card .price { font-size: var(--text-md); }
.product-card .btn { padding-inline: var(--sp-4); }

/* Hover: a soft cross-dissolve with a gentle scale on the incoming frame */
.card__media-alt { transform: scale(1.04); transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-out); }
.product-card:hover .card__media-alt,
.product-card:focus-within .card__media-alt { opacity: 1; transform: scale(1); }
.product-card .card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 106%, rgba(200,16,46,.13), transparent 70%);
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.product-card:hover .card__media::before { opacity: 1; }

/* ---------- Category tiles with icons ---------- */
.cat-tile {
  display: flex; align-items: center; gap: var(--sp-4);
  background: linear-gradient(150deg, #FFFFFF 0%, #F6F5F1 100%);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.05);
}
.cat-tile__icon {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: grid; place-content: center; color: var(--brand-red);
  background: linear-gradient(150deg, #FFF2F4 0%, #FFE2E6 100%);
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.10);
  transition: transform var(--dur) var(--ease-out);
}
.cat-tile:hover .cat-tile__icon { transform: scale(1.06); }
.cat-tile__text { display: flex; flex-direction: column; }

/* ---------- Trust icons: gradient chips ---------- */
.trust__icon {
  background: linear-gradient(150deg, #FFFFFF 0%, #F2F1EC 100%);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.06), var(--shadow-sm);
  color: var(--brand-red);
}

/* ---------- Waitlist form: fields share a baseline ---------- */
.inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.inline-form .field { flex: 1 1 190px; min-width: 0; }
.inline-form .btn { flex: 0 0 auto; height: 46px; }
.inline-form .input { height: 46px; }

/* ---------- Hero on a vivid banner ----------
   The artwork carries the colour now, so the panel stops competing: the image
   sits full-bleed and only a soft scrim runs under the text for legibility. */
.hero { background: #C8102E; padding-inline: clamp(var(--sp-6), 6vw, 88px); }
.hero__media { opacity: 1; -webkit-mask-image: none; mask-image: none;
               background-position: center left; }
[dir="rtl"] .hero__media { -webkit-mask-image: none; mask-image: none; }
[dir="rtl"] .hero h1 { text-shadow: 0 2px 24px rgba(60,0,10,.42); }
.hero p { color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(60,0,10,.44); }
.hero .btn--primary { background: #fff; color: var(--brand-red); }
.hero .btn--primary:hover { background: #FFF0F2; color: var(--brand-red); }
.hero .btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 820px) {
  .hero__media { opacity: .38; }
  }

/* ---------- Card hover, refined ----------
   Outgoing frame drifts back and dims slightly while the incoming one settles
   from a 6% scale. Long easing (620ms) so it reads as a dissolve, not a flick. */
.product-card .card__media img:not(.card__media-alt) {
  transition: opacity 620ms var(--ease-out), transform 900ms var(--ease-out);
}
.product-card:hover .card__media img:not(.card__media-alt),
.product-card:focus-within .card__media img:not(.card__media-alt) {
  opacity: 0; transform: scale(1.02);
}
.card__media-alt { transform: scale(1.06); transition: opacity 620ms var(--ease-out), transform 900ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .product-card .card__media img { transition: none !important; transform: none !important; }
}

/* ---------- Icon families ----------
   .icon        line icons  — fill:none + stroke:currentColor
   .icon--fill  solid icons — fill:currentColor + no stroke
   Mixing them silently renders one family invisible, so the class is required. */
.icon--fill { fill: currentColor; stroke: none; }
.icon--xl { width: 34px; height: 34px; }

/* ---------- Hero: let the artwork stay bright ----------
   The banner already has a dark side for the text, so no scrim over the food.
   Legibility comes from a text-shadow instead of dimming the picture. */
.hero h1 { text-shadow: 0 2px 26px rgba(40,0,8,.55), 0 1px 3px rgba(40,0,8,.35); }
.hero p  { text-shadow: 0 1px 16px rgba(40,0,8,.55); }

/* ---------- Icon family discipline ----------
   Line icons are for HEADER CHROME ONLY (search, cart, account, menu).
   Everything that carries meaning in the content — features, categories,
   reassurance rows — uses the FILLED family. Mixing the two weights in one
   row is what makes an icon set look broken. */
.trust__icon .icon, .cat-tile__icon .icon { fill: currentColor; stroke: none; }

/* ==========================================================================
   PRODUCT CARD — rebuilt
   One container, one clear action. The card no longer floats: it is a real
   surface. The button is full-width and reads as a button at rest, instead of
   a heavy pill parked at the far edge of the row.
   ========================================================================== */
.pcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.pcard:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-md); }

/* --- media --- */
.pcard__media {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(115% 85% at 50% 8%, #FFFFFF 0%, #F6F5F1 55%, #ECEAE3 100%);
}
.pcard__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 560ms var(--ease-out), transform 900ms var(--ease-out);
}
.pcard__img--alt { opacity: 0; transform: scale(1.05); }
.pcard:hover .pcard__img--alt { opacity: 1; transform: scale(1); }
.pcard:hover .pcard__img:not(.pcard__img--alt) { opacity: 0; transform: scale(1.03); }
@media (hover: none) { .pcard__img--alt { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pcard__img { transition: none; transform: none !important; }
}

/* --- tags: one shape for all of them --- */
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: var(--radius-pill); font-size: var(--text-xs);
  font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.tag--sale   { background: var(--brand-red); color: #fff; box-shadow: 0 4px 14px -4px rgba(200,16,46,.55); }
.tag--out    { background: rgba(18,18,18,.72); color: #fff; }
.tag--fresh  { background: rgba(255,255,255,.86); color: var(--success); }
.tag--frozen { background: rgba(255,255,255,.86); color: var(--info); }

.pcard__tags {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2;
}
.pcard__temp { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; }

/* --- body --- */
.pcard__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-4) var(--sp-4); flex: 1; }
.pcard__name { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); line-height: 1.4; }
.pcard__name a { text-decoration: none; }
.pcard__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pcard__meta { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }

.pcard__price {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-4); min-height: 30px;
}
.pcard__now { font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--ink);
              font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pcard__cur { font-size: var(--text-xs); color: var(--ink-mute); }
.pcard__was { font-size: var(--text-sm); color: var(--ink-mute); text-decoration: line-through;
              font-variant-numeric: tabular-nums; order: 3; }

/* --- the call to action --------------------------------------------------
   At rest: a quiet, self-evidently clickable surface.
   On hover: it commits — fills to ink, the label brightens, the cart glides in.
   One element, one intention. */
.addbtn {
  margin-top: auto; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding-inline: var(--sp-4);
  border: 1px solid var(--ghost-border); border-radius: 12px;
  background: var(--surface-sunken); color: var(--ink);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold);
  cursor: pointer; position: relative; overflow: hidden;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.addbtn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #2B2B2B 0%, var(--action) 60%, #000 100%);
  transform: translateY(101%);
  transition: transform 420ms var(--ease-out);
}
.addbtn > * { position: relative; z-index: 1; }
.addbtn__icon { width: 17px; height: 17px; transform: translateX(4px); opacity: .55;
                transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-out); }
.addbtn:hover { color: var(--on-action); border-color: transparent; }
.addbtn:hover::before { transform: translateY(0); }
.addbtn:hover .addbtn__icon { transform: translateX(0); opacity: 1; }
.addbtn:active { transform: translateY(1px); }
.addbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.addbtn--disabled { background: transparent; color: var(--ink-mute); cursor: not-allowed; border-style: dashed; }
.addbtn--disabled::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .addbtn::before { transition: none; }
  .addbtn__icon { transition: none; }
}

/* grid spacing for the new card */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: var(--sp-5); }
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }

/* ==========================================================================
   PROMISE BLOCK  (was: four floating text columns under the hero)
   One surface instead of four orphans. Hairline dividers carry the rhythm,
   and each cell is a hover target so the row feels alive without moving.
   ========================================================================== */
.promise {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCF9 100%);
  border: 1px solid var(--rule);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
@media (max-width: 980px) { .promise { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .promise { grid-template-columns: 1fr; } }

.promise__item {
  position: relative;
  padding: clamp(var(--sp-6), 2.6vw, var(--sp-10)) clamp(var(--sp-5), 2vw, var(--sp-8));
  transition: background var(--dur) var(--ease-out);
}
/* Hairline dividers — logical properties so RTL flips them for free. */
.promise__item + .promise__item::before {
  content: ""; position: absolute; inset-block: 18%; inset-inline-start: 0;
  width: 1px; background: var(--rule);
}
@media (max-width: 980px) {
  .promise__item:nth-child(3)::before, .promise__item:nth-child(2n+1)::before { display: none; }
  .promise__item:nth-child(n+3) { border-block-start: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .promise__item::before { display: none; }
  .promise__item + .promise__item { border-block-start: 1px solid var(--rule); }
}
.promise__item:hover { background: linear-gradient(180deg, #FFF9FA 0%, #FFF4F5 100%); }

.promise__icon {
  display: grid; place-content: center;
  width: 58px; height: 58px; margin-bottom: var(--sp-4);
  border-radius: 18px; color: var(--brand-red);
  background: linear-gradient(155deg, #FFF1F3 0%, #FFE1E6 100%);
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.12),
              inset 0 1px 0 rgba(255,255,255,.9),
              0 6px 16px -8px rgba(200,16,46,.45);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.promise__icon .icon { width: 28px; height: 28px; }
.promise__item:hover .promise__icon {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.18),
              inset 0 1px 0 rgba(255,255,255,.9),
              0 12px 26px -10px rgba(200,16,46,.6);
}

.promise__title {
  margin: 0 0 var(--sp-2); font-size: var(--text-md);
  font-weight: var(--weight-bold); letter-spacing: -.015em;
}
.promise__body {
  margin: 0; font-size: var(--text-sm); line-height: 1.7;
  color: var(--ink-mute);
  text-wrap: pretty;   /* balances the last line instead of orphaning one word */
}


/* --- story refinements: give the photograph more room, stop label wrapping - */

/* ==========================================================================
   STORY BAND — compact, no photograph, live background
   Height is deliberately short: this is a statement, not a chapter. Depth
   comes from the layered gradients on .bleed--brand alone.
   ========================================================================== */
.story { position: relative; overflow: hidden; padding-block: clamp(var(--sp-10), 5.5vw, 84px); }
.story__inner { position: relative; z-index: 1; text-align: center; }

.story__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: var(--sp-4);
}
.story__eyebrow::before, .story__eyebrow::after {
  content: ""; width: 22px; height: 1.5px; background: rgba(255,255,255,.45);
}
.story__title { color: #fff; margin: 0 0 var(--sp-4); }
.story__lede {
  color: rgba(255,255,255,.84); font-size: clamp(var(--text-base), 1.2vw, var(--text-md));
  line-height: 1.7; max-width: 52ch; margin: 0 auto var(--sp-8); text-wrap: pretty;
}

.stats {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: clamp(var(--sp-5), 3.5vw, var(--sp-12));
  justify-content: center; margin: 0 0 var(--sp-8);
}
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
.stat { position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; inset-block: 6px;
  inset-inline-start: calc(-1 * clamp(10px, 1.75vw, 26px));
  width: 1px; background: rgba(255,255,255,.24);
}
@media (max-width: 620px) { .stat + .stat::before { display: none; } }
.stat__num {
  font-size: clamp(26px, 2.8vw, 38px); font-weight: var(--weight-black);
  line-height: 1.1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
}
.stat__label { margin: 5px 0 0; font-size: var(--text-xs); line-height: 1.5;
               color: rgba(255,255,255,.7); max-width: 17ch; margin-inline: auto; }

/* ==========================================================================
   CATEGORY TILES — icon, name, count, arrow. Nothing else.
   ========================================================================== */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--sp-4); }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; gap: var(--sp-3); } }

.ctile {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: 16px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F7F6F2 100%);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.ctile:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF4F5 100%);
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.22), var(--shadow-md);
}

.ctile__icon {
  width: 50px; height: 50px; flex: none; border-radius: 15px;
  display: grid; place-content: center; color: var(--brand-red);
  background: linear-gradient(155deg, #FFF1F3 0%, #FFE1E6 100%);
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.ctile__icon .icon { width: 25px; height: 25px; }

.ctile__text { display: flex; flex-direction: column; min-width: 0; }
.ctile__name { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.3; }
.ctile__count { font-size: var(--text-xs); color: var(--ink-mute); }

.ctile__arrow {
  margin-inline-start: auto; width: 19px; height: 19px; flex: none;
  color: var(--ink-mute); stroke-width: 2;
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ctile:hover .ctile__arrow { color: var(--brand-red); transform: translateX(-4px); }
[dir="ltr"] .ctile__arrow { transform: scaleX(-1); }
[dir="ltr"] .ctile:hover .ctile__arrow { transform: scaleX(-1) translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .ctile__arrow { transition: none; } }

/* ==========================================================================
   WAITLIST — "we don't reach you yet"
   Grid, not flex-wrap: the previous version sat inside a 60ch measure, so the
   fields and the button wrapped onto different lines and looked misaligned.
   Explicit columns keep all three controls on one baseline.
   ========================================================================== */
.waitlist {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12)); align-items: center;
}
@media (max-width: 900px) { .waitlist { grid-template-columns: 1fr; gap: var(--sp-6); } }

.waitlist__icon {
  display: grid; place-content: center; width: 54px; height: 54px;
  border-radius: 16px; margin-bottom: var(--sp-4); color: var(--brand-red);
  background: linear-gradient(155deg, #FFF1F3 0%, #FFE1E6 100%);
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.waitlist__icon .icon { width: 28px; height: 28px; }
.waitlist__text {
  margin: var(--sp-3) 0 0; font-size: var(--text-base); line-height: 1.75;
  color: var(--ink-soft); max-width: 46ch; text-wrap: pretty;
}

.waitlist__form {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-3); align-items: end;
  background: var(--surface); padding: var(--sp-5);
  border-radius: 18px; box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
}
@media (max-width: 640px) { .waitlist__form { grid-template-columns: 1fr; } }
.waitlist__form .field { min-width: 0; }
/* every control on the row is exactly the same height */
.waitlist__form .input,
.waitlist__form .btn { height: 50px; }
.waitlist__form .btn { padding-inline: var(--sp-6); white-space: nowrap; }
/* the phone reads left-to-right but stays visually centred like the other field */
.waitlist__form .input--tel { text-align: start; letter-spacing: .04em; }

/* ---------- Waitlist band: warm blush, not dead grey ----------
   The old flat grey read as an unfinished area. This keeps the section calm
   (the red story band already carries the loud brand moment) while tying it to
   the palette: two soft brand-tinted glows over a warm off-white base, and a
   hairline top edge so it separates cleanly from the section above. */
.bleed--blush {
  position: relative;
  background:
    radial-gradient(78% 120% at 86% 0%, rgba(200,16,46,.11) 0%, transparent 58%),
    radial-gradient(66% 110% at 6% 100%, rgba(232,120,90,.12) 0%, transparent 56%),
    linear-gradient(168deg, #FCF8F6 0%, #F7F1EE 52%, #F4EBE8 100%);
  border-block-start: 1px solid rgba(200,16,46,.08);
}
/* the white form panel needs a touch more lift on a warmer ground */
.bleed--blush .waitlist__form {
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.05),
              0 1px 2px rgba(90,20,20,.04),
              0 18px 40px -22px rgba(120,30,30,.28);
}

/* ==========================================================================
   FOOTER
   Four columns, but weighted: the brand block carries the real contact detail,
   the link columns stay quiet, and the trust column reads as reserved space
   rather than an unfinished dashed box.
   ========================================================================== */
.site-footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF8 100%);
  border-block-start: 1px solid var(--rule);
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-12));
  padding-block: clamp(var(--sp-8), 4vw, 60px);
}
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }

.footer-brand .brand { font-size: var(--text-lg); }
.footer-brand__tag {
  margin: var(--sp-3) 0 var(--sp-5); font-size: var(--text-sm);
  color: var(--ink-mute); line-height: 1.7; max-width: 34ch;
}
.footer-contact { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-contact li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--ink-soft); }
.footer-contact .icon { width: 18px; height: 18px; color: var(--brand-red); flex: none; }
.footer-contact a { color: var(--ink-soft); }
.footer-contact a:hover { color: var(--ink); }

.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col__title {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-mute); font-weight: var(--weight-bold); margin: 0 0 var(--sp-4);
}
.footer-col > a {
  font-size: var(--text-sm); color: var(--ink-soft); padding-block: 6px;
  transition: color var(--dur) var(--ease-out);
}
.footer-col > a:hover { color: var(--brand-red); }

/* Reserved slots for the seals — they read as "coming", not as broken boxes. */
.seals { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.seal {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-4) var(--sp-2); border-radius: 14px; text-align: center;
  background: linear-gradient(160deg, #FFFFFF 0%, #F7F6F2 100%);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 11px; line-height: 1.4; color: var(--ink-mute);
}
.seal .icon { width: 22px; height: 22px; color: var(--success); stroke-width: 2.4; }

.footer-note {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0;
  font-size: var(--text-xs); color: var(--ink-mute);
}
.footer-note .icon { width: 17px; height: 17px; color: var(--brand-red); flex: none; }

.footer-bottom {
  border-block-start: 1px solid var(--rule-soft); padding-block: var(--sp-5);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-mute);
}
.footer-bottom__note { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer-bottom__note .icon { width: 17px; height: 17px; color: var(--brand-red); }

/* ==========================================================================
   HEADER — refinement pass
   Logo, calmer utility strip, a search field that reads as the primary way to
   find things, and a category bar with a real active state.
   ========================================================================== */
.brand__logo {
  height: 32px; width: auto; display: block;
  /* source is 160×58, so 32px is a ~1.8× downscale — stays crisp on retina */
}
.brand__logo--lg { height: 38px; }
@media (max-width: 720px) { .brand__logo { height: 28px; } }

/* --- utility strip: quieter, so the masthead leads --- */
.utility { font-size: var(--text-xs); }
.utility .container { min-height: 38px; }
.utility__links { gap: var(--sp-5); }
.utility a { color: var(--ink-mute); }
.utility a:hover { color: var(--ink); }
.utility .row { gap: 6px; }

/* --- masthead --- */
.masthead .container { min-height: 74px; gap: clamp(var(--sp-4), 3vw, var(--sp-8)); }
.masthead { box-shadow: 0 1px 0 rgba(18,18,18,.04); }

/* search: bigger target, brand focus ring */
.searchbar input {
  height: 46px; padding-block: 0; border-radius: 12px;
  font-size: var(--text-sm); background: var(--surface-sunken);
}
.searchbar input::placeholder { color: var(--ink-mute); }
.searchbar input:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
.searchbar button:hover { color: var(--brand-red); }

/* actions */
.header-action { border-radius: 12px; padding: var(--sp-2) var(--sp-3); min-height: 44px; }
.header-action .icon { width: 21px; height: 21px; }
.header-action:hover { background: var(--surface-sunken); color: var(--ink); }
.header-action--cart:hover { color: var(--brand-red); }
.header-action__count { font-size: 11px; min-width: 20px; height: 20px; }

/* --- a shadow appears only once you have scrolled past the top --- */
.masthead.is-stuck { box-shadow: 0 4px 20px -8px rgba(18,18,18,.22); }

/* ---------- Logo, larger ----------
   Source is now 640×232, so 46px is a ~5× downscale — sharp on any display. */
.brand__logo { height: 46px; }
.brand__logo--lg { height: 52px; }
@media (max-width: 900px) { .brand__logo { height: 40px; } }
@media (max-width: 720px) { .brand__logo { height: 36px; } }
.masthead .container { min-height: 84px; }

/* ==========================================================================
   SEARCH BAR
   The main way to find a product, so it is sized and finished like one:
   a pill with a leading hint glyph and a solid brand-red submit.
   ========================================================================== */
.searchbar input {
  height: 52px; border-radius: var(--radius-pill);
  padding-inline: 52px 60px;                 /* hint glyph · submit button */
  font-size: var(--text-base);
  background: linear-gradient(180deg, #F4F3EF 0%, #EFEEE9 100%);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 2px rgba(18,18,18,.05);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.searchbar input:hover { background: linear-gradient(180deg, #F7F6F2 0%, #F2F1EC 100%); }
.searchbar input:focus {
  background: var(--surface); border-color: rgba(200,16,46,.35);
  box-shadow: 0 0 0 4px rgba(200,16,46,.10), var(--shadow-sm);
}

/* leading glyph — sits inside the field, purely decorative */
.searchbar__hint {
  position: absolute; inset-block-start: 50%; inset-inline-start: 20px;
  transform: translateY(-50%); width: 19px; height: 19px;
  color: var(--ink-mute); pointer-events: none;
}
.searchbar input:focus ~ .searchbar__hint { color: var(--brand-red); }

/* trailing submit — a filled circle, unmistakably a button */
.searchbar button {
  position: absolute; inset-block-start: 50%; inset-inline-end: 6px;
  transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--action); color: var(--on-action);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.searchbar button .icon { width: 18px; height: 18px; }
.searchbar button:hover { background: var(--brand-red); color: #fff; box-shadow: var(--shadow-glow-red); }
.searchbar button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Constrain the field: on a 1440 header a full-width search leaves the submit
   button stranded a screen away from where you type. */
.searchbar { max-width: 620px; margin-inline: auto; width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT PAGE
   The buy box is one form, not one per size: the size picker is a radio
   group so it still works with JavaScript off, and JS only mirrors the
   selected price upward. Everything numeric renders Persian digits, which
   is why the quantity field is type=text (a number input forces Latin).
   ═══════════════════════════════════════════════════════════════════════ */

.pdp { align-items: start; }
.pdp__gallery, .pdp__col { min-width: 0; }
.pdp__col { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ── gallery ─────────────────────────────────────────────────────────── */
.pdp__stage { position: relative; }

.pdp__chip {
  position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--sp-4) 7px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.pdp__chip .icon { width: 15px; height: 15px; }
.pdp__chip--fresh  { color: var(--success); }
.pdp__chip--frozen { color: var(--info); }

.pdp__thumb { transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.pdp__thumb:hover { transform: translateY(-2px); }

/* ── heading ─────────────────────────────────────────────────────────── */
.pdp__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pdp h1 { margin: 0; }
.pdp__lede {
  margin: 0; max-width: 46ch;
  font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink-soft);
}

/* ── buy box ─────────────────────────────────────────────────────────── */
.pdp__buybox { display: flex; flex-direction: column; gap: var(--sp-5); }

.pdp__pricebar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.pdp__priceblock { display: flex; flex-direction: column; gap: 2px; }
.pdp__price { line-height: 1; letter-spacing: -.03em; }
.pdp__price--none { font-size: var(--text-lg); color: var(--ink-mute); letter-spacing: 0; }
.pdp__save { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* size picker — radio cards */
.sizes { border: 0; padding: 0; margin: 0; min-width: 0; }
.sizes__legend {
  padding: 0; margin-block-end: var(--sp-3);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-soft);
}
.sizes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.sizes__single { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }

.size {
  position: relative; cursor: pointer;
  display: block; padding: var(--sp-4);
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size__body { display: flex; flex-direction: column; gap: 3px; }
.size__name { font-size: var(--text-base); font-weight: var(--weight-bold); }
.size__price { font-size: var(--text-xs); color: var(--ink-mute); }

/* one hover, on the card itself */
.size:hover { box-shadow: inset 0 0 0 1px var(--ghost-border-hover); transform: translateY(-1px); }
.size:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); transform: none; }
.size:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.size__mark {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--ink); color: var(--on-action);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.size__mark .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.size:has(input:checked) .size__mark { opacity: 1; transform: scale(1); }

.size.is-out { cursor: not-allowed; opacity: .5; }
.size.is-out:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ghost-border); }

/* ── call to action ──────────────────────────────────────────────────── */
.pdp__cta { display: flex; gap: var(--sp-3); align-items: stretch; }
.pdp__add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.pdp__add .icon { width: 19px; height: 19px; }
.pdp__out { margin: 0; font-size: var(--text-base); color: var(--ink-soft); }

.stepper--lg { border-radius: var(--radius-pill); border-color: var(--ghost-border); }
.stepper--lg button { width: 44px; font-size: var(--text-md); }
.stepper--lg input { width: 52px; font-size: var(--text-base); font-weight: var(--weight-bold); }

/* ── reassurance ─────────────────────────────────────────────────────── */
.assure {
  list-style: none; margin: 0; padding: var(--sp-5) 0 0;
  border-block-start: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--sp-3);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.assure li { display: flex; align-items: center; gap: var(--sp-3); }
.assure .icon { width: 18px; height: 18px; color: var(--ink); flex: none; }

/* ── story band ──────────────────────────────────────────────────────── */
.story2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr);
  gap: clamp(var(--sp-8), 5vw, 80px); align-items: center;
}
.story2__text { display: flex; flex-direction: column; gap: var(--sp-4); }
.story2__text h2 { margin: 0; }
.story2__how {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  margin-block-start: var(--sp-2); padding: var(--sp-5);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.story2__how .icon { width: 24px; height: 24px; flex: none; color: var(--ink); }
.story2__how h3 { margin: 0 0 var(--sp-1); font-size: var(--text-base); }
.story2__how p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: var(--leading-normal); }
.story2__shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.story2__shot img { display: block; width: 100%; aspect-ratio: 5/4; max-height: 460px; object-fit: cover; }
@media (max-width: 900px) { .story2 { grid-template-columns: 1fr; } .story2__shot { order: -1; } }


@media (max-width: 640px) {
  .pdp__cta { flex-direction: column; }
  .pdp__add { width: 100%; }
  .stepper--lg { align-self: flex-start; }
}

/* The refined `.pdp` grid above is unconditional and sits after the earlier
   `max-width: 900px` collapse, so it was overriding it — the product page
   rendered two columns even on a phone. Re-state the collapse last. */
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a plain fr track keeps min-width:auto, so a single
     wide child (the thumbnail strip, an unbreakable batch code) stretches the
     grid past the container and shoves the page off-centre. */
  .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .pdp__gallery { position: static; }
  .pdp__stage { aspect-ratio: 4 / 3; }
  .pdp__thumbs { overflow-x: auto; padding-block-end: var(--sp-1); }
  .pdp__thumb { flex: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH — phone → code → (new accounts) name & address
   Full-bleed split: the photo half runs edge to edge with no frame, the
   form half is centered on the page ground. All three steps share the
   shell so nothing jumps between them.
   ═══════════════════════════════════════════════════════════════════════ */

.authband { padding-block: 0; }
/* the auth split is the whole page — let it own the space main reserves */
main:has(> .authband:first-child) { padding-block-start: 0 !important; }

.auth {
  /* first track is the form (inline-start = right in RTL) — it gets the
     larger share; the photo is a supporting act, not the show */
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  min-height: max(620px, calc(100svh - 240px));
  /* oversized brand glyph bleeding off the form half's corner — texture,
     not content, so it lives in the background and never in the DOM */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23121212' fill-opacity='.03' d='m5.2 45.6c.569.715 1.42.371 1.632-.045l1.823-2.733c4.5 2.362 8.33-.787 8.33-.787 10.301-6.087 18.962-14.749 25.049-25.049 0 0 3.149-3.576.786-8.33l2.734-1.823c.27-.18.826-.878.045-1.632l-4-3c-.906-.529-1.447.179-1.549.483l-.846 2.539c-1.503-.69-6.824-2.223-10.327 3.946l3.923 5.231c.769 1.09-.689 2.262-1.6 1.2l-3.504-4.673c-1.898 2.693-4.003 5.241-6.269 7.641l4.373 5.832c.697 1.005-.592 2.262-1.6 1.2l-4.169-5.558c-2.744 2.744-5.718 5.256-8.875 7.5l3.644 4.858c.721.983-.615 2.311-1.6 1.2l-3.706-4.942c-6.494 3.553-4.96 9.044-4.271 10.547l-2.539.846c-.517.164-.971.935-.484 1.549z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 380px auto;
  background-position: right -110px bottom -150px;
  overflow: hidden;
}
[dir="ltr"] .auth { background-position: left -110px bottom -150px; }
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth__side { order: -1; min-height: 280px; }
  /* the banner is short, so the copy sits over the busy middle of the photo —
     it needs a deeper scrim than the tall desktop panel */
  .auth__side::after {
    background: linear-gradient(to top, rgba(18,18,18,.86) 0%,
                                        rgba(18,18,18,.52) 55%,
                                        rgba(18,18,18,.18) 100%);
  }
}

/* ── form half ───────────────────────────────────────────────────────── */
.auth__panel {
  align-self: center; width: 100%; max-width: 480px;
  margin-inline: auto;
  padding: clamp(var(--sp-8), 5vw, var(--sp-16)) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}

/* one color, no ornament — it is a whisper, not a badge */
.auth__steps {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: .14em; color: var(--ink-mute);
}

.auth__title {
  margin: 0; font-size: clamp(36px, 4vw, 54px);
  font-weight: var(--weight-black);
  letter-spacing: -.035em; line-height: 1.06;
}
.auth__lede { margin: 0; font-size: var(--text-base); color: var(--ink-soft); line-height: var(--leading-snug); }
.auth__lede b { color: var(--ink); }
.auth__change { font-size: var(--text-sm); white-space: nowrap; }

.auth__form { display: flex; flex-direction: column; gap: var(--sp-4); margin-block-start: var(--sp-2); }

/* Filled fields and a matching CTA: same height, same radius, so the column
   reads as one family instead of a pill fighting a rounded rectangle. */
.auth__form .input {
  width: 100%;  /* the global .input rule leaves inputs at intrinsic width */
  height: 58px; border-radius: 14px; font-size: var(--text-base);
  background: var(--surface-sunken); border-color: transparent;
}
.auth__form .input:hover { border-color: var(--ghost-border); }
.auth__form .input:focus { background: var(--surface); border-color: var(--ink); box-shadow: none; }
.auth__form textarea.input { height: auto; min-height: 96px; padding-block: var(--sp-3); resize: vertical; }
.auth__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 480px) { .auth__grid2 { grid-template-columns: 1fr; } }

.auth__form .btn--primary {
  height: 58px; border-radius: 14px; padding-block: 0;
  font-size: var(--text-md); font-weight: var(--weight-bold);
}

.inputwrap { position: relative; display: block; }
.inputwrap__icon {
  position: absolute; inset-block-start: 50%; inset-inline-start: 18px;
  transform: translateY(-50%); width: 19px; height: 19px;
  color: var(--ink-mute); pointer-events: none;
  transition: color var(--dur) var(--ease-out);
}
.inputwrap .input { padding-inline-start: 52px; }
.inputwrap:focus-within .inputwrap__icon { color: var(--ink); }

/* Keep the phone field RTL so padding-inline-start lands on the icon's edge;
   bidi renders the digit run left-to-right on its own. */
.auth__form .input--tel {
  direction: rtl; text-align: start;
  font-size: var(--text-md); font-weight: var(--weight-medium);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.auth__form .input--otp {
  height: 72px; font-size: clamp(28px, 4vw, var(--text-2xl));
  letter-spacing: .22em; text-align: center; font-weight: var(--weight-black);
}
.auth__form .input--otp::placeholder { color: var(--ghost-border); letter-spacing: .1em; }

/* one box per digit; digits always run left-to-right */
.otp { display: flex; gap: var(--sp-2); direction: ltr; justify-content: flex-end; }
.otp input {
  width: 0; flex: 1 1 0; max-width: 68px; height: 68px; padding: 0;
  text-align: center;
  font-size: clamp(24px, 3vw, 32px); font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  background: var(--surface-sunken); border: 1px solid transparent;
  border-radius: 14px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.otp input:hover { border-color: var(--ghost-border); }
.otp input:focus { background: var(--surface); border-color: var(--ink); outline: none; }
.otp input.is-filled { background: var(--surface); border-color: var(--ghost-border); }

.auth__fine { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); line-height: var(--leading-snug); }
.auth__fine a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

.auth__resend {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-block-start: var(--sp-5); border-block-start: 1px solid var(--rule);
}
.auth__wait { font-size: var(--text-sm); color: var(--ink-mute); }
.auth__wait b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── photo half: edge to edge, no frame ──────────────────────────────── */
.auth__side {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  padding: clamp(var(--sp-6), 3vw, var(--sp-10));
  background: var(--grad-sunken);
}
.auth__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* one photographic voice for four different shots: a warm grade, a soft
   vignette and a whisper of grain applied on top of whichever photo loads */
.auth__side::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 35%, rgba(0,0,0,0) 55%, rgba(10,8,6,.32) 100%),
    linear-gradient(rgba(140,72,30,.10), rgba(140,72,30,.10));
  opacity: .9;
}
.auth__side::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(18,18,18,.78) 0%,
                                      rgba(18,18,18,.38) 34%,
                                      rgba(18,18,18,0) 62%);
}
.auth__sidebody { color: #fff; display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__sidetitle {
  margin: 0; color: #fff;
  font-size: clamp(28px, 2.9vw, 40px);
  letter-spacing: -.025em; line-height: 1.14;
}
.auth__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.auth__ticks li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-sm); color: rgba(255,255,255,.88);
}
.auth__ticks .icon { width: 18px; height: 18px; flex: none; color: #fff; }

/* entrance — runs once per load; skipped entirely for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes auth-settle { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
  .auth__side { animation: auth-settle .7s var(--ease-out) both; }
  .auth__panel > * { animation: auth-rise .55s var(--ease-out) both; }
  .auth__panel > :nth-child(1) { animation-delay: .1s; }
  .auth__panel > :nth-child(2) { animation-delay: .16s; }
  .auth__panel > :nth-child(3) { animation-delay: .22s; }
  .auth__panel > :nth-child(4) { animation-delay: .28s; }
  .auth__panel > :nth-child(5) { animation-delay: .34s; }
  .auth__panel > :nth-child(6) { animation-delay: .4s; }
  .auth__panel > :nth-child(7) { animation-delay: .46s; }
}

/* ── toasts — confirmation without navigation ──────────────────────────── */
#toasts {
  position: fixed; z-index: 90;
  inset-block-end: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%; transform: translateX(50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
[dir="ltr"] #toasts { transform: translateX(-50%); }
.toast {
  max-width: min(92vw, 480px);
  padding: 12px var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--ink); color: var(--ink-inverse);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  animation: toast-in .3s var(--ease-out) both;
}
.toast--error { background: var(--surface); color: var(--danger); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--danger); }
.toast.is-leaving { transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* the bottom bar sits over the toast spot on phones */
@media (max-width: 720px) {
  #toasts { inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* brief confirmation on the button that did the adding */
.addbtn.is-added, .btn--primary.is-added {
  background: var(--success) !important; border-color: var(--success) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT — numbered steps + a summary rail that answers "so how much?"
   before the shopper has to ask. Everything is one form; the rail's CTA
   submits it via the form attribute.
   ═══════════════════════════════════════════════════════════════════════ */

.co-title { margin-block: 0 var(--sp-6); }
.co-flow { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

.co-step {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.co-step__head { display: flex; align-items: center; gap: var(--sp-3); }
.co-step__num {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  background: var(--ink); color: var(--on-action);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.co-step__title { margin: 0; font-size: var(--text-md); }
.co-step__aside { margin-inline-start: auto; font-size: var(--text-sm); white-space: nowrap; }

/* ── radio cards (address, zone) ─────────────────────────────────────── */
.choice {
  position: relative; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); cursor: pointer;
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
  transition: box-shadow var(--dur) var(--ease-out);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__name { font-weight: var(--weight-bold); }
.choice__sub { font-size: var(--text-xs); color: var(--ink-mute); line-height: var(--leading-snug); }
.choice:hover { box-shadow: inset 0 0 0 1px var(--ghost-border-hover); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.choice__mark {
  margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  background: var(--ink); color: var(--on-action);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.choice__mark .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.choice:has(input:checked) .choice__mark { opacity: 1; transform: scale(1); }
.co-zones { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── chips (date, slot) ──────────────────────────────────────────────── */
.chipset { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip__body {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  min-width: 108px; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
  font-size: var(--text-xs); color: var(--ink-mute);
  text-align: center; line-height: 1.5;
  transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.chip__body b { font-size: var(--text-sm); color: var(--ink); }
.chip:hover .chip__body { box-shadow: inset 0 0 0 1px var(--ghost-border-hover); }
.chip:has(input:checked) .chip__body { box-shadow: inset 0 0 0 2px var(--ink); }
.chip:has(input:focus-visible) .chip__body { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.chip__full { display: none; font-style: normal; color: var(--danger); font-size: var(--text-xs); }
.chip.is-full { cursor: not-allowed; }
.chip.is-full .chip__body { opacity: .55; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--rule); }
.chip.is-full .chip__full { display: block; }

/* ── payment + summary extras ────────────────────────────────────────── */
.co-pay {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg);
  background: var(--success-tint);
}
.co-pay .icon { width: 22px; height: 22px; flex: none; color: var(--success); margin-block-start: 2px; }
.co-pay div { display: flex; flex-direction: column; gap: 2px; }
.co-pay b { font-size: var(--text-sm); }
.co-pay span { font-size: var(--text-xs); color: var(--ink-soft); }

.co-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.co-items li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); }
.co-items__thumb {
  width: 44px; height: 44px; border-radius: var(--radius); overflow: hidden; flex: none;
  background: var(--grad-sunken); box-shadow: inset 0 0 0 1px rgba(18,18,18,.06);
}
.co-items__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-items__name { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.co-items__name i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.co-fine { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--ink-mute); }

/* ── checkbox — a real row, not a stray box in the middle ─────────────── */
.check {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  cursor: pointer; padding: var(--sp-3) var(--sp-4);
  border-radius: 14px; background: var(--surface-sunken);
  transition: background var(--dur) var(--ease-out);
}
.check:hover { background: var(--ghost-bg-hover); }
/* the real input stays in the layout for a11y, just visually replaced */
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  display: grid; place-content: center;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ghost-border);
  color: transparent;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.check__box .icon { width: 13px; height: 13px; stroke-width: 3; }
.check input:checked + .check__box {
  background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--on-action);
}
.check input:focus-visible + .check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.check__label { font-size: var(--text-sm); line-height: var(--leading-snug); }

/* the address step needs more room than a login form */
.auth__panel--wide { max-width: 560px; }

/* ── Neshan map picker (only rendered when a key is configured) ───────── */
.mappick { display: flex; flex-direction: column; gap: var(--sp-2); }
.mappick__canvas {
  height: 240px; border-radius: 14px; overflow: hidden;
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--ghost-border);
}
.mappick__hint { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }

/* ── account area ────────────────────────────────────────────────────── */
.acct { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 860px; margin-inline: auto; }

.acct__tabs {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  border-block-end: 1px solid var(--rule);
}
.acct__tabs a {
  padding: var(--sp-3) var(--sp-4); white-space: nowrap;
  color: var(--ink-mute); text-decoration: none;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.acct__tabs a:hover { color: var(--ink); }
.acct__tabs a.is-active { color: var(--ink); font-weight: var(--weight-bold); border-block-end-color: var(--ink); }

.acct__cardhead { display: flex; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-5); }
.acct__cardhead .acct__cardtitle { margin: 0; }
.acct__cardhead .btn { margin-inline-start: auto; }

.acct__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-6); text-align: center;
}
.acct__empty .icon { width: 34px; height: 34px; color: var(--ghost-border-hover); }
.acct__empty p { margin: 0; color: var(--ink-mute); }

.acct__note { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: var(--ink-mute); }
.acct__line { margin: 0 0 var(--sp-3); font-size: var(--text-sm); line-height: var(--leading-normal); }
.acct__line:last-child { margin-block-end: 0; }
.acct__lineicon { width: 15px; height: 15px; vertical-align: -2px; margin-inline-end: 4px; color: var(--ink-mute); }

/* ── order status pill ───────────────────────────────────────────────── */
.ostat {
  display: inline-flex; align-items: center;
  padding: 4px var(--sp-3); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  background: var(--surface-sunken); color: var(--ink-soft); white-space: nowrap;
}
.ostat--lg { font-size: var(--text-sm); padding: 7px var(--sp-4); }
/* Keyed off the four TONES, not off status names picked one at a time. The
   old table named seven of the ten and got one wrong: it styled
   `.ostat--failed`, but the class rendered is `.ostat--failed_delivery`, so a
   failed delivery drew the neutral default — measured at rgb(242,242,238) —
   and looked like a status with no opinion. `confirmed` and `returned` fell
   through the same hole. Four rules now cover all ten by construction. */
.ostat--wait { background: var(--warning-tint); color: var(--warning); }
.ostat--live { background: var(--info-tint);    color: var(--info); }
.ostat--done { background: var(--ok-tint);      color: var(--ok); }
.ostat--bad  { background: var(--bad-tint);     color: var(--bad); }

/* ── order detail ────────────────────────────────────────────────────── */
.ordhead { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.ordhead__eyebrow { margin: 0; font-size: var(--text-xs); letter-spacing: .12em; color: var(--ink-mute); }
.ordhead__num { margin: 2px 0 0; font-size: clamp(26px, 3vw, var(--text-xl)); letter-spacing: -.02em; }
.ordhead__date { margin: var(--sp-1) 0 0; font-size: var(--text-sm); color: var(--ink-mute); }
.ordhead .ostat { margin-inline-start: auto; }

.ordnote {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg);
  background: var(--success-tint);
}
.ordnote .icon { width: 20px; height: 20px; flex: none; color: var(--success); margin-block-start: 2px; stroke-width: 2.4; }
.ordnote p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: var(--leading-snug); }

.dcode {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--grad-ink); color: var(--ink-inverse);
}
.dcode__label { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.dcode__hint { margin: 2px 0 0; font-size: var(--text-xs); opacity: .66; }
.dcode__value {
  margin-inline-start: auto; font-size: clamp(28px, 4vw, var(--text-2xl));
  font-weight: var(--weight-black); letter-spacing: .12em;
}

.ordgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { .ordgrid { grid-template-columns: 1fr; } }
.acct__side { display: flex; flex-direction: column; gap: var(--sp-5); }

/* The drawer IS the category bar on a phone, so it has to say "you are here"
   the same way. Bold-in-the-same-ink was the only marker, and against ten other
   links at weight 500 that is not a signal anyone reads. */
.drawer__link.is-active { color: var(--brand-red); font-weight: var(--weight-bold); }

/* ═══════════════════════════════════════════════════════════════════════
   ACCOUNT — identity banner, stats, last order
   The flat grey block this replaces read as a wireframe. Same palette as the
   rest of the site (ink gradient + one red accent), no new colors invented.
   ═══════════════════════════════════════════════════════════════════════ */

.idcard {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  background: var(--grad-ink); color: var(--ink-inverse);
  box-shadow: var(--shadow-lg);
}
/* a single warm red bloom in the corner — the brand accent, used once */
.idcard__glow {
  position: absolute; z-index: -1; inset-block-start: -40%; inset-inline-end: -10%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.55) 0%, rgba(200,16,46,0) 68%);
  filter: blur(10px); pointer-events: none;
}
.idcard::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .8;
}
.idcard__body { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.idcard__avatar {
  width: 66px; height: 66px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: rgba(255,255,255,.10); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 24px -10px rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}
.idcard__avatar .icon { width: 28px; height: 28px; }
.idcard__who { min-width: 0; }
.idcard__name {
  margin: 0; color: #fff;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; line-height: 1.1;
}
.idcard__phone { margin: 6px 0 0; font-size: var(--text-sm); color: rgba(255,255,255,.6); }
.idcard__side { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); }
.idcard__since { margin: 0; font-size: var(--text-xs); color: rgba(255,255,255,.5); }
.idcard__out {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px var(--sp-4); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10); color: #fff; text-decoration: none;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: background var(--dur) var(--ease-out);
}
.idcard__out:hover { background: rgba(255,255,255,.2); }
.idcard__out .icon { width: 14px; height: 14px; }
[dir="rtl"] .idcard__out .icon { transform: scaleX(-1); }
@media (max-width: 560px) {
  .idcard__side { margin-inline-start: 0; align-items: flex-start; width: 100%; }
}

/* tabs — scrollable on a phone, never a visible scrollbar */
.acct__tabs { scrollbar-width: none; -ms-overflow-style: none; }
.acct__tabs::-webkit-scrollbar { display: none; }

/* ── live order card ─────────────────────────────────────────────────────
   Visual rail with real checkpoints, the arrival time as the loudest element,
   and a glimpse of what is actually in the box.
   ──────────────────────────────────────────────────────────────────────── */
.ship {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  border-radius: 20px; color: inherit; text-decoration: none;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9F3 42%, #FFF1E8 100%);
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
  transition: box-shadow .42s var(--ease-out), transform .42s var(--ease-out);
}
.ship__aura {
  position: absolute; z-index: -1; inset-block-start: -60%; inset-inline-end: -12%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.16) 0%, rgba(200,16,46,0) 70%);
  transition: transform .8s var(--ease-out), opacity .8s var(--ease-out);
}
.ship:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ghost-border), var(--shadow-lg); }
.ship:hover .ship__aura { transform: translate(-8%, 10%) scale(1.12); opacity: .85; }

.ship__top { display: flex; align-items: center; gap: var(--sp-3); }
.ship__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.ship__badge i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  animation: ship-beat 2s var(--ease-out) infinite;
}
@keyframes ship-beat {
  0%   { box-shadow: 0 0 0 0 rgba(16,128,56,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(16,128,56,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,128,56,0); }
}
.ship__num { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

/* arrival time + a peek at the contents, side by side */
.ship__lead { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.ship__eta { display: flex; flex-direction: column; gap: 3px; }
.ship__eta b { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; line-height: 1.15; }
.ship__eta span { font-size: var(--text-sm); color: var(--ink-soft); }

.ship__thumbs { margin-inline-start: auto; display: flex; align-items: center; }
.ship__thumb {
  width: 46px; height: 46px; border-radius: 13px; overflow: hidden;
  background: var(--grad-sunken);
  box-shadow: 0 0 0 3px #FFF7F0, var(--shadow-sm);
  /* transform only — animating margin re-runs layout and snapped instead of
     gliding, because margin was never in this transition list */
  transition: transform .55s cubic-bezier(.4, 0, .2, 1),
              box-shadow .55s cubic-bezier(.4, 0, .2, 1);
}
.ship__thumb + .ship__thumb { margin-inline-start: -14px; }
.ship__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fan the stack open on hover, each one drifting a little further */
.ship:hover .ship__thumb { transform: translateY(-3px); }
.ship:hover .ship__thumb:nth-child(2) { transform: translateY(-3px) translateX(-7px); }
.ship:hover .ship__thumb:nth-child(3) { transform: translateY(-3px) translateX(-14px); }
.ship__more {
  margin-inline-start: var(--sp-2); font-size: var(--text-xs);
  font-weight: var(--weight-bold); color: var(--ink-mute);
}

/* ── the rail ───────────────────────────────────────────────────────────
   Inset by half a stop-column so the line begins on the first checkpoint and
   ends on the last, instead of running past the outer labels.               */
.ship__track { display: block; padding-inline: 26px; }
.ship__rail {
  display: block;
  position: relative; height: 6px; border-radius: var(--radius-pill);
  background: rgba(18,18,18,.09);
}
.ship__fill {
  display: block;
  position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit;
  background: linear-gradient(90deg, #34C77B 0%, var(--success) 100%);
  animation: ship-grow 1.1s var(--ease-out) both;
  /* the sheen below sweeps the full width of this box — without clipping it
     kept travelling past the last completed stop and lit up the grey rest */
  overflow: hidden;
}
.ship__fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: ship-sheen 2.8s var(--ease-out) infinite;
}
@keyframes ship-grow { from { transform: scaleX(0); transform-origin: right center; } to { transform: scaleX(1); } }
@keyframes ship-sheen { 0% { transform: translateX(100%); } 60%, 100% { transform: translateX(-100%); } }

/* checkpoints */
.ship__dot {
  position: absolute; inset-block-start: 50%;
  transform: translate(50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--surface); color: transparent;
  box-shadow: inset 0 0 0 2px rgba(18,18,18,.14);
  transition: background .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.ship__dot .icon { width: 10px; height: 10px; stroke-width: 3.2; }
.ship__dot.is-done { background: var(--success); color: #fff; box-shadow: inset 0 0 0 2px var(--success), 0 0 0 3px #FFF7F0; }
.ship__dot.is-current { box-shadow: inset 0 0 0 2px var(--success), 0 0 0 4px rgba(16,128,56,.18); }

.ship__van {
  position: absolute; inset-block-start: 50%;
  transform: translate(50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(18,18,18,.55), 0 0 0 4px #FFF7F0;
  animation: ship-bob 2.4s var(--ease-out) infinite;
}
.ship__van .icon { width: 17px; height: 17px; }
[dir="rtl"] .ship__van .icon { transform: scaleX(-1); }
@keyframes ship-bob {
  0%, 100% { transform: translate(50%, -50%); }
  50%      { transform: translate(50%, -64%); }
}

/* labels sit exactly under their own dot */
.ship__stops { position: relative; display: block; height: 18px; margin-block-start: var(--sp-4); }
.ship__stops i {
  position: absolute; transform: translateX(50%);
  font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); white-space: nowrap;
  transition: color .4s var(--ease-out);
}
.ship__stops i.is-done { color: var(--ink); font-weight: var(--weight-medium); }

.ship__cta { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ship__cta .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
[dir="rtl"] .ship__cta .icon { transform: scaleX(-1); }
[dir="rtl"] .ship:hover .ship__cta .icon { transform: scaleX(-1) translateX(4px); }

@media (max-width: 560px) {
  .ship__thumbs { margin-inline-start: 0; }
  .ship__stops i { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ship__fill, .ship__fill::after, .ship__van, .ship__badge i { animation: none; }
}

/* read-only fields should not look editable */
.acct__form .input[readonly] { background: var(--surface-sunken); color: var(--ink-soft); cursor: default; }
.acct__form .input[readonly]:focus { border-color: var(--ghost-border); box-shadow: none; }

/* Restored after an over-eager edit removed them along with the old header. */
.acct--wide { max-width: 1000px; }
.acct__card {
  padding: clamp(var(--sp-5), 3vw, var(--sp-8)); border-radius: var(--radius-lg);
  background: var(--grad-surface); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
}
.acct__cardtitle { margin: 0 0 var(--sp-5); font-size: var(--text-md); }
.acct__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.acct__form .input { width: 100%; height: 52px; border-radius: 14px; }
.acct__form textarea.input { height: auto; min-height: 90px; padding-block: var(--sp-3); }
.acct__form .btn { align-self: flex-start; }
/* an input inside .inputwrap is not the flex child, so it never inherited the
   stretch that gives the other fields their width */
.inputwrap .input { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   HOVER REFINEMENT
   The site had one hover for everything: jump up 2px and drop a big shadow.
   It reads as a twitch. Cards now settle rather than snap — a longer, softer
   curve, a smaller lift, and a light that grows from the pointer's side —
   and the arrow-bearing rows nudge their arrow instead of the whole box.
   ═══════════════════════════════════════════════════════════════════════ */

.pcard, .acct__tile, .ord, .addr, .stat, .lastord, .choice, .size, .chip__body {
  transition:
    box-shadow .42s var(--ease-out),
    transform .42s var(--ease-out),
    background-color .42s var(--ease-out);
  will-change: transform;
}

/* a smaller, calmer lift */
.acct__tile:hover, .ord:hover, .lastord:hover, a.stat:hover {
  transform: translateY(-2px) scale(1.004);
}

/* rows that end in an arrow: move the arrow, not the room */
.ord__go, .lastord__go { transition: transform .35s var(--ease-out), color .35s var(--ease-out); }
[dir="rtl"] .ord:hover .ord__go,
[dir="rtl"] .lastord:hover .lastord__go { transform: scaleX(-1) translateX(5px); color: var(--ink); }

/* address cards: warm the pin instead of throwing the card around */
.addr { transition: box-shadow .42s var(--ease-out), background .42s var(--ease-out); }
.addr:hover { background: var(--grad-surface); }
.addr__pin { transition: transform .45s var(--ease-out), background .45s var(--ease-out), color .45s var(--ease-out); }
.addr:hover .addr__pin { transform: rotate(-6deg) scale(1.06); background: var(--ink); color: var(--on-action); }

/* tabs: let the underline grow rather than blink on */
.acct__tabs a { position: relative; border-block-end-color: transparent; }
.acct__tabs a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: center;
  transition: transform .38s var(--ease-out);
}
.acct__tabs a:hover::after { transform: scaleX(.55); }
.acct__tabs a.is-active::after { transform: scaleX(1); }

/* buttons: ease the press instead of stepping through states */
.btn { transition: background .32s var(--ease-out), color .32s var(--ease-out),
                   box-shadow .32s var(--ease-out), transform .18s var(--ease-out); }
.btn--primary:hover { box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .pcard, .acct__tile, .ord, .addr, .stat, .lastord, .choice, .size,
  .chip__body, .btn, .acct__tabs a::after { transition: none; }
  .acct__tile:hover, .ord:hover, .lastord:hover, a.stat:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE CORRECTIONS
   Stated last on purpose: the refined blocks above re-declare some layouts
   without a media query, which silently defeats the collapses declared
   earlier in the file. Anything that must win on a small screen lives here.
   ═══════════════════════════════════════════════════════════════════════ */

/* The filter rail was still 232px on a phone, leaving the product grid ~102px
   and every card 45px wide — the catalogue was unusable on mobile. */
@media (max-width: 880px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  /* The panel's own narrow-screen layout lives with the rest of the facet
     rules further down. What used to sit here was a flex strip for the old
     text-link sidebar; `.shop-layout > aside` outranks `.facets`, so leaving
     it in place silently overrode the new panel's flex-direction handling. */
}

/* ── touch targets ───────────────────────────────────────────────────────
   Small text links were 23–28px tall — under the 44px a fingertip needs.
   Padding grows the hit area without changing how they look.              */
.section-head__link,
.co-step__aside,
.breadcrumb a,
.acct__tabs a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.breadcrumb a { padding-inline: 6px; margin-inline: -6px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }

.stepper button { min-width: 44px; min-height: 44px; }
.stepper input { min-height: 44px; }
.btn--sm { min-height: 40px; }

@media (max-width: 720px) {
  /* thumb-friendly on the smallest screens */
  .btn--sm { min-height: 44px; }
  .addr__acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── cart on a phone: the table becomes cards ───────────────────────────
   A 5-column table cannot fit 390px; it was overflowing by ~50px and forcing
   a sideways scroll on the one page where control matters most. The JS hooks
   (data-cart-row, data-line-total) are untouched.                         */
@media (max-width: 720px) {
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-table tr {
    display: grid; gap: var(--sp-3) var(--sp-4);
    grid-template-columns: 78px minmax(0, 1fr) auto;
    grid-template-areas: "thumb name name" "thumb qty total" "thumb remove remove";
    padding: var(--sp-4) 0; border-block-end: 1px solid var(--rule-soft);
  }
  .cart-table tr > td { padding: 0; border: 0; }
  .cart-table tr > td:nth-child(1) { grid-area: thumb; width: 78px !important; }
  .cart-table tr > td:nth-child(2) { grid-area: name; }
  .cart-table tr > td:nth-child(3) { grid-area: qty; }
  .cart-table tr > td:nth-child(4) { grid-area: total; align-self: center; text-align: end; }
  .cart-table tr > td:nth-child(5) { grid-area: remove; }
  .cart-table tr > td:nth-child(5) .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — v3
   Three bands, three jobs, and one grey removed.

   The old header spent its warm grey (#F2F2EE) twice: as the utility strip's
   ground and, at the same value, as the category link's hover. So the hover
   never read as a hover — it was the page's own background arriving under the
   cursor, a ~2% step off white. The fix is not a darker grey; it is to stop
   using grey for state at all.

   · Utility strip → ink. It is chrome, not content, so it sits behind the
     brand instead of competing with it, and the warm band at the very top of
     the page is gone.
   · Masthead    → unchanged in kind, taller, so the logo and the search pill
     have room to be the thing you look at.
   · Category bar → one ink pill glides between the links. Hover is now a
     near-black shape moving under the pointer, which is impossible to miss,
     and the current section is where the pill sleeps.

   Pattern is the "magic line / lava lamp" indicator, the standard way to give
   a horizontal nav a single continuous focus object rather than five
   independent little backgrounds blinking on and off.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── utility strip ─────────────────────────────────────────────────────
   Ink, not sunken warm grey. It scrolls away (only the masthead is sticky),
   so it can afford to be the darkest thing on the page. */
.utility {
  background: var(--grad-ink);
  border-bottom: 0;
  color: rgba(255, 255, 255, .62);
}
.utility .container { min-height: 44px; }
.utility a { color: rgba(255, 255, 255, .62); transition: color var(--dur) var(--ease-out); }
.utility a:hover { color: #fff; }
.utility .icon { width: 15px; height: 15px; }

/* hairline separators instead of naked gaps */
.utility__links { gap: 0; }
.utility__links > * { padding-inline: var(--sp-4); position: relative; }
.utility__links > * + *::before {
  content: ""; position: absolute; inset-inline-end: 0; inset-block: 5px;
  width: 1px; background: rgba(255, 255, 255, .14);
}
.utility__links > :last-child { padding-inline-end: 0; }

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead .container { min-height: 92px; }
.masthead { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--rule); }

/* ══ CATEGORY BAR ══════════════════════════════════════════════════════
   No fill behind the links. The state lives in the word itself — it turns
   brand red — and in a red rule that grows under it. One property animating,
   one short duration, nothing travelling across the bar.
   ══════════════════════════════════════════════════════════════════════ */
.catnav {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.catnav .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: 68px;
}

/* The rail — not the band — is what scrolls sideways on a narrow screen. */
.catnav__rail {
  position: relative; display: flex; align-items: center; gap: var(--sp-1);
  min-width: 0; padding-block: 10px;
  overflow-x: auto; overflow-y: hidden;
  /* Trailing padding is unreliable inside a scroll container, so the slack that
     keeps the first and last link off the fade is a real flex child instead. */
  scroll-padding-inline: var(--sp-2);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Edge fades say "there is more this way". A mask is used rather than an
     overlay because a mask on a scroll container is painted in the container's
     own box, so it stays pinned to the edges while the links slide underneath —
     an absolutely-positioned gradient would scroll away with them.
     Both stops are 0 until app.js finds the rail actually overflows, which
     makes the whole declaration a no-op on a desktop that never scrolls.
     The gradient runs `to left` because this document is dir="rtl": the scroll
     origin is the right edge, so --fade-start is the right one. */
  --fade-start: 0px;
  --fade-end: 0px;
  -webkit-mask-image: linear-gradient(to left,
    transparent 0, #000 var(--fade-start),
    #000 calc(100% - var(--fade-end)), transparent 100%);
          mask-image: linear-gradient(to left,
    transparent 0, #000 var(--fade-start),
    #000 calc(100% - var(--fade-end)), transparent 100%);
}
.catnav__rail::-webkit-scrollbar { display: none; }
.catnav__rail::after { content: ""; flex: 0 0 var(--sp-2); align-self: stretch; }
.catnav__rail.fade-start { --fade-start: 28px; }
.catnav__rail.fade-end   { --fade-end: 28px; }

.catnav .catnav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4); white-space: nowrap;
  border: 0; border-radius: var(--radius-sm); background: none;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  letter-spacing: -.005em; color: var(--ink-soft);
  transition: color .18s var(--ease-out);
}

/* The rule grows from the centre, so it reads as one gesture rather than a
   line wiping in from whichever side the pointer arrived on. Hover stops at
   55% and only the current section gets the full width — the same split the
   account tabs already use, so a short rule never means two things. */
.catnav .catnav__link::after {
  content: ""; position: absolute;
  inset-inline: var(--sp-4); inset-block-end: 0; height: 2px;
  background: var(--brand-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .18s var(--ease-out);
}

.catnav .catnav__link:hover { color: var(--brand-red); }
.catnav .catnav__link:hover::after { transform: scaleX(.55); }

.catnav .catnav__link.is-active {
  color: var(--brand-red); font-weight: var(--weight-bold);
}
.catnav .catnav__link.is-active::after { transform: scaleX(1); }

.catnav__icon { width: 19px; height: 19px; opacity: .7; }
.catnav .catnav__link:hover .catnav__icon,
.catnav .catnav__link.is-active .catnav__icon { opacity: 1; }

/* ── the quiet end of the bar ─────────────────────────────────────────
   1440px of empty rule looked like a mistake. Pay-on-delivery is the one
   promise that is not already in the utility strip, so it sits here. */
.catnav__aside {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--ink-mute);
}
.catnav__aside .icon { width: 17px; height: 17px; color: var(--ink-soft); }
@media (max-width: 1100px) { .catnav__aside { display: none; } }

/* Below the search breakpoint the masthead holds a logo and two icons, so a
   92px band is mostly empty air. The category bar keeps its weight instead —
   with the search field gone it is the only way to browse. */
@media (max-width: 900px) {
  .masthead .container { min-height: 76px; }
  .catnav .container { min-height: 64px; }
  .catnav__rail { padding-block: 8px; }
  /* 44px is the fingertip floor. These were 42. */
  .catnav .catnav__link {
    font-size: var(--text-sm); padding: 8px var(--sp-3); min-height: 44px;
  }
  .catnav .catnav__link::after { inset-inline: var(--sp-3); }
}
@media (max-width: 720px) {
  .masthead .container { min-height: 66px; }
  /* Losing the text label left these 37px tall — icon-only and undersized is
     exactly the case where the target needs to be padded back out. */
  .header-action { min-height: 44px; min-width: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .catnav .catnav__link::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOGUE — breadcrumb and facet rail
   Replaces `.filter-group` / `.filter-link`, which were plain text links
   floating on the page ground with nothing holding them together. Three
   things were wrong and all three are structural, not cosmetic:

   · No surface. The list sat directly on --ground, so it read as leftover
     text beside the grid rather than as the page's controls.
   · No state worth the name. Active was `font-weight: bold` and nothing
     else — at 15px, beside four other links, that is close to invisible.
   · No information. A filter that does not say how many products it leads
     to makes you click to find out.

   The panel borrows the two patterns the site already trusts: the product
   card's white surface, and the category bar's ink pill for the thing you
   are currently looking at. Nothing new is invented.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── breadcrumb ────────────────────────────────────────────────────────
   Was «خانه › محصولات» — a bare glyph wedged against both words with only
   the space character between them. Flex + gap gives each part real room,
   and the separator becomes the sprite chevron so it matches every other
   arrow on the site. #i-arrow already points left, which is forward in
   RTL, so it is not flipped. */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--text-sm); color: var(--ink-mute);
}
.breadcrumb a { color: var(--ink-soft); transition: color var(--dur) var(--ease-out); }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb__sep { width: 15px; height: 15px; flex: none; color: var(--rule-strong); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: var(--weight-medium); }

/* ── page head ────────────────────────────────────────────────────────── */
.shop-head__title { margin: 0; font-size: var(--text-xl); letter-spacing: -.015em; }
.shop-head__lede {
  margin: var(--sp-2) 0 0; max-width: 60ch;
  color: var(--ink-soft); font-size: var(--text-base);
}

/* ── the panel ────────────────────────────────────────────────────────── */
.facets {
  position: sticky; top: calc(92px + var(--sp-4));
  display: flex; flex-direction: column; gap: var(--sp-5);
  /* A grid item's automatic minimum size is its min-content, and an <input>
     reports ~20 characters of it no matter what width you give it. Stacked at
     360px that alone pushed the panel wider than the phone. */
  min-width: 0;
  padding: var(--sp-4);
  background: var(--grad-surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

/* search — the same sunken pill as the masthead, at panel scale */
.facets__search { position: relative; }
.facets__search input {
  width: 100%; min-width: 0; height: 42px;
  padding-inline: 40px var(--sp-3);
  border: 1px solid transparent; border-radius: 12px;
  background: var(--surface-sunken); color: var(--ink);
  font-family: inherit; font-size: var(--text-sm);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.facets__search input::placeholder { color: var(--ink-mute); }
.facets__search input:focus { outline: none; background: var(--surface); border-color: var(--ink); }
.facets__search-icon {
  position: absolute; inset-inline-start: 13px; inset-block-start: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-mute); pointer-events: none;
}

/* ── a group ──────────────────────────────────────────────────────────── */
.facet + .facet { padding-block-start: var(--sp-5); border-block-start: 1px solid var(--rule-soft); }
.facet__title {
  /* No uppercase and no letter-spacing here. Both are Latin-display habits;
     letter-spacing in particular prises apart the joined letters of a Persian
     word and is why the old titles looked broken. */
  margin: 0 0 var(--sp-2); padding-inline: var(--sp-2);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--ink-mute);
}
.facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* ── a row ────────────────────────────────────────────────────────────── */
.facet__row {
  /* The selected fill travels as a custom property so every place that paints
     it — desktop, the mobile pill — reads one value. Variants below re-point
     it; nothing else has to know a variant exists. */
  --facet-fill: var(--grad-red);
  --facet-glow: 0 2px 6px -2px rgba(200, 16, 46, .34), 0 10px 22px -12px rgba(200, 16, 46, .62);
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  min-height: 40px; padding-inline: var(--sp-2);
  border-radius: 10px;
  color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.facet__ico { width: 19px; height: 19px; opacity: .6; transition: opacity var(--dur) var(--ease-out); }
.facet__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet__count {
  min-width: 24px; padding-inline: 6px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-mute);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Hover is an ink tint, never the warm surface grey — the same decision the
   category bar makes, and for the same reason: --surface-sunken is already
   the page's own background and so cannot read as a state. */
.facet__row:hover { color: var(--ink); background-color: rgba(18, 18, 18, .06); }
.facet__row:hover .facet__ico { opacity: .85; }
.facet__row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Brand red, filled — see rule 2 in tokens.css, which this is the sanctioned
   exception to. White on the ramp's lightest stop (#E01B37) is 4.8:1, so the
   bold 15px label clears AA at the worst point of the gradient, not just the
   average one. The glow is the same red so the pill does not sit on a grey
   shadow. */
.facet__row.is-active {
  background: var(--facet-fill); color: var(--ink-inverse); font-weight: var(--weight-bold);
  box-shadow: var(--facet-glow);
}

/* نگهداری carries temperature, so its selected state carries temperature too:
   green for تازه, cold blue for منجمد. Same hues as the .tag--fresh /
   .tag--frozen badges on the cards, so the filter you picked and the badge on
   the product it returns are visibly the same idea. */
.facet__row--chilled {
  --facet-fill: var(--grad-fresh);
  --facet-glow: 0 2px 6px -2px rgba(0, 116, 52, .34), 0 10px 22px -12px rgba(0, 116, 52, .62);
}
.facet__row--frozen {
  --facet-fill: var(--grad-frozen);
  --facet-glow: 0 2px 6px -2px rgba(0, 108, 147, .34), 0 10px 22px -12px rgba(0, 108, 147, .62);
}
.facet__row.is-active .facet__ico { opacity: .9; }
/* Recessed DARKER, not lighter. A 16% white chip over the ramp's lightest
   stop left the white numeral at 4.05:1 — under AA. Going the other way puts
   the worst case at 6.6:1 and reads as a well rather than a highlight. */
.facet__row.is-active .facet__count { background: rgba(0, 0, 0, .18); color: #fff; }

/* A facet that leads nowhere should look like it. Still clickable — landing on
   the empty state explains itself better than a dead link would. */
.facet__row.is-empty { color: var(--ink-mute); }
.facet__row.is-empty .facet__ico { opacity: .3; }
.facet__row.is-empty .facet__count { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }

.facets__clear {
  align-self: flex-start; padding-inline: var(--sp-2);
  font-size: var(--text-xs); color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 4px;
}
.facets__clear:hover { color: var(--ink); }

/* ── the bar over the grid ───────────────────────────────────────────── */
.shop-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-5); padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--rule);
}
.shop-bar__count { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.shop-bar__count strong { color: var(--ink); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.shop-bar__meta { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }

/* ── narrow screens ───────────────────────────────────────────────────
   Stacked above the grid, a tall panel would push the products off the first
   screen. Same markup, read sideways: each group becomes one scrollable row
   of pills. */
@media (max-width: 880px) {
  .facets { position: static; gap: var(--sp-4); }
  .facet + .facet { padding-block-start: var(--sp-4); }
  /* A flex item's automatic minimum size is its min-content, so each .facet
     refused to be narrower than its widest pill row and the list inside it —
     overflow-x:auto, and perfectly able to scroll — was never asked to. The
     group pushed the document to ~385px instead, and on a 320px phone that
     shifted the WHOLE page sideways: a 65px gutter down one edge, the logo and
     the hamburger cut off the other. */
  .facet { min-width: 0; }
  .facet__list {
    flex-direction: row; gap: var(--sp-2);
    overflow-x: auto; scrollbar-width: none;
  }
  .facet__list::-webkit-scrollbar { display: none; }
  /* A flex item in an overflowing row shrinks to min-content, and min-content
     for an ellipsised name is zero — without this every pill collapses to its
     count badge. */
  .facet__list > li { flex: 0 0 auto; }
  .facet__row {
    grid-template-columns: auto auto auto; gap: var(--sp-2);
    min-height: 38px; padding-inline: var(--sp-3);
    border-radius: var(--radius-pill); background-color: var(--surface-sunken);
  }
  .facet__row.is-active { background: var(--facet-fill); }
  .facet__name { white-space: nowrap; }
}

/* ── auth: touch targets ─────────────────────────────────────────────────
   The terms links and “شماره اشتباهه؟” were 20–23px tall. Padding grows the
   hit area; negative margin keeps the text where it was.                  */
.auth__fine a,
.auth__change {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 4px; margin-inline: -4px;
}
.auth__fine { line-height: 1.9; }

/* ═══════════════════════════════════════════════════════════════════════
   ORDER DETAIL
   Same tracking language as the account card, so an order looks like the
   same object in both places.
   ═══════════════════════════════════════════════════════════════════════ */

.ohero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  border-radius: 20px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9F3 45%, #FFF1E8 100%);
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
}
.ohero__aura {
  position: absolute; z-index: -1; inset-block-start: -55%; inset-inline-end: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.15) 0%, rgba(200,16,46,0) 70%);
}
/* a finished order cools down — no warm bloom, no motion */
.ohero--done { background: var(--grad-surface); }
.ohero--done .ohero__aura { display: none; }

.ohero__top { display: flex; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.ohero__eyebrow { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }
.ohero__status {
  margin: 4px 0 0; font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -.025em; line-height: 1.1;
}
.ohero__when { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* the delivery code: the thing you hunt for at the door */
.ohero__code {
  margin-inline-start: auto; text-align: center;
  padding: var(--sp-4) var(--sp-6); border-radius: 16px;
  background: var(--grad-ink); color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
}
.ohero__code span { display: block; font-size: var(--text-xs); opacity: .62; }
.ohero__code b {
  display: block; margin-block: 2px;
  font-size: clamp(26px, 3vw, 34px); font-weight: var(--weight-black); letter-spacing: .14em;
}
.ohero__code i { display: block; font-style: normal; font-size: 11px; opacity: .5; }

.ohero__track { display: block; padding-inline: 26px; }
/* the rail, dots, van and labels are shared with .ship — see the live order card */

.ohero__list {
  list-style: none; margin: 0; padding: var(--sp-5) 0 0;
  border-block-start: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--ink-mute);
}
.ohero__list li { display: flex; gap: var(--sp-2); }

/* ── items ───────────────────────────────────────────────────────────── */
.oitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.oitem {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.oitem + .oitem { border-block-start: 1px solid var(--rule-soft); }
.oitem__thumb {
  width: 58px; height: 58px; flex: none; border-radius: 14px; overflow: hidden;
  display: grid; place-content: center;
  background: var(--grad-sunken); color: var(--ghost-border-hover);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.06);
}
.oitem__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oitem__thumb .icon { width: 22px; height: 22px; }
.oitem__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.oitem__body b { font-size: var(--text-base); }
.oitem__body i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.oitem__unit { font-size: var(--text-xs); color: var(--ink-mute); }
.oitem__qty { flex: none; font-size: var(--text-sm); color: var(--ink-soft); }
.oitem__sum { flex: none; font-weight: var(--weight-bold); }

.acct__cardhead form { margin-inline-start: auto; }
.acct__cardhead .btn { display: inline-flex; align-items: center; gap: 6px; }
.acct__cardhead .btn .icon { width: 15px; height: 15px; }

.opay {
  margin: var(--sp-4) 0 0; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--ink-mute);
}
.opay .icon { width: 15px; height: 15px; color: var(--success); }

/* ── delivery facts ──────────────────────────────────────────────────── */
.ofacts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.ofacts dt { font-size: var(--text-xs); color: var(--ink-mute); margin-block-end: 3px; }
.ofacts dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }

@media (max-width: 560px) {
  .ohero__code { margin-inline-start: 0; width: 100%; }
  .oitem__qty { display: none; }      /* quantity already reads in the subtitle */
}

/* ── product card: the whole card is the target ──────────────────────────
   The title link is a 26px strip. Rather than pad it and push every card
   taller, its hit area is stretched over the card — the standard card
   pattern. The add-to-cart form is lifted above the overlay so it stays
   independently clickable.                                                */
.pcard { position: relative; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__media { position: relative; z-index: 2; }
.pcard form, .pcard .addbtn { position: relative; z-index: 3; }

/* remaining small targets */
.cart-table td a { display: inline-flex; align-items: center; min-height: 44px; }
.idcard__out { min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════
   ORDERS LIST
   Live orders carry the same rail as the account card and the order page, so
   an order looks like one object everywhere. Finished ones drop the rail and
   offer a reorder instead.
   ═══════════════════════════════════════════════════════════════════════ */

.olist { display: flex; flex-direction: column; gap: var(--sp-4); }
.olist + .olist { margin-block-start: var(--sp-6); }
.olist__head {
  margin: 0; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--ink-mute); font-weight: var(--weight-bold);
}
.olist__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  animation: ship-beat 2s var(--ease-out) infinite;
}

.ocard {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
  transition: box-shadow .42s var(--ease-out), transform .42s var(--ease-out);
}
.ocard--live { background: linear-gradient(135deg, #FFFFFF 0%, #FFFBF7 55%, #FFF4EC 100%); }
.ocard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* one overlay makes the whole card the link; the reorder form sits above it */
.ocard__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ocard form, .ocard__acts .btn { position: relative; z-index: 2; }

.ocard__top { display: flex; align-items: center; gap: var(--sp-3); }
.ocard__num { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

.ocard__mid { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ocard__thumbs { display: flex; align-items: center; flex: none; }
.ocard__thumb {
  width: 42px; height: 42px; border-radius: 12px; overflow: hidden;
  background: var(--grad-sunken); box-shadow: 0 0 0 3px var(--surface);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.ocard--live .ocard__thumb { box-shadow: 0 0 0 3px #FFFBF7; }
.ocard__thumb + .ocard__thumb { margin-inline-start: -13px; }
.ocard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocard:hover .ocard__thumb:nth-child(2) { transform: translateX(-6px); }
.ocard:hover .ocard__thumb:nth-child(3) { transform: translateX(-12px); }
.ocard__more { margin-inline-start: var(--sp-2); font-size: var(--text-xs); color: var(--ink-mute); }

.ocard__facts { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ocard__when { margin: 0; font-size: var(--text-sm); }
.ocard__count { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }
.ocard__total { flex: none; font-size: var(--text-md); font-weight: var(--weight-bold); white-space: nowrap; }
.ocard__total i { font-style: normal; font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--ink-mute); margin-inline-start: 4px; }

/* the rail is shared with .ship — only the spacing differs here */
.ocard__rail { display: block; padding-inline: 22px; }
.ocard__rail .ship__stops { margin-block-start: var(--sp-3); height: 16px; }
.ocard__rail .ship__dot { width: 15px; height: 15px; }
.ocard__rail .ship__dot .icon { width: 9px; height: 9px; }

.ocard__acts {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-block-start: var(--sp-4); border-block-start: 1px solid var(--rule-soft);
}
.ocard__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ocard__go .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
[dir="rtl"] .ocard__go .icon { transform: scaleX(-1); }
[dir="rtl"] .ocard:hover .ocard__go .icon { transform: scaleX(-1) translateX(4px); }
.ocard__acts form { margin-inline-start: auto; }
.ocard__acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.ocard__acts .btn .icon { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .ocard__mid { gap: var(--sp-3); }
  .ocard__facts { flex: 1 1 100%; order: 3; }
  .ocard__total { margin-inline-start: auto; }
  .ocard__acts form { flex: 1 1 100%; margin-inline-start: 0; }
  .ocard__acts .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADDRESSES
   ═══════════════════════════════════════════════════════════════════════ */

.adr-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.adr-count { margin: 0; font-size: var(--text-sm); color: var(--ink-mute); }
.adr-head .btn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
.adr-head .btn .icon { width: 15px; height: 15px; }

.adr-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4);
}
@media (max-width: 700px) { .adr-list { grid-template-columns: 1fr; } }

.adr {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ghost-border);
  transition: box-shadow .42s var(--ease-out);
}
.adr:hover { box-shadow: inset 0 0 0 1px var(--ghost-border-hover), var(--shadow-md); }
/* the default one is where orders actually go — say so loudly */
.adr.is-default {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBFDFB 60%, #F1F9F3 100%);
  box-shadow: inset 0 0 0 2px var(--success);
}

.adr__top { display: flex; align-items: center; gap: var(--sp-3); }
.adr__pin {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-content: center;
  background: var(--grad-sunken); color: var(--ink);
  transition: transform .45s var(--ease-out), background .45s var(--ease-out), color .45s var(--ease-out);
}
.adr__pin .icon { width: 19px; height: 19px; }
.adr:hover .adr__pin { transform: rotate(-6deg) scale(1.06); background: var(--ink); color: var(--on-action); }
.adr.is-default .adr__pin { background: var(--success); color: #fff; }
.adr__id { min-width: 0; }
.adr__title { margin: 0; font-weight: var(--weight-bold); font-size: var(--text-base); }
.adr__zone { margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-mute); }
.adr__flag {
  margin-inline-start: auto; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--success); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.adr__flag .icon { width: 12px; height: 12px; stroke-width: 3; }

.adr__text { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: var(--leading-normal); }
.adr__meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs); color: var(--ink-mute);
}
.adr__meta span { display: inline-flex; align-items: center; gap: 5px; }
.adr__meta .icon { width: 13px; height: 13px; }

.adr__acts {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-block-start: auto; padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule-soft);
}
.adr__acts form:last-child { margin-inline-start: auto; }
@media (max-width: 420px) {
  .adr__acts > * { flex: 1 1 auto; }
  .adr__acts .btn { width: 100%; justify-content: center; }
  .adr__acts form:last-child { margin-inline-start: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COURIER PANEL
   Built phone-first: a courier reads this on a bike, one-handed, in daylight.
   Big type, big targets, the address and the money above everything else.
   ═══════════════════════════════════════════════════════════════════════ */

.crr { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 620px; margin-inline: auto; }
.crr__head { display: flex; align-items: center; gap: var(--sp-4); }
.crr__hi { margin: 0; font-size: var(--text-sm); color: var(--ink-mute); }
.crr__title { margin: 2px 0 0; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.025em; }
.crr__score {
  margin-inline-start: auto; text-align: center; flex: none;
  padding: var(--sp-3) var(--sp-5); border-radius: 16px;
  background: var(--grad-ink); color: var(--ink-inverse);
}
.crr__score b { display: block; font-size: var(--text-xl); font-weight: var(--weight-black); line-height: 1; }
.crr__score span { font-size: 11px; opacity: .62; }

.crr__group { display: flex; flex-direction: column; gap: var(--sp-3); }
.crr__label {
  margin: 0; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-mute);
}
.crr__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6); text-align: center;
  border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.crr__empty .icon { width: 38px; height: 38px; color: var(--ghost-border-hover); }
.crr__empty p { margin: 0; color: var(--ink-soft); line-height: var(--leading-normal); }

/* ── a job card ──────────────────────────────────────────────────────── */
.crrcard {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ghost-border);
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.crrcard--mine { background: linear-gradient(135deg, #FFFFFF 0%, #FFFBF7 60%, #FFF3EA 100%); }
.crrcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.crrcard__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.crrcard__call { position: relative; z-index: 2; }

.crrcard__top { display: flex; align-items: center; gap: var(--sp-3); }
.crrcard__num { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

.crrcard__addr { margin: 0; display: flex; gap: var(--sp-3); align-items: flex-start; }
.crrcard__addr .icon { width: 18px; height: 18px; flex: none; color: var(--ink-mute); margin-block-start: 3px; }
.crrcard__addr span { font-size: var(--text-sm); line-height: var(--leading-snug); }
.crrcard__addr b { display: block; font-size: var(--text-base); }

.crrcard__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-mute); }
.crrcard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.crrcard__meta .icon { width: 14px; height: 14px; }
.crrcard__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

.crrcard__acts {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-block-start: var(--sp-3); border-block-start: 1px solid var(--rule-soft);
}
.crrcard__call { display: inline-flex; align-items: center; gap: 6px; }
.crrcard__call .icon { width: 15px; height: 15px; }
.crrcard__go {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.crrcard__go .icon { width: 15px; height: 15px; }
[dir="rtl"] .crrcard__go .icon, [dir="rtl"] .crr__back .icon { transform: scaleX(-1); }

/* ── single order ────────────────────────────────────────────────────── */
.crr--one { gap: var(--sp-4); }
.crr__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--text-sm); color: var(--ink-mute); }
.crr__back .icon { width: 15px; height: 15px; }
.crr__ohead { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.crr__onum { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }
.crr__ostatus { margin: 2px 0 0; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.02em; }
.crr__cash {
  margin-inline-start: auto; text-align: center; flex: none;
  padding: var(--sp-3) var(--sp-5); border-radius: 14px;
  background: var(--success-tint); color: var(--success);
}
.crr__cash b { display: block; font-size: var(--text-md); font-weight: var(--weight-black); }
.crr__cash span { font-size: 11px; opacity: .8; }

.crrbox {
  padding: var(--sp-5); border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.crrbox__title { margin: 0; font-size: var(--text-sm); color: var(--ink-mute); font-weight: var(--weight-bold); }
.crrbox__name { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); }
.crrbox__addr { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }
.crrbox__hint { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }
.crrbox__note {
  margin: 0; display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: 12px;
  background: var(--warning-tint); color: var(--warning); font-size: var(--text-sm);
}
.crrbox__note .icon { width: 16px; height: 16px; flex: none; margin-block-start: 2px; }
.crr__call { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 54px; }
.crr__call .icon { width: 18px; height: 18px; }

.crritems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crritems li { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); font-size: var(--text-base); }
.crritems li + li { border-block-start: 1px solid var(--rule-soft); }
.crritems i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.crritems b { margin-inline-start: auto; }

.crrbox--act { gap: var(--sp-3); }
.crrbox--code { background: var(--grad-surface); box-shadow: inset 0 0 0 2px var(--ink); }
.crrcode { display: flex; flex-direction: column; gap: var(--sp-4); }
.crrcode .input--otp { height: 76px; font-size: clamp(30px, 6vw, 40px); letter-spacing: .3em; text-align: center; }
.crrfail { margin-block-start: var(--sp-2); }
.crrbox--done { flex-direction: row; align-items: center; gap: var(--sp-3); background: var(--success-tint); box-shadow: none; color: var(--success); }
.crrbox--done .icon { width: 20px; height: 20px; stroke-width: 2.6; }
.crr__label { align-self: center; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); color: var(--ink-mute); }

/* ── the header shortcut ─────────────────────────────────────────────── */
.header-action--staff .icon { color: var(--brand-red); }
/* Below 720px .header-action__label is hidden, because every other action in
   the bar still has its icon to stand on. This one no longer does, so hiding
   its label would leave a 44px box with nothing in it — but the full phrase is
   94px wide, which on a 390px masthead pushes the logo onto a second row. So
   the shortcut keeps a one-word form for exactly the widths where the long one
   does not fit. It is aria-hidden: the full label is still in the accessibility
   tree, one is simply painted at a time. */
.header-action--label-only .header-action__label { white-space: nowrap; }
.header-action__short { display: none; }
@media (max-width: 720px) {
  .header-action--label-only .header-action__short { display: inline; }
}
/* A staff user on a 320px phone carries one action more than anyone else, and
   at the default padding that one extra pushed the logo onto a second row.
   The 44px target is kept — only the padding around it gives way. */
@media (max-width: 380px) {
  .header-actions { gap: 0; }
  .header-action { padding-inline: 6px; }
  .masthead .container { gap: var(--sp-2); }
  .brand__logo { height: 30px; }
}
.staffbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: 16px;
  background: var(--grad-ink); color: var(--ink-inverse); text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.staffbar:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.staffbar__icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-content: center;
  background: rgba(255,255,255,.12); color: #fff;
}
.staffbar__icon .icon { width: 20px; height: 20px; }
.staffbar__body { display: flex; flex-direction: column; gap: 2px; }
.staffbar__body b { font-size: var(--text-base); color: #fff; }
.staffbar__body i { font-style: normal; font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.staffbar__go { margin-inline-start: auto; width: 18px; height: 18px; color: rgba(255,255,255,.7); }
[dir="rtl"] .staffbar__go { transform: scaleX(-1); }

/* ── courier: red-gradient CTA, today's round, guarded failure ───────────
   Black reads as “disabled” next to a page this warm, so the courier's
   primary actions use the brand gradient instead. */
.crr .btn--primary,
.crrbox .btn--primary {
  background: linear-gradient(135deg, #E11D3D 0%, var(--brand-red) 55%, #A50D26 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px -10px rgba(200,16,46,.65);
}
.crr .btn--primary:hover,
.crrbox .btn--primary:hover {
  background: linear-gradient(135deg, #F02748 0%, #D3122F 55%, #B00E28 100%);
  box-shadow: 0 12px 30px -10px rgba(200,16,46,.8);
}
.crr .btn--ghost { border-color: var(--ghost-border); }

.crr__scores { margin-inline-start: auto; display: flex; gap: var(--sp-2); flex: none; }
.crr__score {
  text-align: center; padding: var(--sp-3) var(--sp-4); border-radius: 14px; min-width: 76px;
}
.crr__score b { display: block; font-size: var(--text-lg); font-weight: var(--weight-black); line-height: 1; }
.crr__score span { font-size: 11px; opacity: .8; }
.crr__score--ok { background: var(--success-tint); color: var(--success); }
.crr__score--bad { background: var(--danger-tint); color: var(--danger); }

/* the code box is the hero action — warm it up too */
.crrbox--code { box-shadow: inset 0 0 0 2px var(--brand-red); background: linear-gradient(135deg,#FFFFFF 0%,#FFF6F7 100%); }

/* ── today's round ───────────────────────────────────────────────────── */
.crrdone { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.crrdone__row a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  color: inherit; text-decoration: none;
  transition: box-shadow .35s var(--ease-out);
}
.crrdone__row a:hover { box-shadow: inset 0 0 0 1px var(--ghost-border-hover), var(--shadow-sm); }
.crrdone__mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--success); color: #fff;
}
.crrdone__mark .icon { width: 14px; height: 14px; stroke-width: 3; }
.crrdone__row.is-failed .crrdone__mark { background: var(--danger); }
.crrdone__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.crrdone__body b { font-size: var(--text-sm); }
.crrdone__body i { font-style: normal; font-size: 11px; color: var(--ink-mute); }

/* ── failed delivery: two taps, never one ────────────────────────────── */
.crrfail { border-radius: 14px; }
.crrfail__open {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding-inline: var(--sp-5);
  border-radius: 14px; background: var(--surface-sunken); color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.crrfail__open::-webkit-details-marker { display: none; }
.crrfail__open:hover { background: var(--danger-tint); color: var(--danger); }
.crrfail__open .icon { width: 16px; height: 16px; }
.crrfail[open] .crrfail__open { background: var(--danger-tint); color: var(--danger); border-end-start-radius: 0; border-end-end-radius: 0; }

/* an explicit display on the child defeats the closed <details> state, so the
   panel was rendering before the courier ever tapped */
.crrfail:not([open]) .crrfail__panel { display: none; }
.crrfail__panel {
  padding: var(--sp-5); border-radius: 0 0 14px 14px;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--danger-tint);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.crrfail__warn { margin: 0; font-size: var(--text-xs); color: var(--danger); line-height: var(--leading-snug); }
.crrfail__reasons { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.crrfail__reasons legend { padding: 0; margin-block-end: var(--sp-2); font-size: var(--text-xs); color: var(--ink-mute); }
.crrfail__reason {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  min-height: 46px; padding-inline: var(--sp-4);
  border-radius: 12px; background: var(--surface-sunken);
  font-size: var(--text-sm);
  transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out);
}
.crrfail__reason input { accent-color: var(--danger); width: 18px; height: 18px; }
.crrfail__reason:has(input:checked) { background: var(--danger-tint); box-shadow: inset 0 0 0 2px var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — pass 2
   The page was correct but flat. Three things caused that, and only one of
   them was colour:

   1. The buy column ran 192px short of the gallery (604 vs 756 measured), so
      the composition ended in a hole. Fixed by giving the buy column real
      structure — separated bands instead of a stack of gaps — rather than by
      padding it out with air.
   2. Every group inside the buybox was divided by whitespace alone. Whitespace
      separates; it does not group. Hairlines do both.
   3. The nutrition strip was a solid black slab. Black is the action colour
      here, so a black block that cannot be pressed is a lie about what black
      means — and white-on-black numbers are the harshest thing that could sit
      in the middle of a warm, food-photographed page.
   ═══════════════════════════════════════════════════════════════════════ */

/* Persian does not take letter-spacing: it prises apart the joined letters of
   a word. The uppercase is a no-op here too. Same fix as .facet__title. */
.eyebrow { text-transform: none; letter-spacing: 0; }

.section-head--stack { display: block; }
.section-head--stack .eyebrow { margin: 0 0 var(--sp-2); }

/* ── the two columns ──────────────────────────────────────────────────── */
.pdp { gap: clamp(var(--sp-8), 4.5vw, 72px); }
.pdp__col { gap: clamp(var(--sp-5), 2vw, var(--sp-8)); }
/* 6:5, not the square it was. A 672px square ran the gallery 192px past the
   bottom of the buy column and the composition ended in a hole; landscape is
   also the better crop for food. Measured after: 650 vs 639. */
.pdp__stage { border-radius: 20px; aspect-ratio: 6 / 5; }
.pdp__head { gap: var(--sp-4); }
.pdp__head h1 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.025em; line-height: 1.12; }

/* ── buybox: bands, not a pile ────────────────────────────────────────── */
.pdp__buybox {
  /* A 1px grid gap showing the card's own colour, not sibling borders. The
     form's children include {% csrf_token %} and a hidden variant input, and
     `> * + *` could not skip them: the adjacent-sibling combinator matches the
     element immediately before, hidden or not, so the band after a hidden
     input silently lost its rule. display:none elements generate no grid item
     at all, so the gap simply cannot see them. */
  display: grid; gap: 1px; background: var(--rule-soft);
  border-radius: 22px; overflow: hidden; padding: 0;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--rule);
}
.pdp__buybox > * { background: var(--grad-surface); }
/* Each direct child is a band. The separator belongs to the band that follows,
   so adding or removing one (the size picker is conditional) can never leave a
   rule hanging at the top or bottom of the card. */
.pdp__buybox > * { padding: clamp(var(--sp-5), 2vw, var(--sp-6)); margin: 0; }

/* price band — the one place that gets the warm wash, so the eye lands on the
   number before anything else in the card */
/* No fill. The band used to be --grad-sunken, a warm grey sitting on a warm
   grey page — two greys two shades apart, so the boundary read as a smudge
   rather than an edge. The separation is now the hairline plus a 46px number,
   which is a stronger signal than any 4% tint could be. */
.pdp__pricebar { display: block; }
.pdp__now {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3); margin: 0;
}
.pdp__amount {
  font-size: clamp(34px, 3.6vw, 46px); font-weight: var(--weight-black);
  line-height: 1; letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pdp__cur { font-size: var(--text-sm); color: var(--ink-mute); }
.pdp__off {
  display: inline-flex; align-items: center; height: 26px; padding-inline: 10px;
  border-radius: var(--radius-pill); background: var(--brand-red); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px -4px rgba(200, 16, 46, .55);
}
/* inline-block keeps the strike exactly as wide as the digits — on the old
   inline span it ran on past them and looked like a stray dash */
.pdp__was {
  display: inline-block; font-size: var(--text-sm); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px; text-decoration-color: var(--ghost-border-hover);
}
.pdp__perkg { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
.pdp__price--none { font-size: var(--text-lg); color: var(--ink-mute); }

/* A <legend> is rendered INSIDE the fieldset's top border, not below it. With
   the band hairline now on .sizes, that put the rule through the middle of
   «کدوم بسته رو می‌خوای؟». float + width:100% is the standard way to drop a
   legend into normal flow; the grid then needs `clear` because a grid
   container establishes its own formatting context and would otherwise sit on
   top of the float instead of after it. Physical `right` on purpose — the
   document is dir="rtl" throughout and float:inline-start is younger than the
   browsers this shop has to run on. */
.sizes__legend { float: right; width: 100%; margin: 0 0 var(--sp-3); }
.sizes__grid { clear: both; }

/* ── the buy action ───────────────────────────────────────────────────── */
.pdp__cta { padding-block-end: clamp(var(--sp-5), 2vw, var(--sp-6)); }
.pdp__add {
  background: var(--grad-cta); color: var(--on-action); border: 0;
  font-weight: var(--weight-black); font-size: var(--text-base);
  box-shadow: 0 2px 6px -2px rgba(13, 160, 100, .42), 0 12px 26px -12px rgba(13, 160, 100, .70);
}
.pdp__add:hover {
  background: var(--grad-cta-hover); color: var(--on-action);
  box-shadow: 0 3px 8px -2px rgba(13, 160, 100, .50), 0 18px 36px -14px rgba(13, 160, 100, .85);
}
.pdp__add:active { box-shadow: 0 1px 3px -1px rgba(13, 160, 100, .5); }
.pdp__add .icon { color: var(--on-action); opacity: 1; width: 18px; height: 18px; }

/* The card button is the same action, so it commits to the same colour rather
   than filling with ink. Only the hover fill changes; at rest it stays quiet
   so a grid of twelve cards is not twelve orange bars. */
.addbtn::before { background: var(--grad-cta); }
.addbtn:hover { color: var(--on-action); }
.addbtn:hover .addbtn__icon { color: var(--on-action); }

/* ── reassurance: rows with a tinted mark, not a bullet list ──────────── */
.assure {
  /* No padding declaration here. The earlier .assure rule sets
     `padding: var(--sp-5) 0 0`, and re-zeroing it from this block also beat
     `.pdp__buybox > *` on source order — the band ended up with no padding at
     all, so the icons sat on the card's edge and the last row on its floor.
     Leaving padding unset lets the band rule win, which is what should own it.
     The border still has to go: the grid gap already draws that hairline. */
  border-block-start: 0;
  gap: var(--sp-2); font-size: var(--text-sm); color: var(--ink);
}
.assure li { gap: var(--sp-3); align-items: center; min-height: 30px; }
/* No disc. The three glyphs come from different sources and carry very
   different ink coverage — i-clock-solid is a filled circle — so identical
   round containers made one look empty and one look like a badge stuck on a
   badge. Without a frame there is nothing for them to fail to fill. */
.assure .icon { width: 21px; height: 21px; flex: none; color: var(--ink-soft); }
/* Optical sizing, not a mistake. #i-truck-cold is wide, thin and full of fine
   internal detail, so at the same box as the two compact solids it read as a
   smudge and looked lighter than them. Two extra pixels is what it takes for
   the van to resolve and for the three to carry equal weight. */
.assure__icon--wide { width: 23px; height: 23px; }

/* Optical sizing, the other direction. #i-grid-solid's artwork runs edge to
   edge in its viewBox while the food glyphs beside it carry internal
   whitespace, so at an equal box it reads noticeably larger and heavier than
   its neighbours. Padding on the <svg> with border-box shrinks the drawing
   without touching the layout box, so gaps and baselines do not shift —
   unlike a smaller width, which would move everything next to it. */
.icon--inset { padding: 3px; box-sizing: border-box; }

/* ── the spec sheet ───────────────────────────────────────────────────
   Was a black slab of nutrition numbers followed by three separate floating
   cards. Two problems: four objects for one piece of information, and colour
   doing the work that structure should do — first flat black, then a cream
   wash that put a warm tint on a page whose photographs are already warm.

   One card now, divided by true hairlines. The hairlines are the 1px grid gap
   showing the container's own colour through, so they are always exactly 1px,
   never double at a join, and they disappear correctly when the cells wrap.
   The only colour in the whole block is the snowflake, which is cold because
   the instruction it labels is about cold. */
.sheet {
  display: grid; gap: 1px; background: var(--rule);
  border-radius: 22px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
}
.sheet > * { background: var(--surface); margin: 0; }

.sheet__cap {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) clamp(var(--sp-5), 2vw, var(--sp-6));
  background: var(--grad-sunken);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink);
}
.sheet__cap > span { font-weight: var(--weight-normal); color: var(--ink-mute); font-size: var(--text-xs); }

.sheet__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--rule);
}
.stat2 {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(var(--sp-5), 2.2vw, var(--sp-6));
  background: var(--surface);
}
.stat2 b {
  font-size: clamp(30px, 3.2vw, var(--text-2xl)); font-weight: var(--weight-black);
  line-height: 1; letter-spacing: -.03em; color: var(--ink);
}
.stat2 span { font-size: var(--text-sm); color: var(--ink-mute); }

.sheet__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px; background: var(--rule);
}
.sheet__block { background: var(--surface); padding: clamp(var(--sp-5), 2.2vw, var(--sp-6)); }
.sheet__title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); font-size: var(--text-base); letter-spacing: -.01em;
}
.sheet__mark { width: 18px; height: 18px; color: var(--info); flex: none; }
.sheet__body { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: var(--leading-normal); }
.sheet .spec-list { font-size: var(--text-sm); width: 100%; row-gap: var(--sp-3); }

/* ── story band ───────────────────────────────────────────────────────── */
.story2__how { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm); }
.story2__how .icon { color: var(--ink-soft); }
.story2__shot { border-radius: 20px; }

@media (max-width: 640px) {
  .stat2 { padding: var(--sp-5) var(--sp-4); }
  .sheet__cap, .sheet__block { padding-inline: var(--sp-4); }
}

/* ── courier: call button, history, day strip ────────────────────────────
   Green for the phone call — the colour people already read as “call” — and
   the brand gradient stays on the action that completes the delivery.     */
.crr__call {
  background: linear-gradient(135deg, #34D27B 0%, #12A150 55%, #0B7C3C 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(18,161,80,.7);
}
.crr__call:hover {
  background: linear-gradient(135deg, #47DE8A 0%, #14B159 55%, #0C8A42 100%);
  box-shadow: 0 12px 30px -10px rgba(18,161,80,.85);
  color: #fff;
}
.crrcard__call {
  background: linear-gradient(135deg, #ECFDF3 0%, #DEF7E7 100%);
  color: #0B7C3C; border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(18,161,80,.28);
}
.crrcard__call:hover { background: linear-gradient(135deg, #DEF7E7 0%, #CDF0DA 100%); color: #0B7C3C; }

.crrcard__who { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crrcard__who .icon { width: 16px; height: 16px; color: var(--ink-mute); }
.crrcard__who b { font-size: var(--text-sm); }

.crr__more { margin-inline-start: auto; font-size: var(--text-xs); font-weight: var(--weight-normal); }
.crr__none { margin: 0; padding: var(--sp-8) 0; text-align: center; color: var(--ink-mute); font-size: var(--text-sm); }
.crrdone__cash { flex: none; font-size: var(--text-xs); color: var(--ink-mute); }

/* ── week switcher ───────────────────────────────────────────────────── */
.wk { display: flex; align-items: center; gap: var(--sp-3); }
.wk__nav {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ghost-border);
  color: var(--ink); transition: background .3s var(--ease-out);
}
.wk__nav:hover { background: var(--surface-sunken); }
.wk__nav .icon { width: 16px; height: 16px; }
[dir="rtl"] .wk__nav .icon { transform: scaleX(-1); }
[dir="rtl"] .wk__nav--next .icon { transform: none; }
.wk__nav.is-off { opacity: .3; pointer-events: none; }
.wk__label { flex: 1; text-align: center; }
.wk__label b { display: block; font-size: var(--text-base); }
.wk__label span { font-size: var(--text-xs); color: var(--ink-mute); }

.wkstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.wkstat { text-align: center; padding: var(--sp-4) var(--sp-2); border-radius: 14px; }
.wkstat b { display: block; font-size: var(--text-md); font-weight: var(--weight-black); line-height: 1.1; }
.wkstat span { font-size: 11px; opacity: .85; }
.wkstat--ok { background: var(--success-tint); color: var(--success); }
.wkstat--bad { background: var(--danger-tint); color: var(--danger); }
.wkstat--cash { background: linear-gradient(135deg,#F3F0FF 0%,#EAE4FF 100%); color: #5B37D6; }

/* ── day strip ───────────────────────────────────────────────────────── */
.wkdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wkday {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-3) 2px; border-radius: 12px; min-height: 62px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-soft); text-decoration: none;
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), color .3s var(--ease-out);
}
.wkday i { font-style: normal; font-size: 10px; color: var(--ink-mute); }
.wkday b { font-size: var(--text-sm); }
.wkday:hover { background: var(--surface-sunken); }
.wkday.is-today { box-shadow: inset 0 0 0 1px var(--ghost-border-hover); }
.wkday.is-on {
  background: var(--grad-ink); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(18,18,18,.6);
}
.wkday.is-on i { color: rgba(255,255,255,.6); }
.wkday.is-future { opacity: .4; pointer-events: none; }
.wkday__n {
  min-width: 18px; padding-inline: 4px; border-radius: 9px;
  background: var(--success-tint); color: var(--success);
  font-size: 10px; font-weight: var(--weight-bold);
}
.wkday.is-on .wkday__n { background: rgba(255,255,255,.16); color: #fff; }
.wkday__x {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--danger);
}

/* ── why an order ended where it did ─────────────────────────────────────
   The reason was written to history from the start and shown nowhere, so a
   closed delivery read as an unexplained dead end. */
.crrbox--done { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.crrbox__mark {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-content: center; background: var(--success); color: #fff;
}
.crrbox__mark .icon { width: 15px; height: 15px; stroke-width: 3; }
.crrbox--bad { background: var(--danger-tint); color: var(--danger); }
.crrbox--bad .crrbox__closed b { color: var(--danger); }
.crrbox--bad .crrbox__closed span { color: var(--danger); opacity: .85; }
.crrbox--bad .crrbox__mark { background: var(--danger); }
.crrbox__closed { display: flex; flex-direction: column; gap: 3px; }
.crrbox__closed b { font-size: var(--text-base); }
.crrbox__closed span { font-size: var(--text-sm); color: var(--ink-soft); }
.crrbox__closed i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }

.ohero__why {
  margin: 0; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: 14px;
  background: var(--surface-sunken); font-size: var(--text-sm);
}
.ohero__why .icon { width: 17px; height: 17px; flex: none; color: var(--ink-mute); margin-block-start: 2px; }
.ohero__why.is-bad { background: var(--danger-tint); color: var(--danger); }
.ohero__why.is-bad .icon { color: var(--danger); }
.ohero__list em { font-style: normal; color: var(--ink-soft); }

.crrdone__body u { text-decoration: none; font-size: 11px; color: var(--danger); }

/* ── courier: navigation, cash handover, week timeline ───────────────────
   Two findings from last-mile practice drove this: a courier must reach maps
   in one tap without retyping an address, and cash-on-delivery has to be
   reconciled per shift — a weekly total is a vanity number, what they carry
   today is the one they answer for. */
.crr__duo { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); }
@media (max-width: 380px) { .crr__duo { grid-template-columns: 1fr; } }
.crr__nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 54px; padding-inline: var(--sp-5);
  background: linear-gradient(135deg, #4E8BFF 0%, #2C6BE0 55%, #1B4FB8 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(44,107,224,.7);
}
.crr__nav:hover { background: linear-gradient(135deg,#649BFF 0%,#3579F0 55%,#1F5AC9 100%); color: #fff; }
.crr__nav .icon { width: 17px; height: 17px; }
.crrcard__nav { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; }
.crrcard__nav .icon { width: 14px; height: 14px; }

.cashbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: 16px;
  background: linear-gradient(135deg,#F3F0FF 0%,#E9E2FF 100%);
  color: #4B2CBF;
}
.cashbar .icon { width: 24px; height: 24px; flex: none; }
.cashbar b { display: block; font-size: var(--text-md); }
.cashbar span { font-size: var(--text-xs); opacity: .8; }

/* payment is settled online before dispatch, so the courier collects nothing */
.crr__cash--paid { background: var(--success-tint); color: var(--success); display: flex; align-items: center; gap: var(--sp-2); }
.crr__cash--paid .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.crr__cash--paid b { font-size: var(--text-sm); }
.crr__cash--paid span { font-size: var(--text-xs); opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════
   COURIER HISTORY
   Rebuilt around one question: did it arrive, and if not, why. No money —
   payment settles online before dispatch. Days are separated by whitespace
   and typographic weight rather than boxes inside boxes.
   ═══════════════════════════════════════════════════════════════════════ */

.hist { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 620px; margin-inline: auto; }

.hist__head { display: flex; flex-direction: column; gap: var(--sp-5); }
.hist__title { margin: 0; font-size: clamp(32px, 5vw, 44px); letter-spacing: -.035em; line-height: 1.05; }

.hist__weeks { display: flex; align-items: center; gap: var(--sp-3); }
.hist__step {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--surface-sunken); color: var(--ink);
  transition: background .3s var(--ease-out);
}
.hist__step:hover { background: var(--ghost-bg-hover); }
.hist__step .icon { width: 16px; height: 16px; }
[dir="rtl"] .hist__step .icon { transform: scaleX(-1); }
[dir="rtl"] .hist__step--next .icon { transform: none; }
.hist__step.is-off { opacity: .25; pointer-events: none; }
.hist__range { flex: 1; text-align: center; }
.hist__range b { display: block; font-size: var(--text-base); }
.hist__range i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }

/* ── the week's one number ───────────────────────────────────────────── */
.score {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  border-radius: 22px; background: var(--grad-surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.score__rate {
  margin: 0; font-size: clamp(52px, 12vw, 76px); font-weight: var(--weight-black);
  letter-spacing: -.04em; line-height: 1;
}
.score__rate span { font-size: .42em; font-weight: var(--weight-bold); color: var(--ink-mute); margin-inline-start: 4px; }
.score__label { margin: 0; font-size: var(--text-sm); color: var(--ink-mute); }
.score__bars { display: flex; gap: 4px; height: 8px; }
.score__bar { border-radius: var(--radius-pill); min-width: 8px; }
.score__bar--ok { background: var(--success); }
.score__bar--bad { background: var(--danger); }
.score__legend { display: flex; gap: var(--sp-5); font-size: var(--text-sm); color: var(--ink-soft); }
.score__legend span { display: inline-flex; align-items: center; gap: 7px; }
.score__legend b { color: var(--ink); }

/* ── one day ─────────────────────────────────────────────────────────── */
.day { display: flex; flex-direction: column; gap: var(--sp-4); }
.day__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.day__name { margin: 0; font-size: var(--text-xl); letter-spacing: -.025em; }
.day__date { margin: 0; font-size: var(--text-sm); color: var(--ink-mute); }
.day__today {
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-action); font-size: 11px; font-weight: var(--weight-bold);
}
.day__tally { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

.drops {
  list-style: none; margin: 0; padding: 0;
  border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden;
}
.drop + .drop { border-block-start: 1px solid var(--rule-soft); }
.drop a {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); color: inherit; text-decoration: none;
  transition: background .3s var(--ease-out);
}
.drop a:hover { background: var(--surface-sunken); }
.drop__time { flex: none; font-size: var(--text-xs); color: var(--ink-mute); width: 40px; }
.drop__state {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--success-tint); color: var(--success);
}
.drop__state .icon { width: 15px; height: 15px; stroke-width: 2.8; }
.drop.is-failed .drop__state { background: var(--danger-tint); color: var(--danger); }
.drop__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.drop__main b { font-size: var(--text-base); }
.drop__main i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.drop__main u {
  text-decoration: none; margin-block-start: 2px;
  font-size: var(--text-xs); color: var(--danger);
}
.drop__go { flex: none; width: 16px; height: 16px; color: var(--ghost-border-hover); }
[dir="rtl"] .drop__go { transform: scaleX(-1); }

.hist__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6); text-align: center;
}
.hist__empty .icon { width: 36px; height: 36px; color: var(--ghost-border-hover); }
.hist__empty p { margin: 0; color: var(--ink-mute); }

/* ═══════════════════════════════════════════════════════════════════════
   STAFF PANEL
   Same language as the storefront — ink gradient for identity, hairline
   cards, one accent per screen — but denser, because this is a work surface
   rather than a shop window.
   ═══════════════════════════════════════════════════════════════════════ */

.pnl { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(var(--sp-5), 3vw, var(--sp-8)); align-items: start; }
@media (max-width: 900px) { .pnl { grid-template-columns: minmax(0, 1fr); } }

/* ── sidebar ─────────────────────────────────────────────────────────── */
.pnl__side {
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-5); border-radius: 20px;
  /* Indigo, not ink. The sidebar is the largest block of colour in the panel,
     so it is what "the panel's primary colour" actually means to anyone
     looking at it — leaving it black while the accent moved would just make
     the two disagree. Storefront chrome is untouched; this is panel-only. */
  background: linear-gradient(165deg, #4F46E5 0%, var(--panel) 45%, #312E9E 100%);
  color: var(--ink-inverse);
  box-shadow: 0 18px 40px -22px rgba(49, 46, 158, .75);
}
@media (max-width: 900px) { .pnl__side { position: static; } }
.pnl__who { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pnl__role { font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.pnl__who b { font-size: var(--text-base); color: #fff; }

.pnl__nav { display: flex; flex-direction: column; gap: 2px; }
.pnl__nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: 12px;
  color: rgba(255,255,255,.72); text-decoration: none; font-size: var(--text-sm);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.pnl__nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.pnl__nav a.is-on { background: rgba(255,255,255,.14); color: #fff; font-weight: var(--weight-bold); }
.pnl__nav .icon { width: 17px; height: 17px; flex: none; }
.pnl__badge {
  margin-inline-start: auto; min-width: 20px; padding-inline: 6px;
  border-radius: 10px; background: var(--brand-red); color: #fff;
  font-size: 11px; font-weight: var(--weight-bold); text-align: center;
}
.pnl__django {
  margin-block-start: var(--sp-3); padding-block-start: var(--sp-4) !important;
  border-block-start: 1px solid rgba(255,255,255,.12);
  border-radius: 0 !important; flex-wrap: wrap;
}
.pnl__django i { width: 100%; font-style: normal; font-size: 10px; color: rgba(255,255,255,.4); padding-inline-start: 29px; }

/* ── main column ─────────────────────────────────────────────────────── */
.pnl__main { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.pnl__head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.03em; }
.pnl__head p { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--ink-mute); }
.pnl__head--row { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.pnl__head--row > .ostat, .pnl__head--row > .btn, .pnl__head--row > .pmonth { margin-inline-start: auto; }
.pnl__eyebrow { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); }
.pnl__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--text-sm); color: var(--ink-mute); }
.pnl__back .icon { width: 15px; height: 15px; }
[dir="rtl"] .pnl__back .icon { transform: scaleX(-1); }

/* ── stat cards ──────────────────────────────────────────────────────── */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.pcard {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-5); border-radius: 18px;
  background: var(--grad-surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.pcard__label { font-size: var(--text-xs); color: var(--ink-mute); }
.pcard b { font-size: clamp(24px, 3vw, 32px); font-weight: var(--weight-black); letter-spacing: -.025em; line-height: 1.1; }
.pcard__sub { font-size: var(--text-xs); color: var(--ink-mute); }

/* ── blocks ──────────────────────────────────────────────────────────── */
.pblock { display: flex; flex-direction: column; gap: var(--sp-4); }
.pblock__head { display: flex; align-items: baseline; gap: var(--sp-3); }
.pblock__head a { margin-inline-start: auto; font-size: var(--text-sm); }
.pblock__title { margin: 0; font-size: var(--text-md); }

/* the work queue as a flow */
/* ── queue flow ───────────────────────────────────────────────────────────
   Each step wears its own tone, the same wait/live language the order pages
   use. It used to ring any step with work in 2px of black; five black boxes
   read as five alerts, and weight belongs on the number, not the border. */
.qflow {
  display: grid; gap: var(--sp-2); margin-block-end: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.qstep {
  --st: var(--ink-mute); --st-tint: var(--surface-sunken);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 84px; padding: var(--sp-3) var(--sp-2);
  border-radius: 14px; text-align: center; text-decoration: none;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-soft);
  color: var(--ink-soft);
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.qstep.is-tone-wait { --st: var(--warning); --st-tint: var(--warning-tint); }
.qstep.is-tone-live { --st: var(--info);    --st-tint: var(--info-tint); }
.qstep b { font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--ghost-border-hover); line-height: 1; }
.qstep span { font-size: 11px; line-height: 1.3; }
.qstep.has-work { background: var(--st-tint); box-shadow: none; color: var(--st); }
.qstep.has-work b { color: var(--st); }
.qstep:hover { box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm); transform: translateY(-2px); }

/* Order rows live in the ORDER QUEUE block at the end of this file.

   What used to be here was the previous design: a single bordered container
   with hairline dividers between its <li>s. Against separated cards those
   dividers drew lines in the gaps and the container drew a box around the
   whole list. It also carried a competing `.orows a` grid, a 720px breakpoint
   fighting the new 900/620 ones, and a hover background that painted over the
   late-row tint. Every class in it was dead — nothing referenced them. */



/* ── detail grid ─────────────────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pgrid__main, .pgrid__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.pbox { padding: var(--sp-5); border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.pbox__title { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--ink-mute); font-weight: var(--weight-bold); }
.pbox__line { margin: 0 0 var(--sp-3); font-size: var(--text-sm); line-height: var(--leading-normal); }
.pbox__note { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--warning-tint); color: var(--warning); font-size: var(--text-xs); }
.pbox__code { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: var(--ink-mute); }
.pbox__code b { display: block; font-size: var(--text-lg); letter-spacing: .12em; color: var(--ink); }
.pbox__totals { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--rule); font-size: var(--text-sm); }
.pbox__totals span { display: flex; justify-content: space-between; color: var(--ink-mute); }
.pbox__totals b { color: var(--ink); }
.pbox__totals .is-total { font-weight: var(--weight-bold); color: var(--ink); font-size: var(--text-base); }
.pform { display: flex; flex-direction: column; gap: var(--sp-4); }
.pform .input { width: 100%; height: 48px; border-radius: 12px; }

/* ── lists & chips ───────────────────────────────────────────────────── */
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plist li { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); font-size: var(--text-sm); }
.plist li + li { border-block-start: 1px solid var(--rule-soft); }
.plist--wide { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); padding-inline: var(--sp-5); }
.plist__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.plist__main i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.pchip { flex: none; padding: 4px var(--sp-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.pchip--ok { background: var(--success-tint); color: var(--success); }
.pchip--warn { background: var(--warning-tint); color: var(--warning); }
.pchip--bad { background: var(--danger-tint); color: var(--danger); }
.pchip--off { background: var(--surface-sunken); color: var(--ink-mute); }

/* ── timeline ────────────────────────────────────────────────────────── */
.ptimeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--text-xs); }
.ptimeline li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; color: var(--ink-mute); }
.ptimeline b { color: var(--ink); font-size: var(--text-sm); }
.ptimeline i { font-style: normal; }
.ptimeline u { text-decoration: none; margin-inline-start: auto; }

/* ── finance ─────────────────────────────────────────────────────────── */
.pmonth { display: flex; align-items: center; gap: var(--sp-3); }
.pmonth a, .pmonth span.is-off {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center;
  background: var(--surface-sunken); color: var(--ink);
}
.pmonth span.is-off { opacity: .3; }
.pmonth .icon { width: 14px; height: 14px; }
[dir="rtl"] .pmonth .icon { transform: scaleX(-1); }
[dir="rtl"] .pmonth--next .icon { transform: none; }
.pcomm {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-6); border-radius: 18px;
  background: linear-gradient(135deg,#F3F0FF 0%,#E9E2FF 100%); color: #4B2CBF;
}
.pcomm__label { margin: 0; font-size: var(--text-xs); opacity: .8; }
.pcomm b { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: var(--weight-black); }
.pcomm span { font-size: var(--text-xs); opacity: .8; }
.pcomm__note { margin: 0; margin-inline-start: auto; max-width: 24ch; font-size: var(--text-xs); opacity: .75; }

/* ── panel: inventory ────────────────────────────────────────────────────
   Sorted by scarcity, editable in place. Each row states the number, why it
   is flagged, and the next expiry — the three things that decide whether to
   reorder today. */
.pcard--alarm { background: var(--danger-tint); box-shadow: inset 0 0 0 1px rgba(168,27,35,.2); }
.pcard--alarm b, .pcard--alarm .pcard__label, .pcard--alarm .pcard__sub { color: var(--danger); }

.stocklist { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.stockrow {
  display: grid; align-items: center; gap: var(--sp-3) var(--sp-4);
  grid-template-columns: minmax(0,1.4fr) auto minmax(0,1fr) auto;
  padding: var(--sp-4) var(--sp-5);
}
.stockrow + .stockrow { border-block-start: 1px solid var(--rule-soft); }
.stockrow.is-low { background: linear-gradient(90deg, var(--warning-tint) 0%, transparent 55%); }
.stockrow.is-out { background: linear-gradient(90deg, var(--danger-tint) 0%, transparent 55%); }
.stockrow__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stockrow__id b { font-size: var(--text-sm); }
.stockrow__id i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.stockrow__level { text-align: center; }
.stockrow__level b { display: block; font-size: var(--text-lg); font-weight: var(--weight-black); line-height: 1; }
.stockrow__level i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.stockrow__flag { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.stockrow__exp { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.stockrow__exp.is-soon { color: var(--warning); font-weight: var(--weight-bold); }
.stockrow__fix { display: flex; gap: var(--sp-2); align-items: center; }
.stockrow__fix .input { height: 40px; border-radius: 10px; width: 92px; }
.stockrow__fix .input[name="reason"] { width: 130px; }
.stockrow__fix .btn { height: 40px; }
@media (max-width: 900px) {
  .stockrow { grid-template-columns: minmax(0,1fr) auto; }
  .stockrow__flag { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--sp-3); }
  .stockrow__fix { grid-column: 1 / -1; }
  .stockrow__fix .input { flex: 1; width: auto; }
}

/* ── panel: accountability trail ─────────────────────────────────────────
   Every row answers the same three things in the same order: what changed,
   who changed it, when. With several operators sharing the panel that is the
   only way a mistake can be traced back weeks later. */
.notebox { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.notebox .input { flex: 1; height: 42px; border-radius: 10px; }
.notebox .btn { height: 42px; }

.trail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.trail__item { position: relative; display: flex; gap: var(--sp-3); padding-block: var(--sp-3); }
.trail__item + .trail__item { border-block-start: 1px solid var(--rule-soft); }
.trail__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  margin-block-start: 6px; background: var(--ghost-border-hover);
}
.trail__item--status .trail__dot, .trail__item--status_change .trail__dot { background: var(--info); }
.trail__item--stock_adjust .trail__dot { background: var(--warning); }
.trail__item--assign .trail__dot { background: var(--success); }
.trail__item--note .trail__dot { background: var(--brand-red); }
.trail__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trail__body b { font-size: var(--text-sm); }
.trail__body i { font-style: normal; font-size: var(--text-xs); color: var(--ink-soft); }
.trail__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 11px; color: var(--ink-mute); }
.trail__meta u { text-decoration: none; font-weight: var(--weight-bold); color: var(--ink-soft); }
.trail__link { margin-inline-start: auto; }

/* ── panel: order header keyed to status ────────────────────────────────
   The operator opens this screen to answer one question — what do I do with
   this order now — so the current state colours the header and the next steps
   are buttons, not a dropdown to hunt through. */
/* Two colours, and green in two shades. A colour on this page answers one
   question only: did it work out?
     wait  amber        — stalled on us, someone has to act
     live  green light  — moving, nothing wrong
     done  green deep   — arrived
     bad   red          — it did not arrive
   Success and failure are also fixed page constants, because a step that
   completed is green whatever state the order is in NOW. */
:root {
  --ok: #108038; --ok-lite: #5FC97F; --ok-tint: #E7F6EA;
  --bad: #A81B23; --bad-lite: #E88A8F; --bad-tint: #FBECEE;
}
:where(.ohd) { --st: var(--ink); --st-lite: #9A9A94; --st-tint: var(--surface-sunken); }
.is-tone-wait { --st: #B8761A; --st-lite: #F0B860; --st-tint: #FDF3E4; }
.is-tone-live { --st: var(--ok); --st-lite: var(--ok-lite); --st-tint: var(--ok-tint); }
.is-tone-done { --st: #0A6B2E; --st-lite: #43B368; --st-tint: #E2F4E7; }
.is-tone-bad  { --st: var(--bad); --st-lite: var(--bad-lite); --st-tint: var(--bad-tint); }

.ohd {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-6);
  /* --sp-7 does not exist: the scale jumps 6 -> 8. An undefined var makes
     the whole clamp() invalid, which made the whole padding declaration
     invalid, and this card had NO padding at all. */
  padding: clamp(var(--sp-5), 3vw, var(--sp-8)); border-radius: 22px;
  background: var(--surface);
  /* the ring is the status colour at tint strength — no stripe on one edge */
  box-shadow: inset 0 0 0 1px var(--st-tint);
}
/* the state bleeds in from the corner behind the headline and dissolves */
.ohd::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: -60%; inset-inline-start: -8%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--st) 0%, transparent 72%);
  opacity: .13;
}
.ohd__top { display: flex; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap; }
.ohd__id h1 {
  margin: 2px 0 0; font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -.03em; color: var(--st);
}
.ohd__num { margin: 0; font-size: var(--text-xs); color: var(--ink-mute); letter-spacing: .06em; }
.ohd__meta { margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: var(--ink-mute); }
.ohd__facts { margin-inline-start: auto; display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.ohd__facts span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ohd__facts i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.ohd__facts b { font-size: var(--text-sm); }
.ohd__facts u { text-decoration: none; font-size: 11px; color: var(--ink-soft); }
.ohd__broke {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0;
  padding: var(--sp-3) var(--sp-4); border-radius: 12px;
  background: var(--st-tint); color: var(--st);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.ohd__broke .icon { width: 15px; height: 15px; }

/* ── the journey ─────────────────────────────────────────────────────────
   Six stations. The connector between two passed stations is filled; the rest
   is track. A derailed order shows how far it actually got — from its own
   history — rather than pretending it never left, because "cancelled before
   we packed it" and "failed on the doorstep" are different problems. */
.rail { list-style: none; margin: 0; padding: 0; display: flex; }
.rail__stop {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center;
}
/* The connector belongs to the stop it LEAVES, and only stops that have a
   next one draw it. Hung off `+ .rail__stop` instead, the first station had
   no line at all and the last drew one into empty space past the end of the
   rail — both of which is exactly what it looked like. */
.rail__stop.link-ok::before,
.rail__stop.link-bad::before,
.rail__stop.link-none::before {
  content: ""; position: absolute; inset-block-start: 10px; height: 3px;
  inset-inline-start: 50%; width: 100%; border-radius: 3px;
  background: var(--rule); z-index: 0;
}
.rail__stop.link-ok::before { background: var(--ok-lite); }
.rail__stop.link-bad::before { background: var(--bad-lite); }
.rail__mark {
  position: relative; z-index: 1;
  width: 23px; height: 23px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  background: var(--surface); color: #fff;
  box-shadow: inset 0 0 0 2px var(--rule-strong);
}
.rail__mark .icon { width: 12px; height: 12px; stroke-width: 3; }
/* a completed step is green because it SUCCEEDED — that is the whole message */
.rail__stop.is-done .rail__mark {
  background: linear-gradient(150deg, var(--ok-lite), var(--ok)); box-shadow: none;
}
/* in progress, nothing wrong yet: same green, held open rather than ticked */
.rail__stop.is-current .rail__mark {
  background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint);
}
.rail__stop.is-failed .rail__mark {
  background: linear-gradient(150deg, var(--bad-lite), var(--bad));
  box-shadow: 0 0 0 4px var(--bad-tint);
}
.rail__label { font-size: 11px; color: var(--ink-mute); line-height: 1.3; }
.rail__stop.is-done .rail__label { color: var(--ink-soft); }
.rail__stop.is-current .rail__label { color: var(--ok); font-weight: var(--weight-bold); }
.rail__stop.is-failed .rail__label { color: var(--bad); font-weight: var(--weight-bold); }
/* after a break the track is dashed: the order is not merely "not there yet",
   it is never getting there. A healthy order's remaining track stays solid. */
.rail.is-broken .rail__stop.link-none::before {
  background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 8px);
}

@media (max-width: 720px) {
  /* squeezed against the card edge by margin-inline-start:auto, the last fact
     (a courier's name, often Latin and unbreakable) ended up flush with the
     rounded corner. Given its own row it has somewhere to go. */
  .ohd__facts {
    width: 100%; margin-inline-start: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .ohd__facts b { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .rail { flex-wrap: wrap; gap: var(--sp-3) 0; }
  .rail__stop { flex: 0 0 33.333%; }
  .rail__stop:only-child { flex: 1; }
  .rail__stop::before { display: none; }
}

/* ── picking list ────────────────────────────────────────────────────── */
.pick { list-style: none; margin: 0; padding: 0; }
.pick li { display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-3); }
.pick li + li { border-block-start: 1px solid var(--rule-soft); }
.pick__qty {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-content: center;
  background: var(--ink); color: var(--on-action);
  font-size: var(--text-base); font-weight: var(--weight-black);
}
.pick__what { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pick__what b { font-size: var(--text-base); }
.pick__what i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.pick__sum { font-size: var(--text-xs); color: var(--ink-mute); }

/* ── next step buttons ───────────────────────────────────────────────── */
/* the action box used to wear a 2px black ring — at that weight a panel reads
   as an alert, not as the place to press. Weight belongs on the BUTTON. */
.pbox--act { background: var(--grad-sunken); box-shadow: inset 0 0 0 1px var(--rule); }
.steps__note { display: block; font-size: var(--text-xs); margin-block: var(--sp-4) var(--sp-2); }
.pbox--act .input { width: 100%; height: 46px; border-radius: 12px; }
.steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.step {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 50px; padding-inline: var(--sp-5); border: 0; cursor: pointer;
  border-radius: 14px; font-family: inherit; font-size: var(--text-base);
  font-weight: var(--weight-bold);
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out);
}
.step .icon { width: 17px; height: 17px; }
.step--go {
  background: linear-gradient(135deg, #1BB963 0%, var(--success) 60%, #0B7C3C 100%);
  color: #fff; box-shadow: 0 8px 20px -10px rgba(16,128,56,.7);
}
.step--go:hover { box-shadow: 0 12px 26px -10px rgba(16,128,56,.85); }
.step--stop { background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.step--stop:hover { background: var(--danger-tint); }
.step--neutral { background: var(--surface-sunken); color: var(--ink); }
.step:active { transform: translateY(1px); }
.pbox__done { margin: 0; padding: var(--sp-4); border-radius: 12px; background: var(--success-tint); color: var(--success); font-size: var(--text-sm); }

/* ── panel: product management (manager) ─────────────────────────────── */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: var(--sp-3); }
.cat { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.cat__name { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cat__name b { font-size: var(--text-sm); }
.cat__name i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.cat__acts { display: flex; gap: var(--sp-2); }

.prods { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.prod { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.prod + .prod { border-block-start: 1px solid var(--rule-soft); }
.prod.is-off { opacity: .55; }
.prod__pic { width: 46px; height: 46px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-content: center; background: var(--grad-sunken); color: var(--ghost-border-hover); }
.prod__pic img { width: 100%; height: 100%; object-fit: cover; }
.prod__pic .icon { width: 20px; height: 20px; }
.prod__id { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.prod__id b { font-size: var(--text-sm); }
.prod__id i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.prod__acts { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 720px) {
  .prod { flex-wrap: wrap; }
  .prod__acts { width: 100%; }
  .prod__acts .btn, .prod__acts form { flex: 1; }
  .prod__acts .btn { width: 100%; justify-content: center; }
}

.shots { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px,1fr)); gap: var(--sp-2); }
.shots li { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--grad-sunken); }
.shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots form { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; }
.shots button {
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center;
  background: rgba(18,18,18,.72); color: #fff;
}
.shots button .icon { width: 12px; height: 12px; }
.shots__empty { grid-column: 1/-1; aspect-ratio: auto; background: none; font-size: var(--text-xs); color: var(--ink-mute); }
.pform--upload { border-block-start: 1px solid var(--rule); padding-block-start: var(--sp-4); }
.pform input[type="file"] { font-size: var(--text-xs); }

/* ═══════════════════════════════════════════════════════════════════════
   STAFF ACTIVITY — the control room
   A manager scans this to answer two things: is everyone working, and where
   do mistakes come from.

   The organising idea is that COLOUR CARRIES IDENTITY. Each role owns a hue
   and each event type owns a hue, and those hues follow the thing everywhere
   it appears — avatar, rail, sparkline, chip, feed row. On a monochrome board
   you must read every heading to know what you are looking at; here the shape
   of the team is legible before a single word is.

   This palette is deliberately wider than the storefront's. It does not
   violate the token rules in tokens.css — those govern the SHOP, where red is
   rationed because it has to mean "sale" and a filled pill has to mean "you
   are here". Nothing is being sold on this page and no customer sees it. The
   one rule kept from the shop, because it is about behaviour and not brand:
   a filled pill still means "you are here", never "press me".
   ═══════════════════════════════════════════════════════════════════════ */

/* ── role identity ───────────────────────────────────────────────────────
   Every hue is dark enough to hold white type AND to be read as type on
   white, so one variable can drive both a filled avatar and a text label. */
.is-role-superadmin { --rc: #6D28D9; --rc-lite: #A78BFA; --rc-tint: #F1EBFF; }
.is-role-manager    { --rc: #1D4ED8; --rc-lite: #7CA0FF; --rc-tint: #E8EFFF; }
.is-role-order_admin{ --rc: #C2410C; --rc-lite: #FB9668; --rc-tint: #FFEDE3; }
.is-role-accountant { --rc: #0F766E; --rc-lite: #4FC3B4; --rc-tint: #E2F5F2; }
.is-role-courier    { --rc: #15803D; --rc-lite: #5FC97F; --rc-tint: #E6F6EA; }
/* :where() so the fallback carries ZERO specificity — an .is-role-* class on
   the same element must always win. Declaring these defaults with a normal
   selector silently killed every role colour: .mate reset --rc on itself and
   the value inherited from the band never got a chance. */
:where(.mate, .band, .band__head, .faces__one, .idle-chip__av, .wire__av, .phd, .daychart, .tiles) {
  --rc: var(--ink); --rc-lite: #9A9A94; --rc-tint: var(--surface-sunken);
}
:where(.chip, .wire__row) { --ac: var(--ink); --ac-tint: var(--surface-sunken); }

/* ── command bar ─────────────────────────────────────────────────────────
   The aurora is five soft radial washes in the five role colours. It is the
   whole team, abstracted — and it is the only decoration on the page that
   carries no data, which is why it stays this quiet. */
.cmd {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-end: var(--sp-6);
  padding: clamp(var(--sp-5), 3.2vw, var(--sp-8));
  border-radius: 22px; background: var(--grad-ink);
  color: var(--ink-inverse); box-shadow: var(--shadow-lg);
}
.cmd__aurora {
  position: absolute; inset: -30%; z-index: -1; opacity: .78;
  filter: blur(38px) saturate(1.5);
  background:
    radial-gradient(30% 44% at 12% 30%, #6D28D9 0%, transparent 70%),
    radial-gradient(28% 40% at 34% 78%, #1D4ED8 0%, transparent 70%),
    radial-gradient(26% 40% at 58% 22%, #C2410C 0%, transparent 70%),
    radial-gradient(26% 40% at 78% 74%, #0F766E 0%, transparent 70%),
    radial-gradient(30% 46% at 94% 28%, #15803D 0%, transparent 70%);
}
.cmd__row { display: flex; align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap; }
.cmd__id { flex: 1 1 260px; }
.cmd__eyebrow {
  margin: 0 0 var(--sp-2); font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .18em; color: rgba(255,255,255,.55);
}
.cmd__id h1 {
  margin: 0; color: #fff; letter-spacing: -.03em;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.05;
}
.cmd__when { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.cmd__tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.cmd .rangepick { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cmd .rangepick a { color: rgba(255,255,255,.72); }
.cmd .rangepick a:hover { color: #fff; }
.cmd .rangepick a.is-on { background: #fff; color: var(--ink); box-shadow: none; }

.cmd__export {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px var(--sp-4); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  color: #fff; text-decoration: none; font-size: var(--text-xs); font-weight: var(--weight-bold);
  transition: background .35s var(--ease-out);
}
.cmd__export:hover { background: rgba(255,255,255,.2); }
.cmd__export .icon { width: 15px; height: 15px; }

.rangepick { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.rangepick a {
  padding: 7px var(--sp-4); border-radius: var(--radius-pill);
  font-size: var(--text-xs); color: var(--ink-mute); text-decoration: none;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.rangepick a:hover { color: var(--ink); }
.rangepick a.is-on { background: var(--surface); color: var(--ink); font-weight: var(--weight-bold); box-shadow: var(--shadow-sm); }

/* ── the three headline tiles ────────────────────────────────────────── */
.tiles {
  display: grid; gap: var(--sp-4); margin-block-end: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.tile {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: 20px; min-height: 168px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.tile__label { font-size: var(--text-xs); color: var(--ink-mute); }
.tile__num {
  font-size: clamp(40px, 6vw, 58px); font-weight: var(--weight-black);
  line-height: .95; letter-spacing: -.045em;
}
.tile__note { margin-block-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

/* The command bar directly above is already a full-width colour wash. Filling
   these three as well put two loud things in a row and the eye had nowhere to
   rest, so the tiles carry their weight in SCALE, not in fill. Colour is spent
   here only where it means something: the gauge arc, the alarm figure, and the
   faces (whose hue is the same role code used on the crew cards below). */
.tile--work .tile__num { font-size: clamp(46px, 7vw, 66px); }

/* Money is not a count. The sizes above were chosen for ۶ / ۲ / ۸۳٪ — one or
   two glyphs — and a Toman figure is nine, with separators. At 66px the hero
   number measured 352px inside a 304px card, and 352 inside 194 once the grid
   dropped to narrower columns: it was overflowing its own tile. Currency gets
   a scale of its own, verified against the narrowest column the grid produces. */
.tile__num--money { font-size: clamp(20px, 2.5vw, 34px); letter-spacing: -.03em; }
.tile--work .tile__num--money { font-size: clamp(23px, 2.9vw, 40px); }
.tile__cur { font-size: .42em; font-weight: var(--weight-medium); color: var(--ink-mute); margin-inline-start: 5px; }

/* the person page is a different case — one accent in a row of four, and it
   is the subject's own colour tying their page together */
.tile--role {
  background: linear-gradient(150deg, var(--rc-lite), var(--rc));
  box-shadow: 0 14px 34px -16px var(--rc);
  color: #fff;
}
.tile--role .tile__label { color: rgba(255,255,255,.66); }
.tile--role .tile__note  { color: rgba(255,255,255,.6); }

/* a stack of faces: who the number belongs to */
.faces { display: flex; align-items: center; margin-block-start: auto; }
.faces--wrap { flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.faces__one {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-content: center; text-decoration: none;
  background: var(--rc); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  box-shadow: 0 0 0 2.5px #fff;
  margin-inline-start: -10px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.faces__one:first-child { margin-inline-start: 0; }
.faces__one:hover { transform: translateY(-3px); z-index: 2; }
.faces__note { margin-inline-start: var(--sp-3); font-size: var(--text-xs); color: var(--ink-mute); }

/* ── the ring gauge ──────────────────────────────────────────────────── */
.tile--rate { flex-direction: row; align-items: center; gap: var(--sp-5); }
.gauge {
  --track: var(--rule-soft); --g: var(--success-bright);
  position: relative; flex: none;
  width: clamp(96px, 12vw, 116px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center;
  background: conic-gradient(from -90deg, var(--g) calc(var(--p, 0) * 1%), var(--track) 0);
}
.gauge.is-good { --g: linear-gradient(#1BA84C, #1BA84C); }
.gauge.is-good, .gauge.is-ok, .gauge.is-poor { }
.gauge.is-good { --g: #1BA84C; }
.gauge.is-ok   { --g: #E0921C; }
.gauge.is-poor { --g: #D6303B; }
.gauge.is-empty { --g: var(--rule-strong); }
.gauge::before {
  content: ""; position: absolute; inset: 11px;
  border-radius: 50%; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}
.gauge b {
  position: relative; font-size: clamp(24px, 3.4vw, 30px);
  font-weight: var(--weight-black); letter-spacing: -.04em; line-height: 1;
}
.gauge b i { font-style: normal; font-size: .5em; margin-inline-start: 1px; }
.tile__side { display: flex; flex-direction: column; gap: var(--sp-2); }
.tile__legend { margin: 0; font-size: var(--text-xs); color: var(--ink-soft); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--ok  { background: #1BA84C; }
.dot--bad { background: #D6303B; margin-inline-start: var(--sp-3); }

/* ── idle tile ───────────────────────────────────────────────────────── */
/* One rule for both pages. And two states, kept apart on purpose:
     is-alarm (red)  — something is wrong and nobody is on it
     is-ready (green)— something GOOD is available and nobody has taken it
   The delivery tile asked for is-alarm while the rows it summarises were
   marked green for the same fact. Two colours for one meaning is how a
   palette stops meaning anything. */
.tile.is-alarm .tile__num { color: var(--danger); }
.tile.is-ready .tile__num { color: var(--success); }
.idle-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 12px 4px 4px; border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--text-xs); color: var(--ink); text-decoration: none;
  transition: box-shadow .35s var(--ease-out);
}
.idle-chip:hover { box-shadow: inset 0 0 0 1px var(--ghost-border-hover), var(--shadow-sm); }
/* no role colour: someone who has not worked in a week is shown drained,
   exactly as their card is in the crew grid */
.idle-chip__av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  background: var(--ghost-border-hover); color: #fff;
  font-size: 11px; font-weight: var(--weight-bold);
}

/* ── the colour key, doubling as a headcount ─────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px var(--sp-4); border-radius: var(--radius-pill);
  background: var(--rc-tint); color: var(--rc);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.legend__item .icon { width: 15px; height: 15px; }
.legend__n { font-weight: var(--weight-black); opacity: .65; }

/* ── role band ───────────────────────────────────────────────────────── */
.band { margin-block-end: var(--sp-8); }
.band__head { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.band__tag {
  padding: 6px var(--sp-4); border-radius: var(--radius-pill);
  background: var(--rc-tint); color: var(--rc);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.band__tag--ink { background: var(--ink); color: #fff; }
.band__count { font-size: var(--text-xs); color: var(--ink-mute); }
.band__rule { flex: 1; height: 1px; background: linear-gradient(to left, var(--rule) 0%, transparent 100%); }

/* ── one person ──────────────────────────────────────────────────────── */
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.mate {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-radius: 20px;
  background: var(--surface);
  /* the ring is the role colour at tint strength — the card is bounded by its
     own hue rather than by a bar stuck to one edge */
  box-shadow: inset 0 0 0 1px var(--rc-tint);
  color: inherit; text-decoration: none;
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
  animation: mate-in .55s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes mate-in { from { opacity: 0; transform: translateY(10px); } }
/* colour bleeds out from behind the avatar and dissolves into the card, so the
   identity reads as part of the person rather than as an edge marking */
.mate::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: -34%; inset-inline-start: -16%;
  width: 68%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--rc) 0%, transparent 72%);
  opacity: .14;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.mate:hover {
  box-shadow: inset 0 0 0 1px var(--rc-tint), var(--shadow-md);
  transform: translateY(-2px);
}
.mate:hover::before { opacity: .24; transform: scale(1.18); }
.mate.is-idle { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--rule); }
.mate.is-idle::before { opacity: .07; }
.mate.is-idle:hover { box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-md); }

.mate__top { display: flex; align-items: center; gap: var(--sp-3); }
.mate__av {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: linear-gradient(150deg, var(--rc-lite), var(--rc));
  color: #fff; font-size: var(--text-base); font-weight: var(--weight-bold);
  box-shadow: 0 4px 12px -4px var(--rc);
}
.mate.is-idle .mate__av { background: var(--ghost-border-hover); box-shadow: none; }
.mate__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mate__role {
  align-self: flex-start; margin-block-start: 3px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--rc-tint); color: var(--rc);
  font-size: 11px; font-weight: var(--weight-bold);
}
.mate__role .icon { width: 13px; height: 13px; }
.mate.is-idle .mate__role { background: var(--surface); color: var(--ink-mute); }

.mate__id b { font-size: var(--text-sm); }
/* dir="ltr" keeps the digits in the right order but also flips the element's
   text-align to left, which staircases the phone away from the name above */
.mate__id i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); text-align: right; }

.crown {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--rc); color: #fff;
  font-size: 11px; font-weight: var(--weight-bold);
}
.crown .icon { width: 11px; height: 11px; }

.mate__score { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.mate__score b {
  font-size: clamp(30px, 4vw, 38px); font-weight: var(--weight-black);
  line-height: 1; letter-spacing: -.04em; color: var(--rc);
}
.mate.is-idle .mate__score b { color: var(--ink-mute); }
.mate__score i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
.mate__rate {
  margin-inline-start: auto; font-style: normal;
  padding: 4px var(--sp-3); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap;
}
.mate__rate.is-good { background: var(--success-tint); color: var(--success); }
.mate__rate.is-ok   { background: var(--warning-tint); color: var(--warning); }
.mate__rate.is-poor { background: var(--danger-tint);  color: var(--danger); }

/* a month of work in one glance — bars grow from the floor, left to right */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 38px; }
.spark i {
  flex: 1; min-width: 2px; height: var(--h, 0%); border-radius: 3px;
  background: var(--rule); transform-origin: bottom;
  animation: spark-in .5s var(--ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 11ms + 120ms);
}
@keyframes spark-in { from { transform: scaleY(0); } }
.spark i.has { background: linear-gradient(to top, var(--rc), var(--rc-lite)); }
.mate.is-idle .spark i.has { background: var(--ghost-border-hover); }

.mate__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fact {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--surface-sunken); font-size: var(--text-xs); color: var(--ink-soft);
}
.fact b { font-weight: var(--weight-bold); }
.fact--ok   { background: var(--success-tint); color: var(--success); }
.fact--bad  { background: var(--danger-tint);  color: var(--danger); }
.fact--warn { background: var(--warning-tint); color: var(--warning); }
.fact--info { background: var(--info-tint);    color: var(--info); }
.mate__seen { font-size: 11px; color: var(--ink-mute); }

/* ── event identity ──────────────────────────────────────────────────────
   Thirteen types, grouped so the hue means something: green makes a thing
   exist, red removes it, blue edits, violet moves money, amber touches
   stock, slate is a footprint rather than a change. */
.is-act-create            { --ac: #15803D; --ac-tint: #E6F6EA; }
.is-act-approve           { --ac: #0E7490; --ac-tint: #E2F4F8; }
.is-act-update            { --ac: #1D4ED8; --ac-tint: #E8EFFF; }
.is-act-status_change     { --ac: #4338CA; --ac-tint: #ECEBFF; }
.is-act-delete            { --ac: #B91C1C; --ac-tint: #FDECEC; }
.is-act-reject            { --ac: #BE123C; --ac-tint: #FFE9EE; }
.is-act-price_change      { --ac: #7E22CE; --ac-tint: #F5EBFF; }
.is-act-commission_change { --ac: #A21CAF; --ac-tint: #FCEAFC; }
.is-act-stock_adjust      { --ac: #B45309; --ac-tint: #FEF0DC; }
.is-act-assign            { --ac: #0F766E; --ac-tint: #E2F5F2; }
.is-act-note              { --ac: #57534E; --ac-tint: #F1F0EE; }
.is-act-login             { --ac: #475569; --ac-tint: #EEF1F5; }
.is-act-export            { --ac: #0369A1; --ac-tint: #E4F1FA; }

/* ── filter chips: the legend and the control in one row ─────────────── */
.chipnav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-5); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px var(--sp-4); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ghost-border);
  font-size: var(--text-xs); color: var(--ink-soft); text-decoration: none;
  transition: box-shadow .3s var(--ease-out), color .3s var(--ease-out),
              background .3s var(--ease-out);
}
/* the swatch turns the filter row into a colour key for the list below */
.chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac); flex: none;
}
.chip--all::before { background: linear-gradient(135deg, #6D28D9, #1D4ED8 35%, #C2410C 70%, #15803D); }
.chip:hover { background: var(--ac-tint); color: var(--ac); box-shadow: inset 0 0 0 1px transparent; }
.chip.is-on {
  background: var(--ac); color: #fff; font-weight: var(--weight-bold);
  box-shadow: 0 5px 16px -6px var(--ac);
}
.chip.is-on::before { background: rgba(255,255,255,.85); }
.chip--all.is-on { background: var(--ink); }
.chip--all.is-on::before { background: linear-gradient(135deg, #A78BFA, #7CA0FF 35%, #FB9668 70%, #5FC97F); }

/* ── the wire: one event per row ─────────────────────────────────────── */
.wire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.wire__row {
  position: relative; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  animation: wire-in .4s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
  transition: box-shadow .35s var(--ease-out);
}
@keyframes wire-in { from { opacity: 0; transform: translateY(6px); } }
.wire__row:hover { box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm); }
.wire__av {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-content: center; margin-block-start: 1px;
  background: var(--rc); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.wire__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wire__meta { flex: none; margin-inline-start: auto; }
.wire__line { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.wire__act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--ac-tint); color: var(--ac);
  font-size: 11px; font-weight: var(--weight-bold);
}
.wire__act::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac); flex: none;
}
.wire__who { font-size: var(--text-xs); color: var(--ink); text-decoration: none; font-weight: var(--weight-medium); }
.wire__who:hover { text-decoration: underline; }
.wire__what { font-size: var(--text-xs); color: var(--ink-soft); line-height: var(--leading-snug); }
.wire__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: 11px; color: var(--ink-mute); }
/* .wire__meta is flex:none and measures a flat 256px — a timestamp plus an
   order chip, neither of which shrinks. On a phone it took the whole row and
   left .wire__body 0px at 360, 14px at 390 and 52px at 430: the summary wrapped
   to six lines, one word per line, and the row grew to 234px tall. The old rule
   here only zeroed the auto margin, which changed nothing while meta still
   refused to shrink. Below 640 the meta drops to its own line instead, indented
   past the avatar so it still reads as part of the same event. */
/* Touch targets in the feed. .wire__who was 23px tall and .wire__target 21px —
   the two things an operator actually taps in a row (open the person, open the
   order) — and .idle-chip 32px. The panel already states 44px as its floor.
   The hit area is grown with a pseudo-element rather than padding so nothing
   moves: only the vertical axis expands, which is the axis that was short, and
   neither neighbour inside these rows is itself clickable. */
@media (max-width: 900px) {
  .wire__who, .wire__target, .idle-chip { position: relative; }
  .wire__who::after, .wire__target::after, .idle-chip::after {
    content: ""; position: absolute; inset-inline: 0;
  }
  .wire__who::after   { inset-block: -11px; }
  .wire__target::after { inset-block: -12px; }
  .idle-chip::after    { inset-block: -6px; }
}

@media (max-width: 640px) {
  .wire__row { flex-wrap: wrap; }
  .wire__body { flex: 1 1 auto; }
  .wire__meta {
    flex: 1 0 100%;
    margin-inline-start: 0;
    padding-inline-start: calc(32px + var(--sp-3));   /* the avatar's width + gap */
  }
}
.wire__target {
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-soft); text-decoration: none;
}
.wire__target:hover { background: var(--ink); color: #fff; }
.wire__empty {
  padding: var(--sp-8); border-radius: 14px; text-align: center;
  background: var(--surface-sunken); color: var(--ink-mute); font-size: var(--text-xs);
}

/* ── person page ─────────────────────────────────────────────────────── */
.phd {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: clamp(var(--sp-5), 3vw, var(--sp-8)); border-radius: 22px;
  background: var(--grad-ink); color: var(--ink-inverse);
  box-shadow: var(--shadow-lg);
}
/* the person's own role colour washes their header */
.phd::before {
  content: ""; position: absolute; inset: -50% -20% auto -20%; height: 190%;
  z-index: -1; opacity: .55; filter: blur(52px);
  background: radial-gradient(42% 60% at 82% 34%, var(--rc, #6D28D9) 0%, transparent 72%);
}
.phd__av {
  width: 66px; height: 66px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: linear-gradient(150deg, var(--rc-lite, #fff3), var(--rc, #fff2));
  color: #fff; font-size: var(--text-xl); font-weight: var(--weight-black);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}
.phd__id h1 { margin: 2px 0 0; color: #fff; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; }
.phd__role {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .12em;
  color: rgba(255,255,255,.6); font-weight: var(--weight-bold);
}
.phd__role .icon { width: 15px; height: 15px; letter-spacing: 0; }
.phd__meta { margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.phd .rangepick { margin-inline-start: auto; background: rgba(255,255,255,.10); }
.phd .rangepick a { color: rgba(255,255,255,.72); }
.phd .rangepick a.is-on { background: rgba(255,255,255,.94); color: var(--ink); box-shadow: none; }

/* ── daily chart ─────────────────────────────────────────────────────── */
.daychart {
  display: flex; align-items: flex-end; gap: 3px; height: 168px;
  padding: var(--sp-5); border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.daychart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.daychart__col i {
  width: 100%; max-width: 22px; height: var(--h, 0%); border-radius: 5px 5px 2px 2px;
  background: var(--rule); transform-origin: bottom;
  animation: spark-in .6s var(--ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 14ms);
  transition: filter .3s var(--ease-out);
}
.daychart__col i.has { background: linear-gradient(to top, var(--rc, var(--ink)), var(--rc-lite, var(--ink))); }
.daychart__col:hover i.has { filter: brightness(1.18); }
.daychart__col u { text-decoration: none; font-size: 10px; color: var(--ink-mute); }

/* ── head tools ──────────────────────────────────────────────────────── */
.pnl__tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pnl__tools .btn { white-space: nowrap; }
@media (max-width: 640px) {
  /* side by side the three range pills wrap onto a second line inside their
     own pill track, which reads as a broken control — a row each instead */
  .cmd__tools, .pnl__tools { width: 100%; }
  .cmd__tools > *, .pnl__tools > * { flex: 1 0 100%; }
  .cmd__tools .rangepick, .pnl__tools .rangepick { display: grid; grid-template-columns: repeat(3, 1fr); }
  .cmd__tools .rangepick a { text-align: center; }
  .cmd__export, .pnl__tools .btn { justify-content: center; }
  .tile--rate { flex-direction: column; align-items: flex-start; }
}

/* the event feed swaps in place — dim it while the new list is in flight so
   the change is legible, but never collapse the height and jump the page */
[data-feed-list] { transition: opacity .18s ease; }
[data-feed].is-loading [data-feed-list] { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  [data-feed-list] { transition: none; }
  .mate, .spark i, .wire__row, .daychart__col i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DELIVERY DESK
   Ordered by how often the question is asked: what can I still sell today,
   which windows are filling, where should we open next, then the settings
   that change once a season.
   ═══════════════════════════════════════════════════════════════════════ */

/* No aurora here. The activity page earns its one — those five hues ARE the
   five roles, so the wash is the team. On this page the same treatment would
   be four colours standing for nothing, which is exactly the habit that makes
   a reader stop trusting that colour anywhere on the page means something. */
.cmd--ship .cmd__aurora { display: none; }
.band__tag .icon { width: 14px; height: 14px; }
.band__tag { display: inline-flex; align-items: center; gap: 6px; }

/* ── capacity board ──────────────────────────────────────────────────────
   A table, deliberately. Slot against day IS a two-axis lookup, and a grid of
   divs would say the same thing while telling a screen reader nothing. */
.capwrap { overflow-x: auto; margin-block-end: var(--sp-8); padding-block-end: var(--sp-2); }
.cap-table { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 640px; }
.cap-table th { font-weight: var(--weight-medium); text-align: center; padding: 0 0 var(--sp-2); }
.cap-table thead th.is-today .cap-table__dow { color: var(--ink); font-weight: var(--weight-bold); }
.cap-table__dow { display: block; font-size: var(--text-xs); color: var(--ink-soft); }
.cap-table__day { display: block; font-size: 11px; color: var(--ink-mute); }
.cap-table__slot {
  text-align: start; min-width: 132px; padding-inline-end: var(--sp-3);
  display: table-cell; vertical-align: middle;
}
.cap-table__slot b { display: block; font-size: var(--text-xs); }
.cap-table__slot i { display: block; font-style: normal; font-size: 11px; color: var(--ink-soft); }
.cap-table__slot em { display: block; font-style: normal; font-size: 11px; color: var(--ink-mute); }

/* the bar behind the figure is the load; the figure is the fact */
.cap {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  padding: var(--sp-3) var(--sp-2); border-radius: 12px;
  background: var(--surface-sunken); font-size: var(--text-xs);
}
.cap::before {
  content: ""; position: absolute; z-index: -1; inset-block-end: 0;
  inset-inline: 0; height: var(--fill, 0%);
  background: var(--cap-fill, var(--rule-strong));
  transition: height .4s var(--ease-out);
}
.cap b { font-weight: var(--weight-bold); }
.cap i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.cap--open { --cap-fill: #C7EAD3; }
.cap--busy { --cap-fill: #FBDFAE; }
.cap--full { --cap-fill: #F6C6C9; }
.cap--full b { color: var(--danger); }
.cap--shut { background: repeating-linear-gradient(135deg, #F4F4F0 0 6px, #ECECE7 6px 12px); color: var(--ink-mute); }
.cap--shut::before { display: none; }
.cap--shut b { color: var(--ink-mute); font-weight: var(--weight-normal); }

.capkey { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.capkey__i { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-mute); }
.capkey .cap {
  width: 14px; height: 14px; padding: 0; border-radius: 4px; display: inline-block;
  background: var(--cap-fill, var(--rule-strong));
}
.capkey .cap--shut { background: repeating-linear-gradient(135deg, #F4F4F0 0 4px, #DCDCD6 4px 8px); }

/* ── expansion demand ────────────────────────────────────────────────── */
.demand { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.demand__row {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-soft);
}
/* The bar's LENGTH is the count. Its COLOUR is one bit and one bit only:
   green means we already deliver there, so these people can be served today
   and nobody has told them — the only row on this list you can act on right
   now. Every other row is grey, because "not covered yet" is the normal case
   and does not need a hue to say so.

   It used to be blue by default, which meant nothing at all and made the green
   rows look arbitrary instead of urgent. A colour that appears on most rows
   cannot mark the exceptional ones. */
.demand__bar { position: absolute; z-index: -1; inset: 0; }
.demand__bar i {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w, 0%);
  background: linear-gradient(to left, var(--surface-sunken), transparent);
}
.demand__row.is-covered .demand__bar i { background: linear-gradient(to left, var(--success-tint), transparent); }
.demand__row.is-covered { box-shadow: inset 0 0 0 1px #CDE9D5; }
.demand__rank {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--surface-sunken); color: var(--ink-soft);
  font-size: 11px; font-weight: var(--weight-bold);
}
.demand__row:first-child .demand__rank { background: var(--ink); color: #fff; }
.demand__id { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.demand__id b { font-size: var(--text-sm); }
.demand__n { font-size: var(--text-xs); color: var(--ink-soft); }
.demand__n b { font-size: var(--text-md); font-weight: var(--weight-black); margin-inline-end: 3px; }
.demand__when { font-size: 11px; color: var(--ink-mute); margin-inline-start: auto; }

/* says out loud what the one colour on the list means, so nobody has to
   infer it from the rows */
.demandkey { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-mute); }
/* the row wash is a gradient that fades out, so a 14px chip filled with the
   same token reads as blank — the key uses the solid end of that ramp */
.demandkey i { width: 14px; height: 14px; border-radius: 4px; background: #BFE3CA; }

.note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-8); padding: var(--sp-3) var(--sp-4);
  border-radius: 12px; font-size: var(--text-xs); line-height: var(--leading-snug);
}
.note .icon { width: 15px; height: 15px; margin-block-start: 2px; flex: none; }
.note--warn { background: var(--warning-tint); color: #7A4E0F; }

/* ── zones ───────────────────────────────────────────────────────────── */
.zones {
  display: grid; gap: var(--sp-4); margin-block-end: var(--sp-8);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.zone {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: 20px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.zone.is-off { background: var(--surface-sunken); }
.zone.is-off .zone__id h3 { color: var(--ink-soft); }
.zone__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.zone__id { flex: 1; min-width: 0; }
.zone__id h3 { margin: 0; font-size: var(--text-md); letter-spacing: -.02em; }
.zone__city { margin: 3px 0 0; font-size: var(--text-xs); color: var(--ink-mute); }

.zone__money { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: 0; }
.zone__money > div {
  padding: var(--sp-3); border-radius: 12px; background: var(--surface-sunken);
}
.zone__money dt { font-size: 11px; color: var(--ink-mute); }
.zone__money dd { margin: 3px 0 0; font-size: var(--text-sm); font-weight: var(--weight-bold); }

.zone__slots { display: flex; flex-direction: column; gap: var(--sp-2); }
.wslot {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-soft);
  font-size: var(--text-xs);
}
.wslot.is-off { opacity: .55; }
.wslot i { font-style: normal; color: var(--ink-mute); font-size: 11px; }
.wslot__seats { margin-inline-start: auto; color: var(--ink-soft); }
.wslot__cap { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.wslot__cap input {
  width: 54px; padding: 4px 6px; border-radius: 8px; text-align: center;
  border: 1px solid var(--ghost-border); background: var(--surface);
  font: inherit; font-size: var(--text-xs);
}
.wslot__cap button {
  padding: 4px 10px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--surface-sunken); color: var(--ink-soft); font: inherit; font-size: 11px;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.wslot__cap button:hover { background: var(--ink); color: #fff; }
.zone__noslot { margin: 0; font-size: var(--text-xs); color: var(--danger); }

/* the switch reads as state, and its label says which state it is IN —
   never as a verb, so nobody has to guess whether it describes now or next */
.toggle {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  padding: 5px 12px 5px 6px; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-mute);
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold);
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.toggle__dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ghost-border-hover);
  transition: background .35s var(--ease-out);
}
.toggle.is-on { background: var(--success-tint); color: var(--success); }
.toggle.is-on .toggle__dot { background: var(--success-bright); }
.toggle:hover { background: var(--ghost-bg-hover); }
.toggle.is-on:hover { background: #D8F0DE; }

.zone__edit > summary {
  cursor: pointer; font-size: var(--text-xs); color: var(--ink-soft);
  padding: var(--sp-2) 0; list-style: none;
}
.zone__edit > summary::-webkit-details-marker { display: none; }
.zone__edit > summary::before { content: "＋ "; }
.zone__edit[open] > summary::before { content: "− "; }
.zone__edit > summary:hover { color: var(--ink); }
.zform { display: flex; flex-direction: column; gap: var(--sp-3); padding-block-start: var(--sp-2); }
.zform__row { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.zform__row label { font-size: 11px; color: var(--ink-mute); }
.zform__row input {
  padding: 8px 10px; border-radius: 10px; font: inherit; font-size: var(--text-xs);
  border: 1px solid var(--ghost-border); background: var(--surface);
}
.zform__row input:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.zform__note { margin: 0; font-size: 11px; color: var(--ink-mute); line-height: var(--leading-snug); }

/* ── raw waitlist ────────────────────────────────────────────────────── */
.rawlist > summary {
  cursor: pointer; font-size: var(--text-xs); color: var(--ink-soft);
  padding: var(--sp-3) 0; list-style: none;
}
.rawlist > summary::-webkit-details-marker { display: none; }
.rawlist > summary::before { content: "＋ "; }
.rawlist[open] > summary::before { content: "− "; }
.rawlist > summary:hover { color: var(--ink); }

@media (max-width: 640px) {
  .zone__money { grid-template-columns: 1fr; }
  .capkey { width: 100%; }
}

/* ── order detail: boxes, code, address ──────────────────────────────── */
.pbox__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-block-end: var(--sp-3); }
.pbox__head .pbox__title { margin: 0; }
.pbox__count { margin-inline-start: auto; font-size: 11px; color: var(--ink-mute); }

/* the pick square was solid black — the loudest object on a page where the
   loudest object should be the button you press next */
.pick__qty {
  background: var(--surface-sunken); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

/* the courier asks for this number at the door, so it is set to be read out
   loud: big, spaced, and in the one place the eye lands */
.pbox--code { text-align: center; }
.ocode {
  margin: var(--sp-2) 0 0; font-size: clamp(30px, 5vw, 40px);
  font-weight: var(--weight-black); letter-spacing: .18em;
  color: var(--ink); line-height: 1;
}
.ocode__hint { margin: var(--sp-2) 0 0; font-size: 11px; color: var(--ink-mute); }

.oaddr__who { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.oaddr__who b { font-size: var(--text-sm); }
.oaddr__tel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink);
  font-size: var(--text-xs); text-decoration: none;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.oaddr__tel:hover { background: var(--ink); color: #fff; }
.oaddr__tel .icon { width: 13px; height: 13px; }
.oaddr__where { margin: 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--ink-soft); }
.oaddr__city { display: block; color: var(--ink); font-weight: var(--weight-medium); }
.oaddr__note {
  margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: 12px;
  background: var(--warning-tint); color: #7A4E0F;
  font-size: var(--text-xs); line-height: var(--leading-snug);
}
.oaddr__note i { display: block; font-style: normal; font-size: 11px; opacity: .75; margin-block-end: 2px; }

/* a folded run of back-to-back changes says how many it stood for */
.wire__rep {
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-mute);
  font-size: 10px; font-weight: var(--weight-bold);
}
.rawlist--trail { margin-block-start: var(--sp-2); }
.rawlist--trail > summary { padding-block: var(--sp-2); }

/* A closed <details> hides its non-summary children through the UA sheet —
   but ANY child that sets `display` itself wins over that, and the panel is
   full of flex/grid children. `.wire` is a flex column, so every "folded"
   history and the delivery waitlist were rendering in full while their
   disclosure sat closed. Stated once, generally, so the next one cannot.
   Specificity here is (0,1,2), which clears a single class like `.wire`. */
details:not([open]) > *:not(summary) { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   ORDER QUEUE
   Banded by when each order is due, because that is the only axis that tells
   an operator what to pick up next.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── queue command bar ───────────────────────────────────────────────────
   Two rows: identity and range on the first, search across the second. The
   search used to be a 340px box wedged beside the range picker, which pushed
   both controls into a ragged stack on the left and left the middle of the
   bar empty. */
.cmd--queue { display: flex; flex-direction: column; gap: var(--sp-5); padding-block: clamp(var(--sp-5), 2.6vw, var(--sp-6)); }
.cmd--queue .cmd__row { align-items: flex-end; gap: var(--sp-4); }
.rangepick--onbar { margin-inline-start: auto; flex: none; }

.qsearch {
  position: relative; display: flex; align-items: center;
  width: 100%; height: 52px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.qsearch:hover { background: rgba(255,255,255,.12); }
.qsearch:focus-within { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.qsearch__hint {
  position: absolute; inset-inline-start: var(--sp-5); width: 17px; height: 17px;
  color: rgba(255,255,255,.45); pointer-events: none;
  transition: color .3s var(--ease-out);
}
.qsearch:focus-within .qsearch__hint { color: var(--brand-red); }
.qsearch input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff;
  font: inherit; font-size: var(--text-sm);
  padding-inline: calc(var(--sp-5) + 28px) 64px;
}
.qsearch input::placeholder { color: rgba(255,255,255,.42); }
.qsearch input:focus-visible { outline: none; }
.qsearch input::-webkit-search-cancel-button { display: none; }

/* same gesture as the storefront's header search: the submit turns brand red */
.qsearch button {
  position: absolute; inset-block-start: 50%; inset-inline-end: 6px;
  transform: translateY(-50%);
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  cursor: pointer; display: grid; place-content: center;
  background: rgba(255,255,255,.92); color: var(--ink);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.qsearch button:hover { background: var(--brand-red); color: #fff; box-shadow: var(--shadow-glow-red); }
.qsearch button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qsearch button .icon { width: 18px; height: 18px; }
.qsearch__clear {
  position: absolute; inset-block-start: 50%; inset-inline-end: 52px;
  transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-content: center;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.75);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.qsearch__clear:hover { background: rgba(255,255,255,.28); color: #fff; }
.qsearch__clear .icon { width: 12px; height: 12px; stroke-width: 2.5; }

.tile--link { text-decoration: none; color: inherit; transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.tile--link:hover { box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-md); transform: translateY(-2px); }
.tile.is-wait .tile__num { color: var(--warning); }

.chip__n {
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-mute);
  font-size: 10px; font-weight: var(--weight-bold);
}
.chip.is-on .chip__n { background: rgba(255,255,255,.22); color: #fff; }
.chip.is-tone-wait { --ac: var(--warning); --ac-tint: var(--warning-tint); }
.chip.is-tone-live { --ac: var(--info);    --ac-tint: var(--info-tint); }
.chip.is-tone-done { --ac: var(--ok);      --ac-tint: var(--ok-tint); }
.chip.is-tone-bad  { --ac: var(--bad);     --ac-tint: var(--bad-tint); }
.chip--open { --ac: var(--ink); }

/* ── bands ───────────────────────────────────────────────────────────────
   Each band is a PANEL, not a heading with air around it. Space and a tinted
   hairline were not enough — at a glance the page still read as one long list
   of rows. A band now owns a tinted ground, its own padding and a header with
   the count set large, so the three groups are three objects.
   ──────────────────────────────────────────────────────────────────────── */
/* White panels lifted off the #FAFAF8 ground by depth alone. ONE shadow for
   every band — an earlier version tinted each panel's shadow with its own hue,
   which put a coloured haze on the page around the card and read as a smudge
   rather than as height. Colour belongs to the mark, the title and the count;
   the lift is just lift. */
.qband {
  --bc: var(--rule-strong); --bfg: var(--ink-soft);
  margin-block-end: var(--sp-10);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  border-radius: 24px; background: var(--surface);
  box-shadow:
    0 1px 2px rgba(18, 18, 18, .04),
    0 10px 22px -14px rgba(18, 18, 18, .13),
    0 28px 56px -34px rgba(18, 18, 18, .20);
}
.qband:last-of-type { margin-block-end: var(--sp-6); }

.qband--late     { --bc: #E7A6AC; --bfg: var(--bad); }
.qband--today    { --bc: #E8C48A; --bfg: #A0670F; }
.qband--tomorrow { --bc: #A9C9E2; --bfg: var(--info); }
.qband--later    { --bc: #B9C8D8; --bfg: #4C6076; }
.qband--undated  { --bc: #E8C48A; --bfg: #A0670F; }
.qband--closed   { --bc: var(--rule-strong); --bfg: var(--ink-mute); }

/* Rows stay white and are drawn by a hairline, not by a fill. On hover the
   line firms up and the row lifts slightly — nothing changes colour. */
.qband .orow a {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.qband .orow a:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ghost-border-hover), var(--shadow-sm);
}

.qband__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.qband__mark {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  display: grid; place-content: center;
  background: var(--surface-sunken); color: var(--bfg);
  box-shadow: inset 0 0 0 1px var(--bc);
}
.qband__mark .icon { width: 17px; height: 17px; }
.qband__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.qband__id b { font-size: var(--text-md); color: var(--bfg); letter-spacing: -.02em; }
.qband__id i { font-style: normal; font-size: var(--text-xs); color: var(--ink-mute); }
/* the count is the size of a headline, not a footnote in a pill */
.qband__n {
  flex: none; font-size: clamp(28px, 3.4vw, 38px); font-weight: var(--weight-black);
  line-height: 1; letter-spacing: -.04em; color: var(--bfg); opacity: .38;
}

@media (max-width: 620px) {
  .qband { padding: var(--sp-4) var(--sp-3) var(--sp-3); border-radius: 20px; }
  .qband__head { margin-block-end: var(--sp-3); }
}

/* ── rows ────────────────────────────────────────────────────────────── */
.orows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.orow a {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 128px minmax(0, 1.3fr) 118px minmax(0, 1fr) minmax(0, .9fr) auto;
  padding: var(--sp-3) var(--sp-4); border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-soft);
  color: inherit; text-decoration: none;
  transition: box-shadow .35s var(--ease-out);
}
.orow a:hover { box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm); }
/* No per-row late wash: the band around it already says "late", and two
   signals for one fact just muddies the row. */
.orow__num { font-size: 11px; color: var(--ink-mute); letter-spacing: .04em; }
.orow__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orow__who b { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow__who i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.orow__when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orow__when b { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.orow__when i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.orow__nodate { color: var(--ink-mute); }
.orow__courier { font-size: var(--text-xs); color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__courier i { font-style: normal; color: var(--ink-mute); }
.orow__sum { font-size: var(--text-sm); font-weight: var(--weight-bold); text-align: end; }
.orows__empty { padding: var(--sp-6); border-radius: 14px; background: var(--surface-sunken); color: var(--ink-mute); font-size: var(--text-xs); text-align: center; }

.qmore { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.qmore__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: var(--sp-8); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ghost-border);
  color: var(--ink); text-decoration: none;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.qmore__btn:hover { background: var(--ink); color: #fff; box-shadow: none; }
.qmore__btn.is-busy { opacity: .5; pointer-events: none; }
.qmore__count { font-size: 11px; color: var(--ink-mute); }
.qmore__done { margin-block-start: var(--sp-5); font-size: 11px; color: var(--ink-mute); text-align: center; }
.cmd__span { color: rgba(255,255,255,.75); }
.cmd--queue .rangepick { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cmd--queue .rangepick a { color: rgba(255,255,255,.72); }
.cmd--queue .rangepick a:hover { color: #fff; }
.cmd--queue .rangepick a.is-on { background: #fff; color: var(--ink); box-shadow: none; }

@media (max-width: 900px) {
  /* the courier column goes first: it is the one thing you will see anyway
     the moment you open the row */
  .orow a { grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1fr) auto; }
  .orow__num, .orow__courier { display: none; }
}
@media (max-width: 620px) {
  .orow a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); }
  .orow__sum { grid-column: 2; grid-row: 1; }
  .ostat { grid-column: 2; grid-row: 2; justify-self: end; }
  .qsearch { flex: 1 1 100%; margin-inline-start: 0; }
  /* four across, «این هفته» wrapped onto a second line and the whole
     picker went ragged; two rows of two keeps every label on one line */
  .cmd--queue .rangepick { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; text-align: center; }
  .cmd--queue .rangepick a { padding-block: 10px; }
  .cmd--queue .cmd__row { align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL — phone and tablet
   Three things were wrong on a narrow screen, all measured rather than
   guessed at:

   1. The nav rail stacked ABOVE the content — 575px of black on a 390px
      phone. Every panel page opened on a full screen of navigation, and the
      order you tapped through to arrive at was below the fold.
   2. The order journey wrapped. Five 96px stations in a 288px box is three
      then two, so the sequence stopped reading left-to-right, and the
      connectors were switched off because they would have joined the wrong
      neighbours across the wrap. A progress rail that does not show
      progression is just five badges.
   3. Tap targets: the status filters were 37px, the disclosure 39px, and the
      customer's phone number — the thing an operator taps to CALL — was 31px.
      44px is the floor the rest of the site already keeps.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* The nav becomes one scrollable row: same links, same order, ~60px instead
     of 575px, and it stays above the content where a section switcher belongs
     rather than being hidden behind a menu the operator has to discover. */
  .pnl__side {
    /* flex-direction must be restated: the base rule sets `column`, and a
       media query that only changes `display` inherits it — which is how the
       name ended up stacked above the nav on its own 60px line. */
    display: flex; flex-direction: row; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pnl__side::-webkit-scrollbar { display: none; }
  .pnl__who {
    flex: none; padding-inline-end: var(--sp-3);
    border-inline-end: 1px solid rgba(255, 255, 255, .14);
  }
  .pnl__who .pnl__role { display: none; }
  .pnl__who b { font-size: var(--text-sm); white-space: nowrap; }
  .pnl__nav { flex-direction: row; gap: var(--sp-1); }
  .pnl__nav a {
    flex: none; white-space: nowrap; min-height: 44px; border-radius: var(--radius-pill);
  }
  /* Two lines of label would double the rail's height for no gain. */
  .pnl__django i { display: none; }
}

@media (max-width: 560px) {
  /* Vertical timeline. Five stations do not fit across a phone at a legible
     size, and stacking them is the one arrangement where the connector still
     means what it says: each stop links to the one after it. */
  .rail { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 0; }
  .rail__stop {
    flex: none; flex-direction: row; align-items: center;
    gap: var(--sp-3); text-align: start; min-height: 40px;
  }
  /* The connector turns 90°: a 3px column dropped from the middle of this
     stop's mark to the next one. inset-inline-start keeps it centred under the
     23px mark in RTL without a physical-side override. */
  .rail__stop.link-ok::before,
  .rail__stop.link-bad::before,
  .rail__stop.link-none::before {
    display: block;
    inset-block-start: 50%; inset-inline-start: 10px;
    width: 3px; height: 100%;
  }
  .rail.is-broken .rail__stop.link-none::before {
    background: repeating-linear-gradient(180deg, var(--rule) 0 4px, transparent 4px 8px);
  }
  .rail__label { font-size: var(--text-xs); }
}

/* ── tap targets, panel ────────────────────────────────────────────────
   Not `max-width: 720px` like the storefront's pass. A tablet at 768–1024 is
   still a finger, and that is exactly the width an operator runs this panel
   at on the shop floor. The pointer query catches touch laptops and anything
   else a width cannot know about. */
@media (max-width: 1024px), (pointer: coarse) {
  .chip { min-height: 44px; }
  /* the date-range picker is hidden under 560, which is why it was missed */
  .rangepick a { min-height: 44px; display: inline-flex; align-items: center; }
  .qsearch button { min-width: 44px; min-height: 44px; }
  .rawlist > summary { min-height: 44px; display: flex; align-items: center; }
  .oaddr__tel { min-height: 44px; padding-inline: 8px; margin-inline: -8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINANCE
   Two numbers, kept apart: what was delivered, and what was collected.
   ═══════════════════════════════════════════════════════════════════════ */

.cmd--money .cmd__row { align-items: center; }

.mnav {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-inline-start: auto; padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.mnav b { min-width: 108px; text-align: center; font-size: var(--text-xs); color: #fff; }
.mnav a, .mnav span {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-content: center; color: rgba(255,255,255,.8);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.mnav a:hover { background: rgba(255,255,255,.18); color: #fff; }
.mnav .is-off { color: rgba(255,255,255,.22); }
/* the icon is a chevron drawn pointing one way; the "next" control mirrors it
   rather than shipping a second symbol */
.mnav--next .icon { transform: scaleX(-1); }

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  margin-inline-start: var(--sp-2); padding: 1px 8px;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--weight-bold);
}
.delta.is-up { background: var(--ok-tint); color: var(--ok); }
.delta.is-down { background: var(--bad-tint); color: var(--bad); }
/* No .tile--work override here. That tile used to be a saturated fill and
   these rules put white type on it; it is a white card now, and they made the
   badge white-on-white — rendered, measured, positioned, and invisible. If a
   coloured tile ever needs a delta again, scope it to that tile, not to this
   one. */

/* ── composition ─────────────────────────────────────────────────────────
   The bar is the total, cut into its three parts. VAT gets its own colour
   because it is the one slice that is not the shop's money — it is collected
   for the state and paid on. Goods and shipping are both yours, so they are
   two weights of the same ink rather than two different hues. */
.split {
  display: grid; gap: var(--sp-5); margin-block-end: var(--sp-8);
  grid-template-columns: 1fr; padding: var(--sp-5);
  border-radius: 20px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}
/* One hue, three weights — because that is what this bar is: three slices of
   a single amount, not three statuses. The old version filled 86% of it with
   solid --ink, a black slab, and coloured VAT amber. The amber was the worse
   half: on this same page amber already means "money not collected" in the
   chart, so one colour was carrying two unrelated meanings a few hundred
   pixels apart. A ramp says "parts of one total" and claims nothing else. */
.split__bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; background: var(--surface-sunken); }
.split__seg { width: var(--w, 0%); transition: width .5s var(--ease-out); }
/* Three tints of one hue were hard to tell apart once the small slices sat
   side by side, so these are three separate hues — but chosen around the two
   the page has already spent: green means "collected" and amber means "still
   owed" in the chart below, so neither may appear here. Blue, violet and
   slate are far from both and from each other. */
.split__seg--goods { background: linear-gradient(180deg, #4468C8, #3654AE); }
.split__seg--vat   { background: linear-gradient(180deg, #9558CB, #7E44B4); }
.split__seg--ship  { background: linear-gradient(180deg, #7C8CA3, #66788F); }
.split__key { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin: 0; }
.split__key > div { display: flex; flex-direction: column; gap: 3px; }
.split__key dt { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--ink-mute); }
.split__key dd { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); }
.split__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.split__dot--goods { background: #3654AE; }
.split__dot--vat   { background: #7E44B4; }
.split__dot--ship  { background: #66788F; }
.split__dot--off   { background: var(--ok); }

/* ── daily sales chart ───────────────────────────────────────────────────
   The bars alone said nothing: no unit, no scale, no values. A reader could
   see that one day was taller than another and nothing else. It now carries a
   labelled ceiling, a hover figure per day, and a caption saying what the
   shape means. */
.mchart { margin: 0 0 var(--sp-8); }
/* The scroller. Lost once already: rewriting the chart block replaced a region
   that happened to contain this rule, and without it the plot's 560px
   min-width pushed the whole PAGE to 611px on a 390px screen. A wide child
   inside a container that is not actually scrolling does not clip — it grows
   the document. */
/* No scroller. It was here to contain a 560px min-width the chart does not
   need — 31 columns fit inside 320px, because a Persian day number is 7px
   wide. Two faults came out of keeping it: the tooltips are laid out even
   while transparent, so the last column's popup extended the scroll area and
   produced a scrollbar at EVERY width; and `overflow-x: auto` computes
   `overflow-y` to auto as well, which clipped every tooltip in half. */
/* 2px of inline padding absorbs the day labels, which are allowed to bleed
   slightly past their column so a two-digit number is not clipped in a 7px
   track. Without it the box measures 2px wider than it draws. */
.chartwrap { padding-block-end: var(--sp-2); padding-inline: 2px; }
.mchart__plot { position: relative; padding-block-start: var(--sp-5); }

/* the ceiling is the busiest day, so every bar can be read against a number */
/* height 0 so the LINE sits exactly on the offset, not the line plus half of
   whatever the label's line-box happens to be — that pushed the ceiling 9px
   below the bar it was supposed to cap */
.mchart__grid { position: absolute; inset-inline: 0; height: 0; display: flex; align-items: center; gap: var(--sp-3); }
.mchart__grid i { flex: 1; height: 1px; background: var(--rule); }
.mchart__grid--top { inset-block-start: var(--sp-5); }
.mchart__grid--top i { background: var(--rule-strong); }
.mchart__grid--mid { inset-block-start: calc(var(--sp-5) + 68px); }
.mchart__grid b { font-size: 10px; color: var(--ink-mute); white-space: nowrap; }

.mchart__bars {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-end; gap: 2px; height: 136px;
}
.mchart__col {
  position: relative; flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-block-end: 17px;              /* reserved strip for the day number */
}
/* Taken out of flow on purpose: an in-flow label is the widest thing in the
   column and would set a floor on how narrow a 31-day month can get. */
.mchart__day {
  position: absolute; inset-block-end: 0; inset-inline: -2px;
  text-align: center; pointer-events: none;
}
/* The bar's percentage has to be of a track that holds ONLY bars. Sharing the
   column height with the day label meant a "100%" bar rendered at 114 of 136
   pixels — every bar silently short, and the peak no longer touching the
   ceiling drawn for it. */
.mchart__track { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.mchart__bar {
  position: relative; overflow: hidden;
  width: 100%; max-width: 22px; height: var(--h, 0%); min-height: 2px;
  border-radius: 4px 4px 2px 2px;
  background: var(--rule); transform-origin: bottom;
  animation: spark-in .6s var(--ease-out) backwards;
  transition: filter .25s var(--ease-out);
}
/* The bar was flat ink, which said only "some amount". It now carries the
   split the whole page leads with: the collected part in green at the foot,
   the outstanding part in amber above it. Amber rather than red because money
   that has not arrived yet is waiting, not failed — the same amber that means
   "stalled on us" everywhere else in the panel. */
.mchart__col.has .mchart__bar {
  background: linear-gradient(to top, #E4A93F, #C98A1E);
  overflow: hidden;
}
.mchart__got {
  position: absolute; inset-inline: 0; inset-block-end: 0; height: var(--p, 0%);
  background: linear-gradient(to top, #0E7A36, #21A552);
  transition: height .5s var(--ease-out);
}
/* a day that has not happened is not a day with no sales — hatched, so the
   two never read as the same fact */
.mchart__col.is-future .mchart__bar {
  /* a low stub, not a full-height column: thirty of these filling the plot
     would read as thirty bars rather than as thirty days that have not
     happened */
  background: repeating-linear-gradient(135deg, #DEDED8 0 3px, transparent 3px 6px);
  height: 10px; min-height: 10px; border-radius: 3px;
}
.mchart__col.is-today .mchart__day { color: var(--ink); font-weight: var(--weight-bold); }
.mchart__col.is-today::after {
  content: ""; position: absolute; inset-block-end: -3px; inset-inline: 35%;
  height: 2px; border-radius: 2px; background: var(--ink);
}
.mchart__day { font-size: 10px; color: var(--ink-mute); }
.mchart__col.is-today::after { inset-block-end: 14px; }
.mchart__col:hover .mchart__bar { filter: brightness(1.7); }

/* One readout, owned by the plot and clamped inside it by the script, so it
   can never leave the chart or widen the page. `hidden` (not opacity) while
   idle, because a transparent absolute box still counts toward the document's
   scroll area — that was the scrollbar under this chart at every width. */
.mchart__tip {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 11px; border-radius: 10px; white-space: nowrap;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-md);
  transition: opacity .15s var(--ease-out);
}
.mchart__tip b { font-size: 11px; }
.mchart__tip i { font-style: normal; font-size: 10px; color: rgba(255,255,255,.72); }
.mchart__tip i:empty { display: none; }
.mchart__col { cursor: default; }
.mchart__col:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

.mchart__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-block-start: var(--sp-4); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule-soft);
}
.mchart__foot > span { display: flex; flex-direction: column; gap: 2px; }
.mchart__foot i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.mchart__foot b { font-size: var(--text-xs); }
.mchart__key { flex-direction: row !important; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3) !important; margin-inline-start: auto; font-size: 11px; color: var(--ink-mute); }
.mchart__key > span { display: inline-flex; align-items: center; gap: 6px; }
.mchart__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mchart__swatch--got { background: linear-gradient(to top, #0E7A36, #21A552); }
.mchart__swatch--due { background: linear-gradient(to top, #E4A93F, #C98A1E); }
.mchart__swatch--future { background: repeating-linear-gradient(135deg, #E4E4DE 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--rule); }

/* a bare 11px line of text is a 19px tap target; the padding makes it 40 */
.band__link {
  display: inline-flex; align-items: center; min-height: 40px;
  padding-inline: var(--sp-2); font-size: 11px;
  color: var(--ink-soft); text-decoration: none;
}
.band__link:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 860px) {
  .cmd--money .cmd__row { align-items: stretch; }
  .mnav { width: 100%; margin-inline-start: 0; justify-content: space-between; }
  .mnav b { flex: 1; }
  .mchart__key { margin-inline-start: 0; width: 100%; }
}
@media (max-width: 520px) {
  .split { padding: var(--sp-4); }
  .mchart__foot { gap: var(--sp-3); }
  .mchart__foot > span { flex: 1 1 100%; }
}

/* ── dashboard ───────────────────────────────────────────────────────── */
.cmd--home .cmd__row { align-items: center; }
/* four KPI tiles stacked one per row pushed the real content two screens down
   on a phone; at this size they pair up and still read */
.tiles--compact { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.tiles--compact .tile { min-height: 128px; }
.tiles--compact .tile__num { font-size: clamp(30px, 5vw, 44px); }
/* Sized against the NARROWEST tile this grid produces, not against vw. At
   1024 the sidebar takes 232px, so the content column — and every tile in it —
   is narrower than at 834; a vw-driven size grows exactly where the room
   shrinks, and the figure spilled at both 360 and 1024. */
.tiles--compact .tile__num--money { font-size: clamp(15px, 1.5vw, 22px); }
.tiles--compact .tile__cur { font-size: .4em; }
.tile__note .is-bad { color: var(--danger); font-weight: var(--weight-bold); }

.lots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.lot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-soft);
}
.lot.is-urgent { background: linear-gradient(90deg, var(--surface) 60%, var(--bad-tint)); }
.lot__id { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lot__id b { font-size: var(--text-sm); }
.lot__id i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.lot__left { font-size: var(--text-xs); color: var(--ink-soft); }

/* ── bulk actions ────────────────────────────────────────────────────── */
.orow { display: flex; align-items: stretch; gap: var(--sp-2); }
.orow > a { flex: 1; min-width: 0; }
.orow__pick {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 42px; border-radius: 14px; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .3s var(--ease-out);
}
.orow__pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.orow__pick span {
  width: 19px; height: 19px; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--ghost-border-hover);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.orow__pick:hover span { box-shadow: inset 0 0 0 1.5px var(--ink-mute); }
.orow__pick input:checked + span {
  background: var(--ink) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: none;
}
.orow__pick input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.orow__lines { display: block; font-style: normal; font-size: 10px; color: var(--ink-mute); margin-block-start: 2px; }

/* Sticky inside the form that wraps the list, so it stays pinned to the
   bottom of the viewport for as long as there are rows to act on. */
.bulk {
  position: sticky; inset-block-end: var(--sp-4); z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-pill);
  background: var(--grad-ink); color: #fff; box-shadow: var(--shadow-lg);
}
.bulk__count { font-size: var(--text-xs); }
.bulk__count b { font-size: var(--text-md); font-weight: var(--weight-black); margin-inline-end: 4px; }
.bulk__group { display: flex; align-items: center; gap: var(--sp-2); }
.bulk select {
  height: 38px; padding-inline: var(--sp-3); border: 0; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: var(--text-xs);
}
.bulk select option { color: var(--ink); }
.bulk__group button, .bulk__step, .bulk__clear {
  min-height: 38px; padding-inline: var(--sp-4); border: 0; cursor: pointer;
  border-radius: var(--radius-pill); font: inherit; font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.bulk__group button { background: rgba(255,255,255,.16); color: #fff; }
.bulk__group button:hover { background: #fff; color: var(--ink); }
.bulk__steps { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-inline-start: auto; }
.bulk__step--go { background: var(--ok); color: #fff; }
.bulk__step--go:hover { background: #16a34a; }
.bulk__step--stop { background: transparent; color: #FFB4B8; box-shadow: inset 0 0 0 1px rgba(255,180,184,.5); }
.bulk__step--stop:hover { background: rgba(255,180,184,.16); }
.bulk__step--neutral { background: rgba(255,255,255,.16); color: #fff; }
.bulk__mixed { font-style: normal; font-size: 11px; color: rgba(255,255,255,.6); }
.bulk__clear { background: transparent; color: rgba(255,255,255,.65); }
.bulk__clear:hover { color: #fff; }

.chip--nocourier { --ac: #7E44B4; --ac-tint: #F3EBFA; }

@media (max-width: 620px) {
  .orow__pick { width: 38px; }
  /* clear the fixed bottom-nav (74px) instead of hiding behind it */
  .bulk { border-radius: 20px; inset-block-end: calc(74px + var(--sp-3)); }
  .bulk__steps { margin-inline-start: 0; width: 100%; }
  .bulk__steps .bulk__step { flex: 1; }
}

/* select-all for one band — the companion to bulk actions; without it seven
   pending orders still means seven clicks */
.qband__all {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 10px; cursor: pointer;
  background: var(--surface-sunken);
  transition: background .3s var(--ease-out);
}
.qband__all:hover { background: var(--ghost-bg-hover); }
.qband__all input { position: absolute; opacity: 0; width: 0; height: 0; }
.qband__all span {
  width: 18px; height: 18px; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--ghost-border-hover);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.qband__all input:checked + span {
  background: var(--ink) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow: none;
}
.qband__all input:indeterminate + span {
  background: var(--ink) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow: none;
}
.qband__all input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* delivered is not the same as paid, and the row never said which */
.orow__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.paid {
  font-style: normal; font-size: 10px; font-weight: var(--weight-bold);
  padding: 1px 7px; border-radius: var(--radius-pill); white-space: nowrap;
}
.paid--paid { background: var(--ok-tint); color: var(--ok); }
.paid--unpaid { background: var(--warning-tint); color: var(--warning); }
.paid--refunded { background: var(--surface-sunken); color: var(--ink-mute); }

/* ═══════════════════════════════════════════════════════════════════════
   PICKING SHEET
   Written for paper. Screen styling is the secondary case here: the floor
   works from a printout, so anything that only makes sense lit up — the dark
   command bar, the nav, the back link — is dropped at print time, and what
   remains is set in ink on white with tick boxes big enough to mark by hand.
   ═══════════════════════════════════════════════════════════════════════ */

.cmd--pick .cmd__row { align-items: center; }
.cmd--pick .cmd__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cmd--pick .mnav { margin-inline-start: 0; }
.cmd--pick .cmd__export { cursor: pointer; font-family: inherit; }

.printhead { display: none; }
.picksheet { margin-block-end: var(--sp-8); }

.ptable { width: 100%; border-collapse: collapse; }
.ptable th {
  text-align: start; padding: var(--sp-2) var(--sp-3);
  font-size: 11px; font-weight: var(--weight-bold); color: var(--ink-mute);
  border-block-end: 1px solid var(--rule);
}
.ptable td { padding: var(--sp-3); border-block-end: 1px solid var(--rule-soft); font-size: var(--text-xs); }
.ptable tbody tr:nth-child(odd) { background: var(--surface); }
.ptable__n { text-align: center; }
.ptable__n.nums { font-size: var(--text-md); font-weight: var(--weight-black); }
.ptable__sku { color: var(--ink-mute); font-size: 11px; }

.boxes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.box { padding: var(--sp-4); border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); break-inside: avoid; }
.box__head { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-3); padding-block-end: var(--sp-2); border-block-end: 1px solid var(--rule-soft); }
.box__who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.box__who b { font-size: var(--text-sm); }
.box__who i { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.box__num { font-size: 10px; color: var(--ink-mute); }
.box__courier { width: 100%; font-size: 11px; color: var(--ink-soft); }
.box__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.box__items li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); }
.box__items b { min-width: 22px; font-size: var(--text-sm); font-weight: var(--weight-black); }
.box__items i { font-style: normal; color: var(--ink-mute); }
/* a real box to tick with a pen once the item is in the carton */
.box__tick { width: 15px; height: 15px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ghost-border-hover); }
.box__note { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--warning-tint); color: #7A4E0F; font-size: 11px; }

@media print {
  /* everything that only exists because there is a screen */
  .noprint, .pnl__side, .site-header, .site-footer, .bottom-nav,
  #djDebug, .cmd { display: none !important; }
  .pnl, .pnl__main { display: block; padding: 0; margin: 0; }
  body { background: #fff; }
  .printhead {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-block-end: 12pt; padding-block-end: 6pt; border-block-end: 1.5pt solid #000;
    font-size: 12pt;
  }
  .picksheet { margin-block-end: 16pt; break-inside: auto; }
  .band__head { margin-block-end: 6pt; }
  .band__tag { background: none !important; color: #000 !important; padding: 0; font-size: 12pt; font-weight: 700; }
  .band__rule, .band__count { display: none; }
  .ptable { font-size: 10pt; }
  .ptable th, .ptable td { border-color: #999; padding: 4pt 6pt; }
  .ptable tbody tr:nth-child(odd) { background: none; }
  .ptable__n.nums { font-size: 13pt; }
  .boxes { grid-template-columns: repeat(2, 1fr); gap: 8pt; }
  .box { box-shadow: none; border: 1pt solid #999; border-radius: 4pt; padding: 6pt; }
  .box__tick { box-shadow: inset 0 0 0 1pt #000; }
  .box__note { background: none; border: 0.5pt dashed #666; color: #000; }
  @page { margin: 12mm; }
}

.commnote {
  margin: var(--sp-3) 0 var(--sp-8); padding: var(--sp-3) var(--sp-4);
  border-radius: 12px; background: var(--surface-sunken);
  font-size: 11px; line-height: var(--leading-snug); color: var(--ink-soft);
}

/* ── error pages ─────────────────────────────────────────────────────── */
.errpage { max-width: 34rem; margin-inline: auto; padding-block: clamp(var(--sp-12), 12vh, var(--sp-20)); text-align: center; }
.errpage__code { margin: 0; font-size: clamp(64px, 14vw, 108px); font-weight: var(--weight-black); letter-spacing: -.05em; color: var(--rule-strong); line-height: 1; }
.errpage h1 { margin: var(--sp-3) 0 var(--sp-3); font-size: clamp(24px, 4vw, 34px); letter-spacing: -.025em; }
.errpage__lede { margin: 0 0 var(--sp-8); color: var(--ink-soft); line-height: var(--leading-normal); }
.errpage__acts { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   PANEL — packages and prices
   Price hangs off the package, so this reads as a list of packages that each
   happen to carry a number, not as a price form. The number a manager came
   here to change is the widest field; the identity of the package is the
   quiet line above it, and what the price is RIGHT NOW is restated under the
   input, because overwriting a live price by mistake is the expensive error
   on this screen.
   ═══════════════════════════════════════════════════════════════════════ */
.pkg { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pkg__row {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  padding: var(--sp-4); border-radius: 14px;
  background: var(--grad-surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.pkg__row.is-off { background: var(--surface-sunken); }
.pkg__id { display: flex; flex-direction: column; gap: 2px; }
.pkg__id b { font-size: var(--text-base); }
.pkg__meta { font-size: var(--text-xs); color: var(--ink-mute); }

/* minmax(0,1fr), never a bare 1fr: `1fr` is `minmax(auto, 1fr)`, so the track
   refuses to go below the input's min-content and the whole page inherits an
   ~800px floor. Same rule the rest of this file already follows. */
.pkg__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.pkg__fields .field { min-width: 0; }
.pkg__fields .input { width: 100%; font-variant-numeric: tabular-nums; }
/* A price is read as a magnitude, so it wants to be the biggest thing here. */
.pkg__fields .field:first-child .input { font-size: var(--text-md); font-weight: var(--weight-bold); }

.pkg__now { margin: 0; font-size: var(--text-xs); color: var(--ink-soft); }
.pkg__now b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pkg__off { color: var(--brand-red); font-weight: var(--weight-bold); }
.pkg__unpriced { color: var(--warning); font-weight: var(--weight-medium); }

/* The add form is folded away: on most visits a manager is correcting a price,
   not inventing a pack size. */
.pkg__add { border-block-start: 1px solid var(--rule-soft); padding-block-start: var(--sp-4); }
.pkg__add > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink);
}
.pkg__add > summary::marker { content: ""; }
.pkg__add > summary::-webkit-details-marker { display: none; }
.pkg__add > summary::before {
  content: "+"; display: grid; place-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--ink); color: var(--on-action);
  font-weight: var(--weight-bold); line-height: 1;
}
.pkg__add[open] > summary::before { content: "\2212"; }   /* − */
.pkg__add > .pform { margin-block-start: var(--sp-3); }

@media (max-width: 560px) {
  .pkg__fields { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL — warehouse
   Receiving and correcting are two different jobs, so they are two different
   objects: the receipt is a panel you fill in, the correction is one field on
   the row it belongs to. The accent is indigo (--panel), not black — on a
   screen whose whole point is status, the chrome must not be the darkest
   thing in view.
   ═══════════════════════════════════════════════════════════════════════ */

/* the accent button — the panel's primary action */
.btn--accent {
  background: var(--panel); color: var(--on-panel); border-color: transparent;
}
.btn--accent:hover { background: var(--panel-hover); box-shadow: 0 8px 24px -10px rgba(67, 56, 202, .6); }
.btn--accent:active { background: var(--panel-press); }
.btn--accent .icon { width: 17px; height: 17px; }

/* ── stat tiles ───────────────────────────────────────────────────────
   The old page filled the first tile with black whether or not it meant
   anything. Tone now follows the number: nothing out of stock is not an
   emergency, so it stays quiet. */
.pcard--warn {
  background: var(--warning-tint);
  box-shadow: inset 0 0 0 1px rgba(184, 118, 26, .22);
}
.pcard--warn b, .pcard--warn .pcard__label, .pcard--warn .pcard__sub { color: var(--warning); }
.pcard--accent {
  background: var(--panel-tint);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.pcard--accent b { color: var(--panel); }
.pcard--accent .pcard__label, .pcard--accent .pcard__sub { color: var(--panel-hover); opacity: .8; }

/* ── the receipt panel ────────────────────────────────────────────────── */
.recv {
  margin-block: var(--sp-6);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-radius: 20px;
  background: linear-gradient(160deg, var(--panel-tint) 0%, var(--surface) 62%);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.recv__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-block-end: var(--sp-5); }
.recv__mark {
  flex: none; display: grid; place-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--panel); color: var(--on-panel);
  box-shadow: 0 8px 20px -8px rgba(67, 56, 202, .7);
}
.recv__mark .icon { width: 24px; height: 24px; }
.recv__title { margin: 0; font-size: var(--text-md); letter-spacing: -.01em; }
.recv__note { margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: var(--ink-soft); line-height: var(--leading-snug); max-width: 62ch; }

/* Package first and full width — it is the one field where picking the wrong
   value spoils the whole receipt. The rest are short and sit in a row. */
.recv__form {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
}
.recv__form .field { min-width: 0; }
.recv__form .field--variant { grid-column: 1 / -1; }
.recv__form .input, .recv__form select { width: 100%; height: 46px; border-radius: 12px; }
.recv__form select { background: var(--surface); }
/* The date fields carry a sample date as their placeholder. Left at the normal
   input colour it reads as a value already filled in, which is the one thing a
   placeholder must never do on a field that decides when stock expires. */
.recv__form .input::placeholder { color: var(--ink-mute); opacity: 1; }
.recv__form .input:focus { border-color: var(--panel); box-shadow: 0 0 0 3px var(--panel-tint); outline: none; }
.recv__form select:focus { border-color: var(--panel); box-shadow: 0 0 0 3px var(--panel-tint); outline: none; }
.recv__form .btn { grid-column: 1 / -1; justify-self: start; height: 46px; padding-inline: var(--sp-6); }
.recv__errors { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }

/* ── open lots under a row ────────────────────────────────────────────
   FEFO is only trustworthy if the operator can see the queue it is picking
   from — one "expires on" line hides old stock sitting behind new. */
.lots { grid-column: 1 / -1; margin-block-start: var(--sp-2); }
.lots > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; cursor: pointer; list-style: none;
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--panel);
}
.lots > summary::-webkit-details-marker { display: none; }
.lots > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-inline-start: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform .2s var(--ease-out);
}
.lots[open] > summary::before { transform: rotate(-90deg); }
.lots__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lots__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-3); border-radius: 10px;
  background: var(--surface-sunken); font-size: var(--text-xs);
}
.lots__row.is-soon { background: var(--warning-tint); }
.lots__code { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.lots__qty { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
.lots__qty i { font-style: normal; font-weight: var(--weight-normal); color: var(--ink-mute); }
.lots__exp { color: var(--ink-soft); text-align: end; }
.lots__exp i { display: block; font-style: normal; font-size: 11px; color: var(--ink-mute); }
.lots__row.is-soon .lots__exp, .lots__row.is-soon .lots__exp i { color: var(--warning); font-weight: var(--weight-medium); }
.stockrow__exp.is-none { color: var(--danger); font-weight: var(--weight-medium); }

@media (max-width: 640px) {
  .recv__form { grid-template-columns: minmax(0, 1fr); }
  .recv__form .btn { width: 100%; justify-self: stretch; }
  .lots__row { grid-template-columns: minmax(0, 1fr) auto; }
  .lots__exp { grid-column: 1 / -1; text-align: start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   JALALI DATE FIELD
   The popover is anchored to the field's wrapper, not to the page, so it
   travels with the field inside the receipt grid and needs no repositioning
   on scroll. z-index sits above the sticky masthead (40) for the case where
   the field is near the top of the viewport.
   ═══════════════════════════════════════════════════════════════════════ */
.jdate { position: relative; }

.jcal {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: 268px; max-width: calc(100vw - 16px); padding: var(--sp-3);
  border-radius: 16px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-lg);
  animation: jcal-in .16s var(--ease-out);
}
@keyframes jcal-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .jcal { animation: none; } }

.jcal__head { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); }
.jcal__title { flex: 1; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.jcal__nav {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: var(--surface-sunken); color: var(--ink-soft);
  font-size: var(--text-md); line-height: 1; cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.jcal__nav:hover { background: var(--panel-tint); color: var(--panel); }

.jcal__dow, .jcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jcal__dow span {
  text-align: center; padding-block: 4px;
  font-size: 11px; font-weight: var(--weight-bold); color: var(--ink-mute);
}
.jcal__day {
  height: 32px; border: 0; border-radius: 9px; padding: 0;
  background: none; color: var(--ink); cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.jcal__day:hover { background: var(--panel-tint); color: var(--panel); }
.jcal__day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* today is stated with a ring; the chosen day is the filled one, so the two
   never look like the same thing */
.jcal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--panel-line); font-weight: var(--weight-bold); }
.jcal__day.is-on {
  background: var(--panel); color: var(--on-panel); font-weight: var(--weight-bold);
}
.jcal__day.is-on:hover { background: var(--panel-hover); color: var(--on-panel); }

.jcal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-2); border-block-start: 1px solid var(--rule-soft);
}
.jcal__today, .jcal__clear {
  border: 0; background: none; cursor: pointer; font: inherit;
  min-height: 32px; padding-inline: var(--sp-2); border-radius: 8px;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.jcal__today { color: var(--panel); }
.jcal__today:hover { background: var(--panel-tint); }
.jcal__clear { color: var(--ink-mute); font-weight: var(--weight-medium); }
.jcal__clear:hover { color: var(--danger); background: var(--danger-tint); }

/* Placement is app.js's job now (position: fixed, measured from the field),
   so there is no breakpoint to special-case — max-width above is the only
   guard a 320px screen needs. */