/* Fraunces carries the brand voice. Self-hosted (124 KB total, variable
   500–900), latin-ext included so Czech and Turkish diacritics render in the
   display face instead of falling back mid-word. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* color roles */
  --ink: #25201d;
  --muted: #716a64;
  --paper: #fffaf3;
  --surface: #ffffff;
  --surface-2: #f5ede3;
  --brand: #e95113;
  --brand-dark: #b6320a;
  --accent: #52772b;
  --accent-soft: #dceee8;
  --line: #e7dcd0;
  --warning: #9a6211;
  --danger: #a62929;
  --success: #24724f;
  --shadow: 0 18px 55px rgba(63, 45, 31, 0.11);

  /* shape */
  --radius: 18px;
  --radius-sm: 11px;

  /* type: one display voice, one UI voice. Fraunces sits tighter than the old
     Georgia fallback, so display tracking is gentler than before. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display-weight: 620;
  --track-display: -0.022em;
  --track-display-sm: -0.012em;

  /* spacing scale: every new margin/padding derives from these steps. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 88px;

  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

h1, h2, .page-title, .order-title {
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

* { 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; }
  .product-card:hover .product-image img { transform: none; }
  .skeleton { animation: none; background: var(--surface-2); }
}

.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 img { width: 42px; height: 42px; object-fit: contain; }
.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: none; position: absolute; right: clamp(18px, 4vw, 64px); top: 70px; flex-direction: column; align-items: stretch; min-width: 210px; 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; }
.nav-scrim { display: none; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.main-nav #account-link { padding: 10px 13px; color: var(--muted); font-size: .93rem; font-weight: 700; text-decoration: none; }
.main-nav #account-link:hover { color: var(--brand); background: #fff0e8; }
.account-menu { position: relative; }
.account-menu summary { padding: 10px 13px; border-radius: 999px; color: var(--muted); font-size: .93rem; font-weight: 700; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu-pop { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 185px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.account-menu-pop a, .account-menu-pop button { padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 700 .88rem var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-pop a:hover, .account-menu-pop button:hover { background: var(--surface-2); color: var(--brand); }
.account-menu.signed-out .account-menu-pop { display: none; }

/* 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; }
.badge-pop { animation: badge-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes badge-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.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: grid;
  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: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(2.5rem, 7vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: var(--track-display);
}
.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: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.7rem, 4vw, 2.7rem); letter-spacing: var(--track-display-sm); }
.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;
}
.toolbar-single { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-4); }

/* Category chips: every option visible, one tap to filter, and the row
   scrolls sideways on phones instead of stacking. */
.chip-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: #cdbbaa; color: var(--ink); }
.chip[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.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; transition: transform .35s ease; }
.product-card:hover .product-image img { transform: scale(1.045); }
.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: var(--font-display); font-weight: var(--display-weight); }
.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: var(--font-display); font-weight: var(--display-weight); font-size: 2.3rem; letter-spacing: var(--track-display-sm); }
.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); }
.status-pills { margin: 0; padding-bottom: 0; }
.status-pills .chip { padding-block: 8px; }
.cancel-warning { position: relative; display: inline-grid; width: 18px; height: 18px; margin-left: 6px; place-items: center; border: 0; border-radius: 50%; background: #fff0cc; color: var(--warning); font-size: .75rem; font-weight: 900; cursor: help; vertical-align: text-bottom; }
.cancel-warning span { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: min(250px, 70vw); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font: 700 .8rem/1.35 var(--font-ui); text-align: left; opacity: 0; pointer-events: none; transform: translateY(4px); transition: .16s ease; }
.cancel-warning:hover span, .cancel-warning:focus span { opacity: 1; transform: translateY(0); }
.shopping-qty { display: flex; align-items: center; min-height: 34px; }
.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: var(--font-display); font-weight: var(--display-weight); }
.empty-state p { margin: 0 auto 18px; max-width: 520px; color: var(--muted); }
.loading-card { padding: 45px; text-align: center; color: var(--muted); }

/* Shimmer skeletons stand in for content while it loads. */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(100deg, var(--surface-2) 40%, #efe4d6 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-title { width: min(340px, 70%); height: 42px; margin-bottom: var(--space-4); }
.skeleton-line { height: 16px; margin-bottom: var(--space-3); }
.skeleton-w40 { width: 40%; }
.skeleton-w60 { width: 60%; }
.skeleton-w80 { width: 80%; }
.skeleton-card {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.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: calc(18px + env(safe-area-inset-bottom, 0px)); 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-wrap { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.floating-cart-icon-wrap .cart-badge { position: absolute; top: -9px; right: -9px; margin: 0; border: 2px solid var(--surface); }
.floating-cart-message { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; }
.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: 1000;
  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: var(--font-display); font-weight: var(--display-weight); font-size: 2.3rem; letter-spacing: var(--track-display-sm); }
.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; }
  /* 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; }
  .main-nav {
    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 a, .main-nav #account-link { text-align: center; }
  .main-nav .language-toggle { width: 100%; }
  .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); }
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  margin-top: 88px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px));
}
.footer-inner {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.footer-brand { display: grid; gap: 3px; }
.footer-brand strong { font-size: 1.05rem; letter-spacing: -0.02em; }
.footer-brand span { color: var(--muted); font-size: .86rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-nav a { padding: 6px 0; color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; }
.footer-nav a:hover { color: var(--brand); }
.footer-facts { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.footer-copy { margin: 0; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------- busy submit state */
.btn-busy { position: relative; color: transparent !important; }
.btn-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-secondary.btn-busy::after { border-color: var(--line); border-top-color: var(--muted); }

/* -------------------------------------------------------------- order page */
.order-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* Progress timeline: dots joined by a line; completed segments fill in. */
.timeline {
  display: flex;
  margin: var(--space-5) 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.timeline-step {
  position: relative;
  flex: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.timeline-step::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--line);
}
.timeline-step:first-child::before { display: none; }
.timeline-step.is-done::before, .timeline-step.is-current::before { background: var(--accent); }
.timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: #fff;
}
.timeline-step.is-done .timeline-dot { border-color: var(--accent); background: var(--accent); }
.timeline-step.is-current .timeline-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline-label {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-step.is-current .timeline-label { color: var(--accent); font-weight: 800; }
.timeline-step.is-done .timeline-label { color: var(--ink); }
.timeline-cancelled { margin: var(--space-5) 0 var(--space-3); }

/* ------------------------------------------------- sticky mobile action bar */
.sticky-cta { display: none; }

@media (max-width: 720px) {
  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
  }
  .sticky-cta-total { display: grid; line-height: 1.2; }
  .sticky-cta-total small { color: var(--muted); font-size: .72rem; font-weight: 700; }
  .sticky-cta-total strong { font-size: 1.12rem; font-weight: 900; }
  .sticky-cta .btn { flex: 0 0 auto; }
  /* Keep page content and the toast clear of the bar. */
  body:has(.sticky-cta) .page-shell { padding-bottom: 130px; }
  body:has(.sticky-cta) .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

  /* The toast lives at the bottom on phones: the top slot collides with the
     sticky header, and the bottom is where the thumb already is. */
  .toast {
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 14px);
  }
  .toast.show { transform: translate(-50%, 0); }

  .site-footer { margin-top: 60px; padding-block: 30px; }

  /* At 2.4rem the order code broke across three lines. */
  .order-title { font-size: 1.55rem; letter-spacing: 0; }
}

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

/* Account management keeps the information dense and table-led, while the
   editing drawer preserves the administrator's filters and scroll position. */
.account-manager { padding: 0; overflow: visible; }
.account-table-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, .7fr) auto;
  gap: 12px;
  align-items: end;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}
.account-view-actions { grid-column: 1 / -1; }
.column-picker { position: relative; align-self: end; }
.column-picker summary { list-style: none; cursor: pointer; }
.column-picker summary::-webkit-details-marker { display: none; }
.column-picker-trigger {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1;
}
.column-picker-trigger:hover { border-color: #cdbbaa; color: var(--brand); }
.column-picker-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.column-picker-menu {
  position: absolute;
  right: 0;
  z-index: 12;
  display: grid;
  min-width: 220px;
  max-height: 360px;
  overflow: auto;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.column-picker-menu label { display: flex; gap: 9px; align-items: center; padding: 8px 9px; border-radius: 7px; font-size: .84rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
.column-picker-menu label:hover { background: var(--surface-2); }
.column-picker-menu input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.account-results { padding: 14px 22px; color: var(--muted); }
.account-table-wrap { overflow: auto; border-block: 1px solid var(--line); }
.account-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.account-table th, .account-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.account-table th { position: sticky; top: 0; z-index: 2; min-width: 145px; background: var(--surface-2); }
.account-table th > button { display: block; width: 100%; margin-bottom: 8px; padding: 0; border: 0; background: transparent; color: var(--ink); font-weight: 850; text-align: left; cursor: pointer; }
.account-table th input, .account-table th select { width: 100%; min-width: 120px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .82rem; }
.account-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.account-table .account-actions-head, .account-table .account-actions { position: sticky; right: 0; z-index: 3; min-width: 94px; background: var(--surface); box-shadow: -8px 0 14px rgba(37, 32, 29, .05); }
.account-table .account-actions-head { background: var(--surface-2); }
.account-empty { padding: 40px !important; color: var(--muted); text-align: center !important; }
.account-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 18px; }

.drawer-shell { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1fr minmax(520px, 720px); }
.drawer-scrim { border: 0; background: rgba(37, 32, 29, .5); cursor: pointer; }
.account-drawer { height: 100vh; overflow: auto; background: var(--paper); box-shadow: -24px 0 70px rgba(37, 32, 29, .24); animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: .5; } }
.drawer-head { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(14px); }
.drawer-head h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: 2rem; }
.drawer-head p { margin: 0; color: var(--muted); }
.drawer-close { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.drawer-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 14px 20px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.drawer-tabs .tab { flex: 0 0 auto; }
.drawer-body { padding: 24px; }
.drawer-body [data-drawer-panel][hidden] { display: none; }
.drawer-block, .danger-zone { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.drawer-block h3, .danger-zone h3 { margin-top: 0; }
.drawer-block > .btn, .danger-zone > .btn { margin-top: 18px; }
.btn-danger { background: var(--danger); color: #fff; }
.account-order-editor { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.account-order-editor > summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px; cursor: pointer; }
.account-order-editor > summary span { display: grid; gap: 4px; }
.account-order-editor > summary small { color: var(--muted); }
.account-order-editor form { padding: 0 18px 18px; }
.order-item-edit-list { display: grid; gap: 10px; }
.order-item-edit { display: grid; grid-template-columns: 1fr 100px minmax(170px, .7fr); gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.audit-list { display: grid; gap: 10px; }
.audit-list article { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.audit-list small { color: var(--muted); }

@media (max-width: 820px) {
  .account-table-toolbar { grid-template-columns: 1fr; }
  .account-view-actions { grid-column: auto; }
  .drawer-shell { grid-template-columns: 1fr; }
  .drawer-scrim { display: none; }
  .account-drawer { width: 100%; }
  .order-item-edit { grid-template-columns: 1fr; }
}