@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

:root {
  --cream: #fff8eb;
  --paper: #fffdf8;
  --ink: #292018;
  --muted: #74695f;
  --red: #a52920;
  --red-dark: #7d1813;
  --green: #315f31;
  --gold: #d99b37;
  --line: #eadfce;
  --shadow: 0 18px 50px rgba(73, 41, 18, 0.12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.55;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid rgba(234, 223, 206, 0.85);
  background: rgba(255, 248, 235, 0.9);
  backdrop-filter: blur(18px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 18px rgba(88, 40, 13, 0.15);
}
.brand span { display: grid; }
.brand strong { font-family: "Fraunces", Georgia, serif; font-size: 1.18rem; }
.brand small { color: var(--muted); font-size: 0.76rem; }
.site-header-actions { display: flex; align-items: center; gap: 10px; }
.last-order-link {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--red);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
}
.cart-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.cart-button strong {
  display: grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--red);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: center;
  gap: clamp(28px, 6vw, 96px);
  min-height: 650px;
  padding: clamp(56px, 8vw, 110px) clamp(22px, 7vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 40%, rgba(217, 155, 55, 0.2), transparent 30%),
    linear-gradient(145deg, #fffaf0 0%, #f8ead1 100%);
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero h1, .section-heading h2, .category-title h3, .info-section h2, .installer-card h1,
.admin-main h1, .admin-main h2, .dialog-header h2, .drawer-header h2, .success-content h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.04;
}
.hero h1 { max-width: 780px; font-size: clamp(3.3rem, 7vw, 7.5rem); letter-spacing: -0.055em; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-copy > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.2rem); }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}
.button.primary { background: var(--red); color: white; box-shadow: 0 8px 24px rgba(165, 41, 32, 0.2); }
.button.primary:hover { background: var(--red-dark); }
.button.secondary { border-color: var(--line); background: rgba(255, 255, 255, 0.72); color: var(--ink); }
.button.wide { width: 100%; }
.button:disabled { opacity: 0.55; cursor: wait; }
.hero-mark { position: relative; display: grid; place-items: center; }
.hero-mark::before {
  content: "";
  position: absolute;
  width: 116%;
  aspect-ratio: 1;
  border: 1px solid rgba(165, 41, 32, 0.16);
  border-radius: 50%;
}
.hero-mark img {
  position: relative;
  width: min(100%, 520px);
  border-radius: 50%;
  box-shadow: 0 35px 80px rgba(70, 39, 18, 0.22);
  transform: rotate(2deg);
}

.offers-section, .menu-section, .info-section {
  padding: clamp(60px, 8vw, 110px) clamp(18px, 7vw, 110px);
}
.composed-menus-section { overflow:hidden; padding:clamp(52px,7vw,88px) clamp(18px,6vw,88px); background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.62),transparent 28%),linear-gradient(145deg,#fff3d9,#f4d89f); }
.composed-menus-section>.section-heading { width:min(1280px,100%); margin-inline:auto; }
.composed-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(1280px,100%); margin:28px auto 0; gap:24px; }
.composed-menu-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr); min-height:0; overflow:hidden; padding:0; border:1px solid rgba(165,41,32,.22); border-radius:26px; background:linear-gradient(120deg,#fffdf8 55%,#fff7e8); box-shadow:0 24px 65px rgba(91,52,18,.16); transition:transform .2s ease,box-shadow .2s ease; }
.composed-menu-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(70,39,18,.18); }
.composed-menu-card.is-featured { border:2px solid var(--red); }
.composed-menu-media { position:relative; width:100%; height:240px; min-height:240px; max-height:240px; overflow:hidden; background:linear-gradient(135deg,#f7dfae,#fff3d9); }
.composed-menu-media img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; }
.composed-menu-card:hover .composed-menu-media img { transform:scale(1.04); }
.composed-menu-media-shade { position:absolute; inset:0; background:linear-gradient(90deg,transparent 70%,rgba(255,253,248,.16)),linear-gradient(0deg,rgba(40,20,8,.14),transparent 45%); pointer-events:none; }
.composed-menu-content { position:relative; display:flex; flex-direction:column; padding:28px; }
.composed-menu-content::before { content:""; position:absolute; left:0; top:12%; bottom:12%; width:4px; border-radius:999px; background:linear-gradient(var(--green),#fff 48%,var(--red) 52%); }
.composed-menu-content>.offer-badge { position:static; align-self:flex-start; margin-bottom:14px; box-shadow:none; }
.composed-menu-card h3 { margin:0 0 10px; font-family:"Fraunces",Georgia,serif; font-size:clamp(1.85rem,2.2vw,2.5rem); line-height:1.04; letter-spacing:-.035em; }
.composed-menu-card p { max-width:560px; margin:0 0 18px; color:var(--muted); font-size:1.02rem; line-height:1.55; }
.composed-menu-card ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; color:var(--ink); list-style:none; }
.composed-menu-card li { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(33,91,58,.16); border-radius:999px; background:#f0f5ed; font-size:.9rem; font-weight:800; }
.composed-menu-card li::before { content:"✓"; color:var(--green); font-weight:900; }
.composed-menu-buy { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:auto; padding-top:22px; border-top:1px solid rgba(165,41,32,.14); }
.composed-menu-buy>strong { color:var(--red); font-family:"Fraunces",Georgia,serif; font-size:clamp(1.85rem,2.5vw,2.45rem); white-space:nowrap; }
.composed-menu-buy .button { min-width:175px; justify-content:center; }
.compose-menu-dialog { width:min(620px,calc(100% - 24px)); max-height:90vh; padding:0; border:0; border-radius:22px; }
.compose-menu-form { padding:24px; overflow:auto; max-height:90vh; }
.compose-choice-group { margin:18px 0; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.compose-choice-group legend { padding:0 8px; margin-left:10px; font-weight:800; }
.compose-choice-group label { display:flex; border-top:1px solid var(--line); background:#fff; cursor:pointer; }
.compose-choice-group label:first-of-type { border-top:0; }
.compose-choice-group label span { display:block; width:100%; padding:14px; }
.compose-choice-group input { margin:17px 0 0 14px; accent-color:var(--red); }
.compose-choice-group label:has(input:checked) { background:#fff0db; color:var(--red-dark); font-weight:800; }
.compose-group-status { margin:10px 14px 8px; padding:8px 11px; border-radius:10px; background:#fff0db; color:var(--red-dark); font-size:.86rem; font-weight:900; }
.compose-group-status.complete { background:#e2f3e7; color:#155d32; }
.compose-product-choice { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; padding:10px 14px; border-top:1px solid var(--line); background:#fff; }
.compose-product-choice.selected { background:#fff8e9; }
.compose-product-name { font-weight:750; }
.compose-product-counter { display:flex; align-items:center; flex:0 0 auto; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#fff; }
.compose-product-counter button { width:38px; height:36px; border:0; background:#f5eee2; color:var(--red-dark); font-size:1.2rem; font-weight:900; cursor:pointer; }
.compose-product-counter button:disabled { color:#aaa; cursor:not-allowed; opacity:.55; }
.compose-product-counter output { min-width:34px; text-align:center; font-weight:900; }
.compose-group-help { display:block; padding:10px 14px 13px; color:var(--muted); }
.menu-group-editor { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:16px; }
.menu-group-head { display:flex; align-items:end; gap:12px; }
.menu-group-head label { flex:1; }
.menu-group-head .menu-group-count { flex:0 0 145px; }
.menu-repeat-choice { margin:12px 0 4px; padding:10px 12px; border-radius:10px; background:#fff0db; }
.menu-product-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; max-height:280px; overflow:auto; margin-top:12px; padding:10px; background:#fffaf0; border-radius:12px; }
.menu-product-checks label { display:flex; gap:8px; align-items:flex-start; padding:8px; background:#fff; border-radius:9px; }
.menu-product-checks span { display:grid; }
.menu-product-checks small { color:var(--muted); }
.composed-menu-admin-row { display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.composed-menu-admin-row>div:first-child { display:grid; }
.composed-menu-admin-main { display:flex!important; grid-template-columns:none!important; align-items:center; gap:12px; min-width:0; }
.composed-menu-admin-thumb { width:72px; height:56px; flex:0 0 auto; object-fit:cover; border-radius:10px; background:var(--cream); border:1px solid var(--line); }
.composed-menu-admin-copy { display:grid; min-width:0; }
.menu-status { display:inline-flex; align-items:center; width:max-content; gap:6px; margin-top:5px; padding:4px 9px; border-radius:999px; font-size:.76rem; font-weight:800; }
.menu-status.active { color:#155d32; background:#dff4e6; }
.menu-status.inactive { color:#666; background:#eceae5; }
.menu-image-admin { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--cream); }
.menu-image-admin img { width:140px; height:90px; object-fit:cover; border-radius:10px; }
.menu-toggle-button { border:0; border-radius:10px; padding:8px 11px; font:inherit; font-size:.84rem; font-weight:800; cursor:pointer; }
.menu-toggle-button.disable { background:#f4e3df; color:var(--red-dark); }
.menu-toggle-button.enable { background:#dff4e6; color:#155d32; }
.order-item-choices { display:block; margin:3px 0 0 22px; color:var(--muted); font-weight:500; }
.composed-order-item { align-items:flex-start; padding:14px 12px!important; background:#fffdf8; }
.composed-order-main { display:grid; flex:1; min-width:0; gap:10px; }
.composed-order-title { font-size:1.05rem; font-weight:850; }
.composed-order-title>strong { color:var(--red-dark); }
.composed-order-choices { display:grid; gap:8px; margin-left:22px; padding-left:13px; border-left:3px solid var(--gold); }
.composed-order-choice-group { display:grid; gap:3px; }
.composed-order-choice-group>strong { color:var(--green); font-size:.78rem; font-weight:950; letter-spacing:.055em; text-transform:uppercase; }
.composed-order-choice-group ul { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.composed-order-choice-group li { position:relative; padding-left:14px; color:var(--ink); font-weight:700; }
.composed-order-choice-group li::before { content:"–"; position:absolute; left:0; color:var(--red); font-weight:900; }
.composed-order-price { flex:0 0 auto; font-weight:850; white-space:nowrap; }
@media(max-width:1050px) and (min-width:761px){.composed-menu-grid{grid-template-columns:minmax(0,1fr);width:min(900px,100%)}.composed-menu-card{grid-template-columns:minmax(280px,42%) minmax(0,58%)}.composed-menu-media{height:100%;min-height:360px;max-height:none}.composed-menu-content{justify-content:center}.composed-menu-card h3{font-size:clamp(2rem,3vw,2.8rem)}}
@media(max-width:760px){.composed-menus-section{padding-inline:14px}.composed-menu-grid{grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;gap:18px}.composed-menu-card{grid-template-columns:minmax(0,1fr)!important;width:100%;min-width:0;min-height:0;border-radius:22px}.composed-menu-media{width:100%;height:220px;min-height:220px;max-height:220px}.composed-menu-content{width:100%;min-width:0;padding:24px 20px 22px}.composed-menu-content::before{display:none}.composed-menu-card h3{font-size:2rem}.composed-menu-buy,.menu-group-head,.composed-menu-admin-row{align-items:stretch;flex-direction:column}.menu-group-head .menu-group-count{flex-basis:auto}.composed-menu-buy{gap:12px}.composed-menu-buy .button{width:100%}.menu-product-checks{grid-template-columns:1fr}}
.offers-section { background: var(--green); color: white; }
.offers-section .eyebrow { color: #e9c67f; }
.section-heading h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); letter-spacing: -0.035em; }
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.offer-card {
  position: relative;
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}
.offer-card h3 { margin: 28px 0 8px; font-family: "Fraunces", Georgia, serif; font-size: 1.65rem; }
.offer-card p { color: rgba(255, 255, 255, 0.8); }
.offer-badge, .mini-badge {
  display: inline-flex;
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: #3d2505;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.offer-price { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
.offer-price strong { color: #ffde9d; font-size: 1.7rem; }
.offer-price del { color: rgba(255, 255, 255, 0.55); }

.menu-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.search-box input {
  width: min(340px, 100%);
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
}
.category-nav {
  position: sticky;
  z-index: 10;
  top: 79px;
  display: flex;
  gap: 8px;
  margin: 34px calc(clamp(18px, 7vw, 110px) * -1) 0;
  padding: 14px clamp(18px, 7vw, 110px);
  overflow-x: auto;
  border-block: 1px solid var(--line);
  background: rgba(255, 248, 235, 0.94);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}
.category-nav a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
}
.category-section { scroll-margin-top: 150px; padding-top: 58px; }
.category-title { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.category-title h3 { color: var(--red); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.category-title p { margin: 0; color: var(--muted); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 130px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(69, 42, 20, 0.08); }
.product-image-wrap {
  position: relative;
  flex: 0 0 clamp(150px, 34%, 210px);
  width: clamp(150px, 34%, 210px);
  height: 112px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper);
}
.product-image-wrap::before,
.product-image-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 34%;
  pointer-events: none;
}
.product-image-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(255, 253, 248, 0.82) 20%, transparent 100%);
}
.product-image-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper) 0%, rgba(255, 253, 248, 0.82) 20%, transparent 100%);
}
.product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.3s ease;
}
.product-card:hover .product-image { transform: scale(1.13); }
.product-copy { flex: 1 1 auto; min-width: 0; }
.product-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.product-card h4 { margin: 0; font-size: 1.02rem; }
.product-card p { margin: 7px 0 0; color: var(--muted); font-size: 0.88rem; }
.product-card small { color: var(--muted); }
.product-buy { display: grid; flex: 0 0 auto; grid-template-columns: auto 42px; align-items: center; column-gap: 10px; }
.product-buy > strong { color: var(--red); font-size: 1.05rem; white-space: nowrap; }
.product-buy > small { grid-column: 1; text-align: right; font-size: 0.69rem; }
.product-buy > .minimum-note { grid-column: 1 / -1; color: var(--red); font-weight: 800; text-align: right; }
.add-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.add-button.added { transform: scale(1.18); background: var(--green); }
.allergen-note {
  margin: 40px 0 0;
  padding: 18px;
  border-radius: 14px;
  background: #f0e5d2;
  color: #675747;
  font-size: 0.88rem;
}

.info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: #f2e3cb;
}
.info-section article {
  min-height: 280px;
  padding: clamp(26px, 5vw, 48px);
  border-radius: var(--radius);
  background: var(--paper);
}
.info-section h2 { max-width: 620px; font-size: clamp(2rem, 4vw, 3.4rem); }
.info-section a { display: inline-block; margin-top: 24px; color: var(--red); font-weight: 800; }
.hours { margin-top: 18px; color: var(--muted); line-height: 1.8; }
.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 32px clamp(18px, 7vw, 110px);
  background: #251b16;
  color: white;
}
.site-footer img { width: 64px; height: 64px; border-radius: 50%; }
.site-footer p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.65); }
.site-footer nav { display: flex; gap: 16px; }

.drawer-backdrop {
  position: fixed;
  z-index: 49;
  inset: 0;
  background: rgba(34, 22, 15, 0.52);
  backdrop-filter: blur(3px);
}
.cart-drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(450px, 100%);
  height: 100dvh;
  padding: 24px;
  background: var(--paper);
  box-shadow: -20px 0 50px rgba(32, 20, 12, 0.18);
  transform: translateX(105%);
  transition: transform 0.28s ease;
}
.cart-drawer.open { transform: translateX(0); }
.drawer-header, .dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.drawer-header h2, .dialog-header h2 { font-size: 2rem; }
.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  font-size: 1.5rem;
  cursor: pointer;
}
.cart-empty { display: grid; flex: 1; place-content: center; text-align: center; color: var(--muted); }
.cart-empty span { font-size: 3rem; }
.cart-empty h3 { margin: 12px 0 0; color: var(--ink); }
.cart-empty p { margin: 4px 0; }
.cart-items { flex: 1; margin: 24px -4px; overflow-y: auto; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.cart-item > div:first-child { display: grid; }
.cart-item small { color: var(--muted); }
.quantity-control { display: flex; align-items: center; gap: 9px; }
.quantity-control button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; }
.cart-summary { padding-top: 16px; border-top: 1px solid var(--line); }
.cart-summary > div { display: flex; justify-content: space-between; margin: 7px 0; }
.cart-total { padding: 12px 0; font-size: 1.2rem; }

.slot-picker {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 22px 0;
  overflow: hidden;
}
.slot-picker legend { margin-bottom: 12px; font-size: 1rem; }
.slot-day-tabs {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.slot-day-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.slot-day-button.is-active {
  border-color: var(--red);
  background: var(--red);
  color: white;
  box-shadow: 0 6px 16px rgba(165, 41, 32, 0.18);
}
.customer-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  margin-top: 12px;
}
.slot-hour-group {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.slot-hour-group.is-open { border-color: #c7a46d; box-shadow: 0 7px 18px rgba(68, 47, 31, 0.09); }
.slot-hour-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border: 0;
  background: #f8f2e9;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.slot-hour-toggle > span:first-child { display: grid; gap: 2px; }
.slot-hour-toggle strong { font-size: 1.05rem; }
.slot-hour-toggle small { color: var(--muted); font-weight: 700; }
.slot-hour-chevron { font-size: 1.45rem; line-height: 1; transition: transform 0.2s ease; }
.slot-hour-group.is-open .slot-hour-chevron { transform: rotate(180deg); }
.slot-hour-choices {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  padding: 10px;
}
.slot-hour-choices[hidden] { display: none; }
.customer-slot {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 58px;
  place-content: center;
  padding: 9px 6px;
  border: 2px solid transparent;
  border-radius: 14px;
  text-align: center;
}
.customer-slot strong { font-size: 1.08rem; }
.customer-slot small { font-size: 0.7rem; font-weight: 700; }
.customer-slot.is-available {
  border-color: #56a865;
  background: #e8f7eb;
  color: #215a2b;
  cursor: pointer;
}
.customer-slot.is-available:hover { background: #d9f1de; }
.customer-slot.is-selected,
.customer-slot[aria-pressed="true"] {
  border-color: #f2c14e !important;
  background: #145c2e !important;
  color: white !important;
  box-shadow: 0 0 0 3px #145c2e, 0 10px 24px rgba(20, 92, 46, 0.34) !important;
  transform: scale(1.015);
}
.customer-slot.is-selected::after,
.customer-slot[aria-pressed="true"]::after { content:"✓"; position:absolute; top:7px; right:9px; display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:#f2c14e; color:#145c2e; font-size:.82rem; font-weight:1000; }
.customer-slot.is-selected strong,.customer-slot[aria-pressed="true"] strong { color:#fff!important; font-size:1.22rem; }
.customer-slot.is-selected small,.customer-slot[aria-pressed="true"] small { color:#fff!important; font-size:.76rem; letter-spacing:.025em; }
.field-help.slot-confirmed {
  display:block;
  margin-top:10px;
  padding:11px 13px;
  border:2px solid #2e7d3c;
  border-radius:12px;
  background:#e5f5e9;
  color:#155d32;
  font-weight:900;
}
.customer-slot.is-full {
  border-color: #d0645c;
  background: #fde8e6;
  color: #932c25;
  opacity: 1;
  cursor: not-allowed;
}
.slot-loading, .slot-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #f4eee4;
  color: var(--muted);
  text-align: center;
}
.cancellation-dialog { width: min(470px, calc(100% - 24px)); }
.cancellation-content { padding: clamp(24px, 6vw, 38px); text-align: center; }
.cancellation-content h2 { margin: 8px 0 10px; color: var(--red); font-family: "Fraunces", Georgia, serif; font-size: 2rem; }
.cancellation-content > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); }
.cancellation-content .button + .button { margin-top: 10px; }
.cancellation-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 50%;
  background: #fde8e6;
  color: var(--red);
  font-size: 2rem;
  font-weight: 900;
}

dialog {
  width: min(680px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(34, 22, 15, 0.58); backdrop-filter: blur(4px); }
.checkout-form, .otp-form, .whatsapp-form, .success-content { padding: clamp(22px, 5vw, 38px); }
fieldset { padding: 0; border: 0; }
fieldset legend { margin-bottom: 9px; font-weight: 800; }
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.choice-cards legend { grid-column: 1 / -1; }
.choice-cards label { position: relative; cursor: pointer; }
.choice-cards input { position: absolute; opacity: 0; }
.choice-cards span {
  display: grid;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.choice-cards input:checked + span { border-color: var(--red); box-shadow: 0 0 0 2px rgba(165, 41, 32, 0.12); }
.choice-cards small { color: var(--muted); }
.stack-form, .checkout-form, .otp-form, .whatsapp-form { display: grid; gap: 16px; }
.checkout-form .dialog-header { margin-bottom: 4px; }
.stack-form label, .checkout-form > label, .otp-form > label, .form-grid label, .admin-form label {
  display: grid;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 700;
}
input, textarea, select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #d9ccba;
  border-radius: 11px;
  background: white;
  color: var(--ink);
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(165, 41, 32, 0.14); border-color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-help, .small-note { color: var(--muted); font-size: 0.77rem; font-weight: 400; }
.privacy-check { grid-template-columns: auto 1fr !important; align-items: start; }
.privacy-check input { width: 20px; min-height: 20px; margin-top: 2px; }
.checkout-total { display: flex; justify-content: space-between; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 1.18rem; }
.payment-note { margin: -6px 0 0; color: var(--muted); font-size: 0.82rem; }
.otp-form .dialog-header { margin-bottom: 2px; }
.otp-form > p { margin: 0; color: var(--muted); }
.otp-form .otp-explanation {
  padding: 12px 14px;
  border-radius: 11px;
  background: #f0e5d2;
  color: #675747;
  font-size: 0.86rem;
}
.otp-code {
  min-height: 62px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.28em;
}
.otp-resend { justify-self: center; margin-top: 2px; }
.whatsapp-form > p { margin: 0; color: var(--muted); }
.confirmation-code-box {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px dashed #3c9b61;
  border-radius: 14px;
  background: #ecf8ef;
  text-align: center;
}
.confirmation-code-box span { color: #3f6650; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.confirmation-code-box strong { color: #176b3a; font-size: 1.75rem; letter-spacing: 0.08em; }
.whatsapp-button {
  border-color: #178c4d;
  background: #1fa85d;
  color: white;
}
.whatsapp-button:hover { background: #178c4d; color: white; }
.whatsapp-explanation {
  padding: 12px 14px;
  border-radius: 11px;
  background: #f0e5d2;
  color: #675747 !important;
  font-size: 0.86rem;
}
.link-button:disabled { color: var(--muted); cursor: wait; }
.success-content { text-align: center; }
.success-icon { display: grid; width: 72px; height: 72px; margin: 0 auto 24px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 2rem; }
.success-content h2 { font-size: 3rem; }
.success-content .button { margin-top: 12px; }
.alert { padding: 12px 14px; border-radius: 11px; font-size: 0.88rem; }
.alert.error { background: #fde0dc; color: #7d1813; }
.alert.success { background: #dff1dc; color: #254e25; }
.alert.info { background: #e9edf6; color: #34445f; }

.installer-page, .login-page { display: grid; min-height: 100dvh; place-items: center; padding: 20px; background: radial-gradient(circle at top, #fffaf0, #edd8b8); }
.installer-card, .login-card {
  width: min(720px, 100%);
  padding: clamp(24px, 6vw, 52px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.installer-logo, .login-logo { display: block; width: 130px; margin: 0 auto 24px; border-radius: 50%; }
.installer-card > .eyebrow, .installer-card > h1, .installer-card > p, .login-card > .eyebrow, .login-card > h1 { text-align: center; }
.installer-card h1, .login-card h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.installer-card hr { width: 100%; border: 0; border-top: 1px solid var(--line); }

/* Admin */
.admin-body { background: #f6f0e6; }
.admin-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(16px);
}
.admin-header .brand img { width: 46px; height: 46px; }
.admin-nav { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
.admin-nav a { padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.admin-nav a:hover, .admin-nav a.active { background: #f2e3cb; color: var(--red); }
.admin-main { width: min(1400px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 70px; }
.admin-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.admin-main h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.admin-main h2 { font-size: 2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.stat-card strong { display: block; color: var(--red); font-family: "Fraunces", Georgia, serif; font-size: 2rem; }
.stat-card span { color: var(--muted); font-size: 0.83rem; }
.admin-panel { margin-bottom: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.order-grid { display: grid; gap: 14px; }
.order-card { padding: 20px; border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: 16px; background: white; }
.order-card[data-status="new"] { border-left-color: var(--red); box-shadow: 0 8px 26px rgba(165, 41, 32, 0.11); }
.order-card[data-status="preparing"] { border-left-color: var(--gold); }
.order-card[data-status="ready"] { border-left-color: var(--green); }
.order-top { display: flex; justify-content: space-between; gap: 14px; }
.order-identity { display: flex; align-items: flex-start; gap: 16px; }
.order-received-time {
  display: grid;
  min-width: 88px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7ead7;
  text-align: center;
}
.order-received-time small { color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.order-received-time strong { color: var(--red); font-family: "Fraunces", Georgia, serif; font-size: 1.65rem; line-height: 1.1; }
.order-number { font-size: 1.25rem; }
.order-customer { display: block; margin-top: 2px; font-weight: 700; }
.order-meta { color: var(--muted); font-size: 0.85rem; }
.order-total-status { display: grid; justify-items: end; gap: 7px; }
.order-total-status > strong { font-size: 1.18rem; }
.verified-phone { color: var(--green); font-weight: 800; }
.requested-time {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: #f6f0e6;
}
.requested-time span { color: var(--muted); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.requested-time strong { color: var(--red); font-size: 1.12rem; }
.requested-time small { color: var(--muted); }
.order-items { margin: 15px 0; padding: 13px 0; border-block: 1px solid var(--line); }
.order-category-groups { display: grid; gap: 12px; margin: 15px 0; }
.order-category-group { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fffdf8; }
.order-category-heading { display: flex; justify-content: space-between; gap: 12px; padding: 9px 13px; background: #edf5e8; color: var(--green); }
.order-category-heading span { font-size: .78rem; font-weight: 800; }
.order-category-group .order-item-row { padding: 9px 13px; }
.order-category-group .order-item-row + .order-item-row { border-top: 1px solid var(--line); }
.reschedule-box { margin-top: 14px; padding: 13px; border: 1px dashed var(--gold); border-radius: 13px; background: #fff9e9; }
.reschedule-box summary { color: var(--red); font-weight: 900; cursor: pointer; }
.reschedule-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.reschedule-form label { display: grid; gap: 5px; flex: 1 1 250px; font-size: .78rem; font-weight: 800; }
.reschedule-form input { min-height: 46px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.schedule-changed { padding: 9px 12px; border-radius: 10px; background: #fff2c9; color: #6d4c0d; font-size: .82rem; }
.sound-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.accounting-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.accounting-filters label { display: grid; gap: 5px; min-width: 150px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.accounting-filters input, .accounting-filters select { min-height: 46px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.filter-hidden { display: none !important; }
.period-title { margin: 26px 0 15px !important; }
.accounting-stats .income strong, .text-income { color: #217346; }
.accounting-stats .expense strong, .text-expense { color: #b52b25; }
.accounting-stats .balance strong { color: #275d9b; }
.accounting-stats .online strong { color: #765020; }
.accounting-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.chart-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; }
.income-dot::before { background: #39a86b; }
.expense-dot::before { background: #d85a52; }
.finance-chart { display: flex; align-items: end; gap: 5px; min-height: 260px; margin-top: 22px; padding: 18px 8px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.chart-day { display: grid; grid-template-rows: 210px auto; flex: 1 0 24px; min-width: 24px; text-align: center; }
.chart-bars { display: flex; align-items: end; justify-content: center; gap: 2px; }
.chart-bars i { display: block; width: 42%; min-height: 2px; border-radius: 5px 5px 0 0; }
.income-bar { background: #39a86b; }
.expense-bar { background: #d85a52; }
.chart-day small { padding-top: 5px; color: var(--muted); font-size: .62rem; transform: rotate(-45deg); transform-origin: top center; }
.order-item-row { display: flex; justify-content: space-between; gap: 14px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.order-actions form { margin: 0; }
.status-button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; font-weight: 700; cursor: pointer; }
.status-button:hover { border-color: var(--red); color: var(--red); }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; }
.admin-table .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-form { display: grid; gap: 13px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.admin-form .check-row { display: flex; align-items: center; gap: 9px; }
.admin-form .check-row input { width: 20px; min-height: 20px; }
.admin-form label > small { display: block; margin-top: 5px; color: var(--muted); font-weight: 500; }
.product-image-admin { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); }
.product-image-admin img { width: 120px; height: 90px; border-radius: 10px; object-fit: cover; }
.product-table-thumb { display: block; width: 58px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--cream); }
.product-table-no-image { color: var(--muted); }
.inline-form { display: inline; }
.link-button { padding: 0; border: 0; background: transparent; color: var(--red); text-decoration: underline; cursor: pointer; }
.danger { color: #8b1712 !important; }
.admin-split { display: grid; grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.8fr); gap: 18px; align-items: start; }
.configuration-status {
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0e5d2;
  color: #675747;
  font-size: 0.8rem;
  font-weight: 800;
}
.configuration-status.is-active { background: #dff1dc; color: #254e25; }
.setup-list { margin: 0; padding-left: 22px; }
.setup-list li + li { margin-top: 8px; }
.verification-steps { margin: 0 0 18px; padding-left: 22px; }
.verification-steps li + li { margin-top: 8px; }
.pending-verifications { border-color: #9bd5af; box-shadow: 0 10px 30px rgba(23, 140, 77, 0.08); }
.pending-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.pending-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 18px; }
.pending-card { padding: 17px; border: 1px solid #b9ddc5; border-radius: 14px; background: #f8fff9; }
.pending-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.pending-card-top > div { display: grid; gap: 3px; }
.confirmation-code { color: #176b3a; font-size: 1.25rem; letter-spacing: 0.05em; }
.pending-items { display: grid; gap: 4px; margin: 12px 0; padding: 10px 0; border-block: 1px solid #d6e9dc; }
.pending-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pending-actions form { margin: 0; }

.calendar-panel { padding: clamp(14px, 3vw, 26px); }
.calendar-heading {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  text-align: center;
}
.calendar-heading h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.calendar-arrow {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--red);
  text-decoration: none;
  font-size: 2rem;
  line-height: 1;
}
.calendar-scroll { overflow-x: auto; padding-bottom: 5px; }
.order-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  min-width: 810px;
  gap: 7px;
}
.calendar-weekday {
  padding: 7px;
  color: var(--muted);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-day {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  min-height: 0;
  padding: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.calendar-day:not(.is-empty):hover {
  border-color: #c9a672;
  box-shadow: 0 8px 20px rgba(67, 41, 19, 0.09);
  transform: translateY(-1px);
}
.calendar-day.is-empty { border-color: transparent; background: transparent; }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px rgba(165, 41, 32, 0.22); }
.calendar-day.is-selected { border-color: var(--red); background: #fff3e9; box-shadow: inset 0 0 0 2px var(--red); }
.calendar-day-number { align-self: flex-end; color: var(--muted); font-size: 0.8rem; font-weight: 900; }
.calendar-day.is-selected .calendar-day-number { color: var(--red); }
.calendar-order-codes { display: grid; gap: 3px; margin-top: 4px; overflow: hidden; }
.calendar-order-code {
  display: block;
  padding: 3px 5px;
  overflow: hidden;
  border-left: 4px solid #aa9477;
  border-radius: 5px;
  background: #f3ece2;
  font-size: 0.61rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-more { color: var(--muted); font-size: 0.65rem; font-weight: 800; }
.status-new { border-color: var(--red) !important; }
.status-accepted { border-color: #4178bd !important; }
.status-preparing { border-color: var(--gold) !important; }
.status-ready { border-color: #2d8b4e !important; }
.status-completed { border-color: #798279 !important; }
.status-cancelled { border-color: #292018 !important; }
.order-status-badge.status-new { background: #fde0dc; color: #7d1813; }
.order-status-badge.status-accepted { background: #e1ebfa; color: #244f86; }
.order-status-badge.status-preparing { background: #fff0ce; color: #77500f; }
.order-status-badge.status-ready { background: #dff1dc; color: #254e25; }
.order-status-badge.status-completed { background: #e7ebe7; color: #455045; }
.order-status-badge.status-cancelled { background: #e8e2df; color: #4d4039; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; color: var(--muted); font-size: 0.72rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 10px; height: 10px; border: 0 !important; border-radius: 50%; background: #aa9477; }
.calendar-legend i.status-new { background: var(--red); }
.calendar-legend i.status-accepted { background: #4178bd; }
.calendar-legend i.status-preparing { background: var(--gold); }
.calendar-legend i.status-ready { background: #2d8b4e; }
.calendar-legend i.status-completed { background: #798279; }
.calendar-legend i.status-cancelled { background: #292018; }
.selected-day-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 36px 0 18px;
}
.selected-day-heading h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.empty-day { text-align: center; }

/* Stato ordine cliente */
.tracking-body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 155, 55, 0.2), transparent 34%),
    #f6f0e6;
}
.tracking-shell { width: min(820px, calc(100% - 24px)); margin: 0 auto; padding: 22px 0 50px; }
.tracking-brand {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 10px;
  margin: 0 auto 20px;
  color: inherit;
  text-decoration: none;
}
.tracking-brand img { width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 5px 18px rgba(70, 39, 18, 0.16); }
.tracking-brand span { display: grid; }
.tracking-brand strong { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; }
.tracking-brand small { color: var(--muted); }
.tracking-card {
  padding: clamp(22px, 5vw, 42px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.tracking-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.tracking-heading h1 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; }
.tracking-heading h1 span { color: var(--red); }
.tracking-live { color: #267341; font-size: 0.75rem; font-weight: 900; white-space: nowrap; }
.tracking-current {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  padding: 20px;
  border: 1px solid #b9ddc5;
  border-radius: 18px;
  background: #f2fbf4;
}
.tracking-current[data-status="cancelled"] { border-color: #ebaaa4; background: #fff0ee; }
.tracking-current-icon {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 1.5rem;
  font-weight: 900;
}
.tracking-current[data-status="cancelled"] .tracking-current-icon { background: var(--red); }
.tracking-current small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.tracking-current strong { display: block; color: var(--green); font-size: 1.35rem; }
.tracking-current[data-status="cancelled"] strong { color: var(--red); }
.tracking-current p { margin: 3px 0 0; color: var(--muted); }
.tracking-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 14px 0 4px;
  list-style: none;
}
.tracking-timeline li { position: relative; display: grid; justify-items: center; gap: 8px; color: #998d82; text-align: center; }
.tracking-timeline li::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 17px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: #e4d9ca;
}
.tracking-timeline li:first-child::before { display: none; }
.tracking-timeline li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid #e4d9ca;
  border-radius: 50%;
  background: white;
  font-size: 0.78rem;
  font-weight: 900;
}
.tracking-timeline li strong { max-width: 110px; font-size: 0.72rem; line-height: 1.25; }
.tracking-timeline li.is-done { color: var(--green); }
.tracking-timeline li.is-done::before { background: var(--green); }
.tracking-timeline li.is-done > span { border-color: var(--green); background: var(--green); color: white; }
.tracking-timeline li.is-current > span { box-shadow: 0 0 0 6px rgba(49, 95, 49, 0.13); }
.tracking-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 30px;
}
.tracking-details div { display: grid; padding: 14px; border-radius: 12px; background: #f6f0e6; }
.tracking-details span { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.tracking-updated { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 0.75rem; }
.tracking-actions { display: flex; gap: 10px; margin-top: 22px; }
.tracking-actions .button { flex: 1; }
.completion-dialog, .cancellation-dialog { border:0; border-radius:22px; width:min(520px,calc(100% - 24px)); padding:0; box-shadow:0 24px 80px rgba(36,20,12,.28); }
.completion-dialog::backdrop, .cancellation-dialog::backdrop { background:rgba(35,22,16,.62); }
.completion-content, .cancellation-content { padding:28px; text-align:center; }
.completion-content .button, .cancellation-content .button { margin-top:10px; }
.review-form { margin-top:18px; text-align:left; }
.review-form textarea { width:100%; margin-top:8px; }
.star-rating { display:block; border:0; margin:0 0 18px; padding:0; text-align:center; }
.star-rating legend { width:100%; margin-bottom:8px; text-align:center; }
.star-buttons { display:flex; justify-content:center; gap:4px; }
.star-buttons button { appearance:none; -webkit-appearance:none; width:48px; min-width:48px; height:48px; padding:0; border:0; background:transparent; color:#d5c8b9; cursor:pointer; font-size:2.6rem; line-height:1; touch-action:manipulation; }
.star-buttons button.is-selected { color:var(--gold); }
.star-buttons button:focus-visible { outline:3px solid rgba(181,32,37,.3); border-radius:10px; }
.star-rating-value { min-height:1.25rem; margin:6px 0 0; color:var(--muted); font-size:.86rem; }
.reviews-strip { display:flex; align-items:center; gap:16px; padding:10px clamp(14px,4vw,50px); background:#fff8ec; border-bottom:1px solid var(--line); overflow:hidden; }
.reviews-summary { min-width:max-content; display:grid; }
.reviews-summary strong { color:var(--red); font-size:1.1rem; }
.reviews-summary span { color:var(--muted); font-size:.72rem; }
.reviews-scroll { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.reviews-scroll article { min-width:220px; max-width:320px; padding:8px 12px; border-radius:12px; background:white; }
.reviews-scroll article > span { color:var(--gold); letter-spacing:1px; }
.reviews-scroll p { margin:3px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.82rem; }
.tracking-error { text-align: center; }
.tracking-error h1 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(2.2rem, 7vw, 4rem); }
.lookup-card { max-width: 600px; margin: 0 auto; }
.lookup-card h1 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(2.2rem, 7vw, 4rem); }
.lookup-form { display: grid; gap: 16px; margin-top: 24px; }
.lookup-form label { display: grid; gap: 7px; font-weight: 800; }
.lookup-form input { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: white; font: inherit; text-transform: uppercase; }
.lookup-form input[name="phone_last4"] { letter-spacing: 0.35em; }
.lookup-privacy { margin: 18px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.scheduled-field select { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: white; font: inherit; }
.slot-date-picker, .slot-day-nav { display: flex; align-items: end; gap: 10px; }
.slot-date-picker label { display: grid; gap: 5px; font-weight: 800; }
.slot-date-picker input { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.slot-day-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.slot-day-heading h2, .slot-day-heading p { margin: 0; }
.slot-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.slot-admin-card { padding: 16px; border: 2px solid transparent; border-radius: 16px; background: #f4f0e9; }
.slot-admin-card.is-free { border-color: #62a36d; background: #eff8f0; }
.slot-admin-card.is-partial { border-color: #e79b32; background: #fff7e8; }
.slot-admin-card.is-full { border-color: #c84b43; background: #fff0ee; }
.slot-admin-card.is-blocked { border-color: #8c8c8c; background: #ececec; }
.slot-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slot-card-top strong { font-size: 1.55rem; }
.slot-state { margin: 4px 0 10px; font-weight: 900; }
.slot-orders { margin: 0 0 12px; padding-left: 18px; }
.slot-edit-form { display: grid; gap: 10px; margin: 12px 0; }
.slot-edit-form label { display: grid; gap: 5px; }
.slot-edit-form input { padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.slot-rules-list { display: grid; gap: 8px; }
.slot-rules-list > div { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f6f0e6; }
.slot-add-rule { margin-top: 18px; }
.slot-add-rule summary, .slot-admin-card summary { cursor: pointer; font-weight: 900; }
.slot-rule-editor { position:relative; }
.slot-rule-editor>summary { cursor:pointer; color:var(--red); font-weight:900; }
.slot-rule-form { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); gap:9px; width:min(520px,80vw); margin:12px 0; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fffaf0; }
.slot-rule-form label { display:grid; gap:5px; }
.slot-rule-form .button { align-self:end; }

@media (max-width: 860px) {
  .brand small { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-mark { order: -1; }
  .hero-mark img { width: min(72vw, 360px); }
  .product-grid, .info-section { grid-template-columns: 1fr; }
  .menu-heading { align-items: stretch; flex-direction: column; }
  .search-box input { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-split { grid-template-columns: 1fr; }
  .admin-header { align-items: flex-start; flex-direction: column; }
  .admin-nav { width: 100%; }
  .order-calendar { grid-template-columns: repeat(7, minmax(100px, 1fr)); min-width: 740px; }
}

@media (max-width: 560px) {
  .site-header { padding: 9px 12px; }
  .brand { min-width: 0; }
  .brand span { min-width: 0; }
  .brand img { width: 46px; height: 46px; }
  .brand strong { max-width: 108px; overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
  .site-header-actions { flex: 0 0 auto; gap: 6px; }
  .cart-button span { display: none; }
  .last-order-link { max-width: 98px; padding: 8px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { padding: 38px 18px 58px; gap: 28px; }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.5rem); }
  .hero-actions .button { width: 100%; }
  .offers-section, .menu-section, .info-section { padding-inline: 14px; }
  .category-nav { top: 65px; margin-inline: -14px; padding-inline: 14px; }
  .category-title { align-items: flex-start; flex-direction: column; }
  .product-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "image copy" "image buy";
    align-items: start;
    min-height: 120px;
    padding: 12px;
    gap: 8px 12px;
  }
  .product-card.no-product-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "buy";
  }
  .product-copy { grid-area: copy; align-self: start; }
  .product-card h4 { font-size: 1rem; line-height: 1.15; }
  .product-card p { margin-top: 5px; font-size: .82rem; line-height: 1.35; }
  .product-card small { font-size: .72rem; }
  .product-image-wrap {
    grid-area: image;
    width: 96px;
    height: 100%;
    min-height: 96px;
    max-width: 96px;
    border-radius: 12px;
  }
  .product-image-wrap::before, .product-image-wrap::after { width: 18%; }
  .product-buy {
    grid-area: buy;
    grid-template-columns: auto 38px;
    justify-content: end;
    column-gap: 7px;
    width: 100%;
    align-self: end;
    margin-top: 0;
  }
  .product-buy > strong { align-self: center; text-align: right; }
  .product-buy > small { text-align: right; }
  .product-buy > .minimum-note { text-align: right; }
  .site-footer { grid-template-columns: auto 1fr; }
  .site-footer nav { grid-column: 1 / -1; }
  .cart-drawer { padding: 18px; }
  .choice-cards, .form-grid, .admin-form-grid { grid-template-columns: 1fr; }
  .slot-picker, .customer-slot-grid, .slot-hour-group, .slot-hour-toggle, .slot-hour-choices, .customer-slot {
    min-width: 0;
    max-width: 100%;
  }
  .slot-hour-choices { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .customer-slot { min-height: 58px; border-radius: 12px; overflow: hidden; }
  .slot-rule-form { grid-template-columns: 1fr; width: min(78vw, 360px); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .admin-main { width: min(100% - 20px, 1400px); }
  .admin-title-row { align-items: flex-start; flex-direction: column; }
  .selected-day-heading { align-items: flex-start; flex-direction: column; }
  .order-top, .order-identity { align-items: flex-start; }
  .order-top { flex-direction: column; }
  .composed-order-item { flex-direction:column; }
  .composed-order-choices { margin-left:8px; }
  .composed-order-price { align-self:flex-end; }
  .order-total-status { justify-items: start; }
  .order-received-time { min-width: 74px; }
  .tracking-heading { align-items: flex-start; flex-direction: column; }
  .tracking-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 3px; }
  .tracking-timeline li {
    grid-template-columns: 42px 1fr;
    justify-items: start;
    align-items: center;
    min-height: 62px;
    text-align: left;
  }
  .tracking-timeline li::before {
    top: -50%;
    left: 17px;
    width: 3px;
    height: 100%;
  }
  .tracking-timeline li strong { max-width: none; font-size: 0.86rem; }
  .tracking-actions { flex-direction: column; }
  .slot-day-heading, .slot-date-picker, .slot-day-nav { align-items: stretch; flex-direction: column; }
  .slot-rules-list > div { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .product-card { grid-template-columns: 86px minmax(0,1fr); gap:7px 10px; }
  .product-image-wrap { width:86px; max-width:86px; }
}

.payment-choice { border:0; padding:0; margin:1rem 0; display:grid; gap:.65rem; }
.payment-choice legend { font-weight:800; margin-bottom:.55rem; }
.payment-choice .choice-card { display:flex; align-items:center; gap:.8rem; border:2px solid #e4ddd5; border-radius:14px; padding:.85rem 1rem; cursor:pointer; background:#fff; }
.payment-choice .choice-card:has(input:checked) { border-color:#9f1f17; background:#fff7f4; }
.payment-choice .choice-card input { width:1.15rem; height:1.15rem; accent-color:#9f1f17; }
.payment-choice .choice-card span { display:grid; gap:.15rem; }
.payment-choice .choice-card small { color:#655d57; }
.payment-status-paid { background:#dff5e6; color:#146c35; }
.payment-status-unpaid, .payment-status-pending { background:#fff1cf; color:#795500; }

.cost-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:20px 0 14px; }
.cost-card { display:grid; gap:6px; min-height:135px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(39,31,24,.06); }
.cost-card span { font-weight:850; }
.cost-card strong { font-family:"Fraunces",Georgia,serif; font-size:clamp(1.7rem,3vw,2.35rem); }
.cost-card small { color:var(--muted); line-height:1.35; }
.cost-card.fixed { border-top:5px solid #a54b42; }
.cost-card.supplies { border-top:5px solid #d98532; }
.cost-card.production { border-top:5px solid #416a85; }
.cost-card.margin { border-top:5px solid #43865a; background:#f3faf5; }
.accounting-note { margin:0 0 22px; padding:13px 16px; border-radius:12px; background:#fff8df; color:#5f5227; line-height:1.5; }

@media (max-width: 1000px) {
  .cost-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .cost-overview-grid { grid-template-columns:1fr; }
  .cost-card { min-height:0; }
}