/* ==========================================================================
   PayCard — multi-page components (phase 1)
   Extends base.css + sections.css. RTL-first, logical properties throughout.
   ========================================================================== */

/* ---------- utilities added in phase 1 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container--narrow { max-width: 860px; }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section-head--tight { margin-bottom: var(--sp-6); }
.eyebrow--center { justify-content: center; }
.section__foot { margin-block-start: clamp(2rem, 4vw, 3rem); text-align: center; }
.section__foot--start { text-align: start; }

/* ---------- header: services dropdown ---------- */
.nav__item { position: relative; }
.nav__chev { inline-size: 15px; block-size: 15px; opacity: .6; }
.nav__link { display: inline-flex; align-items: center; gap: var(--sp-1); }

.subnav {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0;
  min-inline-size: 340px; padding: var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  z-index: 120;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
  opacity: 1; visibility: visible; transform: none;
}
.subnav__link {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--r-md);
  text-decoration: none; color: var(--text-body);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.subnav__link:hover { background: var(--bone-050); }
.subnav__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 34px; block-size: 34px; border-radius: var(--r-sm);
  background: var(--ink-700); color: var(--gold-400);
}
.subnav__icon svg { inline-size: 17px; block-size: 17px; }
.subnav__name { display: block; font-weight: 700; color: var(--text-strong); font-size: var(--fs-sm); }
.subnav__desc { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.subnav__all {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); margin-block-start: var(--sp-2);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-strong);
  text-decoration: none;
}
.subnav__all svg { inline-size: 15px; block-size: 15px; }
.subnav__all:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; min-inline-size: 0;
    padding: 0 0 var(--sp-3) var(--sp-4); background: transparent;
  }
  .nav__chev { display: none; }
}

/* ---------- inner-page hero ---------- */
.pagehero {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8);
  position: relative; overflow: hidden;
}
.pagehero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(201,162,39,.16), transparent 62%),
    linear-gradient(200deg, rgba(255,255,255,.05), transparent 46%);
  pointer-events: none;
}
.pagehero > .container { position: relative; }
.pagehero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: var(--sp-4); }
.pagehero__copy { max-width: 62ch; }
.pagehero__lead {
  font-size: var(--fs-lead); color: var(--text-on-inverse-muted);
  margin: 0 0 var(--sp-5);
}
.pagehero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pagehero .eyebrow { color: var(--gold-400); }

/* ---------- breadcrumbs ---------- */
.crumbs { margin-bottom: var(--sp-5); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.crumbs li + li::before {
  content: '‹'; color: rgba(238,242,247,.4); font-size: 1rem; line-height: 1;
}
/* WCAG 2.5.8 — 24px minimum target. The visual size stays small; only the
   hit area grows, and the negative inline margin keeps the row tight. */
.crumbs a {
  color: var(--text-on-inverse-muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
  padding-inline: var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
}
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: var(--gold-400); font-weight: 700; }

/* ---------- at-a-glance strip ---------- */
.glance {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: var(--card-pad);
}
.glance__item { text-align: center; position: relative; }
.glance__item + .glance__item::before {
  content: ''; position: absolute; inset-inline-end: 100%;
  inset-block: 10%; inline-size: 1px;
  background: var(--border-subtle);
  margin-inline-end: calc(var(--sp-4) / 2);
}
.glance__label { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 var(--sp-2); }
.glance__value {
  font-family: var(--font-head); font-weight: 800; font-size: 1.75rem;
  color: var(--ink-700); margin: 0;
}
.glance__value--sm {
  font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
  line-height: 1.5;
}
.glance__value--sm svg { inline-size: 16px; block-size: 16px; color: var(--verified); flex: none; }
.glance__note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--sp-1) 0 0; }
@media (max-width: 860px) {
  .glance { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .glance__item:nth-child(odd) + .glance__item::before { inset-block: 10%; }
  .glance__item:nth-child(3)::before { display: none; }
}
@media (max-width: 480px) {
  .glance { grid-template-columns: 1fr; }
  .glance__item + .glance__item::before { display: none; }
  .glance__item + .glance__item { border-block-start: 1px solid var(--border-subtle); padding-block-start: var(--sp-4); }
}

/* ---------- fit / not-fit pair ---------- */
.fitgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
@media (max-width: 780px) { .fitgrid { grid-template-columns: 1fr; } }

.fit h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-h3); margin-bottom: var(--sp-5);
}
.fit h3 svg { inline-size: 22px; block-size: 22px; flex: none; }
.fit ul { display: grid; gap: var(--sp-3); }
.fit li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.6;
}
.fit li svg { inline-size: 17px; block-size: 17px; flex: none; margin-block-start: 4px; }
.fit--yes { border-color: #C9E4D8; }
.fit--yes h3 svg, .fit--yes li svg { color: var(--verified); }
.fit--no { border-color: var(--bone-300); }
.fit--no h3, .fit--no li { color: var(--slate-600); }
.fit--no h3 svg, .fit--no li svg { color: var(--slate-400); }
.fit__note {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin: var(--sp-5) 0 0; padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border-subtle);
}

/* ---------- spec table + docs sidebar ---------- */
.specsplit {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
@media (max-width: 900px) { .specsplit { grid-template-columns: 1fr; } }

.spectable { margin: 0; display: grid; }
.spectable__row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--border-subtle);
}
.spectable__row:first-child { border-block-start: 1px solid var(--border-subtle); }
.spectable dt { font-weight: 700; color: var(--text-strong); font-size: var(--fs-sm); }
.spectable dd { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
@media (max-width: 520px) {
  .spectable__row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

.docbox { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4)); }
.docbox h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-h3); margin-bottom: var(--sp-4);
}
.docbox h3 svg { inline-size: 22px; block-size: 22px; color: var(--gold-700); flex: none; }
.docbox__list { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.docbox__list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.6;
}
.docbox__list svg { inline-size: 17px; block-size: 17px; color: var(--verified); flex: none; margin-block-start: 4px; }
.docbox__note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--bg-sunken); border-radius: var(--r-md);
  padding: var(--sp-3); margin-bottom: var(--sp-5);
}
.docbox__note svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--gold-700); margin-block-start: 2px; }
@media (max-width: 900px) { .docbox { position: static; } }

/* ---------- vertical timeline ---------- */
.timeline { display: grid; gap: var(--sp-5); }
.timeline__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  align-items: start; position: relative;
}
.timeline__item::before {
  content: ''; position: absolute;
  inset-inline-start: 21px; inset-block-start: 44px;
  inline-size: 1px; block-size: calc(100% + var(--sp-5) - 44px);
  background: var(--border-on-inverse);
}
.timeline__item:last-child::before { display: none; }
.timeline__num {
  display: grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  border: 1px solid var(--border-on-inverse);
  background: rgba(255,255,255,.05);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
  color: var(--gold-400);
}
.timeline__stage { font-weight: 700; color: #fff; margin: 0 0 var(--sp-1); font-size: var(--fs-body); }
.timeline__when {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-on-inverse-muted); margin: 0;
}
.timeline__when svg { inline-size: 15px; block-size: 15px; color: var(--gold-400); flex: none; }
.timeline__body { font-size: var(--fs-sm); color: var(--text-on-inverse-muted); margin: 0; line-height: 1.7; }

/* light variant, for use on bone surfaces */
.timeline--light .timeline__item::before { background: var(--border-subtle); }
.timeline--light .timeline__num {
  border-color: var(--border-hairline); background: var(--bg-surface);
  color: var(--gold-700);
}
.timeline--light .timeline__stage { color: var(--text-strong); }
.timeline--light .timeline__body,
.timeline--light .timeline__when { color: var(--text-muted); }

/* ---------- service chooser rows ---------- */
.chooser { display: grid; gap: var(--sp-3); }
.chooser__row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--sp-4); align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  text-decoration: none; color: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.chooser__row:hover {
  border-color: var(--accent-border); box-shadow: var(--sh-2);
  transform: translateX(-3px);
}
.chooser__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px; border-radius: var(--r-md);
  background: var(--ink-700); color: var(--gold-400);
}
.chooser__icon svg { inline-size: 21px; block-size: 21px; }
.chooser__need { display: block; font-weight: 700; color: var(--text-strong); margin-bottom: 2px; }
.chooser__answer { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.chooser__go svg { inline-size: 20px; block-size: 20px; color: var(--accent-strong); }
@media (max-width: 620px) {
  .chooser__row { grid-template-columns: auto 1fr; }
  .chooser__go { display: none; }
}

/* ---------- prep checklist ---------- */
.checklist { display: grid; gap: var(--sp-5); }
.checklist__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.checklist__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px; border-radius: var(--r-md);
  background: var(--accent-wash); color: var(--gold-700);
  border: 1px solid var(--gold-200);
}
.checklist__icon svg { inline-size: 21px; block-size: 21px; }
.checklist__item h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.checklist__item p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ---------- pricing table ---------- */
.pricetable-wrap {
  /* position:relative is load-bearing: the table's .sr-only <caption> is
     absolutely positioned, and without a positioned ancestor it escapes this
     overflow container and gives the whole page a horizontal scrollbar on
     narrow viewports. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  background: var(--bg-surface); box-shadow: var(--sh-1);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* The scrollable region must be reachable by keyboard (WCAG 2.1.1). */
.pricetable-wrap:focus-visible {
  outline: 2px solid var(--gold-400); outline-offset: 2px;
}
.pricetable { width: 100%; border-collapse: collapse; min-width: 780px; }
.pricetable th, .pricetable td {
  text-align: start; padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); vertical-align: middle;
}
.pricetable thead th {
  background: var(--bg-sunken); color: var(--text-strong);
  font-weight: 700; font-size: var(--fs-xs); letter-spacing: .03em;
  white-space: nowrap;
}
.pricetable tbody tr:last-child th,
.pricetable tbody tr:last-child td { border-block-end: 0; }
.pricetable tbody tr.is-featured { background: var(--accent-wash); }
.pricetable__svc { display: inline-flex; align-items: center; gap: var(--sp-3); }
.pricetable__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 34px; block-size: 34px; border-radius: var(--r-sm);
  background: var(--ink-700); color: var(--gold-400);
}
.pricetable__icon svg { inline-size: 17px; block-size: 17px; }
.pricetable__svc a { color: var(--text-strong); font-weight: 700; text-decoration: none; }
.pricetable__svc a:hover { text-decoration: underline; }
.pricetable__unit { color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------- contact page ---------- */
.contactsplit {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
@media (max-width: 900px) { .contactsplit { grid-template-columns: 1fr; } }

.contactcard { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4)); }
.contactcard__h { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.contactcard__list { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.contactcard__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.contactcard__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 38px; block-size: 38px; border-radius: var(--r-sm);
  background: var(--bg-sunken); color: var(--ink-600);
  border: 1px solid var(--border-subtle);
}
.contactcard__icon svg { inline-size: 18px; block-size: 18px; }
.contactcard__label { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 2px; }
.contactcard__val {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong);
  margin: 0; text-decoration: none; display: block; line-height: 1.6;
}
a.contactcard__val:hover { text-decoration: underline; }
.socials--card { padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border-subtle); }
@media (max-width: 900px) { .contactcard { position: static; } }

/* ---------- forms ---------- */
.form { position: relative; display: grid; gap: var(--sp-5); max-width: 34rem; }
/* Honeypot: hidden from users and AT without being pushed off-canvas.
   An inset-inline-start:-9999px offset expands the layout box in RTL and
   showed up as a 10000px-wide overflow on the contact page. */
.form__hp {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.req { color: #B3261E; }
.field__input {
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--text-body); background: var(--bg-surface);
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); min-block-size: var(--btn-h);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field__input:hover { border-color: var(--slate-400); }
.field__input:focus-visible { border-color: var(--ink-600); box-shadow: 0 0 0 3px rgba(11,31,58,.12); }

/* consent / remember checkbox line */
.checkline {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-body);
  margin-block: 4px 12px; cursor: pointer;
}
.checkline input[type="checkbox"] {
  inline-size: 18px; block-size: 18px; margin-block-start: 2px; flex: none;
  accent-color: var(--ink-700); cursor: pointer;
}
.field__input.is-err { border-color: #B3261E; }
textarea.field__input { min-block-size: 7rem; resize: vertical; line-height: var(--lh-body); }
select.field__input { appearance: none; background-image: none; cursor: pointer; }
.field__err { font-size: var(--fs-xs); color: #B3261E; margin: 0; font-weight: 600; }

/* ---------- alerts ---------- */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border-radius: var(--r-md); padding: var(--sp-4);
  border: 1px solid transparent; margin-bottom: var(--sp-5);
}
.alert svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 2px; }
.alert p { margin: 0; font-size: var(--fs-sm); }
.alert p + p { margin-block-start: var(--sp-2); }
.alert--ok { background: var(--verified-wash); border-color: #C9E4D8; color: var(--green-700); }
.alert--ok svg { color: var(--verified); }
.alert--err { background: #FDECEA; border-color: #F5C6C2; color: #8C1D18; }
.alert--err svg { color: #B3261E; }
/* Informational: used by the shop order prefill on /contact/. Lives here rather
   than in shop.css because /contact/ does not load the shop stylesheet. */
.alert--info { background: var(--accent-wash); border-color: var(--gold-200); color: var(--text-body); }
.alert--info svg { color: var(--gold-700); }
.alert--info strong { color: var(--text-strong); }

/* ---------- account: auth tabs ---------- */
.auth-tabs {
  display: flex; gap: var(--sp-1); background: var(--bone-100);
  border: 1px solid var(--border-hairline); border-radius: var(--r-pill);
  padding: 4px;
}
.auth-tab {
  flex: 1; text-align: center; text-decoration: none; border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-muted); transition: background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.auth-tab.is-on { background: #fff; color: var(--text-strong); box-shadow: var(--sh-1); }
.auth-tab:hover:not(.is-on) { color: var(--text-strong); }

/* ---------- account: status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); border: 1px solid transparent;
}
.chip--ok      { background: var(--verified-wash); border-color: #C9E4D8; color: var(--green-700); }
.chip--soon    { background: var(--accent-wash);   border-color: var(--gold-200); color: var(--gold-700); }
.chip--off     { background: #FDECEA;              border-color: #F5C6C2; color: #8C1D18; }
.chip--neutral { background: var(--bone-200);      border-color: var(--bone-300); color: var(--slate-600); }

/* ---------- account: order history ---------- */
.orders { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.order-row {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); background: var(--bone-050);
}
.order-row__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: 6px;
}
.order-row__ref { font-weight: 800; font-size: var(--fs-sm); color: var(--text-strong); }
.order-row__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-body);
}
.order-row__items { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.6; }

/* ---------- account: danger zone ---------- */
.danger-zone { border-color: #F5C6C2; }
.danger-zone__box {
  border: 1px solid #F5C6C2; border-radius: var(--r-md);
  background: #FDECEA; padding: var(--sp-4); margin-top: var(--sp-2);
}
.danger-zone__title {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-weight: 800; font-size: var(--fs-sm); color: #8C1D18;
}
.danger-zone__title svg { inline-size: 16px; block-size: 16px; }
.btn--danger {
  background: #B3261E; color: #fff; border-color: #B3261E;
}
.btn--danger:hover { background: #8C1D18; border-color: #8C1D18; box-shadow: var(--sh-2); }

/* ---------- admin panel ---------- */
.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3); margin-block: var(--sp-4);
}
.admin-stat {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--bone-050); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
}
.admin-stat__n { font-size: 1.25rem; font-weight: 800; color: var(--text-strong); }
.admin-stat__l { font-size: var(--fs-xs); color: var(--text-muted); }

.admin-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.admin-filter__chip {
  text-decoration: none; font-size: var(--fs-xs); font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-hairline); color: var(--text-muted);
  background: #fff;
}
.admin-filter__chip.is-on { background: var(--ink-700); color: #fff; border-color: var(--ink-700); }
.admin-filter__chip:hover:not(.is-on) { color: var(--text-strong); border-color: var(--ink-500); }

.admin-search { display: flex; gap: 8px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-search .field__input { flex: 1; min-width: 200px; }

.admin-table { display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-order {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: #fff; padding: var(--sp-4);
}
.admin-order__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-hairline);
}
.admin-order__ref { font-weight: 800; font-size: var(--fs-sm); color: var(--text-strong); }
.admin-order__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.admin-order__col { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.admin-order__col--wide { grid-column: 1 / -1; }
.admin-order__k { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.admin-order__actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: var(--sp-3); border-top: 1px solid var(--border-hairline);
}
.admin-order__actions .field__input { min-block-size: auto; padding: 6px 10px; }

/* admin tabs */
.admin-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-hairline);
  margin-block: var(--sp-4) var(--sp-5); padding-bottom: 2px;
}
.admin-tab {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-muted); padding: 8px 14px; border-radius: 8px 8px 0 0;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
}
.admin-tab.is-on { color: var(--text-strong); background: var(--bg-surface); border-color: var(--border-hairline); }
.admin-tab:hover:not(.is-on) { color: var(--text-strong); }

/* admin product form */
.pform { display: flex; flex-direction: column; gap: var(--sp-3); }
.pform__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.pform .field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pform__check, .field.pform__check { flex-direction: row; align-items: center; gap: 8px; }
.pform__check input { inline-size: 18px; block-size: 18px; accent-color: var(--ink-700); }
.pform__variants {
  border: 1px dashed var(--border-hairline); border-radius: var(--r-md);
  padding: var(--sp-4); background: var(--bone-050); display: flex; flex-direction: column; gap: 8px;
}
.pform__row { display: flex; gap: 8px; align-items: center; }
.pform__row .field__input { flex: 1; }
.pform__row select.field__input { flex: 0 0 130px; }
.pform__del {
  flex: none; inline-size: 34px; block-size: 34px; border-radius: 8px;
  border: 1px solid #F5C6C2; background: #FDECEA; color: #B3261E; cursor: pointer; font-weight: 700;
}
.pform__del:hover { background: #f8d7d4; }

/* admin bulk action bar */
.admin-bulkbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--bone-050); border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); position: sticky; top: 76px; z-index: 5;
}
.admin-bulkbar__all { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.admin-bulkbar__all input { inline-size: 17px; block-size: 17px; accent-color: var(--ink-700); }
.admin-bulkbar__sp { flex: 1; }
.admin-order__top label input[type="checkbox"] { inline-size: 17px; block-size: 17px; accent-color: var(--ink-700); flex: none; }

/* ---------- header dropdown: shop availability count ----------
   The dropdown renders in every page's header, so this cannot live in shop.css. */
.subnav__meta {
  font-size: var(--fs-xs); font-weight: 600; color: var(--gold-700);
  margin-inline-start: var(--sp-1);
}

/* ---------- homepage shop teaser ----------
   Also in pages.css rather than shop.css: this section renders on the home page,
   which does not load the shop stylesheet. */
.shopteaser { display: grid; gap: var(--sp-4); }
.shopteaser__item {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--sp-4); align-items: center;
  text-decoration: none; color: inherit;
}
.shopteaser__body { display: grid; gap: var(--sp-1); }
.shopteaser__name {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-h3); color: var(--text-strong);
}
.shopteaser__lead { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.7; }
.shopteaser__count { font-size: var(--fs-xs); font-weight: 700; color: var(--gold-700); }
.shopteaser__go { display: inline-flex; color: var(--gold-700); }
.shopteaser__go svg { inline-size: 20px; block-size: 20px; }
/* RTL: forward motion is a negative X shift. */
.shopteaser__item:hover .shopteaser__go { transform: translateX(-4px); }
@media (max-width: 640px) {
  .shopteaser__item { grid-template-columns: auto 1fr; }
  .shopteaser__go { display: none; }
}

/* ---------- long-form prose ---------- */
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-block: var(--sp-7) var(--sp-4); }
.prose h2:first-child { margin-block-start: 0; }
.prose p { line-height: 1.85; }
.prose__list { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.prose__list li {
  position: relative; padding-inline-start: var(--sp-5);
  line-height: 1.8;
}
.prose__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .7em;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- legal documents ---------- */
.legal__meta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--bg-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.legal__meta svg { inline-size: 15px; block-size: 15px; flex: none; }
.legal__toc {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--card-pad);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal__toc-h {
  font-family: var(--font-head); font-weight: 800; color: var(--text-strong);
  font-size: var(--fs-sm); margin: 0 0 var(--sp-3);
}
.legal__toc ol { counter-reset: toc; display: grid; gap: var(--sp-2); }
.legal__toc li { counter-increment: toc; font-size: var(--fs-sm); }
.legal__toc li::before {
  content: counter(toc) '.'; color: var(--accent-strong);
  font-weight: 700; margin-inline-end: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
/* 24px minimum target for the anchor list (WCAG 2.5.8). */
.legal__toc a {
  color: var(--text-body); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
}
.legal__toc a:hover { color: var(--ink-700); text-decoration: underline; }
.legal__body { scroll-margin-block-start: calc(var(--header-h) + var(--sp-4)); }
.legal__body h2 { scroll-margin-block-start: calc(var(--header-h) + var(--sp-4)); }

/* ---------- 404 ---------- */
.errpage { text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.errpage h1 { font-size: clamp(2rem, 5vw, 3rem); }
.errpage__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 48ch; margin-inline: auto; }
.errpage__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center; margin-block-start: var(--sp-6);
}

/* ---------- small fixes to inherited components ---------- */
.acc__h { margin: 0; }
.tier__link { color: inherit; text-decoration: none; }
.tier__link:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.review__name, .review__role { margin: 0; }
.footer__addr, .footer__hours { display: flex; gap: var(--sp-2); margin: 0; }
.footer__addr svg { inline-size: 16px; block-size: 16px; color: var(--gold-400); flex: none; margin-block-start: 4px; }
.footer__hours { color: var(--slate-400); }
.final__lead {
  font-size: var(--fs-lead); max-width: 56ch;
  margin-inline: auto; margin-block-end: var(--sp-6);
}