/* ==========================================================================
   base.css — structure only.
   Palette, type and the signature device live in each store's theme.css.
   Everything here reads from custom properties so a theme can restyle a
   component without touching layout.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 700);
  line-height: 1.12;
  letter-spacing: var(--display-tracking, -0.02em);
  margin: 0 0 .5em;
  color: var(--ink-strong, var(--ink));
}
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }

a { color: var(--link, var(--primary)); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */

.wrap { width: min(1220px, 100% - 2.5rem); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(1220px, 100% - 1.6rem); } }

.stack     { padding-block: clamp(2.6rem, 1.4rem + 4vw, 5rem); }
.stack--sm { padding-block: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.stack--flush-top { padding-top: 0; }

.grid {
  display: grid; gap: var(--card-gap, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 236px), 1fr));
}
.grid--wide { --card-min: 290px; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.4rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; align-items: start; } }
@media (min-width: 900px) { .split--sidebar { grid-template-columns: 250px 1fr; } }

.section-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: end; justify-content: space-between;
  margin-bottom: clamp(1.3rem, 1rem + 1vw, 2.1rem);
}
.section-head p { margin: 0; }
.section-head h2 { margin: 0; }

.eyebrow {
  font-family: var(--font-util, var(--font-body));
  font-size: .68rem; font-weight: 600;
  letter-spacing: var(--eyebrow-tracking, .16em);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
}

/* ---------- header ---------- */

.announce {
  background: var(--announce-bg, var(--primary));
  color: var(--announce-ink, #fff);
  font-size: .78rem; letter-spacing: .02em;
}
.announce__in { display: flex; justify-content: space-between; gap: 1rem; padding: 7px 0; }
.announce a { color: inherit; text-decoration: none; font-weight: 600; }

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--hdr-bg, var(--surface));
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.4) blur(8px);
}
.hdr__in {
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: auto 1fr auto;
  padding: .7rem 0;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand__txt  { display: grid; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-size: 1.24rem;
  font-weight: var(--brand-weight, 700); letter-spacing: -.02em; color: var(--ink-strong, var(--ink));
}
.brand__sub {
  font-family: var(--font-util, var(--font-body));
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; gap: clamp(.7rem, 1.6vw, 1.6rem); justify-self: center; }
.nav a {
  text-decoration: none; color: var(--ink); font-size: .9rem; font-weight: 500;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--primary); font-weight: 600; }

.utils { display: flex; align-items: center; gap: .55rem; }
.util {
  display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: none; color: var(--ink); font-size: .82rem; font-weight: 500;
  padding: .42rem .6rem; border-radius: var(--radius-sm, 8px);
}
.util:hover { background: var(--tint); }
.util svg { width: 19px; height: 19px; }
.util span { display: none; }
@media (min-width: 1080px) { .util span { display: inline; } }
.pill {
  background: var(--accent); color: var(--accent-ink, #111);
  font-size: .66rem; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 9px; display: grid; place-items: center; padding: 0 5px;
}

.searchbox { display: none; position: relative; }
@media (min-width: 960px) { .searchbox { display: block; } }
.searchbox input {
  width: 190px; padding: .48rem 2.1rem .48rem .8rem;
  border: 1px solid var(--rule); border-radius: var(--radius-pill, 999px);
  background: var(--bg); font-size: .84rem; transition: width .2s ease;
}
.searchbox input:focus { width: 240px; }
.searchbox button {
  position: absolute; right: 3px; top: 50%; translate: 0 -50%;
  background: none; border: 0; cursor: pointer; padding: .35rem; color: var(--muted);
}
.searchbox svg { width: 16px; height: 16px; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.burger span {
  display: block; width: 21px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: .22s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Three tracks, not two: with only two the burger had nowhere to sit on the
     brand row and wrapped onto a second one, doubling the header height on
     every phone. Brand, utilities and the menu button now share row one and
     the navigation drops underneath when it is opened. */
  .hdr__in { grid-template-columns: auto 1fr auto; gap: .5rem; }
  .brand  { order: 1; }
  .utils  { order: 2; justify-self: end; }
  .burger { display: block; order: 3; }
  .nav {
    order: 4; grid-column: 1 / -1;
    display: none; flex-direction: column; gap: 0;
    border-top: 1px solid var(--rule); padding-top: .5rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .7rem .2rem; border-bottom: 1px solid var(--rule); }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: var(--btn-pad, .78rem 1.5rem);
  border-radius: var(--radius-btn, 10px);
  border: 1px solid transparent;
  font-family: var(--font-util, var(--font-body));
  font-size: .88rem; font-weight: 600; letter-spacing: var(--btn-tracking, .01em);
  text-decoration: none; cursor: pointer;
  transition: transform .14s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: var(--on-primary, #fff); }
.btn--primary:hover { background: var(--primary-hi, var(--primary)); box-shadow: var(--btn-shadow, 0 6px 18px rgb(0 0 0 / .16)); }
.btn--accent  { background: var(--accent); color: var(--accent-ink, #111); }
.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--rule-strong, var(--rule)); }
.btn--ghost:hover { background: var(--tint); }
.btn--outline { background: var(--surface); color: var(--ink); border-color: var(--rule-strong, var(--rule)); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }
.btn--sm  { padding: .5rem .9rem; font-size: .8rem; }
.btn--lg  { padding: .95rem 2rem; font-size: .95rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn--disabled { opacity: .5; pointer-events: none; }

/* ---------- forms ---------- */

.field { display: grid; gap: .34rem; margin-bottom: 1rem; }
.field > label, .lbl {
  font-family: var(--font-util, var(--font-body));
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.input, input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: .72rem .85rem;
  border: 1px solid var(--rule-strong, var(--rule));
  border-radius: var(--radius-sm, 8px);
  background: var(--surface); color: var(--ink); font-size: .93rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}
textarea { min-height: 118px; resize: vertical; }
.field__hint { font-size: .78rem; color: var(--muted); }
.field__err  { font-size: .78rem; color: var(--danger, #b3261e); font-weight: 600; }
.row2 { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .row2 { grid-template-columns: 1fr 1fr; } }
.row3 { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .row3 { grid-template-columns: 1fr 1fr 1fr; } }

.check { display: flex; gap: .6rem; align-items: start; font-size: .87rem; line-height: 1.5; }
.check input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--primary); }

/* ---------- flashes & notices ---------- */

.flashes { padding-top: 1rem; }
.flash {
  padding: .8rem 1rem; border-radius: var(--radius-sm, 8px);
  border-left: 4px solid var(--primary); background: var(--tint);
  font-size: .89rem; margin-bottom: .6rem;
}
.flash--error { border-left-color: var(--danger, #b3261e); background: color-mix(in srgb, var(--danger, #b3261e) 8%, var(--surface)); }
.flash--warn  { border-left-color: var(--warn, #b26a00);  background: color-mix(in srgb, var(--warn, #b26a00) 10%, var(--surface)); }
.flash--ok    { border-left-color: var(--ok, #2f7c48);    background: color-mix(in srgb, var(--ok, #2f7c48) 10%, var(--surface)); }

.notice {
  padding: 1rem 1.1rem; border-radius: var(--radius-sm, 8px);
  background: var(--tint); border: 1px solid var(--rule);
  font-size: .87rem; line-height: 1.6;
}
.notice--tax { border-left: 3px solid var(--accent); }
.notice strong { color: var(--ink-strong, var(--ink)); }

.empty {
  text-align: center; padding: clamp(2.4rem, 6vw, 4.5rem) 1.2rem;
  border: 1px dashed var(--rule-strong, var(--rule)); border-radius: var(--radius-lg, 14px);
  background: var(--surface);
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-util, var(--font-body));
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .26rem .55rem; border-radius: var(--radius-xs, 5px);
  background: var(--tint); color: var(--muted);
}
.badge--ok    { background: color-mix(in srgb, var(--ok, #2f7c48) 15%, transparent); color: var(--ok, #2f7c48); }
.badge--low   { background: color-mix(in srgb, var(--warn, #b26a00) 16%, transparent); color: var(--warn, #b26a00); }
.badge--out   { background: color-mix(in srgb, var(--danger, #b3261e) 12%, transparent); color: var(--danger, #b3261e); }
.badge--tax   { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-strong, var(--ink)); }

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.table th {
  text-align: left; font-family: var(--font-util, var(--font-body));
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: .6rem .7rem;
  border-bottom: 2px solid var(--rule-strong, var(--rule)); white-space: nowrap;
}
.table td { padding: .72rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tbody tr:hover { background: var(--tint); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table--tight td, .table--tight th { padding: .5rem .55rem; }

/* ---------- product card shared skeleton ---------- */

.pcard { position: relative; display: flex; flex-direction: column; }
.pcard__media { display: block; overflow: hidden; position: relative; }
.pcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .pcard__media img { transform: scale(1.045); }
.pcard__body { display: flex; flex-direction: column; flex: 1; }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pcard__price b { font-variant-numeric: tabular-nums; }

/* ---------- product page ---------- */

.gallery__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 14px); }
.speclist { display: grid; gap: 0; margin: 0; }
.speclist div { display: grid; grid-template-columns: 40% 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.speclist dt { font-size: .82rem; color: var(--muted); }
.speclist dd { margin: 0; font-size: .89rem; font-weight: 500; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong, var(--rule)); border-radius: var(--radius-sm, 8px); overflow: hidden; }
.qty button { background: var(--surface); border: 0; width: 38px; height: 42px; cursor: pointer; font-size: 1.1rem; color: var(--ink); }
.qty button:hover { background: var(--tint); }
.qty input { width: 50px; height: 42px; border: 0; border-inline: 1px solid var(--rule); text-align: center; padding: 0; font-variant-numeric: tabular-nums; }

/* ---------- cart & checkout ---------- */

.summary { position: sticky; top: 92px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg, 14px); padding: 1.3rem; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; font-size: .9rem; }
.summary__row--total { border-top: 2px solid var(--rule-strong, var(--rule)); margin-top: .5rem; padding-top: .8rem; font-size: 1.08rem; font-weight: 700; }
.summary__row .num { font-variant-numeric: tabular-nums; }

.lineitem { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.lineitem img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm, 8px); }

.paychoice { display: grid; gap: .7rem; }
.paychoice label {
  display: flex; gap: .8rem; align-items: start; cursor: pointer;
  border: 1.5px solid var(--rule-strong, var(--rule)); border-radius: var(--radius-md, 11px);
  padding: 1rem; background: var(--surface); transition: border-color .16s, background .16s;
}
.paychoice label:has(input:checked) { border-color: var(--primary); background: var(--tint); }
.paychoice input { margin-top: 3px; accent-color: var(--primary); width: 17px; height: 17px; flex: none; }
.paychoice .t { font-weight: 600; font-size: .93rem; }
.paychoice .d { font-size: .8rem; color: var(--muted); }

.steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.6rem; font-size: .76rem; }
.steps span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.steps span::after { content: "›"; margin-left: .3rem; opacity: .5; }
.steps span:last-child::after { content: ""; }
.steps .on { color: var(--primary); font-weight: 700; }

/* ---------- order timeline ---------- */

.timeline { display: grid; gap: 0; margin: 1.2rem 0; }
.tl { display: grid; grid-template-columns: 26px 1fr; gap: .9rem; position: relative; padding-bottom: 1.2rem; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: 12px; top: 22px; bottom: -4px; width: 2px; background: var(--rule); }
.tl:last-child::before { display: none; }
.tl__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--rule-strong, var(--rule)); font-size: .7rem; z-index: 1; }
.tl--done .tl__dot { background: var(--ok, #2f7c48); border-color: var(--ok, #2f7c48); color: #fff; }
.tl--now  .tl__dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.tl__t { font-weight: 600; font-size: .9rem; }
.tl__d { font-size: .79rem; color: var(--muted); }

/* ---------- policy / prose ---------- */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1em; }
.prose li { margin-bottom: .45rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .88rem; }
.prose th, .prose td { border: 1px solid var(--rule); padding: .6rem .7rem; text-align: left; }
.prose th { background: var(--tint); font-weight: 600; }
.prose__toc { position: sticky; top: 92px; font-size: .87rem; }
.prose__toc a { display: block; padding: .34rem 0; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; padding-left: .7rem; }
.prose__toc a:hover, .prose__toc a.on { color: var(--primary); border-left-color: var(--primary); }

/* ---------- footer ---------- */

.foot { background: var(--foot-bg, var(--ink)); color: var(--foot-ink, #e9e6df); margin-top: clamp(3rem, 8vw, 6rem); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__grid { display: grid; gap: 2rem; padding: clamp(2.4rem, 5vw, 3.8rem) 0 2rem; }
@media (min-width: 720px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.5fr; } }
.foot h4 { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--foot-head, #fff); margin: 0 0 .9rem; font-family: var(--font-util, var(--font-body)); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .86rem; }
.foot__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--foot-head, #fff); margin-bottom: .8rem; }
.foot__blurb { font-size: .87rem; opacity: .82; max-width: 34ch; }
.foot__legalname { font-size: .76rem; opacity: .62; letter-spacing: .04em; }
.foot address { font-style: normal; display: grid; gap: .7rem; font-size: .84rem; }
.foot__ico { display: grid; grid-template-columns: 16px 1fr; gap: .55rem; align-items: start; opacity: .86; }
.foot__ico svg { width: 15px; height: 15px; margin-top: 3px; }

.foot__legal { border-top: 1px solid rgb(255 255 255 / .13); padding: 1.4rem 0 2.2rem; display: grid; gap: 1.1rem; }
.foot__ids { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .76rem; opacity: .82; }
.foot__ids strong { opacity: .6; font-weight: 500; }
.foot__pay { display: grid; gap: .5rem; font-size: .76rem; }
.foot__pay > span { opacity: .6; letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; }
.foot__paylist { display: flex; flex-wrap: wrap; gap: .4rem; }
.foot__paylist b { font-weight: 600; font-size: .72rem; padding: .3rem .6rem; border: 1px solid rgb(255 255 255 / .2); border-radius: 5px; opacity: .9; }
.foot__secure { display: flex; gap: .45rem; align-items: start; opacity: .7; font-size: .75rem; margin: .3rem 0 0; max-width: 76ch; }
.foot__secure svg { flex: none; margin-top: 3px; }
.foot__base { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between; font-size: .78rem; opacity: .8; }
.foot__mini { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.foot__tax { font-size: .72rem; opacity: .55; max-width: 96ch; margin: 0; line-height: 1.6; }

/* ---------- admin ---------- */

.adm { display: grid; min-height: 100vh; grid-template-columns: 1fr; background: var(--bg); }
@media (min-width: 900px) { .adm { grid-template-columns: 232px 1fr; } }
.adm__side { background: var(--ink); color: #e8e6e0; padding: 1.2rem 0; }
.adm__brand { padding: 0 1.2rem 1.1rem; font-family: var(--font-display); font-size: 1.05rem; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .12); margin-bottom: .8rem; }
.adm__brand small { display: block; font-family: var(--font-util, var(--font-body)); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-top: .2rem; }
.adm__nav { display: grid; gap: 1px; }
.adm__nav a { padding: .6rem 1.2rem; color: #cfcdc6; text-decoration: none; font-size: .86rem; display: flex; justify-content: space-between; gap: .5rem; }
.adm__nav a:hover { background: rgb(255 255 255 / .07); color: #fff; }
.adm__nav a.on { background: var(--primary); color: #fff; font-weight: 600; }
.adm__nav .grp { padding: 1rem 1.2rem .35rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
.adm__nav .n { background: rgb(255 255 255 / .16); border-radius: 9px; padding: 0 6px; font-size: .68rem; }
.adm__main { padding: clamp(1.2rem, 3vw, 2rem); min-width: 0; }
.adm__head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.adm__head h1 { margin: 0; font-size: 1.5rem; }

.kpis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); margin-bottom: 1.6rem; }
.kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md, 11px); padding: .95rem 1.05rem; }
.kpi b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi--alert b { color: var(--danger, #b3261e); }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md, 11px); padding: 1.2rem; margin-bottom: 1.3rem; }
.panel > h2, .panel > h3 { margin-top: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1rem; }
.filters .field { margin: 0; min-width: 140px; }

.chip { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .24rem .5rem; border-radius: 5px; background: var(--tint); color: var(--muted); }
.chip--Paid, .chip--Successful, .chip--Delivered, .chip--Approved, .chip--Completed { background: color-mix(in srgb, var(--ok, #2f7c48) 16%, transparent); color: var(--ok, #2f7c48); }
.chip--Failed, .chip--Cancelled, .chip--Rejected { background: color-mix(in srgb, var(--danger, #b3261e) 13%, transparent); color: var(--danger, #b3261e); }
.chip--Pending, .chip--Initiated, .chip--Packing, .chip--Open { background: color-mix(in srgb, var(--warn, #b26a00) 15%, transparent); color: var(--warn, #b26a00); }
.chip--Shipped { background: color-mix(in srgb, var(--info, #2c5f9e) 15%, transparent); color: var(--info, #2c5f9e); }

/* ---------- invoice (screen + print) ---------- */

.inv { background: #fff; color: #111; max-width: 820px; margin: 2rem auto; padding: 2.4rem; border: 1px solid #ddd; }
.inv__head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; border-bottom: 3px solid #111; padding-bottom: 1.2rem; margin-bottom: 1.4rem; }
.inv__title { font-size: 1.5rem; margin: 0 0 .3rem; letter-spacing: .04em; text-transform: uppercase; }
.inv__meta { text-align: right; font-size: .84rem; line-height: 1.7; }
.inv__parties { display: grid; gap: 1.6rem; margin-bottom: 1.4rem; font-size: .85rem; line-height: 1.6; }
@media (min-width: 620px) { .inv__parties { grid-template-columns: 1fr 1fr; } }
.inv__parties h4 { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #666; margin: 0 0 .4rem; }
.inv table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.inv th { background: #f2f2ef; text-align: left; padding: .55rem .6rem; border: 1px solid #ddd; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.inv td { padding: .55rem .6rem; border: 1px solid #ddd; vertical-align: top; }
.inv .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv__totals { margin-left: auto; margin-top: 1rem; width: min(340px, 100%); }
.inv__totals td { border: 0; padding: .3rem .2rem; }
.inv__totals tr:last-child td { border-top: 2px solid #111; font-weight: 700; font-size: 1rem; padding-top: .5rem; }
.inv__words { margin-top: 1rem; font-size: .82rem; }
.inv__foot { margin-top: 2rem; border-top: 1px solid #ddd; padding-top: 1rem; font-size: .75rem; color: #555; line-height: 1.6; }
.inv__actions { max-width: 820px; margin: 1.4rem auto 0; display: flex; gap: .6rem; }

@media print {
  .announce, .hdr, .foot, .inv__actions, .skip { display: none !important; }
  body { background: #fff; }
  .inv { margin: 0; border: 0; padding: 0; max-width: none; }
  a { text-decoration: none; color: #111; }
}

/* ---------- reveal-on-scroll ---------- */

/* Scoped to .js so content is never hidden when scripting is unavailable —
   a crawler, a reader with JS off, or a failed script must still see the page. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- utilities ---------- */

.mono { font-family: var(--font-util, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt1 { margin-top: .6rem; } .mt2 { margin-top: 1.2rem; } .mt3 { margin-top: 2rem; }
.hide { display: none; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- hero stat chip ----------
   Sits over the hero image in all four themes. Constrained here rather than
   per-theme so a long caption wraps inside the chip instead of spilling out
   of its background. */
.hero__stat {
  max-width: min(15rem, 62vw);
  box-sizing: border-box;
}
.hero__stat span {
  display: block;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  /* On a narrow screen the chip stops overlapping and just sits under the image.
     Prefixed with body because every theme.css sets .hero__stat to absolute and
     loads after this file — at equal specificity the theme would win and the
     chip would keep hanging off the edge of a phone screen. */
  body .hero__stat {
    position: static; margin-top: .8rem; rotate: none;
    max-width: none; inset: auto;
  }
}

/* ==========================================================================
   Phone pass.
   Everything above is written mobile-first, so this section is corrective
   rather than a second layout: it removes the things that only bite on a real
   handset — sideways scroll from unbreakable identifiers, tap targets under a
   fingertip, type too small to read at arm's length, and iOS zooming the page
   whenever a sub-16px input takes focus.
   ========================================================================== */

/* ---- 1. Nothing may push the page sideways ----
   Company identifiers, SKUs, order ids, invoice numbers and email addresses
   are single unbreakable tokens. In a narrow grid cell they overflow the
   viewport and the whole document starts scrolling horizontally. */
.mono,
.speclist dd,
.foot__ids span,
.foot address,
.inv__parties,
.lineitem__name,
dd { overflow-wrap: anywhere; }

/* Not inside a table. `anywhere` counts toward min-content width, so applying
   it to cells makes a wide table squeeze itself into the viewport and snap
   order ids and email addresses mid-token. Tables keep their natural width
   and scroll inside .tablewrap, which is what that wrapper is for. */
.table td, .table th, .table .mono,
.inv td, .inv th, .inv .mono { overflow-wrap: normal; }

/* Long URLs and addresses printed in policy prose. */
.prose td, .prose li, .prose p { overflow-wrap: break-word; }

/* A prose table has no scroll wrapper of its own, so give it one on narrow
   screens rather than letting three columns of text crush to a few characters. */
@media (max-width: 700px) {
  .prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { min-width: 8.5rem; }
}

/* ---- 2. Tap targets ----
   44px is the smallest reliable target on a touchscreen. The header controls
   sat at 32px, which is a miss-and-retry on a phone. */
@media (max-width: 900px) {
  body .burger { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; }
  body .util   { min-width: 44px; min-height: 44px; justify-content: center; }
  body .util svg { width: 21px; height: 21px; }
  body .utils  { gap: .2rem; }
  body .nav a  { padding: .85rem .2rem; }
  body .btn--sm { padding: .62rem 1rem; min-height: 40px; }
  body .linkbtn { min-height: 40px; }
  body .qty button { width: 44px; height: 46px; }
  body .qty input  { width: 56px; height: 46px; }
  body .check input, body .paychoice input { width: 21px; height: 21px; }
  /* Footer and inline utility links sit in tight rows; give the row itself
     the height rather than padding every link into a block. */
  body .foot__mini a, body .foot ul a { display: inline-block; padding-block: .35rem; }
  body .section-head__link { display: inline-block; padding-block: .5rem; }
}

/* ---- 3. Type that survives a phone screen ----
   The micro-labels run from 9.6px to 10.9px. That reads on a desktop monitor
   and disappears on a handset held at arm's length, so a phone gets a floor:
   nothing smaller than .72rem, whatever the theme asked for.

   The selectors are prefixed with body deliberately. Each store's theme.css is
   linked after this file and sets these same classes, so at equal specificity
   the theme wins and a floor written the obvious way would simply never
   apply. body raises this block just above every theme rule. */
@media (max-width: 620px) {
  body .brand__sub,
  body .eyebrow, body .badge, body .chip,
  body .crumbs, body .crumbs a, body .crumbs b, body .crumbs span,
  body .shopside__block h3,
  body .foot__pay > span, body .foot__paylist b,
  body .pcard__lot, body .pcard__type, body .pcard__crop, body .pcard__partno,
  body .pcard__price small,
  body .pcard__data dt, body .pcard__data dd,
  body .pcard__spec dt, body .pcard__spec dd,
  body .pcard__npk dt,  body .pcard__npk dd,
  body .pcard__yield span, body .pcard__meta span, body .pcard__stencil span,
  body .pcard__rootstock dt, body .pcard__rootstock dd,
  body .pcard__dial span, body .pcard__packline, body .pcard__out,
  body .hero__stat span, body .cat__n, body .pdp__price em,
  body .pdp__assure li b, body .foot ul li a span {
    font-size: .72rem;
  }
  /* Running notes are prose, not labels, so they get the larger floor. */
  body .pdp__imgnote, body .taxnotice__note { font-size: .82rem; }

  /* The remaining themed micro-labels: the cart badge, the pack size on the
     mandi price chip, the almanac month letters and the facet counts. */
  body .pill, body .pcard__chip small, body .facets a span,
  body .seasonbar__label { font-size: .72rem; }

  /* Two captions live inside fixed-size artwork — the twelve-cell sowing
     calendar and the harvest dial — which cannot grow with the type. They get
     as much as the shape holds rather than the full floor. */
  body .seasonbar__cell { font-size: .66rem; }
  body .pcard__dial small { font-size: .62rem; }
  body .small, body .field__hint, body .field__err { font-size: .84rem; }
  body .foot ul, body .foot address, body .foot__ids { font-size: .88rem; }
  body .foot__secure, body .foot__tax { font-size: .78rem; }
  body .table    { font-size: .88rem; }
  body .announce { font-size: .74rem; }
}

/* ---- 4. iOS zooms the whole page when a focused field is under 16px ----
   The layout then sits off-centre until the user pinches back. Setting the
   fields to 16px on small screens keeps checkout still under the thumb. */
@media (max-width: 620px) {
  body .input, body input[type=text], body input[type=email], body input[type=tel],
  body input[type=password], body input[type=search], body input[type=number],
  body input[type=date], body select, body textarea {
    font-size: 16px;
  }
}

/* ---- 5. Two-column definition rows are too narrow to split at 390px ---- */
@media (max-width: 560px) {
  body .speclist div { grid-template-columns: 1fr; gap: .15rem; padding: .55rem 0; }
  body .speclist dt  { font-size: .78rem; }
}

/* ---- 6. Cart line: the image, the detail and the price stop fitting on one
   row once the name wraps, so the price moves under the detail column. */
@media (max-width: 520px) {
  body .lineitem { grid-template-columns: 68px 1fr; gap: .8rem; }
  body .lineitem img { width: 68px; height: 68px; }
  .lineitem > .right { grid-column: 2; text-align: left; margin-top: .2rem; }
  .lineitem__ctrl { flex-wrap: wrap; gap: .6rem; }
}

/* ---- 7. Invoice ----
   Designed for A4. On a phone the frame padding alone ate a third of the
   width, and the item table cannot usefully compress, so it scrolls. */
@media (max-width: 700px) {
  .inv { margin: 1rem auto; padding: 1.1rem; }
  .inv__head { gap: .9rem; }
  .inv__meta { text-align: left; }
  .inv table:not(.inv__totals) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .inv table:not(.inv__totals) td b { white-space: normal; }
  .inv__totals { width: 100%; }
  .inv__actions { padding-inline: 1rem; flex-wrap: wrap; }
  .inv__actions .btn { flex: 1 1 auto; }
}

/* ---- 8. Admin on a phone ----
   The sidebar stacks above the content below 900px, and with twenty entries
   the dashboard started a full screen down. Turned into one swipeable strip. */
@media (max-width: 900px) {
  /* Two things the single-column grid needs here.

     grid-template-rows keeps the nav strip at its natural height: the grid
     carries min-height:100vh, and with both rows on auto the spare space was
     shared between them, so a short page grew a tall band of empty sidebar.

     min-width:0 stops the strip from setting the width of the whole panel.
     A row of nowrap links has a min-content width of everything laid end to
     end; without this the single 1fr track sized itself to that — about
     1350px — and every admin page scrolled sideways on a phone. */
  body .adm { grid-template-rows: auto 1fr; }
  body .adm__side, body .adm__nav, body .adm__main { min-width: 0; }
  body .adm__side {
    position: sticky; top: 0; z-index: 20;
    padding: .6rem 0 .3rem;
  }
  .adm__brand { padding: 0 1rem .6rem; margin-bottom: .5rem; }
  body .adm__nav {
    display: flex; gap: .3rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 1rem .4rem; scrollbar-width: none;
  }
  .adm__nav::-webkit-scrollbar { display: none; }
  .adm__nav a { white-space: nowrap; border-radius: 7px; padding: .5rem .8rem; }
  .adm__nav .grp { display: none; }
  .adm__main { padding: 1rem .9rem 2rem; }
  .adm__head h1 { font-size: 1.25rem; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .6rem; }
  .kpi { padding: .7rem .8rem; }
  .kpi b { font-size: 1.3rem; }
  .panel { padding: .9rem; }
  .filters .field { min-width: 0; flex: 1 1 9rem; }
}

/* ---- 9. Header search ----
   The desktop search box is hidden under 960px, which left a phone with no
   way to search at all. The menu carries its own copy instead. */
.nav__search { display: none; }
@media (max-width: 900px) {
  .nav__search {
    display: flex; gap: .5rem; padding: .7rem 0 .3rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__search input { flex: 1; min-width: 0; }
  .nav__search button { flex: none; }
}

/* ---- 10. The announcement bar carries a phone number that must stay tappable
   next to text that may wrap to two lines. */
@media (max-width: 620px) {
  .announce__in { gap: .7rem; align-items: center; }
  .announce__in a { white-space: nowrap; padding: .2rem 0; }
}

/* ---- 11. Long headings must not force a scrollbar of their own ---- */
h1, h2, h3, .pcard__variety, .hero__heading { overflow-wrap: break-word; }

/* ---- 12. Shop filters ----
   The sidebar stacks above the results below 900px, so a phone met a full
   screen of category links before it saw a single product. The panel becomes
   a disclosure there; app.js closes it on load at that width, and with
   scripting off it simply stays open as before. */
.shopside__toggle > summary { display: none; }
@media (max-width: 899px) {
  body .shopside__toggle > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 46px; padding: .7rem 1rem; cursor: pointer; list-style: none;
    font-family: var(--font-util, var(--font-body));
    font-size: .86rem; font-weight: 600; color: var(--ink);
    background: var(--surface); border: 1px solid var(--rule-strong, var(--rule));
    border-radius: var(--radius-sm, 8px);
  }
  .shopside__toggle > summary::-webkit-details-marker { display: none; }
  .shopside__toggle > summary::after {
    content: ""; width: 9px; height: 9px; margin-left: .6rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    rotate: 45deg; translate: 0 -2px; transition: rotate .18s ease;
  }
  .shopside__toggle[open] > summary { margin-bottom: 1rem; }
  .shopside__toggle[open] > summary::after { rotate: -135deg; translate: 0 2px; }
}

/* ---- 13. The results bar puts a count, a search field and a sort control on
   one line. At 390px the field collapsed to a stub, so the bar stacks. */
@media (max-width: 620px) {
  body .shopbar { flex-wrap: wrap; gap: .6rem; }
  body .shopbar__search { display: flex; gap: .5rem; width: 100%; }
  body .shopbar__search input { flex: 1; min-width: 0; }
  body .shopbar__search button { flex: none; }
}