:root {
  --ink: #25201d;
  --muted: #716a64;
  --paper: #fffaf3;
  --surface: #ffffff;
  --surface-2: #f5ede3;
  --brand: #b93828;
  --brand-dark: #81271d;
  --accent: #1e6b58;
  --accent-soft: #dceee8;
  --line: #e7dcd0;
  --warning: #9a6211;
  --danger: #a62929;
  --success: #24724f;
  --shadow: 0 18px 55px rgba(63, 45, 31, 0.11);
  --radius: 18px;
  --radius-sm: 11px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* One focus treatment for every interactive control. Inputs previously had a
   ring and nothing else did, which left keyboard users with no visible
   position anywhere in the app. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible, .main-nav a:focus-visible, .language-toggle:focus-visible,
.header-cart:focus-visible, .floating-cart:focus-visible, .tab:focus-visible { outline-offset: 3px; }

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .product-card:hover, .floating-cart:hover { transform: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 1.08rem; letter-spacing: -0.02em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 0.74rem; }

.main-nav { display: flex; align-items: center; gap: 8px; }
.nav-scrim { display: none; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-actions > #account-link { padding: 10px 8px; color: var(--muted); font-size: .93rem; font-weight: 700; text-decoration: none; }
.header-actions > #account-link:hover { color: var(--brand); }

/* The cart lives in the header at every breakpoint. It used to exist only as a
   floating desktop pill and a link buried in the mobile menu, so on a phone
   there was no visible cart at all. */
.header-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}
.header-cart:hover { background: var(--surface-2); color: var(--brand); }
.header-cart.has-items { color: var(--brand); }
.header-cart .cart-badge {
  position: absolute;
  top: 1px;
  right: 0;
  margin: 0;
  border: 2px solid var(--paper);
}
.cart-badge[hidden] { display: none; }
.main-nav a {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
}
.main-nav a:hover, .main-nav a.active { color: var(--brand); background: #f4e5df; }
.cart-badge {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  margin-left: 3px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 0.72rem;
}
.menu-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle:hover { background: var(--surface-2); }

main { min-height: 70vh; }
.page-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 44px 0 72px; }
.narrow { width: min(760px, calc(100% - 36px)); }

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 36px;
  align-items: center;
  padding-top: 32px;
}
.hero-copy { padding: 28px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.77rem;
}
.hero h1, .page-title {
  margin: 0;
  max-width: 760px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.hero p { max-width: 650px; margin: 24px 0; color: var(--muted); font-size: 1.12rem; line-height: 1.7; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  border-radius: 34px;
  background: linear-gradient(145deg, #f5c66c 0%, #c64930 58%, #7f261d 100%);
  box-shadow: var(--shadow);
}
.hero-visual::before, .hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.hero-visual::before { width: 270px; height: 270px; top: -80px; right: -70px; }
.hero-visual::after { width: 180px; height: 180px; bottom: -55px; left: -40px; }
.hero-bag { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.hero-bag img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 30px 25px rgba(60, 13, 5, .25)); }
.hero-note {
  position: absolute;
  right: 22px;
  bottom: 22px;
  max-width: 240px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 15px 35px rgba(45,20,10,.18);
}
.hero-note strong { display: block; margin-bottom: 4px; }
.hero-note span { color: var(--muted); font-size: .88rem; line-height: 1.4; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--brand); box-shadow: 0 10px 22px rgba(185,56,40,.22); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { border-color: var(--line); background: var(--surface); }
.btn-secondary:hover { border-color: #cdbbaa; }
.btn-ghost { color: var(--brand); background: transparent; }
.btn-danger { color: white; background: var(--danger); }
.btn-small { min-height: 36px; padding: 7px 12px; font-size: .83rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.section { margin-top: 88px; }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.section-head h2, .content-card h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.9rem); letter-spacing: -.035em; }
.section-head p { max-width: 600px; margin: 8px 0 0; color: var(--muted); line-height: 1.6; }

.info-grid, .step-grid, .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info-card, .step-card, .content-card, .auth-card, .order-card, .loading-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 26px rgba(63,45,31,.055);
}
.info-card, .step-card { padding: 24px; }
/* The label is the quiet part and the value is the loud part. Sizing every
   descendant span at 2rem made "Brno and nearby districts" wrap into a wall
   next to a one-line date, and forced a font-size reset on the countdown. */
.info-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.info-value {
  display: block;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.step-card p { color: var(--muted); line-height: 1.55; }
.step-number {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}
.step-card h3 { margin: 0 0 8px; }

.countdown { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 8px; margin-top: 16px; }
.countdown div { padding: 12px 8px; border-radius: 12px; text-align: center; background: var(--surface-2); }
.countdown strong {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  text-transform: none;
}
.countdown small { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.countdown-closed { grid-column: 1 / -1; margin: 0; padding: 12px; border-radius: 12px; background: var(--surface-2); color: var(--warning); font-weight: 800; text-align: center; }

.faq-list { display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
summary { padding: 18px 20px; cursor: pointer; font-weight: 800; }
details p { margin: 0; padding: 0 20px 20px; color: var(--muted); line-height: 1.65; }

.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.page-heading .page-title { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.page-heading p { max-width: 640px; color: var(--muted); line-height: 1.6; }

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 220px;
  gap: 12px;
  margin: 22px 0 28px;
}
.field { display: grid; gap: 7px; }
.field label, .field-label { font-weight: 800; font-size: .88rem; }
.field small { color: var(--muted); }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 38px 10px 12px;
  border: 1px solid #d9ccbf;
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 104px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,107,88,.12); }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-image { aspect-ratio: 4 / 3; overflow: hidden; background: #f7eee4; }
.product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 18px; }
.product-category { color: var(--accent); font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.product-card h3 { margin: 7px 0 5px; font-size: 1.05rem; }
.product-card p { min-height: 42px; margin: 0 0 15px; color: var(--muted); font-size: .87rem; line-height: 1.45; }
.product-price-row { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.price strong { display: block; font-size: 1.18rem; }
.price small { color: var(--muted); }
.product-control { flex: 0 0 auto; }
/* Once a product is in the cart its Add button becomes the stepper, so the
   card shows what you already have without a trip to /cart. */
.quantity-inline { height: 36px; background: var(--surface); }
.quantity-inline button { width: 32px; height: 34px; font-size: 1rem; }
.quantity-inline span { min-width: 26px; font-size: .9rem; }
.result-count { margin: 0 0 16px; color: var(--muted); font-size: .88rem; font-weight: 700; }

.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.cart-list { display: grid; gap: 12px; }
.cart-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb info     price"
    "thumb controls price";
  gap: 10px 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cart-thumb { grid-area: thumb; align-self: center; width: 92px; height: 80px; padding: 0; border-radius: 12px; background: var(--surface-2); object-fit: cover; display: block; }
.cart-info { grid-area: info; }
.cart-info h3 { margin: 0 0 5px; }
.cart-info p { margin: 0; color: var(--muted); font-size: .86rem; }
.cart-controls { grid-area: controls; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.quantity button { width: 34px; height: 34px; border: 0; background: white; cursor: pointer; }
.quantity span { min-width: 32px; text-align: center; font-weight: 800; }
.preference { min-height: 36px; width: auto; padding: 6px 30px 6px 10px; font-size: .84rem; }
.cart-price { grid-area: price; align-self: center; text-align: right; font-weight: 900; white-space: nowrap; }
.summary-card { position: sticky; top: 96px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.summary-card h2 { margin: 0 0 18px; font-family: Georgia, serif; }
.summary-row { display: flex; justify-content: space-between; gap: 16px; margin: 11px 0; color: var(--muted); }
.summary-row.total { padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.15rem; font-weight: 900; }
.summary-card .btn { width: 100%; margin-top: 13px; }
.notice { padding: 14px 16px; border-radius: 12px; background: #fff4d7; color: #69430c; font-size: .9rem; line-height: 1.5; }
.notice.success { background: #e4f3ea; color: #17563a; }
.notice.danger { background: #fae3e3; color: #762020; }

.auth-wrap { display: grid; min-height: 66vh; place-items: center; }
.auth-card { width: min(560px, 100%); padding: clamp(22px, 5vw, 42px); }
.auth-card h1 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 2.4rem; }
.auth-card > p { margin: 0 0 25px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.form-error { display: none; margin-top: 14px; color: var(--danger); font-weight: 700; }
.form-error.visible { display: block; }

.content-card { padding: clamp(20px, 4vw, 34px); }
.account-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
.profile-list { display: grid; gap: 12px; margin-top: 20px; }
.profile-item { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.profile-item small { display: block; color: var(--muted); }
.profile-item strong { display: block; margin-top: 4px; }
.order-list { display: grid; gap: 12px; }
.order-card { padding: 18px; }
.order-top { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.order-code { color: var(--brand); font-weight: 900; text-decoration: none; }
.status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: flex-start;
  white-space: nowrap;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .73rem;
  font-weight: 900;
}
.status.completed { color: var(--success); background: #e3f3e9; }
.status.cancelled { color: var(--danger); background: #fae5e5; }
.status.shopping, .status.ready { color: var(--warning); background: #fff0cc; }
.admin-order-section + .admin-order-section { margin-top: 32px; }
.admin-order-section > h2 { margin: 0 0 14px; }
.category-new-input { margin-top: 8px; }
/* A language switch, not a country switch: flag emoji conflate the two and
   Windows renders no flag glyphs at all. */
.language-toggle {
  min-width: 42px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
}
.language-toggle:hover { border-color: #cdbbaa; color: var(--brand); }
.order-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: var(--muted); font-size: .86rem; }

.review-list { display: grid; gap: 10px; margin: 18px 0; }
.review-item { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.review-item span { color: var(--muted); font-size: .86rem; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.checkbox-row input { width: 20px; min-height: 20px; margin-top: 1px; }
.checkbox-row label { line-height: 1.45; }

/* Admin sections used to be five identical secondary buttons, so nothing told
   you which one you were looking at. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.tab {
  padding: 11px 15px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .93rem;
  font-weight: 800;
  cursor: pointer;
}
.tab:hover { color: var(--brand); }
.tab[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--brand); }
.tabs-action { margin-left: auto; }

.admin-toolbar { display: grid; grid-template-columns: 1.3fr 180px 180px auto; gap: 10px; margin-bottom: 18px; }
.admin-toolbar[hidden] { display: none; }
.admin-list { display: grid; gap: 15px; }
.admin-order { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.admin-order-head { display: flex; justify-content: space-between; gap: 20px; }
.admin-order h3 { margin: 0; }
.admin-order-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; margin-top: 18px; }
.admin-items { margin: 0; padding-left: 20px; color: var(--muted); }
.admin-items li { margin: 7px 0; }
.admin-controls { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: end; }
.shopping-list { display: grid; gap: 8px; }
.shopping-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(210px, auto); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }

.empty-state { padding: 58px 24px; border: 1px dashed #cdbdaf; border-radius: var(--radius); text-align: center; background: rgba(255,255,255,.6); }
.empty-state h2 { margin: 0 0 8px; font-family: Georgia, serif; }
.empty-state p { margin: 0 auto 18px; max-width: 520px; color: var(--muted); }
.loading-card { padding: 45px; text-align: center; color: var(--muted); }
.loader { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.floating-cart { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); text-decoration: none; opacity: .92; transition: transform .18s ease, opacity .18s ease; }
.floating-cart[hidden] { display: none; }
.floating-cart:hover, .floating-cart.has-items { transform: translateY(-2px); opacity: 1; }
.floating-cart-icon { font-size: 1.15rem; }
.floating-cart-message { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; }
.floating-cart .cart-badge { position: static; }
.account-header-actions { margin-top: 12px; }
.account-divider { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.danger-copy { color: var(--danger); line-height: 1.5; }

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 100;
  max-width: min(390px, calc(100vw - 44px));
  padding: 14px 17px;
  border-radius: 12px;
  background: #2f2925;
  color: white;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, -14px);
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.order-card-link { display: block; color: inherit; text-decoration: none; }
.order-card-link:hover { border-color: var(--brand); }
.admin-product-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.admin-product-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.account-actions { margin-top: 22px; }

/* Spacing utilities, replacing the inline style attributes that used to be
   sprinkled through the render functions. */
.field-spaced { margin-top: 15px; }
.form-grid-spaced { margin-top: 20px; }
.section-gap { margin-top: 32px; }
.button-row-center { justify-content: center; }
.button-row-end { align-self: end; }
.button-row-spaced { margin-top: 24px; }
.content-card-spaced { margin-top: 18px; }
.stack-gap { height: 18px; }
.order-title { margin: 0; font-family: Georgia, serif; font-size: 2.4rem; letter-spacing: -.03em; }
.shopping-head { border-bottom-width: 2px; }
.confirmation-block {
  padding: 16px;
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  background: var(--accent-soft);
}
.confirmation-block[hidden] { display: none; }
.confirmation-block > .field-label { margin: 0 0 12px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 390px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .info-grid, .step-grid { grid-template-columns: 1fr; }
  .cart-layout, .checkout-layout, .account-grid { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .admin-order-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { min-height: 68px; padding-inline: 14px; }
  .menu-toggle { display: grid; }
  /* The tagline wrapped to two lines and pushed the header to three rows. */
  .brand small { display: none; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 1rem; }
  .header-actions { gap: 2px; }
  .header-actions > #account-link { max-width: 88px; overflow: hidden; padding: 10px 4px; text-overflow: ellipsis; white-space: nowrap; }
  .main-nav {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: 70px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    z-index: 61;
  }
  .main-nav.open { display: flex; }
  .main-nav a { text-align: center; }
  .nav-scrim { display: none; position: fixed; inset: 68px 0 0; z-index: 49; border: 0; background: rgba(37, 32, 29, .22); }
  .nav-scrim.visible { display: block; }
  .page-shell { width: min(100% - 24px, 1180px); padding-top: 30px; }
  .hero { padding-top: 0; }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  .hero-visual { min-height: 335px; }
  .hero-bag { inset: 30px 20px 65px; }
  .section { margin-top: 60px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .toolbar, .admin-toolbar { grid-template-columns: 1fr; }

  /* The thumbnail used to sit vertically centred beside a very tall stack,
     leaving a dead column of whitespace, and the price fell away from the row
     it belonged to. Title and price now share the top line, and the controls
     sit underneath across the full width. */
  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info price"
      "controls controls controls";
    align-items: start;
    gap: 10px 12px;
    padding: 12px;
  }
  .cart-thumb { grid-area: thumb; width: 64px; height: 64px; }
  .cart-info { grid-area: info; }
  .cart-info h3 { font-size: 1rem; }
  .cart-info p { margin: 0; }
  .cart-price { grid-area: price; text-align: right; white-space: nowrap; }
  .cart-controls { grid-area: controls; gap: 8px; }
  .cart-controls .preference { flex: 1 1 150px; min-width: 0; }
  .cart-controls .btn-ghost { margin-left: auto; }

  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .btn { width: 100%; }
  .admin-controls { grid-template-columns: 1fr; }
  .shopping-row { grid-template-columns: 1fr 65px; }
  .shopping-row span:last-child { grid-column: 1 / -1; }
  .floating-cart { display: none; }
}

@media (max-width: 460px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card p { min-height: auto; }
  .hero-actions .btn { width: 100%; }
  .page-heading { display: block; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .site-header, .admin-toolbar, .button-row, .toast { display: none !important; }
  body, .page-shell { background: white; width: 100%; margin: 0; padding: 0; }
  .content-card, .admin-order { box-shadow: none; break-inside: avoid; }
}