@import url('./tokens.css');

/* ---------- reset / viewport shell ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%;
  max-width: 100%;
}
/* Public pages pin to the viewport — the internal main scroller handles motion. */
body:not(.admin-body) {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: var(--syd-primary-dark);   /* bottom-edge color: prevents the
                                           cream "1px line" leak below footer
                                           on mobile viewports where dvh
                                           rounding leaves a sliver. */
  color: var(--syd-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  background: var(--syd-cream);          /* explicit so body's dark
                                           never bleeds through */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Flex column so a short page pins the footer to the bottom of the
     viewport; a long page just scrolls past everything and ends on the
     footer. */
  display: flex;
  flex-direction: column;
  position: relative;
}
main > .site-footer { margin-top: auto; }

/* Non-home public pages: S-wall fills the entire scroll area. Excludes
   admin (admin pages have their own scroll container on body). */
body:not(.home):not(.admin-body) main {
  background-color: var(--syd-cream);
  background-image:
    linear-gradient(rgba(244, 237, 220, 0.94), rgba(244, 237, 220, 0.94)),
    url('/static/img/syd-co-mark@512.png');
  background-size: auto, 56px auto;
  background-repeat: no-repeat, space;
  background-attachment: local, local;
  background-position: 0 0, center top;
}
/* Touch ergonomics: kill the 300 ms delay + iOS tap flash on interactive UI */
a, button, [role="button"], summary, label, input, textarea, select {
  touch-action: manipulation;
}
/* iOS form input zoom prevention — keep ≥16 px on the small viewports */
input, textarea, select { font-size: 16px; }
/* Hide focus rings when navigating with mouse / touch, keep them for keyboard */
:focus:not(:focus-visible) { outline: none; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- layout primitives ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: max(var(--container-pad), env(safe-area-inset-left));
  padding-inline-end: max(var(--container-pad), env(safe-area-inset-right));
}

.eyebrow {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syd-primary-brown);
}

.h-display {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--syd-primary-dark);
  margin: 0;
}

.h-section {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--syd-primary-dark);
  margin: 0;
}

.accent {
  font-family: var(--ff-accent);
  font-weight: 400;
  font-style: normal;
  color: var(--syd-primary-brown);
}

/* ---------- header ---------- */
.site-header {
  flex: 0 0 auto;
  z-index: 50;
  background: var(--syd-cream);
  border-bottom: 1px solid var(--syd-hairline-soft);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 0.625rem;
}
@media (min-width: 640px) {
  .site-header__inner { padding-block: var(--sp-4); gap: var(--sp-6); }
}

/* category chip nav (sits inside the header, below the brand row) */
.cat-chips {
  position: relative;
  background: var(--syd-cream);          /* plain cream, no S-wall */
  border-top: 1px solid var(--syd-hairline-soft);
}
.cat-chips__row {
  display: flex; gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--container-pad);
}
/* Chip nav scroll-indicator arrows: surface only when there's something to
   scroll to in that direction. A fading gradient behind each arrow makes the
   chip text appear to slide under it. */
.chip-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  display: grid; place-items: center;
  background: linear-gradient(to right, var(--syd-cream) 30%, rgba(244,237,220,0));
  border: 0;
  z-index: 3;
  cursor: pointer;
  padding: 0;
}
.chip-nav--next {
  right: 0;
  background: linear-gradient(to left, var(--syd-cream) 30%, rgba(244,237,220,0));
}
.chip-nav--prev { left: 0; }
.chip-nav .glyph-chevron { font-size: 1.5em; }
[x-cloak] { display: none !important; }
.cat-chips__row::-webkit-scrollbar { display: none; }
.cat-chips a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0.875rem var(--sp-4);
  min-height: 44px;
  display: inline-flex; align-items: center;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syd-ink-soft);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.cat-chips a:first-child { padding-left: 0; }
.cat-chips a.is-active {
  color: var(--syd-primary-dark);
  border-bottom-color: var(--syd-primary-dark);
}
@media (hover: hover) {
  .cat-chips a:hover { color: var(--syd-primary-dark); }
}
@media (min-width: 640px) {
  .cat-chips a {
    padding: 0.875rem var(--sp-5);
    font-size: 0.75rem;
  }
}

/* horizontal product strips */
.strip-section {
  position: relative;
  padding-block: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}
.strip-section + .strip-section {
  border-top: 1px solid var(--syd-hairline-soft);
}
/* S-wall pattern background on full (with-products) strip sections only. */
.strip-section--full::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('/static/img/syd-co-mark@512.png');
  background-size: 56px auto;
  background-repeat: space;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.strip-section--full > .container { position: relative; z-index: 1; }

/* HOME PAGE: each category section starts at the top of the viewport when
   scrolled. Sections that have products fill the viewport and snap; empty
   categories take natural height (heading + view-more only) so the page
   isn't flooded with whitespace before any items are added. */
body.home main {
  scroll-snap-type: y proximity;
}
body.home main > .hero {
  scroll-snap-align: start;
}
body.home main > .strip-section--full {
  min-height: auto;        /* content-sized — smaller cards no longer
                             need a 70dvh section to feel deliberate */
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  justify-content: flex-start;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
body.home main > .strip-section + .strip-section { border-top: 0; }
body.home main > .strip-section:not(.strip-section--full) {
  padding-block: var(--sp-5);
  min-height: 0;
}
body.home main > .strip-section:not(.strip-section--full) + .strip-section:not(.strip-section--full) {
  border-top: 1px solid var(--syd-hairline-soft);
}
.strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: nowrap;
  min-height: 36px;        /* keeps the empty-category row from collapsing */
}
.strip-head h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--syd-primary-dark);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-head a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syd-primary-dark);
  border-bottom: 1px solid currentColor;
  padding: 6px 2px;
  margin-left: auto;       /* always pushed to the right edge */
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Single-right-pointing angle (U+203A), styled per design system.
   Font order: Syne → Georgia → serif. Color pulled from the brand palette. */
.glyph-chevron {
  font-family: 'Syne', Georgia, serif;
  font-weight: 800;
  font-style: normal;
  color: var(--syd-primary-brown);
  text-shadow:
    0 0.025em 0 rgba(50, 30, 0, 0.40),
    0 0.05em 0.10em rgba(0, 0, 0, 0.45);
  display: inline-block;
  transform: translateY(-0.02em);
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: 0;
  margin-left: 0.05em;
}
/* Mirror for left-pointing usage (carousel prev). */
.glyph-chevron--flip { transform: translateY(-0.02em) scaleX(-1); margin-left: 0; margin-right: 0.05em; }

/* On the dark carousel-nav button the chevron sits on a brown disc, so flip
   to cream for contrast and lighten the shadow. */
.strip-nav .glyph-chevron {
  color: var(--syd-cream);
  text-shadow:
    0 0.025em 0 rgba(0, 0, 0, 0.45),
    0 0.05em 0.10em rgba(0, 0, 0, 0.55);
  font-size: 1.6em;
  margin: 0;
}
.strip-nav .glyph-chevron--flip { transform: translateY(-0.02em) scaleX(-1); }
@media (min-width: 640px) {
  .strip-head a { font-size: 0.75rem; }
  .strip-head { margin-bottom: var(--sp-6); gap: var(--sp-4); }
}

.strip-wrap { position: relative; }
.strip-track {
  /* Fixed card widths per breakpoint — keeps card size consistent regardless
     of how many items are in a category. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  padding-bottom: 4px;
  scroll-padding-inline: 4px;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-track > * { scroll-snap-align: start; }

@media (min-width: 600px) {
  .strip-track { grid-auto-columns: 280px; gap: var(--sp-5); }
}
@media (min-width: 1000px) {
  .strip-track { grid-auto-columns: 260px; }
}

.strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--syd-primary-dark);
  color: var(--syd-cream);
  border: 0;
  display: grid; place-items: center;
  font-size: 1rem;
  box-shadow: var(--syd-shadow);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
/* Centered on the carousel's left/right border on every viewport. */
.strip-nav--prev { left: -20px; }
.strip-nav--next { right: -20px; }
@media (hover: hover) and (pointer: fine) {
  .strip-nav:hover { transform: translateY(-50%) scale(1.05); }
}

/* contact section */
.contact-section {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--syd-hairline-soft);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-label {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syd-primary-brown);
  margin: 0 0 var(--sp-3);
}
.contact-value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  color: var(--syd-primary-dark);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
}
.contact-value a { transition: opacity .15s ease; }
.contact-value a:hover { opacity: 0.7; }
.contact-note {
  color: var(--syd-ink-soft);
  font-size: 0.9375rem;
  margin: 0;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--syd-primary-dark);
  padding: 6px;            /* expand tap target */
  margin: -6px;
}
.brand__mark { height: 28px; width: auto; }
.brand__word {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--syd-primary-dark);
}
@media (min-width: 640px) {
  .brand { gap: var(--sp-3); }
  .brand__mark { height: 36px; }
  .brand__word { font-size: 1.375rem; letter-spacing: 0.01em; }
}
.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.cart-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  padding-inline: 6px;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syd-primary-dark);
}
.cart-badge {
  display: inline-grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding-inline: 0.35rem;
  border-radius: 999px;
  background: var(--syd-primary-dark); color: var(--syd-cream);
  font-family: var(--ff-ui); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.cart-badge[data-empty="true"] { display: none; }

/* ---------- hero (home only) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.75rem, 5vw, 3.5rem);
  background: var(--syd-cream);
  border-bottom: 1px solid var(--syd-hairline-soft);
  flex: 0 0 auto;          /* main is a flex column with many tall sections —
                              keep the hero at its natural height */
}
.hero__bg { display: none; }     /* hero is plain cream — the watermark moved
                                    to the header brand row */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.hero__brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-2);
}
.hero__mark {
  width: clamp(72px, 9vw, 120px);
  height: auto;
}
.hero__word {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: 0.02em;
  color: var(--syd-primary-dark);
  margin: 0;
  line-height: 1;
}
.hero__slogan {
  font-family: var(--ff-accent);
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  color: var(--syd-primary-brown);
  margin: 0;
  line-height: 1.1;
  text-align: right;
  max-width: 50%;
}
@media (max-width: 640px) {
  .hero__inner { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); }
  .hero__brand { align-items: center; }
  .hero__slogan {
    text-align: center;
    max-width: 100%;
    font-size: clamp(1.125rem, 5.5vw, 1.75rem);
    line-height: 1.2;
    padding-inline: var(--sp-2);
  }
}

/* Home: chip nav lives only on non-home pages (header keeps the brand row only). */
body.home .cat-chips { display: none; }

/* Mobile: stack categories directly under each other — natural height +
   mandatory snap so each scroll still lands on the next category. */
@media (max-width: 640px) {
  body.home main {
    scroll-snap-type: y mandatory;
  }
  body.home main > .strip-section--full {
    min-height: auto;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    scroll-snap-stop: always;
  }
  body.home main > .hero {
    min-height: auto;
    scroll-snap-stop: always;
  }
}

/* ---------- legacy hero (unused, kept to avoid breaking older templates) ---------- */
.hero-legacy {
  padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
}
.hero__copy { max-width: 36rem; }
.hero__eyebrow { margin-bottom: var(--sp-5); }
.hero h1 {
  font-size: var(--fs-hero);
  margin-bottom: var(--sp-6);
}
.hero h1 .accent {
  display: block;
  font-size: 0.6em;
  line-height: 1;
  margin-top: var(--sp-4);
  letter-spacing: 0;
}
.hero__lede {
  font-size: var(--fs-md);
  color: var(--syd-ink-soft);
  margin-bottom: var(--sp-8);
  max-width: 30rem;
}
.hero__cta { display: inline-flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero__art {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 20% 0%, var(--syd-cream-soft) 0%, transparent 60%),
    linear-gradient(180deg, var(--syd-primary-brown) 0%, var(--syd-primary-dark) 100%);
  overflow: hidden;
  box-shadow: var(--syd-shadow);
}
.hero__art img {
  width: 62%; height: auto;
  filter: brightness(0) saturate(100%) invert(96%) sepia(8%) saturate(444%) hue-rotate(2deg) brightness(101%) contrast(95%);
  /* paints the mark in cream — see syd-co-mark.png */
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0.95rem 1.6rem;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--syd-primary-dark);
  color: var(--syd-cream);
}
.btn--primary:hover { background: #2f1c19; }
.btn--ghost {
  background: transparent;
  color: var(--syd-primary-dark);
  border-color: var(--syd-primary-dark);
}
.btn--ghost:hover { background: var(--syd-primary-dark); color: var(--syd-cream); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------- section ---------- */
.section { padding-block: clamp(1.5rem, 4vw, 3rem); }
.section__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.section__head p { color: var(--syd-ink-soft); max-width: 32rem; margin: var(--sp-3) 0 0; }
.section__link {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syd-primary-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- category strip ---------- */
.cat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .cat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-strip { grid-template-columns: 1fr; } }

.cat-tile {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--syd-primary-dark);
  color: var(--syd-cream);
  padding: var(--sp-6);
  isolation: isolate;
  transition: transform .25s ease;
}
.cat-tile:nth-child(2n) { background: var(--syd-primary-brown); }
.cat-tile:nth-child(3n) { background: var(--syd-taupe); color: var(--syd-primary-dark); }
.cat-tile:hover { transform: translateY(-2px); }
.cat-tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 100% 100%, rgba(244,237,220,0.18) 0%, transparent 60%);
}
.cat-tile__index {
  font-family: var(--ff-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cat-tile__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-block: auto var(--sp-2);
  display: block;
  position: absolute; left: var(--sp-6); right: var(--sp-6); bottom: var(--sp-12);
}
.cat-tile__hint {
  position: absolute; left: var(--sp-6); bottom: var(--sp-6);
  font-family: var(--ff-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 540px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

.product-card {
  display: flex; flex-direction: column;
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .15s ease;
  /* Single bottom drop — the card sits on the surface, no ambient haze. */
  box-shadow: 0 12px 18px -6px rgba(65, 40, 36, 0.22);
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--syd-hairline);
  box-shadow: 0 18px 24px -6px rgba(65, 40, 36, 0.28);
}
.product-card__link {
  display: flex; flex-direction: column;
  flex: 1;
  color: inherit;
}
.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--syd-cream-soft);
  display: grid; place-items: center;
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;     /* fill the slot, crop if needed */
}
.product-card__media--empty {
  background: linear-gradient(135deg, var(--syd-cream-soft) 0%, var(--syd-cream) 100%);
}
.product-card__media--empty img {
  width: 36%; height: auto; opacity: 0.35; object-fit: contain;
  padding: 0;
}
.product-card__body {
  padding: 1.125rem 1.125rem 0.625rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1;
}
.product-card__cat { font-family: var(--ff-ui); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--syd-primary-brown); }
.product-card__name { font-family: var(--ff-display); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--syd-primary-dark); margin: 0; }
.product-card__desc { font-size: 0.875rem; color: var(--syd-ink-soft); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.4;
}
.product-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 1.125rem 1.125rem;
  flex-wrap: wrap;          /* if a card is extremely narrow, button drops
                               under the price instead of being squeezed */
}
.product-card__add {
  background: var(--syd-primary-dark);
  color: var(--syd-cream);
  border: 0;
  padding: 0.5625rem 0.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  min-height: 34px;
  transition: background .15s ease, transform .12s ease;
}
.product-card__add:hover { background: #2f1c19; }
.product-card__add:active { transform: translateY(1px); }
.price { font-family: var(--ff-ui); font-weight: 600; font-size: 0.9375rem; color: var(--syd-primary-dark); letter-spacing: 0.02em; }

/* ---------- shop ---------- */
.shop-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-12);
}
@media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }
.filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.filter-list a {
  display: block; padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-ui); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--syd-ink-soft); border-left: 2px solid transparent;
  transition: all .15s ease;
}
.filter-list a:hover { color: var(--syd-primary-dark); }
.filter-list a.is-active { color: var(--syd-primary-dark); border-left-color: var(--syd-primary-dark); background: var(--syd-cream-soft); }

/* ---------- item detail ---------- */
.item-detail {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 860px) { .item-detail { grid-template-columns: 1fr; } }
.item-detail__media {
  aspect-ratio: 1 / 1;
  background: var(--syd-cream-soft);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  overflow: hidden;
}
.item-detail__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-3); }
.item-detail__media--empty img { width: 40%; opacity: 0.35; object-fit: contain; padding: 0; }
.item-detail__cat { font-family: var(--ff-ui); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--syd-primary-brown); margin-bottom: var(--sp-3); }
.item-detail h1 {
  font-family: var(--ff-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--sp-4); color: var(--syd-primary-dark);
}
.item-detail__price { font-family: var(--ff-ui); font-weight: 600; font-size: 1.5rem; color: var(--syd-primary-dark); margin-bottom: var(--sp-8); }
.item-detail__desc { color: var(--syd-ink-soft); font-size: var(--fs-md); line-height: 1.7; margin-bottom: var(--sp-8); }
.qty-row { display: inline-flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.qty {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--syd-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty button {
  background: transparent; border: 0;
  padding: 0 var(--sp-4);
  color: var(--syd-primary-dark);
  font-size: 1.125rem;
}
.qty button:hover { background: var(--syd-cream-soft); }
.qty input {
  border: 0; background: transparent;
  width: 3rem; text-align: center;
  font-family: var(--ff-ui); font-weight: 600;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- cart / checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: var(--sp-12); padding-block: var(--sp-12); }
@media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--syd-hairline-soft); }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--syd-hairline-soft); align-items: center; }
.cart-row__thumb { aspect-ratio: 1; background: var(--syd-cream-soft); border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; }
.cart-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__thumb--empty img { width: 50%; opacity: 0.35; object-fit: contain; }
.cart-row__name { font-family: var(--ff-display); font-weight: 600; font-size: 1.0625rem; color: var(--syd-primary-dark); margin: 0 0 var(--sp-1); }
.cart-row__meta { font-size: 0.875rem; color: var(--syd-ink-soft); }
.cart-row__price { font-family: var(--ff-ui); font-weight: 600; color: var(--syd-primary-dark); }
.cart-row__remove { background: transparent; border: 0; color: var(--syd-ink-mute); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; }
.cart-row__remove:hover { color: var(--syd-primary-dark); }

.summary {
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  position: sticky; top: 100px; height: max-content;
}
.summary h2 { font-family: var(--ff-display); font-weight: 700; margin: 0 0 var(--sp-5); color: var(--syd-primary-dark); }
.summary__row { display: flex; justify-content: space-between; padding-block: var(--sp-3); font-size: 0.9375rem; color: var(--syd-ink-soft); }
.summary__row--total { border-top: 1px solid var(--syd-hairline); padding-top: var(--sp-4); margin-top: var(--sp-4); color: var(--syd-primary-dark); font-family: var(--ff-ui); font-weight: 600; font-size: 1.0625rem; }

.empty-state { padding: var(--sp-8) 0; text-align: center; color: var(--syd-ink-soft); }
.empty-state h2 { font-family: var(--ff-display); font-weight: 700; color: var(--syd-primary-dark); margin-bottom: var(--sp-3); }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-family: var(--ff-ui); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--syd-primary-brown);
}
.field input, .field textarea, .field select {
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  font-size: 1rem;
  color: var(--syd-ink);
  font-family: var(--ff-body);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;        /* never overflow the field cell */
  min-width: 0;
  box-sizing: border-box;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--syd-primary-dark);
  box-shadow: 0 0 0 3px rgba(65, 40, 36, 0.1);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 540px) { .field--row { grid-template-columns: 1fr; } }
.form-section {
  margin: var(--sp-3) 0 0;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syd-primary-brown);
}
.field__hint {
  font-size: 0.8125rem;
  color: #b43c28;
  margin: 0;
}
.phone-input {
  display: flex;
  align-items: stretch;
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.phone-input:focus-within {
  border-color: var(--syd-primary-dark);
  box-shadow: 0 0 0 3px rgba(65, 40, 36, 0.1);
}
.phone-input.is-invalid { border-color: #b43c28; }
.phone-input__prefix {
  display: inline-flex; align-items: center;
  padding: 0 0.875rem;
  font-family: var(--ff-ui); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--syd-primary-brown);
  background: var(--syd-cream-soft);
  border-right: 1px solid var(--syd-hairline);
  font-size: 1rem;
}
.phone-input input {
  border: 0;
  background: transparent;
  flex: 1;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  min-width: 0;
}
.phone-input input:focus { outline: none; box-shadow: none; }
.error {
  background: rgba(180, 60, 40, 0.08);
  border-left: 3px solid #b43c28;
  color: #b43c28;
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
}
/* pagination ("page bouncer" at the end of the category scroll) */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.pagination__num,
.pagination__btn {
  min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-3);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--syd-hairline);
  color: var(--syd-ink-soft);
  background: var(--syd-white);
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.pagination__num:hover,
.pagination__btn:hover {
  color: var(--syd-primary-dark);
  border-color: var(--syd-primary-dark);
}
.pagination__btn:active { transform: translateY(1px); }
.pagination__num.is-active {
  background: var(--syd-primary-dark);
  color: var(--syd-cream);
  border-color: var(--syd-primary-dark);
}
.pagination__btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.pagination__btn .glyph-chevron { font-size: 1.4em; margin: 0; color: currentColor;
  text-shadow: none; transform: translateY(-0.02em); }
.pagination__btn .glyph-chevron--flip { transform: translateY(-0.02em) scaleX(-1); }
.pagination__meta {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--ff-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--syd-ink-mute);
}

/* sort dropdown */
.sort-control { position: relative; }
.sort-button {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline);
  color: var(--syd-primary-dark);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 40px;
}
.sort-button:hover { border-color: var(--syd-primary-dark); }
.sort-button__active { color: var(--syd-ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sort-button .glyph-chevron {
  font-size: 1.1em;
  transform: rotate(90deg) translateY(-0.02em);
  transition: transform .15s ease;
}
.sort-button .glyph-chevron.is-open { transform: rotate(-90deg) translateY(-0.02em); }
.sort-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 24px -8px rgba(65, 40, 36, 0.22);
  z-index: 10;
  padding: var(--sp-2);
  display: flex; flex-direction: column;
}
.sort-menu__item {
  padding: 0.5rem 0.75rem;
  font-family: var(--ff-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syd-ink-soft);
  border-radius: var(--radius-sm);
}
.sort-menu__item:hover { color: var(--syd-primary-dark); background: var(--syd-cream-soft); }
.sort-menu__item.is-active { color: var(--syd-primary-dark); background: var(--syd-cream-soft); }

.payment-tag {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--syd-cream-soft);
  border: 1px solid var(--syd-hairline);
  border-radius: var(--radius-sm);
}
.payment-tag strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--syd-primary-dark);
}
.payment-tag span {
  font-size: 0.875rem;
  color: var(--syd-ink-soft);
}

/* ---------- footer (compact, max 10dvh) ---------- */
.site-footer {
  flex: 0 0 auto;
  background: var(--syd-primary-dark);
  color: var(--syd-cream);
  max-height: 10dvh;
  min-height: 60px;
  display: flex; align-items: center;
  padding-block: var(--sp-3);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  overflow: hidden;
}
.site-footer__inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.site-footer__contacts {
  display: flex; align-items: center;
  gap: var(--sp-5) var(--sp-6);
  flex-wrap: wrap;
}
.site-footer__contacts a {
  display: inline-flex; align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.8125rem;
  color: var(--syd-cream);
  transition: opacity .15s ease;
  min-height: 32px;
  flex-wrap: wrap;
}
.site-footer__contacts a:hover { opacity: 0.75; }
.site-footer__label {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--syd-taupe);
  font-weight: 600;
}
.site-footer__hours {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,237,220,0.55);
  font-weight: 600;
}
.site-footer__copy {
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,237,220,0.55);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .site-footer__contacts { gap: 2px var(--sp-4); }
  .site-footer__contacts a { font-size: 0.75rem; }
  .site-footer__copy { display: none; }   /* keep only what fits in 10dvh on small screens */
}

/* ---------- admin shell (mobile-first) ---------- */
.admin-body {
  /* Admin pages: body is the scroll container (height: 100dvh + overflow-y).
     Putting scroll on body — not html — keeps `position: sticky` on the
     header/tabs working, and lets touch + wheel scroll work normally. */
  display: block;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  background: var(--syd-cream);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px clamp(12px, 4vw, 20px);
  background: var(--syd-cream);
  border-bottom: 1px solid var(--syd-hairline-soft);
  padding-top: max(8px, env(safe-area-inset-top));
}
.admin-header__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.875rem; letter-spacing: 0.04em;
  color: var(--syd-primary-dark);
  text-decoration: none;
  min-width: 0;
}
.admin-header__brand img { height: 28px; width: auto; flex-shrink: 0; }
.admin-header__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-header__actions {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.admin-header__action {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--syd-primary-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  min-height: 36px;
}
.admin-header__action:hover { background: var(--syd-cream-soft); }
.admin-header__action .glyph-chevron { font-size: 1em; margin-left: 2px; }
.admin-header__actions form { display: inline; margin: 0; }

/* Tabs: a horizontal scroller of section pills under the header. */
.admin-tabs {
  position: sticky; top: 49px; z-index: 49;
  display: flex;
  gap: 2px;
  padding: 6px clamp(8px, 3vw, 16px);
  background: var(--syd-primary-dark);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs a {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,237,220,0.65);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}
.admin-tabs a:hover { color: var(--syd-cream); background: rgba(244,237,220,0.06); }
.admin-tabs a.is-active { color: var(--syd-cream); background: rgba(244,237,220,0.14); }

.admin-main {
  padding: clamp(var(--sp-4), 4vw, var(--sp-8)) clamp(var(--sp-3), 4vw, var(--sp-8));
  max-width: 100%;
  /* Reset the public-page <main> rule (display: flex / overflow-y: auto / flex: 1)
     — the admin body is the scroll container, not main. */
  display: block;
  flex: none;
  overflow-x: hidden;
  overflow-y: visible;
  background: transparent;
  scroll-behavior: auto;
}

/* On wider viewports the tabs space out and the main gets more breathing room. */
@media (min-width: 800px) {
  .admin-header { padding: 10px 24px; }
  .admin-header__brand { font-size: 1rem; }
  .admin-header__brand img { height: 32px; }
  .admin-header__action { font-size: 0.75rem; padding: 10px 14px; }
  .admin-tabs { top: 58px; padding: 8px 24px; gap: 4px; }
  .admin-tabs a { padding: 10px 16px; font-size: 0.75rem; }
  .admin-main { padding: var(--sp-8) var(--sp-10); max-width: 1280px; margin: 0 auto; }
}

.admin-h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  color: var(--syd-primary-dark);
  margin: 0 0 var(--sp-4);
}
.admin-sub {
  color: var(--syd-ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 var(--sp-6);
}
.admin-empty {
  padding: var(--sp-10);
  text-align: center;
  color: var(--syd-ink-soft);
  background: var(--syd-white);
  border: 1px dashed var(--syd-hairline);
  border-radius: var(--radius-md);
}

/* Two-column admin layout (table + new form). Stacks on small screens. */
.admin-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 980px) {
  .admin-twocol { grid-template-columns: 1fr 360px; gap: var(--sp-10); }
}
.admin-form {
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

/* Tables: wrap them in a scroller so they don't blow up on mobile. */
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--syd-hairline-soft);
  border-radius: var(--radius-md);
  background: var(--syd-white);
}
.admin-table-wrap::-webkit-scrollbar { height: 8px; }
.admin-table-wrap::-webkit-scrollbar-thumb { background: var(--syd-hairline); border-radius: 8px; }
.admin-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.admin-table th, .admin-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: 0.875rem;
}
.admin-table thead { background: var(--syd-cream-soft); }
.admin-table th { font-family: var(--ff-ui); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--syd-primary-brown); font-weight: 600; }
.admin-table tbody tr { border-top: 1px solid var(--syd-hairline-soft); }
.admin-table tbody tr:hover { background: var(--syd-cream-soft); }

/* Orders list */
.order-list {
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-width: 0;
}
.order-card {
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.order-card__head {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  user-select: none;
}
@media (max-width: 640px) {
  .order-card__head { grid-template-columns: 1fr auto; }
  .order-card__head-right { display: none; }
}
.order-card__num {
  font-family: var(--ff-display); font-weight: 700;
  color: var(--syd-primary-dark);
  margin: 0 0 4px;
}
.order-card__when {
  font-family: var(--ff-ui); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--syd-ink-mute);
  margin: 0;
}
.order-card__customer { margin: 0 0 4px; color: var(--syd-primary-dark); font-weight: 600; }
.order-card__phone { margin: 0; color: var(--syd-ink-soft); font-size: 0.9375rem; }
.order-card__phone a { border-bottom: 1px solid currentColor; }
.order-card__total {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--ff-ui); font-weight: 600;
  color: var(--syd-primary-dark);
  font-size: 1.0625rem;
}
.order-card__total .glyph-chevron {
  font-size: 1.3em;
  transform: rotate(90deg) translateY(-0.02em);
  transition: transform .2s ease;
}
.order-card__total .glyph-chevron.is-open { transform: rotate(-90deg) translateY(-0.02em); }
.order-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--syd-hairline-soft);
  background: var(--syd-cream-soft);
}
.order-card__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
}
@media (max-width: 700px) {
  .order-card__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.order-card__label {
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--syd-primary-brown);
  margin: 0 0 var(--sp-2);
}
.order-card__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.order-card__items li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 0.9375rem; flex-wrap: wrap; word-break: break-word; }
.order-card__items li span:last-child { font-family: var(--ff-ui); font-weight: 600; color: var(--syd-primary-dark); }
.order-card__addr { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; }
.order-card__addr li span {
  display: inline-block; min-width: 88px;
  font-family: var(--ff-ui); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--syd-primary-brown);
}
.order-card__muted { color: var(--syd-ink-mute); font-style: italic; margin: 0; }
.tag {
  display: inline-flex; padding: 2px 8px; border-radius: 999px;
  background: var(--syd-cream-soft); color: var(--syd-primary-brown);
  font-family: var(--ff-ui); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.tag--off { background: rgba(180, 60, 40, 0.1); color: #8a2e1e; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: var(--sp-5);
  max-width: 100%;
}
.stat {
  display: flex; flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  padding: 10px;
  min-width: 0;
  min-height: 0;
  transition: transform .15s ease, border-color .15s ease;
  background: var(--syd-white);
  border: 1px solid var(--syd-hairline-soft);
  border-radius: var(--radius-sm);
}
.stat:hover {
  transform: translateY(-1px);
  border-color: var(--syd-primary-dark);
}
.stat__label {
  font-family: var(--ff-ui); font-weight: 600;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--syd-primary-brown);
  margin: 0 0 6px;
}
.stat__num {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.125rem, 4.5vw, 2rem);
  color: var(--syd-primary-dark);
  line-height: 1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 600px) {
  .stat-grid { gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .stat { padding: var(--sp-5); border-radius: var(--radius-md); }
  .stat__label { font-size: 0.6875rem; }
}

.login-shell {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--syd-cream-soft) 0%, transparent 60%),
    var(--syd-cream);
  padding: var(--sp-4);
  box-sizing: border-box;
}
.login-card {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  background: var(--syd-white); border-radius: var(--radius-md);
  border: 1px solid var(--syd-hairline-soft);
  padding: clamp(var(--sp-5), 6vw, var(--sp-10));
}
.login-card .brand { margin: 0 auto var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.login-card .brand img { height: 56px; }
.login-card h1 { font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem; color: var(--syd-primary-dark); margin: 0 0 var(--sp-6); text-align: center; }