:root {
  --paper: #f4eee5;
  --paper-deep: #e9dfd2;
  --cream: #fff9ef;
  --ink: #1d1c18;
  --muted: #716c63;
  --accent: #d94a27;
  --accent-dark: #a72c13;
  --lime: #d8ee8a;
  --line: rgba(29, 28, 24, 0.14);
  --on-ink: #ffffff;
  --shadow: 0 22px 70px rgba(69, 48, 30, 0.12);
  --radius-lg: 32px;
  --radius-md: 20px;
  --page: min(1180px, calc(100% - 48px));
  color-scheme: light;
  font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}

html[data-theme="dark"] {
  --paper: #141411;
  --paper-deep: #2b2923;
  --cream: #211f1a;
  --ink: #fff8ec;
  --muted: #b9b1a5;
  --line: rgba(255, 248, 236, .14);
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --on-ink: #171612;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--paper); }

body {
  position: relative;
  z-index: 0;
  isolation: isolate;
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--cream) 72%, transparent), transparent 30%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  transition: color .45s ease, background-color .45s ease;
}
body::before { content: ""; position: fixed; z-index: -1; inset: 0; opacity: 0; background: var(--site-bg-image, none) center / cover; filter: saturate(.72); pointer-events: none; transition: opacity .55s ease; }
body::after { content: ""; position: fixed; z-index: -1; width: 34vw; height: 34vw; min-width: 280px; min-height: 280px; right: -12vw; top: 18vh; border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent); filter: blur(70px); pointer-events: none; }
html[data-has-site-background="true"] body::before { opacity: .1; }

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
}
.skip-link:focus { transform: translateY(0); }

.page-width { width: var(--page); margin-inline: auto; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(61, 43, 28, .06);
}

.header-inner {
  width: var(--page);
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 44% 44%;
  color: var(--cream);
  background: var(--accent);
  font-family: Georgia, serif;
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0;
  transform: rotate(-7deg);
}
.has-custom-avatar { background-color: var(--accent) !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; color: transparent !important; font-size: 0 !important; }
[data-brand-avatar].has-custom-avatar { overflow: hidden; }
.map-pin [data-brand-avatar].has-custom-avatar { width: 100%; height: 100%; display: block; border-radius: inherit; }

.brand:hover .brand-mark { animation: brand-wiggle .55s cubic-bezier(.2,.8,.2,1); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.open-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 48%, transparent);
  font-size: 13px;
  font-weight: 700;
}

.theme-toggle {
  position: relative;
  width: 72px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 60%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .25s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-toggle-thumb { position: absolute; z-index: 0; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); box-shadow: 0 5px 15px rgba(30,20,10,.14); transition: transform .5s cubic-bezier(.22,1,.36,1), background .35s ease; }
.theme-icon { position: relative; z-index: 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.theme-icon--sun { color: #e68b20; }
.theme-icon--moon { color: var(--muted); opacity: .6; }
html[data-theme="dark"] .theme-toggle-thumb { transform: translateX(32px); background: #343127; }
html[data-theme="dark"] .theme-icon--sun { opacity: .45; transform: rotate(90deg); }
html[data-theme="dark"] .theme-icon--moon { color: #d9ef8a; opacity: 1; transform: rotate(-8deg); }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3e9b51;
  box-shadow: 0 0 0 4px rgba(62,155,81,.13);
}

.open-pill.is-closed .status-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(217,74,39,.13); }

.icon-button, .dialog-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.icon-button:hover, .dialog-close:hover { background: var(--cream); transform: rotate(3deg); }
.icon-button svg, .dialog-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.hero {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  min-height: 610px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
  box-shadow: var(--shadow);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 6vw, 76px);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow span { margin-right: 4px; }

h1, h2, h3, p { text-wrap: pretty; }

h1 {
  max-width: 520px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 6.3vw, 88px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .88;
}

h1 em { color: var(--accent); font-weight: 400; }

.hero-description {
  max-width: 430px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }

.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.primary-button:hover, .secondary-button:hover { background: var(--accent); transform: translateY(-2px); }
.primary-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.text-button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 42px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  list-style: none;
  text-transform: uppercase;
}
.hero-notes li::before { content: "•"; margin-right: 7px; color: var(--accent); }

.hero-visual {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background: #eac6a0;
}

.hero-visual > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); transition: opacity .45s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(20,13,8,.48)); pointer-events: none; }

.hero-sticker {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 28px;
  width: 104px;
  height: 104px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--lime);
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.hero-sticker span { font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hero-sticker strong { display: block; margin-top: 3px; font-family: Georgia, serif; font-size: 18px; }

.hero-caption {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 28px;
  left: 30px;
  display: flex;
  align-items: end;
  gap: 14px;
  color: white;
}
.hero-caption > span { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 11px; font-weight: 800; }
.hero-caption p { margin: 0; font-size: 12px; line-height: 1.45; }
.hero-caption strong { font-size: 14px; }

.menu-section { padding-block: 112px 92px; scroll-margin-top: 70px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading h2, .info-dialog h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}
.section-note { max-width: 270px; margin: 0 0 5px; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: right; }

.menu-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }

.search-box {
  width: min(330px, 100%);
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 62%, transparent);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.search-box:focus-within { border-color: var(--accent); background: var(--cream); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.search-box > svg { width: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-box input { width: 100%; border: 0; outline: 0; background: none; color: var(--ink); }
.search-box input::placeholder { color: #938c83; }
.search-box button { width: 28px; height: 28px; flex: 0 0 auto; padding: 5px; border: 0; border-radius: 50%; background: var(--paper-deep); cursor: pointer; }
.search-box button svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }

.filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

.results-bar {
  display: flex;
  justify-content: space-between;
  padding: 17px 2px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.results-bar p { margin: 0; font-weight: 800; color: var(--ink); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.product-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cream) 78%, transparent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cream) 70%, transparent) inset;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.product-card:hover { transform: translateY(-6px); background: var(--cream); box-shadow: 0 18px 40px rgba(63,42,23,.12); }
.product-card:focus-within { outline: 3px solid rgba(217,74,39,.22); outline-offset: 3px; }

.product-hit-area { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.product-media { position: relative; height: 250px; background-image: url("./assets/sandwich-grid.jpg"); background-repeat: no-repeat; background-size: 300% 200%; }
.product-media::before { content: ""; position: absolute; z-index: 1; inset: -60% -120%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.26) 50%, transparent 58%); pointer-events: none; transform: translateX(-32%); transition: transform .85s cubic-bezier(.22,1,.36,1); }
.product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(22,15,10,.11)); }
.product-card:hover .product-media::before { transform: translateX(46%); }
.product-media--1 { background-position: 0 0; }
.product-media--2 { background-position: 50% 0; }
.product-media--3 { background-position: 100% 0; }
.product-media--4 { background-position: 0 100%; }
.product-media--5 { background-position: 50% 100%; }
.product-media--6 { background-position: 100% 100%; }

.product-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--lime);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.favorite-button {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(30,20,10,.12);
  transition: transform .2s ease, color .2s ease;
}
.favorite-button:hover { transform: scale(1.08) rotate(-5deg); }
.favorite-button svg { width: 20px; fill: transparent; stroke: currentColor; stroke-width: 1.8; transition: fill .2s ease; }
.favorite-button.is-favorite { color: var(--accent); }
.favorite-button.is-favorite svg { fill: currentColor; }

.product-body { min-height: 192px; display: flex; flex-direction: column; padding: 21px 21px 19px; }
.product-topline { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.product-card h3 { margin: 0; font-family: Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.product-price { flex: 0 0 auto; color: var(--accent); font-size: 18px; font-weight: 900; letter-spacing: -.03em; }
.product-description { display: -webkit-box; min-height: 44px; margin: 11px 0 16px; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.product-meta span:last-child { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.product-meta svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.empty-state { padding: 80px 20px; border: 1px dashed var(--line); border-radius: var(--radius-lg); text-align: center; }
.empty-state > span { display: block; color: var(--accent); font-family: Georgia, serif; font-size: 56px; transform: rotate(8deg); }
.empty-state h3 { margin: 10px 0 6px; font-family: Georgia, serif; font-size: 28px; }
.empty-state p { margin: 0 0 24px; color: var(--muted); }
.secondary-button { min-height: 46px; font-size: 13px; }

.manifesto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  margin-bottom: 100px;
  padding: 34px 0;
  border-block: 1px solid var(--line);
}
.manifesto p { margin: 0; font-family: Georgia, serif; font-size: clamp(20px, 2.7vw, 31px); letter-spacing: -.03em; line-height: 1.2; }
.manifesto p:last-child { text-align: right; }
.manifesto span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: var(--accent); color: white; }

.site-footer { position: relative; overflow: hidden; padding: 54px 0 64px; background: #12110e; color: #fff9ef; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: 0; background: var(--footer-bg-image, none) center / cover; filter: grayscale(.2) saturate(.8); transition: opacity .5s ease; }
.site-footer::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, rgba(18,17,14,.97) 30%, rgba(18,17,14,.78)); }
html[data-has-footer-background="true"] .site-footer::before { opacity: .42; }
.footer-inner { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.footer-brand-row { display: flex; align-items: center; gap: 11px; }
.footer-admin-entry { display: inline-grid; border-radius: 50%; place-items: center; text-decoration: none; transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease; }
.footer-admin-entry:hover { filter: brightness(1.15); transform: translateY(-3px) rotate(5deg) scale(1.06); }
.site-footer .brand-mark { color: #fff9ef; }
.footer-name-link { color: #fff9ef; font-size: 15px; font-weight: 900; letter-spacing: .08em; text-decoration: none; }
.footer-inner p { margin: 18px 0 0; color: #bdb7ac; font-size: 13px; }
.footer-meta { text-align: right; }
.footer-meta p { margin: 0 0 12px; }
.footer-socials { display: flex; justify-content: flex-end; gap: 9px; margin: 0 0 15px; }
.footer-social { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff9ef; text-decoration: none; backdrop-filter: blur(8px); transition: border-color .25s ease, background .25s ease, color .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.footer-social:hover { border-color: var(--lime); background: var(--lime); color: #171612; transform: translateY(-5px) rotate(-5deg) scale(1.06); }
.footer-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-meta .text-button { color: #fff9ef; }
.footer-links { display: flex; justify-content: flex-end; gap: 18px; }

.mobile-nav { display: none; }

dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(25,15,8,.32);
}
dialog::backdrop { background: rgba(24,18,13,.58); backdrop-filter: blur(5px); }
dialog[open] { animation: dialog-in .25s cubic-bezier(.2,.8,.2,1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.product-dialog { width: min(860px, calc(100% - 32px)); border-radius: 28px; }
.dialog-close { position: absolute; z-index: 5; top: 18px; right: 18px; background: color-mix(in srgb, var(--cream) 92%, transparent); }
.dialog-product { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 500px; }
.dialog-product .product-media { height: 100%; min-height: 500px; }
.dialog-copy { display: flex; flex-direction: column; justify-content: center; padding: 58px 42px 42px; }
.dialog-copy .eyebrow { margin-bottom: 11px; }
.dialog-copy h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(38px, 4.5vw, 56px); font-weight: 400; letter-spacing: -.05em; line-height: .95; }
.dialog-price { margin: 20px 0; color: var(--accent); font-size: 24px; font-weight: 900; }
.dialog-description { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.allergen-box { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.allergen-box span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.allergen-box p { margin: 0; font-size: 13px; }
.dialog-favorite { width: 100%; min-height: 50px; margin-top: 30px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font-weight: 900; cursor: pointer; }
.dialog-favorite.is-favorite { border-color: var(--accent); background: var(--accent); color: white; }

.info-dialog { width: min(600px, calc(100% - 32px)); border-radius: 28px; }
.info-dialog-inner { padding: 54px; }
.info-map { position: relative; height: 180px; margin: 30px 0; overflow: hidden; border-radius: 20px; background: #dfe5c0; }
.info-map.has-custom-image { background-position: center; background-size: cover; }
.info-map.has-custom-image::before, .info-map.has-custom-image::after, .info-map.has-custom-image .map-road { display: none; }
.info-map::before, .info-map::after { content: ""; position: absolute; border-radius: 50%; background: rgba(118,145,88,.25); }
.info-map::before { width: 180px; height: 180px; left: -35px; top: -80px; }
.info-map::after { width: 220px; height: 220px; right: -80px; bottom: -110px; }
.map-road { position: absolute; z-index: 1; height: 16px; background: var(--cream); border: 1px solid rgba(0,0,0,.06); }
.road-one { width: 130%; top: 78px; left: -15%; transform: rotate(-12deg); }
.road-two { width: 110%; top: 70px; left: -4%; transform: rotate(45deg); }
.map-pin { position: absolute; z-index: 2; inset: 50% auto auto 52%; display: grid; width: 44px; height: 44px; place-items: center; border: 4px solid var(--cream); border-radius: 50% 50% 50% 8px; background: var(--accent); color: white; transform: translate(-50%,-50%) rotate(-45deg); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.map-pin b { transform: rotate(45deg); }
.info-list { margin: 0; }
.info-list > div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); }
.info-list dt { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.info-list dd { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; }
.info-list dd, .info-dialog h2 { white-space: pre-line; }
.info-socials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.info-socials a { min-height: 42px; display: grid; padding: 0 10px; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 10px; font-weight: 900; text-align: center; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.info-socials a:hover { border-color: var(--accent); background: var(--accent); color: white; transform: translateY(-2px); }
.info-footnote { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 11px; line-height: 1.45; }

.login-dialog { width: min(500px, calc(100% - 32px)); border-radius: 28px; }
.login-card { padding: 56px; }
.login-mark {
  width: 52px;
  height: 52px;
  display: grid;
  margin-bottom: 30px;
  place-items: center;
  border-radius: 50% 50% 44% 44%;
  background: var(--accent);
  color: white;
  font-family: Georgia, serif;
  font-size: 29px;
  font-style: italic;
  transform: rotate(-7deg);
}
.login-card h2 { margin: 0; font-family: Georgia, serif; font-size: 52px; font-weight: 400; letter-spacing: -.05em; line-height: .92; }
.login-intro { margin: 22px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.login-card form { display: grid; gap: 17px; }

.admin-field { display: grid; gap: 7px; min-width: 0; }
.admin-field > span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.admin-field input,
.admin-field textarea,
.admin-field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-field textarea { min-height: 102px; resize: vertical; line-height: 1.5; }
.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217,74,39,.09); }
.login-submit { width: 100%; margin-top: 5px; }
.form-error { margin: -2px 0 0; padding: 11px 13px; border-radius: 10px; background: rgba(217,74,39,.09); color: var(--accent-dark); font-size: 12px; font-weight: 700; }

.admin-dialog {
  width: min(1180px, calc(100% - 28px));
  height: min(900px, calc(100dvh - 28px));
  border-radius: 28px;
}
.admin-shell { height: 100%; display: flex; flex-direction: column; background: #f8f3ec; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 30px; border-bottom: 1px solid var(--line); background: var(--cream); }
.admin-header .eyebrow { margin: 0 0 4px; }
.admin-header h2 { margin: 0; font-family: Georgia, serif; font-size: 31px; font-weight: 400; letter-spacing: -.035em; }
.admin-header-actions { display: flex; align-items: center; gap: 12px; }
.admin-logout, .admin-reset, .admin-add-button, .product-control {
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.admin-logout:hover, .admin-reset:hover, .admin-add-button:hover, .product-control:hover { border-color: var(--ink); background: white; }
.admin-close { position: static; flex: 0 0 auto; }
.admin-tabs { display: flex; gap: 8px; padding: 12px 30px; border-bottom: 1px solid var(--line); background: var(--cream); }
.admin-tab { min-height: 40px; padding: 0 17px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 900; cursor: pointer; }
.admin-tab.is-active { background: var(--ink); color: white; }
#admin-form { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.admin-panel { min-height: 0; flex: 1; padding: 32px; overflow-y: auto; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.admin-section-heading > div { display: flex; align-items: center; gap: 12px; }
.admin-section-heading > div > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 10px; font-weight: 900; }
.admin-section-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 27px; font-weight: 400; }
.admin-section-heading > p { max-width: 400px; margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.admin-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-field--full { grid-column: 1 / -1; }
.admin-category-list { display: grid; gap: 10px; }
.admin-category-row { display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.admin-category-row .product-control { margin-bottom: 4px; color: var(--accent-dark); }
.products-heading { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.admin-product-list { display: grid; gap: 14px; }
.admin-product-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.admin-product-editor summary { display: grid; grid-template-columns: 76px 1fr auto auto; align-items: center; gap: 15px; padding: 12px 16px 12px 12px; cursor: pointer; list-style: none; }
.admin-product-editor summary::-webkit-details-marker { display: none; }
.admin-product-preview { width: 76px; height: 58px; border-radius: 11px; background-image: url("./assets/sandwich-grid.jpg"); background-repeat: no-repeat; background-size: 300% 200%; }
.admin-product-summary strong { display: block; font-family: Georgia, serif; font-size: 19px; }
.admin-product-summary span { color: var(--muted); font-size: 11px; }
.admin-product-summary-price { color: var(--accent); font-size: 14px; font-weight: 900; }
.admin-product-chevron { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); transition: transform .2s ease; }
.admin-product-editor[open] .admin-product-chevron { transform: rotate(180deg); }
.admin-product-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; border-top: 1px solid var(--line); background: #fcfaf7; }
.product-editor-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; }
.product-editor-actions > div { display: flex; gap: 8px; }
.product-control--danger { border-color: rgba(217,74,39,.3); color: var(--accent-dark); }
.admin-savebar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 15px 30px; border-top: 1px solid var(--line); background: var(--cream); box-shadow: 0 -12px 36px rgba(45,30,18,.06); }
.admin-savebar p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.admin-savebar p.is-dirty { color: var(--accent-dark); }
.admin-savebar p.is-success { color: #2f7b42; }
.admin-savebar > div { display: flex; align-items: center; gap: 12px; }
.admin-savebar .primary-button { min-height: 44px; font-size: 12px; }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 90px; max-width: min(380px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: #1d1c18; color: #fff9ef; font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(18px) scale(.96); transition: opacity .25s ease, transform .45s cubic-bezier(.22,1,.36,1); box-shadow: 0 16px 44px rgba(0,0,0,.28); }
.toast::before { content: "✓"; width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--lime); color: #171612; font-size: 11px; }
.toast[data-type="favorite"]::before { content: "♥"; background: var(--accent); color: white; }
.toast[data-type="removed"]::before { content: "♡"; background: rgba(255,255,255,.12); color: #fff9ef; }
.toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
dialog > .toast.is-dialog-toast { position: absolute; right: 20px; bottom: 20px; left: 20px; width: fit-content; margin-left: auto; }

html[data-theme="dark"] .hero-visual::after { background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.64)); }
html[data-theme="dark"] .product-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,.32); }
html[data-theme="dark"] .info-map { background: #293126; }
html[data-theme="dark"] .site-footer { background: #0d0d0b; }

html[data-motion="rich"] .reveal-item.reveal-pending {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(34px) scale(.985);
  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .8s cubic-bezier(.22,1,.36,1),
    filter .65s ease;
  transition-delay: calc(var(--reveal-index, 0) * 65ms);
}
html[data-motion="rich"] .reveal-item.is-visible { opacity: 1; filter: blur(0); transform: none; }
html[data-motion="subtle"] .reveal-item.reveal-pending { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
html[data-motion="subtle"] .reveal-item.is-visible { opacity: 1; transform: none; }
html[data-motion="off"] .reveal-item { opacity: 1; filter: none; transform: none; transition: none; }

html[data-motion="rich"] .hero-visual > img { animation: hero-breathe 16s ease-in-out infinite alternate; }
html[data-motion="rich"] .site-header { animation: header-drop .75s cubic-bezier(.22,1,.36,1) both; }
html[data-motion="rich"] .hero { animation: hero-arrive .9s .08s cubic-bezier(.22,1,.36,1) both; }
html[data-motion="rich"] .hero-sticker { animation: sticker-float 4.5s ease-in-out infinite; }
html[data-motion="rich"] .manifesto > span { animation: manifesto-spin 12s linear infinite; }
html[data-motion="rich"] .primary-button svg { animation: arrow-drift 1.8s ease-in-out infinite; }
html[data-motion="rich"] .favorite-button.is-favorite { animation: favorite-pop .5s cubic-bezier(.2,.9,.25,1.35); }
html[data-motion="rich"] .favorite-button.is-favorite svg { animation: heart-beat 1.7s ease-in-out 2; }
html[data-motion="rich"] .toast.is-visible::before { animation: toast-icon-pop .55s cubic-bezier(.2,.9,.25,1.35); }
html[data-motion="rich"] .filter-chip.is-active { animation: filter-settle .38s cubic-bezier(.2,.9,.25,1.2); }
html[data-motion="rich"] .product-card:hover { transform: translateY(-9px) rotate(.25deg); }
html[data-motion="rich"] .product-card:hover .product-meta svg { transform: translateX(4px); }
html[data-motion="rich"] .info-map.has-custom-image { animation: image-drift 12s ease-in-out infinite alternate; }
html[data-motion="rich"] .map-pin { animation: pin-bounce 2.8s ease-in-out infinite; }
html[data-motion="rich"] .footer-social { animation: social-bob 4s ease-in-out infinite; }
html[data-motion="rich"] .footer-social:nth-child(2) { animation-delay: -.8s; }
html[data-motion="rich"] .footer-social:nth-child(3) { animation-delay: -1.6s; }
.product-meta svg { transition: transform .25s ease; }

@keyframes header-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes hero-arrive { from { opacity: 0; filter: blur(8px); transform: translateY(28px) scale(.985); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes brand-wiggle { 0%,100% { transform: rotate(-7deg); } 35% { transform: rotate(7deg) scale(1.08); } 70% { transform: rotate(-12deg); } }
@keyframes hero-breathe { from { transform: scale(1.015); } to { transform: scale(1.075); } }
@keyframes sticker-float { 0%,100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-9px); } }
@keyframes manifesto-spin { to { transform: rotate(360deg); } }
@keyframes arrow-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes favorite-pop { 0% { transform: scale(.78); } 65% { transform: scale(1.18) rotate(-7deg); } 100% { transform: scale(1); } }
@keyframes heart-beat { 0%,100% { transform: scale(1); } 45% { transform: scale(1.22) rotate(-5deg); } }
@keyframes toast-icon-pop { from { opacity: 0; transform: scale(.45) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes filter-settle { from { transform: scale(.88); } to { transform: scale(1); } }
@keyframes image-drift { from { background-position: 45% 48%; } to { background-position: 56% 52%; } }
@keyframes pin-bounce { 0%,100% { transform: translate(-50%,-50%) rotate(-45deg) translateY(0); } 50% { transform: translate(-50%,-50%) rotate(-45deg) translate(-4px,-5px); } }
@keyframes social-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { clip-path: circle(0 at var(--theme-x, 90%) var(--theme-y, 42px)); animation: theme-reveal .65s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes theme-reveal { to { clip-path: circle(150vmax at var(--theme-x, 90%) var(--theme-y, 42px)); } }

:focus-visible { outline: 3px solid rgba(217,74,39,.55); outline-offset: 3px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .hero-copy { padding: 42px; }
  .hero-notes { display: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
}

@media (max-width: 720px) {
  :root { --page: min(100% - 28px, 600px); --radius-lg: 25px; }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .header-inner { height: 68px; }
  .brand { font-size: 13px; }
  .brand-mark { width: 34px; height: 34px; font-size: 19px; }
  .open-pill { min-height: 36px; padding: 0 11px; font-size: 11px; }
  .header-actions .icon-button { display: none; }
  .header-actions { gap: 8px; }
  .theme-toggle { width: 66px; height: 36px; padding-inline: 8px; }
  .theme-toggle-thumb { top: 3px; left: 3px; width: 28px; height: 28px; }
  html[data-theme="dark"] .theme-toggle-thumb { transform: translateX(32px); }

  .hero { grid-template-columns: 1fr; margin-top: 12px; }
  .hero-copy { padding: 44px 28px 38px; }
  h1 { font-size: clamp(52px, 15vw, 76px); }
  .hero-description { margin-top: 22px; font-size: 15px; }
  .hero-actions { margin-top: 26px; }
  .hero-visual { min-height: 330px; }
  .hero-sticker { width: 86px; height: 86px; top: 18px; right: 18px; }
  .hero-sticker strong { font-size: 15px; }
  .hero-caption { right: 18px; bottom: 18px; left: 18px; }

  .menu-section { padding-block: 78px 64px; }
  .section-heading { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 27px; }
  .section-note { text-align: left; }
  .section-heading h2 { font-size: 46px; }
  .filter-row { margin-inline: -14px; padding: 0 14px 3px; }
  .filter-chip { min-height: 42px; }
  .results-bar span { display: none; }
  .product-grid { grid-template-columns: 1fr; gap: 15px; }
  .product-card { display: grid; grid-template-columns: 39% 1fr; min-height: 178px; }
  .product-media { height: 100%; min-height: 178px; }
  .product-badge { top: 10px; left: 10px; max-width: calc(100% - 20px); overflow: hidden; padding: 5px 7px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .favorite-button { top: 10px; right: 10px; width: 36px; height: 36px; }
  .product-media .favorite-button { display: none; }
  .product-body { min-height: 178px; padding: 18px 17px 15px; }
  .product-card h3 { font-size: 21px; }
  .product-price { font-size: 16px; }
  .product-description { margin: 9px 0 12px; font-size: 12px; }
  .product-meta { font-size: 8px; }

  .manifesto { grid-template-columns: 1fr; gap: 18px; margin-bottom: 70px; }
  .manifesto p:last-child { text-align: left; }
  .manifesto span { width: 38px; height: 38px; }
  .site-footer { padding-bottom: 48px; }
  .footer-inner { align-items: start; flex-direction: column; }
  .footer-meta { text-align: left; }
  .footer-socials { justify-content: flex-start; }
  .footer-links { justify-content: flex-start; }

  .mobile-nav {
    position: fixed;
    z-index: 60;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    height: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: rgba(29,28,24,.94);
    color: #aaa69d;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 42px rgba(25,16,10,.28);
  }
  html[data-motion="rich"] .mobile-nav { animation: mobile-nav-enter .7s .2s cubic-bezier(.22,1,.36,1) both; }
  .mobile-nav-item { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0; border: 0; border-radius: 16px; background: transparent; color: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
  .mobile-nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav-item.is-active { background: rgba(255,255,255,.1); color: white; }
  .nav-icon-wrap { position: relative; height: 20px; }
  .favorite-count { position: absolute; top: -7px; right: -11px; display: grid; min-width: 16px; height: 16px; padding: 0 4px; place-items: center; border: 2px solid var(--ink); border-radius: 99px; background: var(--accent); color: white; font-size: 8px; }

  .toast { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  dialog > .toast.is-dialog-toast { right: 12px; bottom: 12px; left: 12px; max-width: none; justify-content: center; border-radius: 15px; text-align: center; }
  .dialog-product { grid-template-columns: 1fr; }
  .dialog-product .product-media { min-height: 280px; height: 38vh; max-height: 360px; }
  .dialog-copy { padding: 32px 25px 26px; }
  .dialog-copy h2 { font-size: 42px; }
  .dialog-favorite { margin-top: 24px; }
  .product-dialog, .info-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 28px); overflow-y: auto; border-radius: 24px; }
  .info-dialog-inner { padding: 46px 24px 26px; }
  .info-map { height: 150px; }
  .login-card { padding: 46px 25px 28px; }
  .login-card h2 { font-size: 46px; }
  .admin-dialog { width: calc(100% - 10px); height: calc(100dvh - 10px); border-radius: 23px; }
  .admin-header { padding: 16px 17px; }
  .admin-header h2 { font-size: 25px; }
  .admin-header .eyebrow, .admin-logout { display: none; }
  .admin-tabs { padding: 10px 14px; overflow-x: auto; }
  .admin-panel { padding: 22px 16px; }
  .admin-section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .admin-section-heading > p { text-align: left; }
  .admin-fields-grid, .admin-product-fields { grid-template-columns: 1fr; }
  .admin-field--full, .product-editor-actions { grid-column: 1; }
  .admin-category-row { grid-template-columns: 1fr auto; }
  .admin-category-row .admin-field:first-child { grid-column: 1 / -1; }
  .admin-product-editor summary { grid-template-columns: 62px 1fr auto; gap: 11px; padding: 10px; }
  .admin-product-preview { width: 62px; height: 53px; }
  .admin-product-summary-price { display: none; }
  .admin-product-fields { padding: 16px; }
  .product-editor-actions { align-items: stretch; flex-direction: column-reverse; }
  .product-editor-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-savebar { align-items: stretch; flex-direction: column; gap: 8px; padding: 11px 14px max(11px, env(safe-area-inset-bottom)); }
  .admin-savebar > div { display: grid; grid-template-columns: auto 1fr; }
  .admin-savebar .primary-button { padding-inline: 16px; }
}

@media (max-width: 420px) {
  .open-pill { padding: 0 9px; }
  .open-pill #open-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .open-pill { width: 36px; justify-content: center; }
  .status-dot { width: 7px; height: 7px; }
  .hero-actions { align-items: start; flex-direction: column; gap: 16px; }
  .hero-visual { min-height: 290px; }
  .product-card { grid-template-columns: 37% 1fr; }
  .product-description { -webkit-line-clamp: 3; }
  .product-meta > span:first-child { display: none; }
}

@keyframes mobile-nav-enter { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}