:root {
  --black: #0E0E0E;
  --anthracite: #191919;
  --yellow: #F4C430;
  --mustard: #D8A928;
  --white: #F7F3E8;
  --gray: #D6D6D6;
  --red: #B52A2A;
  --ink: #18140e;
  --max: 1180px;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input, textarea { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--yellow); }
.skip-link {
  position: fixed;
  left: 1rem;
  top: .5rem;
  z-index: 1000;
  transform: translateY(-160%);
  background: var(--yellow);
  color: var(--black);
  padding: .7rem 1rem;
  border-radius: var(--radius);
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }

h1, h2, h3 {
  font-family: "Barlow Condensed", Impact, sans-serif;
  line-height: .98;
  letter-spacing: 0;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
h1 { font-size: clamp(3.8rem, 10vw, 8.5rem); max-width: 900px; }
h2 { font-size: clamp(2.4rem, 5vw, 5rem); }
h3 { font-size: 1.65rem; }
p { margin: 0 0 1.2rem; }
.eyebrow {
  color: var(--yellow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .83rem;
}
.eyebrow.dark { color: var(--red); }
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--yellow); color: var(--black); }
.btn-primary:hover { background: #ffd84a; }
.btn-secondary { background: rgba(247, 243, 232, .14); color: var(--white); border: 1px solid rgba(247, 243, 232, .34); }
.btn-dark { background: var(--black); color: var(--white); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .25s ease, box-shadow .25s ease;
  pointer-events: none;
}
.site-header.is-scrolled, .site-header.nav-active {
  background: rgba(14, 14, 14, .72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px);
}
.nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: clamp(210px, 24vw, 330px);
  pointer-events: auto;
}
.brand {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.brand-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 120;
  opacity: .9;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .35));
}
.brand-logo img {
  width: clamp(180px, 20vw, 300px);
  height: auto;
  max-height: 118px;
  object-fit: contain;
}
.nav-panel { display: flex; align-items: center; gap: 1rem; }
.nav-panel > a:not(.btn) { font-weight: 700; font-size: .95rem; }
.phone-link { color: var(--yellow); }
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(247, 243, 232, .25);
  border-radius: var(--radius);
  background: rgba(247, 243, 232, .08);
}
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--white); }

.hero {
  min-height: 92vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-media, .hero-overlay { position: absolute; inset: 0; }
.hero-media {
  background: var(--hero-image, url("https://payloadmedia.ams3.cdn.digitaloceanspaces.com/frituur-marie-jeanne-DSC_0515-scaled.jpg")) center/cover;
  transform: scale(1.03);
}
.hero-overlay { background: linear-gradient(90deg, rgba(14,14,14,.88), rgba(14,14,14,.62) 45%, rgba(14,14,14,.2)); }
.hero-content { position: relative; padding-top: 5rem; }
.hero-content p:not(.eyebrow) { max-width: 650px; font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--gray); }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  width: 28px;
  height: 44px;
  border: 2px solid rgba(247, 243, 232, .7);
  border-radius: 20px;
}
.scroll-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translateX(-50%);
  animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot { 60% { transform: translate(-50%, 15px); opacity: .25; } }

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.page-hero {
  padding: 130px 0 clamp(3rem, 7vw, 6rem);
  background: var(--white);
  color: var(--ink);
}
.page-hero h1 {
  color: var(--ink);
  font-size: clamp(3.2rem, 8vw, 7rem);
}
.page-hero p:not(.eyebrow):not(.status-pill):not(.exception-note) {
  max-width: 820px;
  color: #4d4538;
  font-size: 1.08rem;
}
.section-light { background: var(--white); color: var(--ink); }
.section-dark { background: var(--anthracite); }
.split-grid, .order-grid, .hours-grid, .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.reverse > :first-child { order: 2; }
.image-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.image-frame img { width: 100%; height: 100%; object-fit: cover; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.section-head.compact { display: block; max-width: 820px; }
.benefits, .specialties, .gallery-section, .contact-section { background: var(--black); }
.benefit-grid, .card-grid, .review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.benefit-grid article, .review-grid article, .menu-card, .product-card {
  border-radius: var(--radius);
  background: rgba(247, 243, 232, .08);
  border: 1px solid rgba(247, 243, 232, .14);
}
.benefit-grid article { padding: 1.35rem; }
.benefit-grid span { font-size: 2rem; }
.order-section { background: linear-gradient(135deg, var(--anthracite), #2a160f); }
.delivery-info {
  display: grid;
  gap: .45rem;
  margin: 1.4rem 0;
  color: var(--gray);
}
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: rgba(247, 243, 232, .08);
  padding: 1rem;
  border-radius: var(--radius);
}
.steps strong {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
}

.allergen-note { color: #554c3c; font-weight: 600; }
.menu-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: end;
  margin-bottom: 1rem;
}
.search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu-toolbar input {
  min-height: 52px;
  border-radius: var(--radius);
  border: 2px solid #e3dccb;
  padding: 0 1rem;
  color: var(--ink);
}
.menu-controls { display: grid; gap: .8rem; margin-bottom: 1.5rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 40px;
  border: 1px solid #d8cfbb;
  border-radius: 999px;
  background: #fffaf0;
  color: var(--ink);
  padding: .45rem .85rem;
  cursor: pointer;
  font-weight: 800;
}
.chip.is-active { background: var(--black); color: var(--white); border-color: var(--black); }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.menu-card {
  background: #fffaf0;
  color: var(--ink);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.menu-card:hover, .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.menu-card img, .menu-card .image-fallback { width: 100%; height: 132px; object-fit: cover; background: var(--anthracite); }
.menu-card .image-fallback { display: grid; place-items: center; color: var(--yellow); font-weight: 800; }
.menu-card-body { padding: 1rem; }
.menu-card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.price { color: var(--red); font-size: 1.15rem; font-weight: 900; white-space: nowrap; }
.label-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.tag { border-radius: 999px; background: #eee3c6; color: var(--ink); padding: .18rem .5rem; font-size: .78rem; font-weight: 800; }
.empty-state { color: var(--red); font-weight: 800; }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { overflow: hidden; }
.product-card img { width: 100%; height: 176px; object-fit: cover; }
.product-card div { padding: 1rem; }
.product-card strong { color: var(--yellow); display: block; margin-bottom: .5rem; }
.product-card a { color: var(--yellow); font-weight: 800; }

.status-pill, .exception-note {
  display: inline-block;
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-weight: 900;
  background: var(--yellow);
  color: var(--black);
}
.exception-note { margin-top: .7rem; background: var(--red); color: var(--white); }
.hours-list { display: grid; gap: .55rem; }
.hours-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: rgba(247, 243, 232, .08);
}
.hours-row.is-today { border: 2px solid var(--yellow); }
.hours-row small { display: block; color: var(--gray); }
.group-section { background: var(--red); }
.group-box { display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.photo-albums {
  display: grid;
  gap: 1.4rem;
}
.photo-album {
  display: grid;
  gap: 1rem;
}
.photo-album-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}
.photo-album-head h3 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: .35rem;
}
.photo-album-head p {
  color: var(--gray);
  margin: 0;
}
.photo-album-head span {
  color: var(--yellow);
  font-weight: 900;
  white-space: nowrap;
}
.album-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .8rem;
}
.album-gallery figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(247, 243, 232, .08);
}
.album-gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .2s ease;
}
.album-gallery figure:hover img {
  transform: scale(1.03);
}
.album-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: .7rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  font-size: .85rem;
  font-weight: 800;
}
.review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-grid article { background: #fffaf0; color: var(--ink); padding: 1.2rem; }
.review-grid span { color: var(--mustard); display: block; margin: .35rem 0; }

.contact-list { list-style: none; padding: 0; margin: 0 0 1rem; color: var(--gray); }
.contact-list a, .socials a { color: var(--yellow); font-weight: 800; }
.socials { display: flex; gap: 1rem; margin-bottom: 1rem; }
.contact-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1rem;
}
.map-placeholder {
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: var(--radius);
  background: #e9dfc9;
  padding: 1rem;
  margin-bottom: 1rem;
}
.contact-form { display: grid; gap: .85rem; }
.form-row { display: grid; gap: .25rem; }
.form-row input, .form-row textarea {
  width: 100%;
  border: 2px solid #d8cfbb;
  border-radius: var(--radius);
  padding: .78rem;
  color: var(--ink);
}
.form-row small, [data-error-for="privacy"] { color: var(--red); font-weight: 700; min-height: 1.2em; }
.checkbox-row { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.checkbox-row input { width: 20px; height: 20px; flex: 0 0 auto; }
.honeypot { position: absolute; left: -9999px; }
.form-status { font-weight: 800; color: var(--red); margin: 0; }

.site-footer { background: var(--anthracite); padding: 3rem 0 6rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 2rem;
}
.footer-grid h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.footer-grid a { display: block; color: var(--gray); margin: .25rem 0; }
.footer-bottom {
  border-top: 1px solid rgba(247, 243, 232, .14);
  margin-top: 2rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--gray);
  font-size: .9rem;
}
.mobile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  background: var(--black);
  border-top: 1px solid rgba(247, 243, 232, .2);
  padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom));
}
.mobile-action-bar a {
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-weight: 900;
}
.mobile-action-bar a:last-child { background: var(--yellow); color: var(--black); }
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgba(0,0,0,.82); }
.lightbox img { max-width: min(92vw, 1100px); max-height: 85vh; border-radius: var(--radius); }
.lightbox button {
  position: fixed;
  right: 1rem;
  top: 1rem;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: 2rem;
  cursor: pointer;
}
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 110;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.cookie-banner[hidden] {
  display: none !important;
}
.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.legal-page { background: var(--white); color: var(--ink); padding-top: 110px; min-height: 100vh; }
.legal-content { padding: 3rem 0 5rem; max-width: 850px; }
.legal-content h1 { color: var(--ink); font-size: clamp(3rem, 7vw, 6rem); }
.legal-content a { color: var(--red); font-weight: 800; }

.admin-page {
  background: #f1eee5;
  color: var(--ink);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}
.admin-login-page {
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(244, 196, 48, .2), transparent 32%), var(--black);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.admin-login-shell {
  width: min(100%, 460px);
}
.admin-login-card {
  display: grid;
  gap: 1rem;
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 4vw, 2rem);
  box-shadow: var(--shadow);
}
.admin-login-card h1 {
  color: var(--ink);
  font-size: clamp(2.8rem, 8vw, 5rem);
}
.admin-login-card label {
  display: grid;
  gap: .35rem;
  font-weight: 800;
}
.admin-login-card input {
  min-height: 48px;
  border: 2px solid #d8cfbb;
  border-radius: var(--radius);
  padding: .75rem;
}
.password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: center;
}
.password-field button {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  padding: 0 .9rem;
  font-weight: 900;
  cursor: pointer;
}
.admin-login-card a {
  color: var(--red);
  font-weight: 800;
}
.login-error {
  color: var(--red);
  font-weight: 900;
  margin: 0;
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--anthracite);
  color: var(--white);
  padding: 1.2rem;
}
.admin-logo {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.admin-role {
  color: var(--gray);
  font-size: .9rem;
  margin: -.5rem 0 .25rem;
}
.admin-sidebar nav { display: grid; gap: .35rem; }
.admin-sidebar button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  text-align: left;
  padding: .75rem;
  cursor: pointer;
  font-weight: 800;
}
.admin-sidebar button.is-active, .admin-sidebar button:hover { background: rgba(244, 196, 48, .16); color: var(--yellow); }
.admin-main { padding: 1.2rem; }
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-topbar h1 {
  color: var(--ink);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
}
.admin-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin-status {
  min-height: 1.5rem;
  color: var(--red);
  font-weight: 800;
}
.admin-panel { display: none; }
.admin-panel.is-active { display: grid; gap: 1rem; }
.admin-card {
  background: #fffaf0;
  border: 1px solid #ded4bd;
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 10px 26px rgba(14, 14, 14, .06);
}
.admin-card h2, .admin-card h3 { color: var(--ink); }
.admin-card h2 { font-size: 2.1rem; }
.admin-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-grid, .admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.image-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .7rem;
}
.admin-form-grid.single { grid-template-columns: 1fr; }
.admin-card label {
  display: grid;
  gap: .35rem;
  font-weight: 800;
}
.admin-card input:not([type="checkbox"]), .admin-card textarea, .admin-card select {
  width: 100%;
  border: 2px solid #d8cfbb;
  border-radius: var(--radius);
  padding: .75rem;
  color: var(--ink);
  background: #fff;
}
.admin-card select {
  min-height: 44px;
}
.admin-card textarea { resize: vertical; font-family: Consolas, "Courier New", monospace; font-weight: 500; }
.admin-check {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .6rem !important;
  min-height: 44px;
}
.admin-check input { width: 22px; height: 22px; }
.image-edit-card {
  display: grid;
  gap: .5rem;
  border: 1px solid #ded4bd;
  border-radius: var(--radius);
  padding: .55rem;
  background: #fff;
}
.image-edit-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 105px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--anthracite);
}
.image-edit-card label {
  font-size: .78rem;
}
.image-edit-card select {
  max-width: 100%;
}
.media-upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: end;
  margin: 1rem 0;
  padding: .9rem;
  border: 1px dashed #cbbf9f;
  border-radius: var(--radius);
  background: #fff;
}
.media-upload-form input[type="file"] {
  width: 100%;
  border: 2px solid #d8cfbb;
  border-radius: var(--radius);
  padding: .55rem;
  background: #fffaf0;
}
.media-library-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: .45rem;
  margin: 1rem 0 1.4rem;
  max-height: 250px;
  overflow: auto;
  padding-right: .25rem;
}
.media-library-preview figure {
  margin: 0;
  display: grid;
  gap: .2rem;
  padding: .3rem;
  border: 1px solid #ded4bd;
  border-radius: var(--radius);
  background: #fff;
}
.media-library-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}
.media-library-preview figcaption {
  color: #554c3c;
  font-size: .64rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-admin-list {
  display: grid;
  gap: 1rem;
}
.album-admin-item {
  display: grid;
  gap: .85rem;
  border: 1px solid #ded4bd;
  border-radius: var(--radius);
  padding: .85rem;
  background: #fff;
}
.album-admin-head {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(220px, 1fr) auto;
  gap: .65rem;
  align-items: end;
}
.album-admin-actions,
.album-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.album-photo-list {
  display: grid;
  gap: .55rem;
}
.album-photo-row {
  display: grid;
  grid-template-columns: 82px minmax(130px, .8fr) minmax(180px, 1fr) minmax(150px, .9fr) auto;
  gap: .55rem;
  align-items: end;
  border-top: 1px solid #eee3c6;
  padding-top: .65rem;
}
.album-photo-preview {
  display: grid;
  place-items: center;
  width: 82px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: #eee3c6;
  color: #554c3c;
  font-size: .72rem;
  font-weight: 900;
  overflow: hidden;
}
.album-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-button {
  display: inline-grid !important;
  place-items: center;
  min-height: 44px;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
}
.file-button input { display: none; }
.menu-admin-list { display: grid; gap: 1rem; }
.menu-admin-item {
  border: 1px solid #ded4bd;
  border-radius: var(--radius);
  padding: 1rem;
  background: #fff;
}
.menu-admin-header,
.menu-admin-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(120px, .85fr) 82px minmax(190px, 1.4fr) minmax(170px, 1.1fr) 120px auto;
  gap: .65rem;
  align-items: end;
}
.menu-admin-list.is-compact .menu-admin-header,
.menu-admin-list.is-compact .menu-admin-row {
  grid-template-columns: minmax(150px, 1.15fr) minmax(120px, .85fr) 82px minmax(190px, 1.4fr) minmax(170px, 1.1fr) 120px;
}
.menu-admin-header {
  padding: 0 .5rem;
  color: #6c6251;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.menu-admin-item.compact {
  padding: .7rem;
}
.menu-admin-row label {
  gap: .25rem;
  font-size: .78rem;
}
.menu-admin-row input:not([type="checkbox"]),
.menu-admin-row textarea,
.menu-admin-row select {
  min-height: 40px;
  padding: .55rem;
}
.menu-admin-row textarea {
  min-height: 40px;
  max-height: 84px;
  font-family: inherit;
}
.menu-admin-row .admin-check {
  align-self: center;
  margin-top: 1.25rem;
}
.menu-admin-row .menu-remove {
  align-self: center;
  margin-top: 1.25rem;
  min-height: 40px;
}
.menu-image-select {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
}
.menu-image-select img {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--anthracite);
}
.users-admin-list {
  display: grid;
  gap: .7rem;
}
.users-admin-header,
.users-admin-row {
  display: grid;
  grid-template-columns: minmax(120px, .9fr) minmax(140px, 1fr) minmax(190px, 1.2fr) 130px minmax(180px, 1.2fr) auto;
  gap: .6rem;
  align-items: end;
}
.users-admin-header {
  color: #6c6251;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 0 .5rem;
}
.users-admin-row {
  border: 1px solid #ded4bd;
  border-radius: var(--radius);
  background: #fff;
  padding: .7rem;
}
.users-admin-row label {
  font-size: .78rem;
}
.menu-admin-details {
  margin-top: .65rem;
  border-top: 1px solid #eee3c6;
  padding-top: .65rem;
}
.menu-admin-details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--red);
}

@media (max-width: 1024px) {
  .nav {
    padding-left: clamp(170px, 28vw, 240px);
  }
  .brand-logo img {
    width: clamp(150px, 24vw, 220px);
    max-height: 88px;
  }
  .nav-toggle { display: block; }
  .nav-panel {
    position: fixed;
    inset: 78px 0 auto;
    display: grid;
    gap: .3rem;
    background: rgba(14, 14, 14, .98);
    padding: 1rem;
    transform: translateY(-120%);
    transition: transform .25s ease;
  }
  .nav-panel.is-open { transform: translateY(0); }
  .nav-panel a { min-height: 44px; display: flex; align-items: center; }
  .split-grid, .order-grid, .hours-grid, .contact-grid { grid-template-columns: 1fr; }
  .reverse > :first-child { order: 0; }
  .benefit-grid, .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  body { padding-bottom: 72px; }
  .mobile-action-bar { display: grid; }
  .hero { min-height: 88vh; }
  .hero-overlay { background: rgba(14,14,14,.72); }
  .section-head, .group-box, .cookie-banner { display: grid; align-items: start; }
  .benefit-grid, .menu-grid, .card-grid, .gallery, .album-gallery, .review-grid, .footer-grid { grid-template-columns: 1fr; }
  .photo-album-head { display: grid; align-items: start; }
  .menu-toolbar { grid-template-columns: 1fr; }
  .hours-row { grid-template-columns: 1fr; gap: .25rem; }
  .cookie-banner { bottom: 5.2rem; }
  .admin-page { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    height: auto;
  }
  .admin-sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-topbar, .admin-card-head { display: grid; }
  .admin-grid, .admin-form-grid, .image-editor-grid { grid-template-columns: 1fr; }
  .album-admin-head, .album-photo-row { grid-template-columns: 1fr; }
  .album-photo-preview { width: 100%; max-width: 180px; }
  .media-upload-form { grid-template-columns: 1fr; }
  .menu-admin-header { display: none; }
  .menu-admin-row, .menu-admin-list.is-compact .menu-admin-row { grid-template-columns: 1fr; }
  .menu-admin-row .admin-check, .menu-admin-row .menu-remove { margin-top: 0; }
  .users-admin-header { display: none; }
  .users-admin-row { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .container { width: min(calc(100% - 1rem), var(--max)); }
  .brand { font-size: 1.35rem; }
  .nav {
    min-height: 72px;
    padding-left: 128px;
  }
  .brand-logo {
    left: 20px;
    top: 20px;
  }
  .brand-logo img { width: 112px; max-height: 48px; }
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.35rem; }
  .btn { width: 100%; }
  .cookie-actions .btn { width: auto; }
}

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