.shop-head { padding-block: var(--sp-8) var(--sp-4); }
.shop-head__blurb { color: var(--color-text-muted); font-size: 1.0625rem; margin-top: var(--sp-2); }

.shop-layout { padding-block: var(--sp-8) var(--sp-16); }
.shop-layout__inner { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 900px) {
  .shop-layout__inner { grid-template-columns: 15rem 1fr; }
}

.shop-side { position: sticky; top: 6rem; }
@media (max-width: 899px) { .shop-side { position: static; } }
.shop-side__label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted); font-weight: 700; margin-bottom: var(--sp-3);
}
.shop-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-side__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text); font-weight: 500;
}
.shop-side__list a:hover { background: var(--color-bg-alt); text-decoration: none; }
/* The active category is signalled by weight + a left rule + aria-current, not
   by colour alone (WCAG 1.4.1). The label stays --color-text (near-black/near-
   white) rather than the brand blue: blue-on-the-soft-tint measures 4.15:1,
   just under AA, whereas the text colour clears it with room to spare. The blue
   still reads through the left rule + tinted background. */
.shop-side__list a.is-active {
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.shop-side__n { font-size: .8125rem; color: var(--color-text-muted); font-weight: 500; }
.shop-side__list a.is-active .shop-side__n { color: inherit; }

.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.shop-search { display: flex; gap: var(--sp-2); flex: 1 1 18rem; max-width: 26rem; }
.shop-search input { flex: 1; }
.shop-sort { display: flex; align-items: center; gap: var(--sp-2); }
.shop-sort label { font-size: .875rem; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.shop-sort select { width: auto; min-width: 11rem; }

.shop-count { font-size: .875rem; color: var(--color-text-muted); margin-bottom: var(--sp-5); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-6);
}

.shop-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.shop-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .shop-card:hover { transform: none; } }

.shop-card:focus-within { box-shadow: var(--shadow-md); border-color: var(--color-primary); }

.shop-card__media {
  display: block; position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-sunk);
  overflow: hidden;
}
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card:hover .shop-card__media img { transform: scale(1.03); }
.shop-card__media img { transition: transform var(--dur-base) var(--ease); }
@media (prefers-reduced-motion: reduce) { .shop-card__media img { transition: none; } .shop-card:hover .shop-card__media img { transform: none; } }

.shop-card__flag {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);       /* DARK on orange. Never white — 2.6:1. */
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.shop-card__flag--out { background: var(--color-text); color: var(--color-bg); }

.shop-card.is-out .shop-card__media img { opacity: .55; }

.shop-card__body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); flex: 1; }
.shop-card__brand { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); font-weight: 700; }
.shop-card__title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.shop-card__title a { color: var(--color-text); }
.shop-card__title a:hover { text-decoration: none; }

.shop-card__link::after { content: ""; position: absolute; inset: 0; }

.shop-card__blurb { font-size: .875rem; color: var(--color-text-muted); margin: 0; max-width: none; }
.shop-card__foot {
  margin-top: auto; padding-top: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
}

.shop-price { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin: 0; max-width: none; }
.shop-price__from { font-size: .8125rem; color: var(--color-text-muted); font-weight: 500; }
.shop-price__now { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; color: var(--color-text); }
.shop-price__was { font-size: .875rem; color: var(--color-text-muted); }
.shop-price__off {
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
}

.shop-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}

.shop-badge--low { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-text); }
.shop-badge--out { background: var(--color-bg-sunk); color: var(--color-text-muted); }

.shop-pdp { padding-block: var(--sp-4) var(--sp-12); }
.shop-pdp__grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 900px) { .shop-pdp__grid { grid-template-columns: 1fr 1fr; } }

.shop-pdp__media { position: relative; }
.shop-pdp__media > img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunk);
  box-shadow: var(--shadow-sm);
}
.shop-pdp__flag {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.shop-pdp__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.shop-pdp__thumbs img {
  width: 5rem; height: 5rem; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}

.shop-pdp__body { display: flex; flex-direction: column; gap: var(--sp-4); align-items: start; }
.shop-pdp__brand { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); font-weight: 700; }
.shop-pdp__title { margin: 0; }
.shop-pdp__blurb { font-size: 1.125rem; color: var(--color-text-muted); margin: 0; }
.shop-pdp__body .shop-price__now { font-size: 1.75rem; }

.shop-pdp__digital {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: .9375rem; margin: 0; max-width: none;
}

.shop-pdp__highlights { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--color-text-muted); }
.shop-pdp__sku { font-size: .8125rem; color: var(--color-text-muted); margin: 0; }

.shop-pdp__desc { margin-top: var(--sp-16); max-width: var(--reading-max); }
.shop-pdp__desc h2 { margin-bottom: var(--sp-4); }
.shop-pdp__desc p + p { margin-top: var(--sp-4); }

.shop-related { padding-block: var(--sp-12); background: var(--color-bg-alt); }
.shop-related h2 { margin-bottom: var(--sp-6); }

.shop-atc { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; max-width: 24rem; }
.shop-atc__row { display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-atc__label { font-weight: 600; font-size: .875rem; }
.shop-atc__qty { max-width: 7rem; }
.shop-atc__btn { width: 100%; }

.shop-note { color: var(--color-text-muted); font-style: italic; }

.shop-cart { padding-block: var(--sp-8) var(--sp-16); }
.shop-cart__grid { display: grid; gap: var(--sp-10); align-items: start; margin-top: var(--sp-6); }
@media (min-width: 900px) { .shop-cart__grid { grid-template-columns: 1fr 22rem; } }

.shop-cart__items { display: flex; flex-direction: column; }
.shop-cart__row {
  display: grid;
  grid-template-columns: 5rem 1fr auto auto auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 640px) {

  .shop-cart__row {
    grid-template-columns: 4.5rem 1fr auto;
    grid-template-areas:
      "media info   x"
      "media qty    total";
    row-gap: var(--sp-2);
  }
  .shop-cart__media  { grid-area: media; }
  .shop-cart__info   { grid-area: info; }
  .shop-cart__qty    { grid-area: qty; }
  .shop-cart__total  { grid-area: total; }
  .shop-cart__remove { grid-area: x; }
}
.shop-cart__media img { width: 100%; border-radius: var(--radius-sm); background: var(--color-bg-sunk); object-fit: cover; aspect-ratio: 1/1; }
.shop-cart__info { min-width: 0; }
.shop-cart__name { font-size: 1rem; font-weight: 700; margin: 0; }
.shop-cart__name a { color: var(--color-text); }
.shop-cart__variant, .shop-cart__unit { font-size: .875rem; color: var(--color-text-muted); margin: 0; }
.shop-cart__tag {
  display: inline-block; margin: var(--sp-1) 0 0;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--color-primary-soft); color: var(--color-accent-text);
}
.shop-cart__qtyinput { width: 5rem; }
.shop-cart__total { font-weight: 800; white-space: nowrap; margin: 0; }
.shop-cart__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--color-text-muted); cursor: pointer;
}
.shop-cart__x:hover { background: var(--color-bg-alt); color: var(--color-danger); border-color: var(--color-border); }
.shop-cart__continue { display: inline-block; margin-top: var(--sp-6); font-weight: 600; }

.shop-summary {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  padding: var(--sp-6);
  position: sticky; top: 6rem;
}
@media (max-width: 899px) { .shop-summary { position: static; } }
.shop-summary h2 { font-size: 1.125rem; margin-bottom: var(--sp-4); }

.shop-summary__ship { margin-bottom: var(--sp-4); font-size: .875rem; }
.shop-summary__ship p { margin: 0 0 var(--sp-2); max-width: none; }
.shop-summary__ship.is-met { color: var(--color-success); font-weight: 600; }
.shop-summary__bar { height: 6px; border-radius: 999px; background: var(--color-bg-sunk); overflow: hidden; }
.shop-summary__bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }

.shop-summary__lines { margin: 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-summary__lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.shop-summary__lines dt { color: var(--color-text-muted); margin: 0; }
.shop-summary__lines dd { margin: 0; font-weight: 600; }
.shop-summary__na { color: var(--color-text-muted); font-weight: 400; font-size: .875rem; }
.shop-summary__total {
  padding-top: var(--sp-3); margin-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
  font-size: 1.125rem;
}
.shop-summary__total dt { color: var(--color-text) !important; font-weight: 700; }
.shop-summary__total dd { font-weight: 800; }
.shop-summary__go { width: 100%; }
.shop-summary__secure {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) 0 0; font-size: .75rem; color: var(--color-text-muted); max-width: none;
}

.shop-checkout { padding-block: var(--sp-8) var(--sp-16); }
.shop-checkout__grid { display: grid; gap: var(--sp-10); align-items: start; margin-top: var(--sp-6); }
@media (min-width: 900px) { .shop-checkout__grid { grid-template-columns: 1fr 22rem; } }
.shop-checkout__form { display: grid; gap: var(--sp-6); max-width: 36rem; }
.shop-checkout fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.shop-checkout legend { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-2); padding: 0; }
.shop-checkout__field { display: grid; gap: var(--sp-2); }
.shop-checkout__field label { font-weight: 600; font-size: .875rem; }
.shop-checkout__pair { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .shop-checkout__pair { grid-template-columns: 1fr 1fr; } }

.shop-checkout__mini { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.shop-checkout__mini-row { display: flex; align-items: center; gap: var(--sp-3); font-size: .875rem; }
.shop-checkout__mini-row img { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg-sunk); }
.shop-checkout__mini-name { flex: 1; min-width: 0; }
.shop-checkout__mini-name strong { display: block; font-weight: 600; }
.shop-checkout__mini-name span { color: var(--color-text-muted); }

.shop-confirm { padding-block: var(--sp-16); }
.shop-confirm__box { max-width: 44rem; margin-inline: auto; text-align: center; }
.shop-confirm__tick {
  width: 4rem; height: 4rem; margin: 0 auto var(--sp-5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
}
.shop-confirm__no {
  display: inline-block; margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700;
}
.shop-confirm__pending {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  text-align: left;
}
.shop-confirm__items {
  margin-top: var(--sp-8); text-align: left;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
}
.shop-confirm__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); border-bottom: 1px solid var(--color-border);
}
.shop-confirm__item:last-child { border-bottom: 0; }
.shop-confirm__totals { background: var(--color-bg-alt); padding: var(--sp-4); }
.shop-confirm__totals > div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.shop-confirm__totals > div + div { margin-top: var(--sp-2); }
.shop-confirm__totals .is-total { padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--color-border); font-weight: 800; font-size: 1.125rem; }

.shop-downloads { margin-top: var(--sp-8); text-align: left; }
.shop-downloads ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-downloads li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

.shop-empty {
  text-align: center; padding: var(--sp-16) var(--sp-5);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
}
.shop-empty h2 { margin-bottom: var(--sp-2); }
.shop-empty p { color: var(--color-text-muted); margin: 0 auto var(--sp-5); }

.shop-flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
  color: var(--color-text);
  margin-bottom: var(--sp-5); max-width: none;
}
.shop-flash.is-error {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.shop-toast {
  position: fixed; left: 50%; bottom: var(--sp-6); z-index: 1000;
  transform: translate(-50%, 1rem);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--color-text); color: var(--color-bg);
  box-shadow: var(--shadow-lg);
  font-weight: 600; font-size: .9375rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out);
  max-width: calc(100vw - 2rem);
}
.shop-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.shop-toast.is-error { background: var(--color-danger); }
@media (prefers-reduced-motion: reduce) { .shop-toast { transition: opacity var(--dur-fast) linear; } }

.shop-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-10);
}
.shop-pager__at { font-size: .875rem; color: var(--color-text-muted); }

.admin-body { background: var(--color-bg-alt); min-height: 100vh; }

.admin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-text); color: var(--color-bg);
  flex-wrap: wrap;
}
.admin-bar__brand { font-weight: 800; color: var(--color-bg); display: inline-flex; align-items: center; gap: var(--sp-2); }
.admin-bar__brand:hover { text-decoration: none; }
.admin-bar__tag {
  font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
}
.admin-bar__right { display: flex; align-items: center; gap: var(--sp-4); font-size: .875rem; }
.admin-bar__who { color: color-mix(in srgb, var(--color-bg) 75%, transparent); }

.admin-bar a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }

.admin-nav {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  padding: 0 var(--sp-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.admin-nav a {
  padding: var(--sp-3) var(--sp-4);
  color: var(--color-text); font-weight: 600; font-size: .9375rem;
  border-bottom: 2px solid transparent;
  min-height: 44px; display: inline-flex; align-items: center;
}
.admin-nav a:hover { text-decoration: none; background: var(--color-bg-alt); }
/* The tint token, not --color-accent-text: a sub-nav inside .admin-main sits on
   --color-bg-alt, where the plain blue measures 4.32:1. */
.admin-nav a.is-active { border-bottom-color: var(--color-primary); color: var(--color-accent-text-tint); }

.admin-main { max-width: 76rem; margin-inline: auto; padding: var(--sp-8) var(--sp-5) var(--sp-16); }
.admin-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.admin-head h1 { font-size: 1.5rem; margin: 0; }

.admin-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.admin-card + .admin-card { margin-top: var(--sp-6); }
.admin-card h2 { font-size: 1.125rem; margin-bottom: var(--sp-4); }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.admin-table th, .admin-table td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--color-border); }
.admin-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 700; white-space: nowrap; }
.admin-table tbody tr:hover { background: var(--color-bg-alt); }
.admin-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table__thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg-sunk); }
.admin-table__actions { display: flex; gap: var(--sp-2); justify-content: end; }

.admin-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2); border-radius: 999px;
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}

.admin-pill--live      { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-text); }
.admin-pill--draft     { background: var(--color-bg-sunk); color: var(--color-text-muted); }
.admin-pill--paid      { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-text); }
.admin-pill--pending   { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-text); }
/* Blue text on the blue tint is the tightest pair in the file (4.18:1 with the
   plain token) and the pill is bold 11px, so it owes the full 4.5:1. */
.admin-pill--fulfilled { background: var(--color-primary-soft); color: var(--color-accent-text-tint); }
.admin-pill--cancelled,
.admin-pill--refunded  { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-text); }
.admin-pill--out       { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-text); }
.admin-pill--low       { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-text); }

.admin-form { display: grid; gap: var(--sp-5); }
.admin-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 780px) { .admin-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 780px) { .admin-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
/* align-content: start is load-bearing. A field is a grid item in .admin-grid,
   so it stretches to the tallest field in the row — and a grid container with
   spare height hands that height to its auto rows. The effect: whichever field
   had the longest help text set the row height, and every OTHER field in that
   row had its label, control and help pushed apart to fill the gap. Controls
   ended up at four different heights and <select> came out visibly taller than
   the inputs beside it. Packing the rows to the top keeps every control on the
   same baseline and lets each one keep its natural height. */
.admin-field { display: grid; gap: var(--sp-2); align-content: start; }
.admin-field label { font-weight: 600; font-size: .875rem; }
.admin-field__help { font-size: .8125rem; color: var(--color-text-muted); margin: 0; max-width: none; }
.admin-check { display: flex; align-items: center; gap: var(--sp-2); }
.admin-check input { width: auto; min-height: 0; }
.admin-actions {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  padding-top: var(--sp-5); margin-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
}
.admin-actions--sticky {
  position: sticky; bottom: 0;
  background: var(--color-bg);
  margin-inline: calc(var(--sp-6) * -1); margin-bottom: calc(var(--sp-6) * -1);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.admin-variants { display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-variant {
  display: grid; gap: var(--sp-3); align-items: end;
  grid-template-columns: 1fr 1fr 8rem 7rem 44px;
  padding: var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
@media (max-width: 700px) { .admin-variant { grid-template-columns: 1fr 1fr; } }
.admin-variant__x {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-danger); cursor: pointer;
}

.admin-login { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-5); }
.admin-login__box {
  width: 100%; max-width: 24rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--sp-8); box-shadow: var(--shadow-md);
}
.admin-login__box h1 { font-size: 1.375rem; margin-bottom: var(--sp-2); }
.admin-login__box p { color: var(--color-text-muted); font-size: .9375rem; margin-bottom: var(--sp-6); }
.admin-login__box .admin-field + .admin-field { margin-top: var(--sp-4); }
.admin-login__box button { width: 100%; margin-top: var(--sp-6); }
/* Secondary lines under the form (forgot-password, back-to-sign-in, hints).
   Tighter than the box's default paragraph, which is sized as intro copy.
   --color-accent-text is measured against WHITE and the box is --color-bg;
   on a tinted surface this would need --color-accent-text-tint instead. */
.admin-login__box .admin-login__note {
  margin: var(--sp-4) 0 0; font-size: .875rem; text-align: center;
}
.admin-login__box .admin-login__note code {
  font-size: .8125rem; background: var(--color-bg-alt);
  padding: .1em .35em; border-radius: var(--radius-sm);
}
.admin-login__box a { color: var(--color-accent-text); }

.admin-flash {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
  max-width: none;
}
.admin-flash.is-error {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.admin-stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: var(--sp-8); }
.admin-stat {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--sp-5);
}
.admin-stat__n { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.admin-stat__l { font-size: .8125rem; color: var(--color-text-muted); font-weight: 600; margin-top: var(--sp-1); }

.admin-empty { text-align: center; padding: var(--sp-12); color: var(--color-text-muted); }

/* --- Delivery options at checkout ----------------------------------------
   A radio row that is entirely clickable. min-height 44px keeps the tap target
   at the WCAG 2.5.5 size on a phone, which a bare radio is not. */
.shop-shiprate {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 44px;
}
.shop-shiprate + .shop-shiprate { margin-top: var(--sp-2); }
.shop-shiprate:hover { border-color: var(--color-border-strong); background: var(--color-bg-alt); }
.shop-shiprate:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.shop-shiprate:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.shop-shiprate input { flex: none; }
.shop-shiprate__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.shop-shiprate__label { font-weight: 600; }
.shop-shiprate__desc { font-size: .8125rem; color: var(--color-text-muted); }
.shop-shiprate__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Shipping setup presets (admin) --------------------------------------- */
.admin-presets {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.admin-preset {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.admin-preset:hover { border-color: var(--color-border-strong); }
.admin-preset__name { font-size: 1rem; margin: 0; }
.admin-preset__best { font-size: .875rem; color: var(--color-text-muted); margin: 0; max-width: none; }
.admin-preset__rates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; }
.admin-preset__rates li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.admin-preset__note {
  font-size: .8125rem; color: var(--color-text-muted); margin: 0; max-width: none;
  padding-top: var(--sp-2); border-top: 1px solid var(--color-border);
}
.admin-preset .btn { margin-top: auto; }
/* The warning card leans on the accent tint, and --color-text (not the accent
   as text) so it clears AA on that background in both schemes. */
.admin-card--warn {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

/* --- Discount code entry (cart summary) ----------------------------------- */
.shop-coupon { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); }
.shop-coupon label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: var(--sp-2); }
.shop-coupon__row { display: flex; gap: var(--sp-2); }
.shop-coupon__row input { flex: 1; min-width: 0; text-transform: uppercase; }
.shop-coupon__applied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: 0; font-size: .875rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
/* A real button, not a link: it performs an action. Underlined so it is not
   signalled by colour alone. */
.shop-coupon__remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--color-text); text-decoration: underline;
  min-height: 44px;
}

/* --- Order lookup --------------------------------------------------------- */
.shop-lookup { padding-block: var(--sp-8) var(--sp-16); }
.shop-lookup__intro { color: var(--color-text-muted); margin-bottom: var(--sp-6); }
.shop-flash.is-ok {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-text);
}

/* --- Product gallery ------------------------------------------------------ */
.shop-pdp__thumb {
  padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
  border-radius: var(--radius-sm); line-height: 0; overflow: hidden;
}
.shop-pdp__thumb img { width: 5rem; height: 5rem; object-fit: cover; display: block; border-radius: 0; border: 0; }
.shop-pdp__thumb:hover { border-color: var(--color-border-strong); }
.shop-pdp__thumb.is-active { border-color: var(--color-primary); }
.shop-pdp__thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Gallery manager (admin) ---------------------------------------------- */
.admin-gallery {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.admin-gallery__item {
  display: block; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
}
.admin-gallery__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.admin-gallery__rm {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); font-size: .8125rem; min-height: 44px;
}
/* Checking "remove" tints the tile, so the pending deletion is visible before
   saving rather than only after. */
.admin-gallery__item:has(input:checked) { border-color: var(--color-danger); }
.admin-gallery__item:has(input:checked) img { opacity: .4; }

/* --- Reviews -------------------------------------------------------------- */
.shop-reviews { padding-block: var(--sp-10); border-top: 1px solid var(--color-border); }
.shop-reviews__avg { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-5); }
.shop-reviews__none { color: var(--color-text-muted); margin: 0 0 var(--sp-5); }
/* Filled stars carry --color-accent (a NON-text accent use, which owes 3:1, not
   4.5:1) and are backed by an aria-label, never colour alone. */
.shop-stars { display: inline-flex; gap: 1px; letter-spacing: .05em; }
.shop-stars__s { color: var(--color-border-strong); }
.shop-stars__s.is-on { color: var(--color-accent); }
.shop-reviews__list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.shop-review { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--color-border); }
.shop-review:last-child { border-bottom: 0; }
.shop-review__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-2); font-size: .875rem; }
.shop-review__head time { color: var(--color-text-muted); }
.shop-review__verified {
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-text);
}
.shop-review__title, .shop-review__body { margin: 0 0 var(--sp-1); max-width: none; }
.shop-reviews__write summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.shop-reviews__write form { margin-top: var(--sp-4); }

/* --- Back-in-stock signup ------------------------------------------------- */
.shop-notify {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.shop-notify label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.shop-notify__row { display: flex; gap: var(--sp-2); }
.shop-notify__row input { flex: 1; min-width: 0; }

/* --- Newsletter (footer) -------------------------------------------------- */
.site-footer__news { margin-top: var(--sp-5); max-width: 22rem; }
.site-footer__news label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: var(--sp-2); }
.site-footer__news-row { display: flex; gap: var(--sp-2); }
/* Pin BOTH ends of the field explicitly. base.css resets inputs to
   `color: inherit`, and .site-footer sets --color-ink-mute for the ink band, so
   the field inherited near-white text onto its own white background: 1.67:1,
   a real WCAG failure that was invisible for as long as this form was switched
   off. Same trap as the file input that inherits white text. */
.site-footer__news-row input {
  flex: 1; min-width: 0;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.site-footer__news-row input::placeholder { color: var(--color-text-muted); opacity: 1; }
.site-footer__news-msg { font-size: .8125rem; margin: 0 0 var(--sp-2); }

/* --- Email list CTA (mid-page, anchors down to the footer form) ------------
   A quiet tinted panel rather than another full band. Both pages that carry it
   already end in a dark CTA band, and two dark bands within one screen of each
   other compete instead of stacking. No brass anywhere on this: brass is 2.89:1
   on parchment and fails even the 3:1 non-text bar, so it never touches a light
   surface. --color-border is 3.41:1 and clears it. */
.news-cta-section { padding-block: var(--sp-12); }

.news-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* bg-alt, not primary-soft. primary-soft is oxblood mixed into parchment in
     oklch and lands on a pink that reads as off-brand against the page. bg-alt
     is the parchment the alternating bands already use, and --color-border is
     3.08:1 on it, which clears the 3:1 non-text bar. */
  background: var(--color-bg-alt);
}
/* accent-light, matching .step__icon / .path__icon / .price-card__icon. It is the
   only accent token overridden for dark mode; --color-primary is not, so an
   oxblood icon would sit at 1.1:1 on the dark panel. */
.news-cta__icon { flex: none; width: 2.5rem; height: 2.5rem; color: var(--color-accent-light); }
.news-cta__text { flex: 1 1 22rem; min-width: 0; }
/* Panel heading, not a section heading: the unscoped h2 clamp tops out at
   2.2rem and reads as a new section rather than part of this card. */
.news-cta__text h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); margin: 0 0 var(--sp-3); }
.news-cta__text p  { margin: 0; max-width: 54ch; }
.news-cta .btn     { flex: none; }

@media (max-width: 40rem) {
  .news-cta { padding: var(--sp-6); gap: var(--sp-5); }
  .news-cta .btn { width: 100%; }
}

/* --- Switch (admin on/off control) ----------------------------------------
   A real <input type="checkbox"> underneath, styled as a switch and marked
   role="switch" so a screen reader announces "on/off" rather than
   "checked/unchecked". Building it from a div would mean re-implementing
   keyboard handling, focus and form submission by hand, all of which the
   checkbox already does correctly.

   State is conveyed by the KNOB POSITION and by the adjacent On/Off text, not
   by colour alone (WCAG 1.4.1). */
.admin-switch {
  display: flex; align-items: center; gap: var(--sp-3);
  cursor: pointer; min-height: 44px;
}
.admin-switch__input {
  /* Visually replaced, never display:none — that would remove it from the
     accessibility tree and from keyboard focus order. */
  position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer;
}
.admin-switch__track {
  position: relative; flex: none;
  /* Decorative: let clicks fall through to the real input underneath rather
     than depending on the label to forward them. */
  pointer-events: none;
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--color-border-strong);
  transition: background var(--dur-fast) var(--ease);
}
.admin-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease);
}
.admin-switch__input:checked + .admin-switch__track { background: var(--btn-primary-bg); }
.admin-switch__input:checked + .admin-switch__track::after { transform: translateX(18px); }
.admin-switch__input:focus-visible + .admin-switch__track {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.admin-switch__input:disabled + .admin-switch__track { opacity: .5; cursor: not-allowed; }
.admin-switch__text { font-weight: 600; }
.admin-switch__state {
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .admin-switch__track, .admin-switch__track::after { transition: none; }
}

/* [hidden] must actually hide. The UA stylesheet sets display:none, but any
   component rule that sets display (.admin-actions is display:flex) overrides
   it — so hiding something from JS silently does nothing. This is the one place
   !important is the correct tool: "hidden" is not a style opinion. */
[hidden] { display: none !important; }

/* --- Customer account ----------------------------------------------------- */
.shop-account { padding-block: var(--sp-8) var(--sp-16); }
.shop-account__intro { color: var(--color-text-muted); margin-bottom: var(--sp-6); }
.shop-account__none { color: var(--color-text-muted); }
.shop-account h2 { margin-bottom: var(--sp-3); }
.site-footer__account { margin-top: var(--sp-4); font-size: .875rem; }