@font-face {
  font-family: Estedad;
  src: url("Estedad-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Vazir;
  src: url("Vazir-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --flour: #f5e8d0;
  --paper: #fcf9f2;
  --ink: #4a2920;
  --brown: #4a2920;
  --berry: #8b4f3d;
  --gold: #c9a66b;
  --sage: #5e6b45;
  --line: #e8d7be;
  --muted: #68584f;
  --body-copy: #533e36;
  --measure: 72rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fbf7ee;
  color: var(--ink);
  font-family: Vazir, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms var(--ease-out), box-shadow 150ms ease;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--berry);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  top: -5rem;
  right: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: white;
}
.skip-link:focus { top: 1rem; }

.site-header-wrapper {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(232, 215, 190, 0.5);
  background: rgba(251, 247, 238, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.75rem 2rem;
  min-height: 4.5rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  transition: opacity 150ms ease;
}
.wordmark:hover { opacity: 0.85; }
.wordmark-dot { color: var(--berry); }

/* Desktop pill navigation */
.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(232, 215, 190, 0.7);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
}
.nav-pill-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-pill-item:hover {
  background: var(--flour);
  color: var(--ink);
}
.nav-pill-item.is-active {
  color: var(--ink);
  font-weight: 600;
}
.nav-pill-item .active-dot {
  position: absolute;
  bottom: 0.25rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--berry);
}

/* Header action group */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-action-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--body-copy);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-action-ghost:hover {
  background: var(--flour);
  color: var(--ink);
}
.nav-action-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.25rem;
  border: 1px solid var(--brown);
  border-radius: 9999px;
  background: var(--brown);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(74, 41, 32, 0.12);
  transition: background-color 150ms ease, transform 150ms var(--ease-out), box-shadow 150ms ease;
}
.nav-action-primary:hover {
  background: var(--berry);
  border-color: var(--berry);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 41, 32, 0.18);
}
.basket-count {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.3rem;
  place-items: center;
  border-radius: 9999px;
  background: var(--flour);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
}
.menu-toggle { display: none; }

/* Floating Mobile Bottom Navigation (< 800px) */
.mobile-bottom-nav {
  display: none;
}

/* Mobile Sheet / Drawer */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(42, 24, 18, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.nav-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nav-drawer {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: 18rem;
  max-width: 82vw;
  padding: 1.5rem 1.25rem;
  background: var(--paper);
  border-inline-end: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 260ms var(--ease-out);
  visibility: hidden;
}
.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.nav-drawer-close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-drawer-close:hover {
  background: var(--flour);
  color: var(--ink);
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nav-drawer-item {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--body-copy);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-drawer-item:hover {
  background: var(--flour);
  color: var(--ink);
}
.nav-drawer-item.is-active {
  background: var(--flour);
  color: var(--ink);
  font-weight: 700;
}
.nav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.nav-drawer-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  background: var(--brown);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-drawer-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.messages { max-width: var(--measure); margin: 0.75rem auto; padding: 0 2rem; }
.message {
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  border-right: 3px solid var(--sage);
  background: var(--flour);
  color: var(--ink);
  font-size: 0.9rem;
}
.message.error { border-color: var(--berry); }

.hero-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 4rem;
  max-width: var(--measure);
  min-height: 34rem;
  margin: auto;
  padding: 4rem 2rem 3.5rem;
}
.hero-copy { padding-left: 1rem; }
.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
}
.hero-copy h1, .page-intro h1, .detail-copy h1, .order-result h1 {
  margin: 0 0 1rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}
.hero-copy h1 em, .page-intro h1 em, .story-copy h2 em, .detail-copy h1 em, .order-result h1 em,
.contact-aside h2 em {
  color: var(--berry);
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
}
.hero-intro {
  max-width: 26rem;
  margin: 0 0 1.8rem;
  color: var(--body-copy);
  font-size: 1.05rem;
  line-height: 1.8;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--berry);
  color: var(--berry);
  font-size: 0.92rem;
  font-weight: 500;
}
.arrow-link span { display: inline-block; transition: transform 150ms var(--ease-out); }
.arrow-link:hover span { transform: translateX(-3px); }
.hero-photo {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  gap: 0.6rem;
  width: 100%;
  aspect-ratio: 1.6 / 1;
  margin: 0;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1.6 / 1;
  object-fit: cover;
  object-position: center bottom;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.hero-photo figcaption { color: var(--muted); font-size: 0.82rem; }

.section-shell { max-width: var(--measure); margin: 0 auto; padding: 5rem 2rem; }
.today { border-top: 1px solid var(--line); }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.section-heading h2, .story-copy h2 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem 1.3rem;
}
.product-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  cursor: pointer;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.product-item:hover {
  border-color: #d6cbba;
  box-shadow: 0 8px 24px rgba(74, 41, 32, 0.08);
  transform: translateY(-2px);
}
.product-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
}
.product-item .product-footer,
.product-item .product-footer .add-form,
.product-item .small-button,
.product-item .product-labels {
  position: relative;
  z-index: 2;
}
.product-photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: #f4ece1;
}
.product-photo img, .detail-photo img, .basket-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-photo img { transition: transform 400ms var(--ease-out); }
.product-item:hover .product-photo img { transform: scale(1.03); }
.product-photo.is-empty { background: #f4ece1; }
.photo-pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.product-stamp {
  position: absolute;
  top: 1.2rem;
  inset-inline-end: 1.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  color: var(--berry);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 0.75rem;
}
.product-heading h3 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.product-heading h3 a:hover { color: var(--berry); }
.product-desc {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.product-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 0.8rem;
}
.product-row h3 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.product-row h3 a:hover { color: var(--berry); }
.product-row p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.82rem; }
.product-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.category-label, .diet-label {
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}
.category-label {
  background: #ede0c8;
  color: #3d221a;
  border: 1px solid #dfcfb4;
}
.diet-label {
  border: 1px solid #c0c8ad;
  color: #3d4a25;
  background: rgba(94, 107, 69, 0.08);
}
.detail-labels { margin: -0.25rem 0 1rem; }
.product-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding-top: 0.6rem;
}
.product-price-wrap { min-width: 0; }
.product-price-wrap .price-container { display: flex; align-items: flex-start; }
.product-price-wrap .price-primary { white-space: nowrap; }
.product-price-wrap .price-discount-row { margin-top: 0.125rem; gap: 0.5rem; }
.product-price-wrap .price-sm .price-amount { font-size: 1rem; }
.product-price-wrap .price-original { font-size: 0.75rem; }
.product-item .add-form { width: 100%; }
.product-item .add-form .small-button {
  width: 100%;
  min-height: 2rem;
  padding-block: 0.15rem;
  white-space: nowrap;
}
.price {
  color: var(--berry);
  font-size: 0.98rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price small, .detail-price small { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.add-form { margin: 0; }
.small-button, .plain-button, .remove-button {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--brown);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 180ms ease;
}
.small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
}
.small-button .btn-icon {
  color: var(--berry);
  font-size: 0.95rem;
  font-weight: 700;
  transition: color 180ms ease;
}
.small-button:hover {
  background: var(--brown);
  border-color: var(--brown);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74, 41, 32, 0.16);
  transform: translateY(-1px);
}
.small-button:hover .btn-icon, .small-button:hover span {
  color: #fff;
}
.plain-button:hover { border-color: var(--muted); color: var(--ink); }
.remove-button:hover { border-color: var(--berry); color: var(--berry); }
.empty-menu {
  padding: 3.5rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
  text-align: center;
}
.empty-menu p {
  margin: 0;
  color: var(--ink);
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.empty-menu span { font-size: 0.88rem; }
.empty-menu .text-link { display: table; margin: 1rem auto 0; }

.story {
  display: block;
  max-width: none;
  padding-inline: max(calc((100vw - var(--measure) + 4rem) / 2), 2rem);
  background: var(--flour);
}
.story-copy { max-width: 40rem; margin-inline: auto; text-align: center; }
.story-copy h2 { margin-bottom: 1rem; font-size: 2.4rem; }
.story-copy p { max-width: 34rem; margin: 0 auto 1.5rem; color: var(--body-copy); line-height: 1.8; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  padding: 3rem max(calc((100vw - var(--measure) + 4rem) / 2), 2rem) 1.5rem;
  background: #4a2920;
  color: #f5e8d0;
}
.footer-mark {
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #f5e8d0;
}
.site-footer p { margin: 0.3rem 0; color: #d6be9a; font-size: 0.86rem; }
.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  font-size: 0.84rem;
}
.footer-links a { color: #f5e8d0; }
.footer-links a:hover { color: var(--gold); }
.site-footer small {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 166, 107, 0.2);
  color: #bfa98e;
  font-size: 0.72rem;
}

.page-intro { max-width: var(--measure); margin: auto; padding: 4rem 2rem 1rem; }
.page-intro h1 { margin-bottom: 0.4rem; }
.page-intro > p:last-child { margin: 0; color: var(--muted); }
.page-intro.compact { padding-bottom: 0; }
.menu-list { padding-top: 1.5rem; }

/* ==========================================================================
   Menu Sidebar + Drawer Filter Layout (Digikala-style)
   ========================================================================== */
.menu-section { padding-top: 1.5rem; }

.menu-mobile-bar {
  display: none;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.filter-drawer-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.65rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font-family: Estedad, Vazir, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.filter-drawer-trigger:hover { border-color: var(--berry); color: var(--berry); }
.filter-active-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--berry); display: inline-block;
}

/* Desktop layout: sidebar + grid */
.menu-layout {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: 1.8rem;
  align-items: start;
}
.menu-sidebar {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.85rem;
  border: 1px solid rgba(232, 215, 190, 0.3);
  border-radius: var(--radius-lg);
  background: var(--paper);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar-search { margin-bottom: 0.75rem; }
.menu-main { min-width: 0; }

/* Filter group */
.filter-group {
  border: 0;
  margin: 0;
  padding: 0.65rem 0 0.5rem;
  border-top: 1px solid rgba(232, 215, 190, 0.25);
}
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group-title {
  display: block;
  margin-bottom: 0.45rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--body-copy);
}
.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.filter-list-scrollable { max-height: 12rem; overflow-y: auto; scrollbar-width: thin; }
.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: #634f46;
  transition: background-color 120ms ease;
}
.filter-option:hover { background: var(--flour); }
.filter-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  transition: border-color 120ms ease;
}
.filter-option input[type="radio"]:checked {
  border-color: var(--berry);
  background: var(--berry);
  box-shadow: inset 0 0 0 2.5px var(--paper);
}
.filter-option-text { flex: 1; }
.filter-option-count {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--flour);
  padding: 0.05rem 0.4rem;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.filter-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  color: var(--berry);
  font-size: 0.85rem;
  font-weight: 500;
}
.filter-reset-btn:hover { text-decoration: underline; }
.filter-reset-btn[hidden] { display: none; }

/* ── Mobile Filter Drawer ── */
.filter-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.45);
}
.filter-drawer-backdrop[hidden] { display: none; }
.filter-drawer-backdrop.is-visible { display: block; }

.filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  background: var(--paper);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.filter-drawer[aria-hidden="false"] { transform: translateY(0); }

.filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.filter-drawer-header h2 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}
.filter-drawer-close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--flour);
  color: var(--ink);
  cursor: pointer;
}
.filter-drawer-close:hover { border-color: var(--berry); color: var(--berry); }

.filter-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.25rem 1rem;
  overscroll-behavior: contain;
}
.filter-drawer-body .filter-group { padding: 0.75rem 0 0.5rem; }
.filter-drawer-body .filter-list-scrollable { max-height: none; overflow: visible; }

.filter-drawer-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper);
}
.filter-drawer-reset {
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.filter-drawer-apply { flex: 1; }
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: start;
  gap: 3.5rem;
  padding: 3rem 0;
  min-height: 32rem;
}
.detail-photo {
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #f0ebe4;
  color: var(--muted);
  box-shadow: 0 8px 24px rgba(74, 41, 32, 0.08);
  border: 1px solid var(--line);
}
.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.5rem 0;
}
.detail-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.detail-copy h1 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  width: fit-content;
  transition: color 150ms ease;
}
.back-link:hover { color: var(--berry); }
.detail-labels {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.detail-description, .ingredients {
  margin: 0;
  max-width: 34rem;
  color: var(--body-copy);
  line-height: 1.85;
  font-size: 0.95rem;
}
.ingredients {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--flour);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}
.detail-weights {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--line);
}
.detail-weights-title {
  font-family: Estedad, Vazir, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--body-copy);
}
.weight-pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.weight-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 48px;
  min-width: 90px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: all 180ms ease;
  font-family: Estedad, Vazir, sans-serif;
}
.weight-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.weight-pill:hover {
  border-color: var(--berry);
  background: var(--flour);
}
.weight-pill.is-active,
.weight-pill:has(input[type="radio"]:checked) {
  border-color: var(--berry);
  background: rgba(139, 79, 61, 0.09);
  color: var(--berry);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--berry);
}
.weight-pill-name {
  font-size: 0.88rem;
  font-weight: 600;
}
.weight-pill-price {
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.weight-pill.is-active .weight-pill-price,
.weight-pill:has(input[type="radio"]:checked) .weight-pill-price {
  color: var(--berry);
}
.price-start-badge {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.1rem;
}
.basket-item-weight {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.82rem;
  color: var(--body-copy);
}
.basket-item-weight strong {
  color: var(--berry);
  font-weight: 600;
}
.detail-purchase {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.detail-price-wrap {
  display: flex;
  align-items: center;
}
.detail-form {
  margin: 0;
}
.detail-add-btn {
  min-height: 3rem;
  padding: 0 2rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.button-primary {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--berry);
  color: #fcf9f2;
  cursor: pointer;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(74, 41, 32, 0.18);
}
.button-primary:hover {
  background: var(--brown);
  box-shadow: 0 4px 14px rgba(74, 41, 32, 0.28);
}
.button-primary:active,
.small-button:active,
.plain-button:active,
.remove-button:active,
.category-pill:active,
.category-scroll:active,
.quantity-step:active {
  transform: scale(0.97);
}

/* Stepper styles */
.stepper-shell {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  padding: 0 2rem;
}
.stepper-nav { width: 100%; max-width: 44rem; margin: 0 auto; }
.stepper-list {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stepper-item {
  display: flex;
  align-items: center;
  flex: 1;
}
.stepper-item.is-last { flex: none; }
.stepper-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.stepper-circle {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-family: Estedad, Vazir, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: all 180ms var(--ease-out);
  user-select: none;
}
.stepper-item.is-current .stepper-circle {
  border-color: var(--berry);
  background: var(--paper);
  color: var(--berry);
  box-shadow: 0 0 0 4px rgba(139, 79, 61, 0.2);
}
.stepper-item.is-completed .stepper-circle {
  border-color: var(--berry);
  background: var(--berry);
  color: #fcf9f2;
}
a.stepper-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(74, 41, 32, 0.25);
}
.stepper-check {
  width: 1.25rem;
  height: 1.25rem;
}
.stepper-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.stepper-item.is-current .stepper-title {
  color: var(--ink);
  font-weight: 700;
}
.stepper-item.is-completed .stepper-title {
  color: var(--ink);
}
.stepper-line {
  flex: 1;
  height: 2px;
  margin-inline: 0.75rem;
  margin-bottom: 1.4rem;
  background: var(--line);
  transition: background-color 180ms ease;
}
.stepper-item.is-completed .stepper-line {
  background: var(--berry);
}

@media (max-width: 520px) {
  .stepper-shell { padding: 0 1rem; margin-top: 1rem; }
  .stepper-circle { width: 2.1rem; height: 2.1rem; font-size: 0.82rem; }
  .stepper-title { font-size: 0.78rem; }
  .stepper-line { margin-inline: 0.35rem; }
}

@media (prefers-color-scheme: dark) {
  .stepper-item.is-current .stepper-circle {
    box-shadow: 0 0 0 4px rgba(201, 166, 107, 0.25);
  }
}

.basket-layout, .checkout-layout { display: grid; grid-template-columns: 1.4fr 0.8fr; align-items: start; gap: 3.5rem; padding-top: 2rem; }
.basket-item {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.basket-thumb {
  display: grid;
  width: 6.5rem;
  height: 6.5rem;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--flour);
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
}
.basket-item-info h2 { margin: 0; font-family: Estedad, Vazir, sans-serif; font-size: 1.05rem; }
.basket-item-info p { margin: 0.2rem 0; color: var(--muted); font-size: 0.84rem; }
.quantity-form { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.quantity-form input {
  width: 3.8rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  text-align: center;
}
.remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.6rem;
  color: var(--berry);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: all 180ms ease;
}
.remove-button:hover {
  background: rgba(139, 79, 61, 0.08);
  border-color: rgba(139, 79, 61, 0.2);
  color: var(--berry);
  text-decoration: none;
}
.basket-line-total { font-family: Estedad, Vazir, sans-serif; font-size: 0.95rem; font-weight: 700; white-space: nowrap; color: var(--ink); }
.basket-summary, .checkout-summary {
  position: sticky;
  top: 1rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.basket-summary h2, .checkout-summary h2 {
  margin: 0 0 1.2rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
}
.basket-summary > p, .checkout-summary > p, .summary-total { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.basket-summary small, .checkout-summary > small { display: block; margin: 1rem 0; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.basket-summary .button-primary { width: 100%; margin-top: 0.8rem; }
.checkout-form { display: grid; gap: 1.2rem; }
.form-field > label { display: block; margin-bottom: 0.35rem; font-size: 0.88rem; font-weight: 500; }
.form-field input:not([type="radio"]):not([type="checkbox"]), .form-field textarea {
  display: block;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.form-field input:not([type="radio"]):focus, .form-field textarea:focus {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.1);
}
.form-field ul {
  display: flex;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}
.form-field ul li {
  flex: 1;
}
.form-field ul label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  user-select: none;
}
.form-field ul label:hover {
  border-color: var(--berry);
  background: var(--flour);
}
.form-field ul input[type="radio"] {
  accent-color: var(--berry);
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  cursor: pointer;
}
.form-field ul label:has(input[type="radio"]:checked) {
  border-color: var(--berry);
  background: rgba(139, 79, 61, 0.08);
  color: var(--berry);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--berry);
}
.has-error input, .has-error textarea { border-color: var(--berry); }
.field-error { color: var(--berry); font-size: 0.84rem; font-weight: 500; }
.secure-note { margin: 0; color: var(--muted); font-size: 0.84rem; }
.summary-total {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}
.order-result { min-height: 50vh; padding-top: 6rem; text-align: center; }
.order-result h1 { font-size: 2.8rem; }
.order-result > p:not(.eyebrow) { max-width: 34rem; margin-inline: auto; color: var(--body-copy); }
.order-ref { font-size: 0.88rem; font-weight: 600; }

.about-intro { padding-bottom: 2.5rem; }
.about-intro h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.about-intro > p:last-child { max-width: 36rem; line-height: 1.8; }
.about-approach { max-width: none; background: var(--flour); }
.about-copy { max-width: 48rem; margin-inline: auto; }
.about-copy h2 { margin: 0 0 1rem; font-size: 2.4rem; line-height: 1.25; }
.about-copy > p:last-child { color: var(--body-copy); line-height: 1.8; }
.about-practice { max-width: 48rem; }
.about-practice h2 { max-width: 32rem; margin: 0 0 0.8rem; font-size: 1.8rem; line-height: 1.3; }
.about-practice p { max-width: 38rem; margin: 0 0 1.2rem; color: var(--body-copy); }

.contact-intro { padding-bottom: 1.5rem; }
.contact-intro h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.contact-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: 4rem; padding-top: 1.5rem; }
.contact-aside { max-width: 24rem; }
.contact-aside h2 { margin: 0 0 1rem; font-size: 2.2rem; line-height: 1.25; }
.contact-aside > p:not(.eyebrow) { color: var(--body-copy); }
.contact-aside-note {
  display: flex;
  align-items: start;
  gap: 0.8rem;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.contact-aside-note p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.contact-form-wrap {
  min-height: 24rem;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.contact-form { display: grid; gap: 1.1rem; }
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form .button-primary { justify-self: start; gap: 0.6rem; }
.contact-form .button-primary span { display: inline-block; transition: transform 150ms var(--ease-out); }
.contact-form .button-primary:hover span { transform: translateX(-4px); }
.contact-privacy { color: var(--muted); font-size: 0.76rem; }
.contact-success { display: grid; min-height: 20rem; align-content: center; justify-items: start; }
.success-check { width: 3rem; height: 3rem; margin-bottom: 1rem; overflow: visible; }
.success-circle { fill: none; stroke: var(--sage); stroke-width: 2; transform-origin: center; animation: success-ring 420ms var(--ease-out) both; }
.success-tick { fill: none; stroke: var(--berry); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: success-draw 350ms 180ms var(--ease-out) forwards; }
.contact-success h2 { margin: 0; font-family: Estedad, Vazir, sans-serif; font-size: 1.5rem; }
.contact-success p { margin: 0.3rem 0 1.2rem; color: var(--body-copy); }
@keyframes success-ring { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@keyframes success-draw { to { stroke-dashoffset: 0; } }

.account-intro { padding-bottom: 0.8rem; }
.account-intro h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.account-intro bdi { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.account-shell { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: 3.5rem; padding-top: 1.5rem; }
.account-panel {
  width: min(100%, 32rem);
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.account-panel-info h2 { margin: 0 0 0.5rem; font-family: Estedad, Vazir, sans-serif; font-size: 1.2rem; }
.account-panel-info p { margin: 0 0 1.2rem; color: var(--body-copy); }
.account-panel-info .account-admin-link { margin: 1rem 0 .25rem; }
.account-form { display: grid; gap: 1rem; }
.account-form > label { margin-bottom: -0.65rem; font-size: 0.9rem; font-weight: 500; }
.account-form > .button-primary { justify-self: start; }
.account-hint { color: var(--muted); font-size: 0.78rem; }
.otp-code {
  width: min(100%, 18rem) !important;
  direction: ltr;
  font-size: 1.2rem;
  text-align: center;
}
.otp-code[type="hidden"], .otp-boxes[hidden] { display: none !important; }

/* ── the goo's defs hold nothing you can see ──────────────── */
.liq-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cow-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ══ One-time code ═════════════════════════════════════════ */
.otp {
  position: relative;
  font-family: var(--font-ui, Estedad, Vazir, sans-serif);
  display: grid;
  place-items: center;
}

.otp-row {
  position: relative;
}

.otp-goo {
  position: absolute;
  inset: 0;
}

.otp-cell {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--fill-slab, var(--card, var(--paper)));
}

.otp-slot {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.otp-digit {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fill-on, var(--ink));
  animation: otp-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: color 160ms ease;
}

.otp[data-phase="no"] .otp-digit { color: #e5484d; }

.otp-caret {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  background: var(--fill-on, var(--ink));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.otp-caret[data-on="true"] {
  opacity: 1;
  animation: otp-breathe 1.1s ease-in-out infinite alternate;
}

.otp-ok {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fill-on, var(--ink));
  pointer-events: none;
}

.otp-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  caret-color: transparent;
  cursor: text;
}

.otp[data-phase="ok"] .otp-field { cursor: pointer; }

/* ── OTP Boxes (Interactive Input Slots) ── */
.otp-boxes {
  position: relative;
  display: flex;
  width: min(100%, 20rem);
  gap: .5rem;
  margin-block: .45rem .2rem;
  justify-content: center;
}

.form-field .otp-boxes input {
  width: 0;
  min-width: 0;
  max-width: 2.75rem;
  height: 3.1rem;
  flex: 1 1 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  caret-color: transparent;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.form-field .otp-boxes input:focus {
  outline: none;
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(139, 79, 61, 0.15);
}

.form-field .otp-boxes input:focus-visible {
  border-color: var(--berry);
  outline: 2px solid var(--berry);
  outline-offset: 2px;
}

.form-field .otp-boxes input[data-filled="true"] {
  background: var(--flour);
}

/* Digit entry animation */
.form-field .otp-boxes input.has-digit {
  animation: otp-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Reject Animation & Styling ── */
.otp[data-phase="no"] .otp-digit,
.otp-boxes[data-phase="no"] input,
.form-field.has-error .otp-boxes input {
  color: #e5484d !important;
  border-color: #e5484d !important;
  background: #fef2f2;
}

.otp-boxes[data-phase="no"],
.form-field.has-error .otp-boxes {
  animation: shake 0.4s ease-in-out;
}

/* ── Accept Animation & Styling ── */
.otp-boxes[data-phase="ok"] input {
  color: #15803d !important;
  border-color: #22c55e !important;
  background: #f0fdf4;
  transform: scale(1.02);
}

.otp-boxes .otp-ok {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 2;
  border-radius: var(--radius-md);
  background: rgba(240, 253, 244, 0.95);
  border: 1px solid #22c55e;
  color: #15803d;
  font-family: Estedad, Vazir, sans-serif;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.otp-boxes[data-phase="ok"] .otp-ok {
  opacity: 1;
  animation: otp-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes otp-in {
  from { transform: translateY(45%) scale(0.86); opacity: 0; filter: blur(3px); }
  to { transform: none; opacity: 1; filter: none; }
}

@keyframes otp-breathe {
  from { opacity: 1; }
  to { opacity: 0.25; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .otp-digit { animation: none; }
  .otp-caret[data-on="true"] { animation: none; }
  .form-field .otp-boxes input.has-digit { animation: none; }
  .otp-boxes[data-phase="no"], .form-field.has-error .otp-boxes { animation: none; }
  .otp-boxes[data-phase="ok"] .otp-ok { animation: none; }
}
.development-code {
  width: fit-content;
  margin: .2rem 0 0;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--body-copy);
  font-size: .8rem;
}
.development-code bdi { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes otp-shake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 65% { transform: translateX(3px); } }
.account-secondary-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.2rem; color: var(--muted); font-size: 0.82rem; }
.account-secondary-actions a { text-decoration: underline; text-underline-offset: 0.2rem; }
.profile-details h2, .profile-orders h2 { margin: 0 0 1rem; font-family: Estedad, Vazir, sans-serif; font-size: 1.3rem; }
.profile-details { max-width: 24rem; }
.profile-details .button-primary { justify-self: start; }
.logout-form { margin-top: 1.1rem; }
.profile-orders { min-width: 0; }
.order-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.order-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.order-list li > a { display: grid; gap: 0.15rem; }
.order-list li > a:hover { color: var(--berry); }
.order-list li > a span { font-weight: 600; }
.order-list small { color: var(--muted); font-size: 0.82rem; }
.order-list strong { font-family: Estedad, Vazir, sans-serif; font-size: 0.92rem; font-weight: 700; white-space: nowrap; }

.has-reveal [data-reveal]:not([data-revealed]):not(.product-item) { opacity: 0; transform: translateY(0.8rem); }
/* Filtered cards arrive after observer setup; never hide them awaiting observation. */
.has-reveal .product-item[data-reveal]:not([data-revealed]) { opacity: 1; transform: none; }
.has-reveal [data-reveal][data-revealed] { opacity: 1; transform: translateY(0); transition: opacity 400ms ease-out, transform 450ms var(--ease-out); }
.has-reveal .product-item:nth-child(2)[data-revealed] { transition-delay: 40ms; }
.has-reveal .product-item:nth-child(3)[data-revealed] { transition-delay: 80ms; }
.has-reveal .product-item:nth-child(4)[data-revealed] { transition-delay: 120ms; }

/* ==========================================================================
   Order Result & Status Animation (SuccessCheck / Pop / Draw)
   ========================================================================== */
.order-result-shell {
  padding: 3rem 1.5rem 5rem;
  display: flex;
  justify-content: center;
}

.order-result-card {
  width: 100%;
  max-width: 32rem;
  padding: 3rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 8px 30px rgba(74, 41, 32, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.status-animation-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.status-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  width: 100%;
}

.status-svg {
  display: block;
  margin: 0 auto;
}

/* Animations */
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes word-in {
  from { opacity: 0; transform: translateY(0.6em); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.pop-anim {
  animation: pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.draw-anim {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.5s ease-out 0.35s forwards;
}

.word-in-anim {
  animation: word-in 0.5s ease-out 0.6s both;
}

/* Success Check Variants */
.status-check-success {
  color: #3f6212;
}
.status-check-success .status-circle-bg {
  fill: #4d7c0f;
  opacity: 0.15;
}
.status-check-success .status-circle-stroke {
  stroke: #4d7c0f;
  fill: none;
}
.status-check-success .status-check-draw {
  stroke: #4d7c0f;
}

/* Failed Variant */
.status-check-failed {
  color: #991b1b;
}
.status-check-failed .status-circle-bg {
  fill: #dc2626;
  opacity: 0.15;
}
.status-check-failed .status-circle-stroke {
  stroke: #dc2626;
  fill: none;
}
.status-check-failed .status-check-draw {
  stroke: #dc2626;
}

/* Pending Variant */
.status-check-pending {
  color: #92400e;
}
.status-check-pending .status-circle-bg {
  fill: #d97706;
  opacity: 0.15;
}
.status-check-pending .status-circle-stroke {
  stroke: #d97706;
  fill: none;
}
.status-check-pending .status-check-draw {
  stroke: #d97706;
}

.status-label {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: inherit;
}

.order-result-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.order-result-copy h1 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ink);
}

.order-lead {
  margin: 0;
  color: var(--body-copy);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 25rem;
}

.order-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--flour);
  border: 1px solid var(--line);
  border-radius: 9999px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.5rem;
}
.order-info-pill strong {
  color: var(--ink);
  font-family: Estedad, Vazir, sans-serif;
  font-variant-numeric: tabular-nums;
}

.order-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  width: 100%;
}
.order-result-actions .button-primary,
.order-result-actions .plain-button {
  flex: 1;
  min-width: 10rem;
}

.order-retry-form {
  width: 100%;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pop-anim, .draw-anim, .word-in-anim {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-color-scheme: dark) {
  .order-result-card {
    background: #241612;
    border-color: #4a342c;
  }
  .order-info-pill {
    background: #36241e;
    border-color: #4a342c;
  }
}

/* ==========================================================================
   Product Reviews & Form Styles
   ========================================================================== */
.reviews-section {
  padding: 3.5rem 0 4rem;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}

.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.reviews-head h2 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}

.reviews-count {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--flour);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-item {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(74, 41, 32, 0.03);
}

.review-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.review-author-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.review-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--flour);
  color: var(--berry);
  font-family: Estedad, Vazir, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  border: 1px solid var(--line);
}

.review-author-name {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}

.review-date {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.review-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--body-copy);
}

.star-empty {
  color: var(--line);
}

.empty-reviews {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--flour);
  color: var(--muted);
}
.empty-reviews p { margin: 0 0 0.35rem; font-weight: 700; color: var(--ink); }
.empty-reviews span { font-size: 0.82rem; }

.review-form-card {
  padding: 1.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 4px 16px rgba(74, 41, 32, 0.05);
}

.review-form-card h3 {
  margin: 0 0 0.4rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
}

.review-form-desc {
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.review-form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.review-form input,
.review-form select,
.review-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(139, 79, 61, 0.12);
}

.review-submit-btn {
  width: 100%;
  margin-top: 0.5rem;
  min-height: 2.85rem;
  font-weight: 700;
}

@media (max-width: 799.98px) {
  .reviews-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (prefers-color-scheme: dark) {
  .review-item,
  .review-form-card {
    background: #241612;
    border-color: #4a342c;
  }
  .review-avatar {
    background: #36241e;
    border-color: #4a342c;
    color: var(--gold);
  }
  .review-form input,
  .review-form select,
  .review-form textarea {
    background: #1a100d;
    border-color: #4a342c;
    color: #f5e8d0;
  }
  .empty-reviews {
    background: #1a100d;
    border-color: #4a342c;
  }
}

/* ==========================================================================
   TestimonialsBlock Component (Converted from React TestimonialsBlock)
   ========================================================================== */
.testimonials-section {
  padding: 4.5rem 0 3rem;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.testimonials-header h2 {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 4px 16px rgba(74, 41, 32, 0.05);
  margin: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(74, 41, 32, 0.08);
  border-color: #d6be9a;
}

.rating-stars {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--gold);
}

.star-icon {
  fill: var(--gold);
}

.testimonial-quote {
  margin: 1rem 0 0;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--body-copy);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--flour);
  color: var(--berry);
  font-family: Estedad, Vazir, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-name {
  margin: 0;
  font-family: Estedad, Vazir, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

.testimonial-role {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  .testimonial-card {
    background: #241612;
    border-color: #4a342c;
  }
  .testimonial-avatar {
    background: #36241e;
    border-color: #4a342c;
    color: var(--gold);
  }
  .testimonial-author {
    border-color: #4a342c;
  }
}

/* ==========================================================================
   SearchInput Component (Converted from React SearchInput)
   ========================================================================== */
.search-input-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(74, 41, 32, 0.05);
  transition: all 180ms ease;
  position: relative;
}

.search-input-field:focus-within {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(139, 79, 61, 0.15);
}

.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.search-text-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 0;
}

.search-text-input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

/* Hide native search cancel button in Webkit */
.search-text-input::-webkit-search-cancel-button,
.search-text-input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.search-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 150ms ease;
}

.search-clear-btn:hover {
  background: var(--flour);
  color: var(--ink);
}

.search-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.45rem;
  font-family: monospace;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--muted);
  background: var(--flour);
  border: 1px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
  user-select: none;
}

.menu-search-wrapper {
  min-width: 17rem;
  flex: 1;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

@media (max-width: 700px) {
  .menu-search-wrapper {
    min-width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .search-input-field {
    background: #241612;
    border-color: #4a342c;
  }
  .search-shortcut {
    background: #36241e;
    border-color: #4a342c;
  }
}

/* ==========================================================================
   Price Component (Converted from React PriceProps)
   ========================================================================== */
.price-container {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
}

.price-primary {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.price-amount {
  font-family: Estedad, Vazir, sans-serif;
  font-weight: 700;
  color: var(--berry);
  font-variant-numeric: tabular-nums;
}

.price-unit {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 400;
}

/* Sizes: sm: text-base (1rem), md: text-2xl (1.5rem), lg: text-4xl (2.25rem) */
.price-sm .price-amount { font-size: 1rem; }
.price-sm .price-unit { font-size: 0.875rem; }

.price-md .price-amount { font-size: 1.5rem; }
.price-md .price-unit { font-size: 0.875rem; }

.price-lg .price-amount { font-size: 2.25rem; }
.price-lg .price-unit { font-size: 0.875rem; }

/* Discount row: mt-0.5 flex items-center gap-2 text-xs */
.price-discount-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  font-size: 0.75rem;
}
.price-discount-row[hidden] { display: none !important; }

.price-original {
  color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.price-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .price-badge {
    background: var(--ink);
    color: var(--paper);
  }
}

/* ==========================================================================
   Skeleton Loading & Shimmer Animation
   ========================================================================== */
.skeleton-box {
  background-color: var(--flour);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: translateX(100%);
  animation: skeleton-shimmer-rtl 1.6s infinite ease-in-out;
}

@keyframes skeleton-shimmer-rtl {
  100% {
    transform: translateX(-100%);
  }
}

.skeleton-item {
  pointer-events: none;
  border-color: var(--line);
}

.skeleton-line {
  border-radius: var(--radius-sm);
}

.skeleton-pill {
  border-radius: 9999px;
}

.skeleton-btn {
  border-radius: var(--radius-sm);
}

/* Skeleton Row: Avatar + Two lines */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  width: 100%;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
}

.skeleton-row-lines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::before {
    animation: none;
    display: none;
  }
  .skeleton-box {
    opacity: 0.7;
  }
}

@media (prefers-color-scheme: dark) {
  .skeleton-box {
    background-color: #36241e;
  }
  .skeleton-shimmer::before {
    background: linear-gradient(
      to left,
      transparent 0%,
      rgba(245, 232, 208, 0.1) 50%,
      transparent 100%
    );
  }
}

/* ==========================================================================
   Alert Component Styles
   ========================================================================== */
.messages-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--measure);
  margin: 1.25rem auto 0.5rem;
  padding: 0 2rem;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-size: 0.88rem;
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(74, 41, 32, 0.04);
  transition: all 180ms ease;
}

.alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.alert-content {
  min-width: 0;
  flex: 1;
}

.alert-title {
  margin: 0 0 0.2rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}

.alert-body {
  color: var(--body-copy);
}

/* Variants */
.alert-info {
  border-color: var(--line);
  background: var(--paper);
}
.alert-info .alert-icon { color: var(--ink); }
.alert-info .alert-title { color: var(--ink); }

.alert-success {
  border-color: rgba(94, 107, 69, 0.35);
  background: #f7fee7;
}
.alert-success .alert-icon { color: var(--sage); }
.alert-success .alert-title { color: #3f6212; }
.alert-success .alert-body { color: #365314; }

.alert-cart-toast {
  align-items: center;
}
.alert-cart-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.alert-cart-btn {
  margin: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  background: var(--berry);
  color: #fff;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.alert-warning {
  border-color: rgba(201, 166, 107, 0.45);
  background: #fefce8;
}
.alert-warning .alert-icon { color: #b45309; }
.alert-warning .alert-title { color: #92400e; }
.alert-warning .alert-body { color: #78350f; }

.alert-destructive,
.alert-error {
  border-color: rgba(220, 38, 38, 0.35);
  background: #fef2f2;
}
.alert-destructive .alert-icon,
.alert-error .alert-icon { color: #dc2626; }
.alert-destructive .alert-title,
.alert-error .alert-title { color: #991b1b; }
.alert-destructive .alert-body,
.alert-error .alert-body { color: #7f1d1d; }

@media (prefers-color-scheme: dark) {
  .alert-info {
    border-color: #4a342c;
    background: #241612;
  }
  .alert-success {
    border-color: #365314;
    background: #14200a;
  }
  .alert-success .alert-icon { color: #bef264; }
  .alert-success .alert-title { color: #bef264; }
  .alert-success .alert-body { color: #d9f99d; }

  .alert-warning {
    border-color: #713f12;
    background: #2a1b07;
  }
  .alert-warning .alert-icon { color: #fde047; }
  .alert-warning .alert-title { color: #fde047; }
  .alert-warning .alert-body { color: #fef08a; }

  .alert-destructive,
  .alert-error {
    border-color: #7f1d1d;
    background: #2b0e0e;
  }
  .alert-destructive .alert-icon,
  .alert-error .alert-icon { color: #f87171; }
  .alert-destructive .alert-title,
  .alert-error .alert-title { color: #f87171; }
  .alert-destructive .alert-body,
  .alert-error .alert-body { color: #fca5a5; }
}

/* ==========================================================================
   Dedicated Login Page Styles
   ========================================================================== */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 18rem);
  padding: 3rem 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 24rem;
  padding: 2.25rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 20px 60px -20px rgba(74, 41, 32, 0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-header {
  margin-bottom: 1.75rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.login-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--flour);
  color: var(--berry);
  border: 1px solid var(--line);
}
.login-header h1 {
  margin: 0 0 0.4rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
}
.login-header p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 18rem;
}
.login-phone-highlight {
  color: var(--ink);
  font-weight: 700;
  direction: ltr;
  display: inline-block;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  text-align: center;
}
.login-form .form-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.login-btn {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
}
.login-terms {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
  width: 100%;
}
.login-terms a {
  color: var(--berry);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.6rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.development-code {
  width: 100%;
  margin: 0.5rem auto 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--body-copy);
  font-size: 0.84rem;
  background: var(--flour);
  text-align: center;
  box-sizing: border-box;
}
.login-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.6rem;
  color: var(--berry);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 150ms ease, background-color 150ms ease;
}
.login-link-btn:hover {
  color: var(--ink);
  background-color: var(--flour);
}
.resend-timer-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.login-sep { color: var(--muted); }
.resend-form { margin: 0; display: inline; }

/* ==========================================================================
   Customer Profile & Order History Redesign
   ========================================================================== */
.profile-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.profile-header-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(74, 41, 32, 0.04);
}
.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--flour);
  color: var(--berry);
  flex-shrink: 0;
}
.profile-meta { flex: 1; }
.profile-meta h1 {
  margin: 0 0 0.25rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}
.profile-phone {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.profile-badge-active {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: rgba(94, 107, 69, 0.15);
  color: var(--sage);
}
.profile-logout-btn { margin: 0; }
.logout-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: #dc2626;
  font-size: 0.82rem;
  background: var(--paper);
}
.logout-action:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.profile-card {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(74, 41, 32, 0.04);
}
.profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.profile-card-header h2 {
  margin: 0 0 0.2rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
}
.profile-card-header p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.profile-order-count {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--flour);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order-cards-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: all 180ms ease;
}
.order-card:hover {
  border-color: #d6be9a;
  box-shadow: 0 4px 14px rgba(74, 41, 32, 0.06);
}
.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.order-card-ref {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-num-label { font-size: 0.8rem; color: var(--muted); }
.order-num {
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.order-status-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.badge-status, .badge-payment {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}
.badge-completed { background: #ecfccb; color: #3f6212; }
.badge-ready { background: #dcfce7; color: #15803d; }
.badge-preparing { background: #fef3c7; color: #92400e; }
.badge-paid { background: #e0e7ff; color: #3730a3; }
.badge-cancelled { background: #f1f5f9; color: #64748b; }
.badge-pending { background: #fff7ed; color: #c2410c; }

.badge-payment-paid { background: #dcfce7; color: #166534; }
.badge-payment-failed { background: #fee2e2; color: #991b1b; }
.badge-payment-unpaid { background: #fef3c7; color: #854d0e; }

.order-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  padding: 0.85rem;
  margin-bottom: 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--flour);
  font-size: 0.82rem;
}
.order-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.order-detail-item > span:first-child { color: var(--muted); font-size: 0.8rem; }
.order-detail-item > *:last-child { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--line);
}
.order-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.order-card-price strong {
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--berry);
  font-variant-numeric: tabular-nums;
}
.order-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.inline-form { margin: 0; }
.btn-sm {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  min-height: 2.1rem;
}
.btn-block { width: 100%; margin-top: 0.5rem; }

.profile-side-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.profile-help-card {
  background: var(--flour);
  border-color: #d6be9a;
}
.profile-help-card h3 {
  margin: 0 0 0.4rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1rem;
}
.profile-help-card p {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--body-copy);
  line-height: 1.6;
}

.profile-empty-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
  text-align: center;
  gap: 0.75rem;
}
.profile-empty-orders p { margin: 0; font-size: 0.95rem; color: var(--ink); }

.profile-staff-box {
  padding: 2.5rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-align: center;
}
.profile-staff-box h2 {
  margin: 0 0 0.5rem;
  font-family: Estedad, Vazir, sans-serif;
  font-size: 1.4rem;
}
.profile-staff-box p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.staff-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

@media (max-width: 799.98px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-header-card { flex-wrap: wrap; }
  .profile-logout-btn { width: 100%; }
  .logout-action { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .login-card { padding: 1.8rem 1.25rem; }
  .profile-header-card { padding: 1.25rem; }
  .order-card-details { grid-template-columns: 1fr; }
  .order-card-footer { flex-direction: column; align-items: stretch; }
  .order-card-actions { justify-content: stretch; }
  .order-card-actions > * { flex: 1; text-align: center; }
}

@media (prefers-color-scheme: dark) {
  .login-card, .profile-header-card, .profile-card, .order-card {
    background: #241612;
    border-color: #4a342c;
  }
  .order-card-details, .profile-help-card {
    background: #36241e;
    border-color: #4a342c;
  }
  .badge-completed { background: #262c1a; color: #bef264; }
  .badge-ready { background: #14532d; color: #86efac; }
  .badge-preparing { background: #451a03; color: #fde68a; }
  .badge-paid { background: #1e1b4b; color: #c7d2fe; }
  .badge-pending { background: #431407; color: #fdba74; }
}

@media (max-width: 799.98px) {
  /* Prevent content overlap with floating bottom nav */
  body {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .site-header {
    padding: 0.75rem 1.25rem;
    min-height: 4rem;
  }
  .nav-pill { display: none; }
  .nav-action-ghost { display: none; }
  .site-header .basket-link { display: none; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 1.15rem;
    height: 1.5px;
    background: var(--ink);
  }
  .menu-toggle span:first-child { margin-bottom: 0.35rem; }

  /* Floating mobile bottom navigation bar */
  .mobile-bottom-nav {
    position: fixed;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    inset-inline: 0.85rem;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0.45rem 0.35rem;
    border: 1px solid rgba(232, 215, 190, 0.75);
    border-radius: 9999px;
    background: rgba(252, 249, 242, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(74, 41, 32, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .mobile-bottom-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 2.85rem;
    padding: 0.35rem 0.25rem;
    border-radius: 9999px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-item:active {
    transform: scale(0.94);
  }

  .mobile-bottom-item.is-active {
    color: var(--berry);
    font-weight: 700;
    background: rgba(139, 79, 61, 0.08);
  }

  .mobile-bottom-icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2;
    transition: transform 150ms var(--ease-out);
  }

  .mobile-bottom-item.is-active .mobile-bottom-icon {
    stroke-width: 2.4;
  }

  .mobile-bottom-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-bottom-badge {
    position: absolute;
    top: -0.35rem;
    inset-inline-end: -0.65rem;
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.2rem;
    place-items: center;
    border-radius: 9999px;
    background: var(--berry);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }
  .hero-wrap { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding: 2.8rem 1.3rem; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { font-size: 3rem; }
  .hero-photo { grid-row: 1; }
  .section-shell { padding: 3.5rem 1.3rem; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
  .story { padding: 3.5rem 1.3rem; }
  .story-copy h2 { font-size: 2rem; }
  .basket-layout, .checkout-layout, .contact-layout, .account-shell { grid-template-columns: 1fr; gap: 2rem; }
  .basket-summary, .checkout-summary { position: static; }
  .detail-layout { grid-template-columns: 1fr; gap: 2rem; }
  .detail-photo { max-height: 24rem; }
  .detail-copy { padding-bottom: 2rem; }
  .page-intro { padding: 3rem 1.3rem 0.8rem; }
  .contact-layout { padding-top: 1rem; }
  .account-shell { padding-top: 1.2rem; }
  .profile-details { max-width: none; }
  .about-approach { padding-inline: 1.3rem; }
  .menu-mobile-bar { display: flex; }
  .menu-layout { grid-template-columns: 1fr; }
  .menu-sidebar { display: none; }
}

@media (max-width: 520px) {
  body { font-size: 15px; }
  .site-header nav { font-size: 0.88rem; }
  .wordmark { font-size: 1.15rem; }
  .hero-copy h1 { font-size: 2.4rem; }
  .section-heading h2 { font-size: 1.8rem; }
  .section-heading > .text-link { font-size: 0.82rem; }
  .product-grid { grid-template-columns: 1fr; }
  .product-photo { aspect-ratio: 1.25 / 1; }
  .story-copy h2 { font-size: 1.9rem; }
  .site-footer { grid-template-columns: 1fr; padding: 2.2rem 1.3rem 1.2rem; }
  .footer-links { flex-wrap: wrap; justify-content: flex-start; gap: 0.8rem 1.3rem; }
  .site-footer small { grid-column: auto; }
  .page-intro h1 { font-size: 2.4rem; }
  .basket-item { grid-template-columns: 5rem 1fr; gap: 0.85rem; }
  .basket-thumb { width: 5rem; height: 5rem; }
  .basket-line-total { grid-column: 2; }
  .detail-copy h1 { font-size: 2.2rem; }
  .contact-form-wrap { padding: 1.2rem; }
  .order-list li { align-items: start; }
  .otp-code { width: 100% !important; }
  .about-copy h2 { font-size: 2rem; }
}

@media (hover: hover) and (pointer: fine) {
  .product-photo:hover img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .has-reveal [data-reveal], .has-reveal [data-reveal][data-revealed] { opacity: 1; transform: none; transition: opacity 150ms ease; }
  .has-error .otp-boxes { animation: none; }
  .form-field .otp-boxes input { transition: none; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --flour: #36241e;
    --paper: #241612;
    --ink: #f5e8d0;
    --brown: #c9a66b;
    --berry: #d6947c;
    --gold: #c9a66b;
    --sage: #9fae82;
    --line: #4a342c;
    --muted: #bfa98e;
    --body-copy: #e8d7be;
  }
  body { background: #1a100d; }
  .site-header { background: #241612; }
  .basket-link { background: #241612; }
  .product-item { background: #241612; }
  .product-photo, .detail-photo { background: #36241e; }
  .product-photo.is-empty { background: #36241e; }
  .product-stamp { background: rgba(36, 22, 18, 0.9); }
  .category-label { background: #36241e; color: #e8d7be; }
  .diet-label { border-color: #5e6b45; }
  .contact-form-wrap, .menu-sidebar, .basket-summary, .checkout-summary, .account-panel { background: #241612; }
  .filter-drawer { background: #241612; }
  .filter-drawer-backdrop.is-visible { background: rgba(0,0,0,0.6); }
  .filter-drawer-close { background: #36241e; border-color: #4a342c; }
  .filter-option:hover { background: #36241e; }
  .filter-option-count { background: #36241e; }
  .filter-option input[type="radio"]:checked { box-shadow: inset 0 0 0 2.5px #241612; }
  .filter-drawer-trigger { background: #241612; border-color: #4a342c; }
  .mobile-bottom-nav {
    background: rgba(36, 22, 18, 0.92);
    border-color: rgba(232, 215, 190, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }
  .mobile-bottom-item { color: #bfa98e; }
  .mobile-bottom-item.is-active {
    color: var(--gold);
    background: rgba(201, 166, 107, 0.12);
  }
  .form-field input:not([type="radio"]):not([type="checkbox"]), .form-field textarea,
  .quantity-form input { background: #36241e; color: #f5e8d0; }
  .form-field .otp-boxes input { background: #36241e; color: #f5e8d0; border-color: #4a342c; }
  .otp[data-phase="no"] .otp-digit,
  .otp-boxes[data-phase="no"] input,
  .form-field.has-error .otp-boxes input {
    background: #451a1a;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
  }
  .otp-boxes[data-phase="ok"] input {
    background: #14351a;
    border-color: #4ade80 !important;
    color: #86efac !important;
  }
  .otp-boxes .otp-ok {
    background: rgba(20, 53, 26, 0.95);
    border-color: #4ade80;
    color: #86efac;
  }
  .small-button, .plain-button { background: #36241e; color: #e8d7be; }
  .site-footer { background: #1a100d; }
}

/* Menu usability: compact desktop, touch-first mobile. */
.menu-sidebar { top: calc(var(--header-height, 80px) + 16px); max-height: calc(100dvh - var(--header-height, 80px) - 32px); }
.search-input-field, .sidebar-search { min-width: 0; max-width: 100%; }
.search-text-input { min-width: 0; width: 100%; }
.sidebar-search .search-shortcut { display: none; }
.sidebar-search .search-input-field { width: 100%; padding-inline: 8px; gap: 6px; }
@media (min-width: 800px) and (max-width: 1000px) { .menu-main .product-grid, .menu-main .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filter-drawer[aria-hidden="true"], .nav-drawer[aria-hidden="true"] { visibility: hidden; }
.filter-drawer-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 799.98px) {
  body { font-size: 16px; padding-bottom: calc(var(--bottom-nav-height, 80px) + 28px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--bottom-nav-height, 80px) + 28px + env(safe-area-inset-bottom, 0px)); }
  .menu-mobile-bar > *, .menu-mobile-bar .search-input-field { min-width: 0; }
  .menu-mobile-bar .search-input-field { width: 100%; }
  .menu-mobile-bar .menu-search-wrapper { min-width: 0; flex: 1 1 0; }
  .search-text-input { font-size: 16px; min-height: 44px; }
  .search-input-field { min-height: 44px; }
  .search-clear-btn { min-width: 44px; min-height: 44px; }
  .filter-drawer-trigger { min-height: 44px; height: auto; }
  .filter-option, .filter-reset-btn, .filter-drawer-close, .filter-drawer-apply, .filter-drawer-reset { min-height: 44px; }
  .product-item .add-form .small-button { min-height: 44px; font-size: 14px; }
  .menu-intro.compact { padding-block: 20px 12px; }
  .menu-intro .eyebrow { margin-bottom: 4px; }
  .menu-intro h1 { font-size: 30px; margin-block: 0 4px; }
  .menu-intro > p:last-child { margin-block: 0; font-size: 14px; }
  .menu-section { padding-block-start: 12px; }
  .product-item .product-photo { height: 240px; aspect-ratio: auto; }
  .mobile-bottom-nav { inset-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); width: auto; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .filter-drawer, .nav-drawer, .product-item { transition: none; }
}

.cart-live-status {
  position: fixed; z-index: 90; inset-inline: 16px;
  bottom: calc(var(--bottom-nav-height, 0px) + 28px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin-inline: auto; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); box-shadow: 0 4px 18px rgba(74,41,32,.15);
}
.cart-live-status[hidden] { display: none; }
form[data-cart-add][aria-busy="true"] button { opacity: .65; cursor: wait; }

/* Basket: accessible controls and responsive order action. */
.basket-item-info { min-width: 0; }
.basket-item-info small { display: block; font-size: 12px; color: var(--body-copy); }
.quantity-form { flex-wrap: wrap; gap: 8px; }
.quantity-controls { display: flex; align-items: center; gap: 8px; }
.quantity-form input, .quantity-step { width: 44px; min-height: 44px; font-size: 16px; color: var(--ink); }
.quantity-step { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-sm); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
.quantity-step:hover { background: var(--flour); border-color: var(--berry); }
.quantity-form .plain-button, .remove-button, #basket-undo { min-height: 44px; min-width: 44px; }
.js .quantity-form .plain-button { display: none !important; }
.basket-summary { top: calc(var(--header-height, 80px) + 16px); }
.basket-summary p { flex-wrap: wrap; }
.basket-item-error { color: var(--berry); }
.basket-item[hidden], .basket-summary[hidden], .basket-empty[hidden], .basket-mobile-checkout[hidden] { display: none; }
[data-basket-checkout][aria-disabled="true"] { opacity: .6; cursor: wait; }
.basket-mobile-checkout { display: none; }
.basket-feedback { padding-block: 12px; }
.basket-intro.compact { padding-block: 20px; }
@media (max-width: 799.98px) {
  .has-basket { padding-bottom: calc(var(--bottom-nav-height, 80px) + var(--basket-action-height, 80px) + 40px + env(safe-area-inset-bottom, 0px)); }
  .basket-mobile-checkout:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; position: fixed; inset-inline: 12px; bottom: calc(var(--bottom-nav-height, 80px) + 20px + env(safe-area-inset-bottom, 0px)); z-index: 79; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
  .basket-mobile-checkout span { font-size: 12px; }
  .basket-mobile-checkout strong { display: block; font-size: 14px; }
  .basket-mobile-checkout .button-primary { min-height: 44px; }
  .basket-intro.compact { padding-block: 12px; }
  .basket-intro h1 { font-size: 30px; margin: 0; }
  .basket-layout { padding-top: 12px; gap: 20px; }
  .basket-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .basket-thumb { width: 64px; height: 64px; align-self: start; }
  .basket-line-total { grid-column: 2; white-space: normal; }
  .basket-item .quantity-form { display: flex; flex-wrap: wrap; }
  .basket-summary { padding: 16px; }
  .basket-summary .button-primary { display: none; }
  .basket-stepper { padding-block: 12px; }
}
@media (max-width: 380px) {
  .basket-item { grid-template-columns: minmax(0, 1fr); }
  .basket-line-total { grid-column: 1; }
  .basket-thumb { display: none; }
}

@media (max-width: 799.98px) {
 .site-header { padding-inline: 12px; gap: 8px; }
 .site-header .wordmark { font-size: 24px; min-width: 0; }
 .site-header .menu-toggle { width: 44px; height: 44px; }
 .basket-stepper .stepper-item, .basket-stepper .stepper-node { min-width: 0; flex: 1; }
 .basket-stepper .stepper-title { overflow-wrap: anywhere; font-size: 12px; }
 .basket-feedback { scroll-margin-bottom: calc(var(--bottom-nav-height, 80px) + var(--basket-action-height, 80px) + 40px); }
}

/* Account: readable history and reachable profile settings. */
.profile-meta { min-width: 0; }
.profile-meta h1, .order-num, .order-detail-item bdi { overflow-wrap: anywhere; }
.profile-phone, .profile-card-header, .order-card-actions, .order-card-price { flex-wrap: wrap; gap: 8px; }
.profile-card-header > div { min-width: 0; }
.profile-container .btn-sm, .profile-container .logout-action, .profile-pagination .plain-button { min-height: 44px; }
.profile-container input { font-size: 16px; min-height: 44px; }
.profile-section-nav, .profile-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 16px; }
.profile-section-nav a { padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; min-height: 44px; }
#profile-info, #profile-orders { scroll-margin-top: calc(var(--header-height, 80px) + 20px); }
.profile-save-hint, .profile-dirty-hint { display: block; font-size: 13px; color: var(--body-copy); }
.profile-dirty-hint[hidden] { display: none; }
.profile-logout-btn .logout-action { color: var(--body-copy); border-color: transparent; }
.order-card-details { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
@media (max-width: 799.98px) {
 .profile-container .profile-card { padding: 16px; }
 .profile-header-card { padding: 16px; gap: 12px; margin-bottom: 12px; }
 .profile-avatar { width: 44px; height: 44px; }
 .profile-logout-btn { width: auto; margin-inline-start: auto; }
 .profile-phone { align-items: flex-start; }
 .order-card { padding: 12px; }
 .profile-grid { gap: 16px; }
}
@media (prefers-color-scheme: dark) {
 .profile-badge-active { background: #262c1a; color: #bef264; }
 .badge-cancelled { background: #28303b; color: #cbd5e1; }
 .badge-payment-paid { background: #14532d; color: #bbf7d0; }
 .badge-payment-failed { background: #450a0a; color: #fecaca; }
 .badge-payment-unpaid { background: #451a03; color: #fde68a; }
 .profile-logout-btn .logout-action { background: transparent; color: var(--ink); }
}

.pagination { font-family: inherit; margin-block: 20px; }
.pagination ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination a, .pagination li > span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); transition: background-color 150ms ease; }
.pagination [aria-current="page"] { background: var(--berry); color: var(--paper); }
.pagination [aria-disabled="true"] { color: var(--muted); }
.pagination a:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pagination a { transition: none; } }

/* Home: ordering first on mobile, editorial photography on desktop. */
.home-fulfillment-note { font-size: 13px; line-height: 1.8; color: var(--body-copy); margin-block: 12px 0; }
.home-fulfillment-note a { text-decoration: underline; text-underline-offset: 3px; }
.home-page .hero-copy { padding-inline-end: 16px; padding-inline-start: 0; min-width: 0; }
.home-page .section-heading { flex-wrap: wrap; gap: 12px; }
.home-page .text-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 799.98px) {
 .home-page .hero-wrap { padding: 20px 20px 16px; gap: 16px; }
 .home-page .hero-copy { padding: 0; grid-row: 1; }
 .home-page .hero-copy h1 { font-size: clamp(28px, 8vw, 40px); margin-block: 8px 12px; }
 .home-page .hero-intro { margin-block: 0 12px; font-size: 16px; }
 .home-page .hero-photo { grid-row: 2; aspect-ratio: auto; }
 .home-page .hero-photo img { height: 140px; aspect-ratio: auto; }
 .home-page .today { padding-block: 20px; }
 .home-page .section-heading { margin-bottom: 16px; }
 .home-page .section-heading h2 { font-size: 24px; }
 .home-page .story { padding-block: 28px; }
 .home-page .story-copy h2 { font-size: 28px; }
}
@media (prefers-color-scheme: dark) {
 .button-primary { color: #1a100d; }
 .button-primary:hover { color: #1a100d; }
}

.home-page .testimonials-grid, .home-page .testimonials-list { min-width: 0; }
.home-page .testimonial-card { min-width: 0; max-width: 100%; margin-inline: 0; overflow-wrap: anywhere; }
@media (max-width: 799.98px) {
 .home-page .hero-photo { display: none; }
 .home-page .hero-intro { max-width: 42ch; }
 .home-page .testimonial-author { flex-wrap: wrap; }
}

.nav-drawer[aria-hidden="true"] { display: none; }

@media (max-width: 799.98px) {
 .home-page .testimonials-grid { grid-template-columns: minmax(0, 1fr); }
 .home-page .testimonial-card { padding: 16px; }
 .home-page .testimonial-meta, .home-page .testimonial-quote { min-width: 0; overflow-wrap: anywhere; }
}

.home-page { overflow-x: clip; }

/* Responsive hero reset: mobile copy is a real single grid track. */
@media (max-width: 799.98px) {
 .home-page .hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; min-width: 0; min-height: 0; margin-inline: 0; padding-inline: clamp(16px, 5vw, 24px); }
 .home-page .hero-copy { width: 100%; min-width: 0; max-width: none; position: static; transform: none; margin-inline: 0; text-align: start; }
 .home-page .hero-intro { width: 100%; max-width: none; }
 .home-page .hero-photo { display: none; position: static; transform: none; margin: 0; }
}
/* RTL content with drawer anchored to the hamburger's physical edge. */
.nav-drawer { inset-inline-start: auto; inset-inline-end: 0; border-inline-end: 0; border-inline-start: 1px solid var(--line); transform: translateX(-100%); visibility: visible; transition: transform 260ms var(--ease-out), visibility 0s 260ms; }
.nav-drawer[aria-hidden="true"] { display: flex; visibility: hidden; }
.nav-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.nav-drawer-close { min-width: 44px; min-height: 44px; }
.product-gallery { min-width: 0; width: 100%; }
.gallery-stage { width: 100%; aspect-ratio: 1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; touch-action: pan-y; }
.gallery-slide { display: block; border: 0; padding: 0; background: transparent; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-slide[hidden] { display: none; }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block: 8px; }
.gallery-controls button, .gallery-lightbox button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); border-radius: 6px; cursor: pointer; }
.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-thumbnails button { width: 64px; height: 64px; padding: 2px; border: 1px solid var(--line); background: var(--paper); border-radius: 4px; }
.gallery-thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbnails [aria-current], .gallery-dots [aria-current] { outline: 2px solid var(--berry); outline-offset: 2px; }
.gallery-dots { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gallery-dots button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; }
.gallery-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.gallery-dots [aria-current] span { background: var(--berry); }
.gallery-lightbox { width: min(94vw, 1000px); max-height: 90dvh; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.gallery-lightbox::backdrop { background: rgba(0,0,0,.75); }
.gallery-lightbox img { display: block; width: 100%; height: min(75dvh, 800px); object-fit: contain; }
.gallery-empty { aspect-ratio: 1; display: grid; place-items: center; padding: 24px; background: var(--paper); color: var(--body-copy); }
@media (max-width: 799.98px) {
 .detail-layout { grid-template-columns: minmax(0, 1fr); padding-inline: 20px; gap: 20px; }
 .gallery-thumbnails { display: none; }
 .gallery-dots { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .nav-drawer { transition: none; } }

/* Mobile hero: RTL editorial hierarchy, one clear ordering action. */
@media (max-width: 799.98px) {
  .home-page .hero-wrap { padding-block: 32px 28px; }
  .home-page .hero-copy { display: flex; flex-direction: column; align-items: stretch; text-align: start; }
  .home-page .hero-copy .eyebrow { margin: 0 0 12px; color: var(--body-copy); font-size: 13px; font-weight: 500; }
  .home-page .hero-copy h1 { margin: 0 0 16px; font-size: clamp(32px, 9vw, 42px); font-weight: 650; line-height: 1.4; text-wrap: initial; }
  .home-page .hero-copy h1 em { font-weight: 650; }
  .home-page .hero-intro { margin: 0 0 24px; font-size: 16px; line-height: 1.9; text-align: start; }
  .home-page .hero-copy .button-primary { width: 100%; min-height: 48px; justify-content: space-between; padding-inline: 20px; border-radius: 6px; box-shadow: none; font-size: 16px; }
  .home-page .home-fulfillment-note { margin-block: 12px 0; font-size: 12px; line-height: 1.8; text-align: start; }
  .home-page .home-fulfillment-note a { display: inline; min-height: 0; }
}

/* Mobile-only bakery composition: concise copy, restrained CTA, real product photo. */
.mobile-bakery-photo { display: none; }
@media (max-width: 799.98px) {
 .home-page .hero-wrap { gap: 22px; padding-block: 28px 24px; }
 .home-page .hero-copy .eyebrow { margin-bottom: 12px; }
 .home-page .hero-copy h1 { font-size: clamp(30px, 8.2vw, 36px); font-weight: 750; line-height: 1.35; margin-bottom: 16px; }
 .home-page .hero-copy h1 em { font-weight: 750; }
 .home-page .hero-intro { font-size: 15px; line-height: 1.85; margin-bottom: 22px; }
 .home-page .hero-copy .button-primary { width: 72%; min-height: 46px; align-self: flex-start; justify-content: space-between; font-size: 14px; padding-inline: 16px; }
 .home-page .home-fulfillment-note { display: none; }
 .home-page .mobile-bakery-photo { display: block; width: 100%; min-width: 0; margin: 0; }
 .mobile-bakery-photo img { display: block; width: 100%; height: clamp(220px, 60vw, 270px); object-fit: cover; border-radius: var(--radius-lg); }
 .mobile-bakery-photo figcaption { margin-top: 14px; color: var(--body-copy); font-size: 12px; line-height: 1.8; text-align: start; }
 .home-page .today { padding-block-start: 24px; }
}

/* Audit fixes: touch inputs depend on device, not desktop width. */
.menu-search-label { display: block; font-size: 12px; color: var(--body-copy); margin-block-end: 4px; }
.product-heading h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.continue-shopping, .login-form a.underline { display: inline-flex; align-items: center; min-height: 44px; }
@media (pointer: coarse), (max-width: 1024px) {
 .product-item .add-form .small-button, .filter-option, .search-input-field { min-height: 44px; }
 .search-text-input { font-size: 16px; min-height: 44px; }
}
@supports (-webkit-touch-callout: none) {
 input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), textarea, select { font-size: max(16px, 1rem); }
}

/* Search label sits above input; align adjacent filter with input itself. */
@media (max-width: 799.98px) {
 .menu-mobile-bar { align-items: flex-end; }
 .menu-mobile-bar .search-input-field,
 .menu-mobile-bar .filter-drawer-trigger { height: 48px; min-height: 48px; box-sizing: border-box; }
}

.search-input-field { padding-inline: 12px 0; }
.search-clear-btn { width: 44px; height: 44px; }
.search-shortcut { display: none; }
.search-clear-btn:focus-visible { outline: 2px solid var(--berry); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
 .search-input-field, .search-clear-btn { transition: none; }
 .search-spinner .animate-spin { animation: none; }
}

/* Bakery marketplace: menu-only composition and aligned product cards. */
.menu-intro { text-align: center; padding-block: 36px 28px; }
.menu-intro.compact { padding-block-end: 2.5rem; }
.menu-intro .eyebrow { margin-block-end: 8px; }
.menu-intro h1 { font-size: clamp(30px, 3.5vw, 46px); margin-block: 0 12px; }
.menu-intro > p:last-child { margin-inline: auto; margin-block: 0; max-width: 38rem; }
.menu-section { padding-block-start: 0; }
.menu-section .menu-layout { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); gap: 24px; align-items: start; }
.menu-section .menu-sidebar { top: calc(var(--header-height, 80px) + 16px); max-height: calc(100dvh - var(--header-height, 80px) - 32px); padding: 16px; border-color: var(--line); box-shadow: none; }
.menu-section .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.menu-section .product-item { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; box-shadow: none; cursor: pointer; }
.menu-section .product-photo { display: block; width: 100%; aspect-ratio: 1 / 1; margin: 0; border-radius: 0; }
.menu-section .product-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-section .product-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 14px; }
.menu-section .product-heading h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.7; }
.menu-section .product-heading h3 a { min-height: 44px; }
.menu-section .product-desc { margin-block: 4px 0; font-size: 13px; line-height: 1.8; min-height: 3.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.menu-section .product-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.menu-section .category-label, .menu-section .diet-label { font-size: 13px; line-height: 1.6; padding-block: 3px; padding-inline: 9px; }
.menu-section .product-footer { display: flex; flex-direction: column; gap: 10px; margin-block-start: auto; padding-block-start: 2px; }
.menu-section .product-price-wrap { min-height: 30px; }
.menu-section .add-form { width: 100%; margin: 0; }
.menu-section .add-form .small-button { width: 100%; min-height: 44px; padding-block: 8px; padding-inline: 12px; border-radius: var(--radius-md); }
@media (min-width: 800px) and (max-width: 1199.98px) {
 .menu-section .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .menu-section .menu-layout { grid-template-columns: minmax(190px, 210px) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 799.98px) {
 .menu-intro { padding-block: 24px; }
 .menu-intro.compact { padding-block-end: 1.5rem; }
 .menu-section .menu-layout { grid-template-columns: minmax(0, 1fr); }
 .menu-section .product-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
 .menu-section .menu-sidebar { display: none; }
 .menu-section .product-body { padding: 16px; }
 .menu-section .product-heading h3 { font-size: 20px; }
 .menu-section .product-desc { font-size: 14px; }
}

.menu-section .product-photo { height: auto; min-height: 0; max-height: none; flex-shrink: 0; }
.menu-section .product-grid { grid-auto-rows: 1fr; }
.menu-section .product-price-wrap { min-height: 43px; }

/* Reference finish: quieter surfaces, tighter catalog rhythm. */
.menu-section .product-item { transition: border-color 180ms ease; }
.menu-section .product-item:hover { border-color: var(--muted); }
.menu-section .product-photo.is-empty { background: var(--flour); color: var(--body-copy); }
.menu-section .photo-pending { max-width: 80%; text-align: center; font-size: 14px; line-height: 1.8; }
.menu-section .product-labels { min-height: 24px; }
.menu-section .product-price-wrap { display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .menu-section .product-item { transition: none; } }

.menu-section .add-form .small-button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu-section .product-price-wrap { align-items: flex-start; }
.menu-section .filter-list-scrollable { max-height: none; overflow: visible; }

/* Loaf reference: quiet two-tier masthead and immersive bakery cover. */
.header-search-link { display: none; }
.bakery-cover { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 480px; padding-block: 56px; padding-inline: 24px; background: var(--ink); }
.bakery-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bakery-cover::before { content: ""; position: absolute; inset: 0; background: rgba(25, 16, 12, .68); z-index: -1; }
.bakery-cover-copy { text-align: center; max-width: 40rem; color: #fffaf2; }
.bakery-cover-copy .eyebrow { color: inherit; font-size: 13px; margin: 0 0 16px; }
.bakery-cover-copy h1 { color: inherit; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.4; font-weight: 700; margin: 0 0 18px; }
.bakery-cover-copy > p:not(.eyebrow) { color: inherit; font-size: 16px; line-height: 1.9; margin: 0 0 24px; }
.bakery-cover-copy .button-primary { display: inline-flex; gap: 16px; min-height: 46px; padding-inline: 24px; background: #3e281e; color: #fffaf2; border: 1px solid #fffaf2; border-radius: 4px; }
.bakery-cover-copy .button-primary:focus-visible { outline: 3px solid #fffaf2; outline-offset: 4px; }
@media (min-width: 800px) {
 .site-header-wrapper { background: var(--paper); backdrop-filter: none; }
 .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0; padding-block: 0; }
 .site-header .wordmark { grid-column: 2; grid-row: 1; justify-self: center; padding-block: 16px; }
 .header-search-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; grid-column: 1; grid-row: 1; justify-self: start; color: var(--body-copy); font-size: 14px; }
 .site-header .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
 .site-header .nav-pill { position: static; transform: none; grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 32px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; padding-block: 4px; width: 100%; }
 .nav-pill-item { border-radius: 0; min-height: 44px; }
 .nav-pill-item.is-active { background: transparent; text-decoration: underline; text-underline-offset: 8px; }
 .nav-pill-item .active-dot { display: none; }
}
@media (max-width: 799.98px) {
 .bakery-cover { min-height: 380px; padding-block: 40px; padding-inline: 20px; }
 .bakery-cover-copy h1 { font-size: clamp(32px, 8.5vw, 42px); }
 .bakery-cover-copy > p:not(.eyebrow) { font-size: 15px; }
}

.cover-guidance { padding-block: 16px 0; text-align: center; font-size: 13px; color: var(--body-copy); }
.cover-guidance a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }

.header-search-form { max-width: 18rem; border-block-end: 1px solid var(--line); gap: 4px; }
.header-search-form input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; min-height: 44px; padding-inline: 8px; }
.header-search-form button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.header-search-form:focus-within { outline: 2px solid var(--berry); outline-offset: 3px; }
.header-search-form button:focus-visible { outline: 2px solid var(--berry); }
.site-header .basket-link { min-width: 44px; min-height: 44px; padding-inline: 12px; }
@media (max-width: 799.98px) {
 .site-header .header-search-form { display: flex; grid-column: 1 / -1; order: 3; max-width: none; width: 100%; margin-block: 4px 8px; }
 .site-header { flex-wrap: wrap; }
 .mobile-bottom-basket .mobile-bottom-icon-wrap { margin-block: auto; }
}

.header-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.header-search-panel[hidden] { display: none; }
.header-search-panel { position: absolute; inset-inline: 16px; inset-block-start: 100%; max-width: 40rem; margin-inline: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); }
.header-search-panel label { display: block; margin-block-end: 8px; font-size: 14px; }
.header-search-fields { display: flex; gap: 8px; }
.header-search-fields input { flex: 1; width: 0; min-width: 0; font: inherit; font-size: 16px; min-height: 44px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding-inline: 8px; }
.header-search-fields button { min-width: 44px; min-height: 44px; background: var(--ink); color: var(--paper); border: 0; padding-inline: 12px; cursor: pointer; }
.header-search-toggle:focus-visible, .header-search-fields :focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; }
.site-header .basket-link { position: relative; background: transparent; color: var(--ink); border: 0; }
.site-header .basket-count { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding-inline: 4px; min-width: 16px; border-radius: 4px; background: var(--berry); color: var(--paper); font-size: 12px; line-height: 1.5; }
@media (min-width: 800px) { .header-search-toggle { grid-column: 1; grid-row: 1; justify-self: start; } }
@media (max-width: 799.98px) { .header-search-toggle { margin-inline-start: auto; order: 2; } .site-header .header-actions { order: 3; } }

.header-search-panel { box-sizing: border-box; width: auto; }
.header-search-fields { min-width: 0; }

.search-frost-backdrop { position: fixed; inset: 0; z-index: 49; background: color-mix(in srgb, var(--paper) 35%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.search-frost-backdrop[hidden] { display: none; }
.site-header-wrapper:has(.header-search-panel:not([hidden])) { z-index: 50; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.naron-logo { display: block; width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }

.category-carousel { display: flex; gap: 12px; align-items: center; margin-block: 0 24px; min-width: 0; }
@media (min-width: 800px) {
  .category-carousel { display: none !important; }
}
.category-track { display: flex; gap: 12px; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; padding-block: 4px 10px; scrollbar-width: thin; }
.category-pill { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 56px; padding-inline: 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); scroll-snap-align: start; font-size: 14px; transition: background-color 180ms ease, color 180ms ease; }
.category-pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.category-scroll { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.category-pill:focus-visible, .category-scroll:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
@media (max-width: 799.98px) { .category-scroll { display: none; } .category-pill { padding-inline: 16px; min-height: 52px; } }
@media (prefers-reduced-motion: reduce) { .category-pill { transition: none; } }

@media (prefers-color-scheme: dark) {
  :root {
    --page: #2b211d;
    --paper: #382b25;
    --flour: #49372e;
    --ink: #fff3df;
    --body-copy: #efddc4;
    --muted: #dfcbb3;
    --line: #826659;
    --berry: #ffc5ad;
    --brown: #f0cf9c;
    --sage: #d7dfbb;
  }
  body, .site-footer { background: var(--page); }
  .site-header-wrapper, .site-header, .nav-drawer, .mobile-bottom-nav {
    background: var(--paper);
    color: var(--ink);
  }
  .product-photo, .product-photo.is-empty, .detail-photo,
  .review-card, .testi-card, .order-result-card, .account-panel,
  .profile-card, .order-info-pill, .filter-sidebar, .filter-drawer {
    background: var(--paper);
    border-color: var(--line);
  }
  .filter-option, .diet-label { color: var(--body-copy); }
  .diet-label { background: #3b4430; border-color: #89996e; color: #e0ecc8; }
  .filter-option:hover { background: var(--flour); color: var(--ink); }
  .search-text-input::placeholder { color: var(--muted); opacity: 1; }
  .skip-link { background: var(--ink); color: var(--page); }
  .mobile-bottom-badge { background: var(--berry); color: var(--page); }
  .nav-action-primary, .nav-drawer-btn-primary {
    background: #754638; color: #fff3df; border-color: #ba8b75;
  }
  .nav-action-primary:hover, .nav-drawer-btn-primary:hover {
    background: #8a5140; color: #fff3df;
  }
  .small-button, .plain-button { color: var(--ink); background: var(--paper); }
  .menu-section .add-form .small-button .btn-icon,
  .menu-section .add-form .small-button span,
  .menu-section .add-form .small-button:hover .btn-icon,
  .menu-section .add-form .small-button:hover span { color: inherit; }
  .status-check-success { color: #d5edb1; }
  .status-check-success svg { color: #d5edb1; }
  .status-check-failed { color: #ffc5c5; }
  .status-check-failed svg { color: #ffc5c5; }
  .status-check-pending { color: #ffe2a3; }
  .status-check-pending svg { color: #ffe2a3; }
  .button-primary { background: #ffc5ad; color: #2b211d; }
  .button-primary:hover { background: #ffd6c4; color: #2b211d; }
  .product-item:hover { border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
  .form-field ul label { background: var(--paper); border-color: var(--line); color: var(--ink); }
  .form-field ul label:hover { background: var(--flour); border-color: var(--berry); }
  .form-field ul label:has(input[type="radio"]:checked) {
    background: rgba(255, 197, 173, 0.12);
    border-color: var(--berry);
    color: var(--berry);
    box-shadow: 0 0 0 1px var(--berry);
  }
  .weight-pill {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
  }
  .weight-pill:hover {
    background: var(--flour);
    border-color: var(--berry);
  }
  .weight-pill.is-active,
  .weight-pill:has(input[type="radio"]:checked) {
    background: rgba(255, 197, 173, 0.14);
    border-color: var(--berry);
    color: var(--berry);
  }
  .weight-pill.is-active .weight-pill-price,
  .weight-pill:has(input[type="radio"]:checked) .weight-pill-price {
    color: var(--berry);
  }
}

.menu-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  margin-top: 1rem;
}

.empty-icon-wrap {
  color: var(--muted);
  margin-bottom: 1rem;
  opacity: 0.7;
}

.empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.empty-subtitle {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.empty-reset-btn {
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.empty-reset-btn:hover {
  opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
  .empty-reset-btn {
    background: #ffc5ad;
    color: #2b211d;
  }
}