/*
 * Kumpels Pizzeria – Design System and site styles
 *
 * This stylesheet defines all design tokens, utility classes and component
 * styles for the Kumpels Pizzeria web concept. A minimalistic layout
 * emphasises generous white space, clear hierarchy and a restrained colour
 * palette based on the brand system. All interactive elements meet
 * accessibility guidelines: high contrast (WCAG AA), keyboard focus outlines
 * and touch targets of at least 44 px height. Variables are declared in
 * :root so developers can switch themes (e.g. dark mode) by overriding
 * these values. Feel free to extend the spacing scale using the 4 px base.
 */

html {
  scroll-behavior: smooth;
}

/* CSS reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

/* Root design tokens */
:root {
  /* Colour tokens */
  --color-bg-base: #F8ECDC;
  --color-text-base: #25231D;
  --color-brand-primary: #ED5031;
  --color-state-hover: #F1775F; /* accent lighten 10% */
  --color-state-active: #D83312; /* accent darken 10% */
  --color-state-secondary: #5E5949; /* text 80% */
  --color-state-disabled: #958E78; /* text 60% */
  --color-border-muted: #C2BEB1; /* light border */

  /* Typography tokens */
  --font-heading: Impact, Anton, Oswald, sans-serif;
  --font-body: 'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, system-ui, sans-serif;

  /* Sizing tokens */
  --radius: 8px;
  --shadow: 0 2px 6px rgba(37, 35, 29, 0.1);
  /* Spacing scale (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* Layout */
  --max-width-content: 1200px;
  /* Badge Colour tokens */
  --badge-classic:    #DD3513; /* brand orange */
  --badge-spicy:      #B42A0F; /* hot red */
  --badge-vegetarian: #3A833C; /* green */
  --badge-meat:       #6D4C41; /* chestnut */
  --badge-special:    #8E24AA; /* violet */
  --badge-fish:       #0077B6; /* marine blue */
  --badge-new:        #996B00; /* amber/yellow */
  --badge-bio:        #2C7730; /* darker green */
  --badge-still:      #0077B6; /* marine blue */
  --badge-sparkling:  #008577; /* teal */
  --chip-neutral:     #857260; /* outline for 'Alle' */
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

/* Typography scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin-bottom: var(--space-4);
}

h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 2rem; line-height: 1.25; }
h3 { font-size: 1.5rem; line-height: 1.3; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-4);
  font-size: 1rem;
}

ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  font-size: 1rem;
}

/* Links */
a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  border: none;
  font-size: 1rem;
}

.btn:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
}

.btn-primary:hover {
  background-color: var(--color-state-hover);
}

.btn-primary:active {
  background-color: var(--color-state-active);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-brand-primary);
}

.btn-secondary:hover {
  background-color: var(--color-state-hover);
  color: var(--color-bg-base);
}

.btn-secondary:active {
  background-color: var(--color-state-active);
  color: var(--color-bg-base);
}

.btn:disabled {
  background-color: var(--color-state-disabled);
  color: var(--color-border-muted);
  cursor: not-allowed;
}

/* Header / Navigation */
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-muted);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.nav-left {
  display: inline-flex;
  gap: var(--space-4);
  height: 32px;
  width: auto;
}

.nav-left a{
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.nav-left a img{
  height: 32px;
  flex: 0 0 auto;
}

.nav-left a h4{
  margin: 0;
  font-weight: bold;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.nav-left a h4:hover,
.nav-left a h4:focus {
  background-color: var(--color-border-muted);
}

.nav-links {
  display: flex;
  gap: var(--space-4);
  height: 32px;
}

.nav-links a {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-text-base);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: var(--color-border-muted);
}

.nav-cta {
  height: 32px;
  padding: var(--space-1) var(--space-2);
}

/* Mobile nav toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-nav {
  display: none;
}

/* Hero */
.hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
}

.hero .hero-text {
  flex: 1;
  padding-right: var(--space-5);
}

.hero .hero-image {
  flex: 1;
  background-image: url('assets/KumpelsPizzeriaCover.webp');
  background-size: cover;
  background-position: center;
  height: 300px;
  border-radius: var(--radius);
}

.hero-buttons {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-4);
}

/* USPs */
.usp-section {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.usp {
  flex: 1 1 200px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.usp-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.usp-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-brand-primary);
}

.usp-content h4 {
  margin-bottom: var(--space-2);
}

.usp-content p {
  font-size: 0.9rem;
  color: var(--color-state-secondary);
  margin: 0;
}

/* Featured products */
.featured-section {
  margin-top: var(--space-6);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.featured-card {
  background-color: white;
  /*border: 1px solid var(--color-border-muted);*/
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.featured-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.featured-card .card-body {
  padding: var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.featured-card h5 {
  margin-bottom: var(--space-2);
}

.featured-card p {
  font-size: 0.9rem;
  color: var(--color-state-secondary);
  margin-bottom: var(--space-3);
  height: 100%;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.badge {
  padding: 2px 6px;
  font-size: 0.7rem;
  border-radius: var(--radius);
  color: var(--color-bg-base);
}

.badge.classic { background-color: var(--badge-classic); }
.badge.special { background-color: var(--badge-special); }
.badge.vegetarian { background-color: var(--badge-vegetarian); }
.badge.meat { background-color: var(--badge-meat); }
.badge.spicy { background-color: var(--badge-spicy); }
.badge.new { background-color: var(--badge-new);}
.badge.fish { background-color: var(--badge-fish); }
.badge.bio { background-color: var(--badge-bio); }
.badge.still { background-color: var(--badge-still); }
.badge.sparkling { background-color: var(--badge-sparkling); }

.hidden { 
  display: none !important; 
}

.filter-bar {
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  max-width: 100%;
  overflow-x: clip;
}

.filter-bar button {
  --chip-color: var(--chip-neutral);
  --chip-on: #fff;
  background:#fff;
  color: var(--chip-color);
  border:1px solid var(--chip-color);
  border-radius:999px;
  padding:var(--space-2) var(--space-3);
  line-height:1;
  cursor:pointer;
  font-family: var(--font-body, system-ui);
  transition: background .15s, color .15s, border-color .15s, transform .02s;
  flex: 0 0 auto;
}

.filter-bar button:hover { 
  background: color-mix(in srgb, var(--chip-color) 12%, white); 
}

.filter-bar button:active { 
  transform: translateY(1px); 
}

.filter-bar button:focus-visible{ 
  outline: var(--space-1) solid var(--chip-color); 
  outline-offset: var(--space-1); 
}

.filter-bar button.active{
  background: var(--chip-color);
  color: var(--chip-on);
  border-color: var(--chip-color);
}

.filter-bar button[data-tag="classic"]    { --chip-color: var(--badge-classic); font-size: 0.85rem; }
.filter-bar button[data-tag="special"]    { --chip-color: var(--badge-special); font-size: 0.85rem; }
.filter-bar button[data-tag="vegetarian"] { --chip-color: var(--badge-vegetarian); font-size: 0.85rem; }
.filter-bar button[data-tag="meat"]       { --chip-color: var(--badge-meat); font-size: 0.85rem; }
.filter-bar button[data-tag="spicy"]      { --chip-color: var(--badge-spicy); font-size: 0.85rem; }
.filter-bar button[data-tag="fish"]       { --chip-color: var(--badge-fish); font-size: 0.85rem; }
.filter-bar button[data-tag="still"]      { --chip-color: var(--badge-still); font-size: 0.85rem; }
.filter-bar button[data-tag="sparkling"]  { --chip-color: var(--badge-sparkling); font-size: 0.85rem; }
.filter-bar button[data-tag="bio"]        { --chip-color: var(--badge-bio); font-size: 0.85rem; }
.filter-bar button[data-tag="new"]        { --chip-color: var(--badge-new); font-size: 0.85rem; }

/* 'Alle' in a neutral outline (keeps UI calm) */
.filter-bar button[data-tag="all"]        { --chip-color: var(--chip-neutral); font-size: 0.85rem; }

.featured-card .price {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

.featured-card .add-to-cart {
  margin-top: auto;
}

/* Social proof */
.social-proof {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.social-proof .stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-2);
}

.social-proof .stars svg {
  width: 24px;
  height: 24px;
  fill: var(--color-brand-primary);
}

.social-proof blockquote {
  font-style: italic;
  max-width: 600px;
  color: var(--color-state-secondary);
  background-color: transparent;
}

/* Footer */
footer {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border-muted);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  font-size: 0.8rem;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
  ;
}

footer a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Menu page */
.menu-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
}

.menu-hero .text {
  flex: 1;
}

.menu-hero .image {
  flex: 1;
  height: 300px;
  background-image: url('assets/hero.webp');
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
}

.menu-tabs {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  overflow-x: auto;
}

.menu-tabs button {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-weight: bold;
  color: var(--color-state-secondary);
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.menu-tabs button.active,
.menu-tabs button:hover {
  color: var(--color-text-base);
  border-color: var(--color-brand-primary);
}

.menu-items-wrapper {
  display: none;
}

.menu-items-wrapper.active {
  display: grid;
}

.menu-items {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.menu-card {
  background-color: white;
  /*border: 1px solid var(--color-border-muted);*/
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.menu-card h5 {
  margin-bottom: var(--space-2);
}

.menu-card p {
  font-size: 0.9rem;
  color: var(--color-state-secondary);
  margin-bottom: var(--space-3);
  height: 100%;
}

.menu-card .price {
  font-weight: bold;
  margin-bottom: var(--space-3);
}

.menu-card .badges {
  margin-bottom: var(--space-3);
}

.menu-card .add-to-cart {
  margin-top: auto;
}

.upsell {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-muted);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.upsell h4 {
  margin-bottom: var(--space-2);
}

.upsell button {
  background-color: transparent;
  color: var(--color-brand-primary);
}

/* Sticky order bar */
.sticky-order-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.sticky-order-bar button {
  color: var(--color-bg-base);
  font-weight: bold;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.sticky-order-bar button:focus {
  outline: 2px solid var(--color-bg-base);
  outline-offset: 2px;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 35, 29, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal {
  background-color: var(--color-bg-base);
  padding: var(--space-5);
  border-radius: var(--radius);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow);
  position: relative;
}

.modal h3 {
  margin-bottom: var(--space-4);
}

.modal .close-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* Modal state containers; hidden by default */
.loading-state,
.success-state,
.error-state,
.added-state,
.checkout-state {
  display: none;
}

.modal.active .loading-state { display: block; }
.modal.active.added .loading-state { display: none; }
.modal.active.added .added-state { display: block; }
.modal.active.success .success-state { display: block; }
.modal.active.error .error-state { display: block; }
.modal.active.checkout .checkout-state { display: block; }

.modal-state-icon {
  display: block;
  margin: 0 auto var(--space-3);
  width: 48px;
  height: 48px;
  fill: var(--color-brand-primary);
}

/* ==================================================
   Prototypes page styles
   --------------------------------------------------
   The prototypes page visualises the click flows for
   desktop and mobile. Steps are numbered via CSS
   counters to clearly indicate progression. Lists
   reset their own counters to avoid interference
   between flows. A large margin separates each flow.
*/
.prototype-flow {
  margin-top: var(--space-6);
}

.prototype-flow ol {
  list-style: none;
  counter-reset: step-counter;
  margin-left: 0;
}

.prototype-flow li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.prototype-flow li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

/* ==================================================
   A/B variants page styles
   --------------------------------------------------
   The A/B variants page displays alternative
   headline, subcopy and CTA options along with
   sticky bar layouts. Cards are arranged in a
   responsive grid. Each card uses the design
   system colours and spacing.
*/
.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.variant-card {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius);
  padding: var(--space-4);
  background-color: var(--color-bg-base);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.variant-card h3 {
  font-family: var(--font-heading);
  margin-bottom: var(--space-3);
}

.variant-card p {
  color: var(--color-state-secondary);
  margin-bottom: var(--space-4);
}

.variant-card .cta-preview {
  margin-top: auto;
}

/* Sticky bar examples used in A/B variants */
.sticky-example {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border-radius: var(--radius);
  margin-top: var(--space-4);
  font-size: 0.9rem;
}

.sticky-example.basic {
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
}

.sticky-example.extended {
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
  justify-content: space-between;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.sticky-example.extended span {
  margin-right: var(--space-4);
}

/* ==================================================
   Handoff page styles
   --------------------------------------------------
   Tables are used sparingly to list tokens and
   analytics event names. Short labels fit nicely
   within the cells without causing horizontal
   overflow. The headers use a muted background to
   differentiate from the body.
*/
table.token-table,
table.event-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
}

table.token-table th,
table.token-table td,
table.event-table th,
table.event-table td {
  border: 1px solid var(--color-border-muted);
  padding: var(--space-2);
  text-align: left;
  font-size: 0.9rem;
}

table.token-table th,
table.event-table th {
  background-color: var(--color-border-muted);
  color: var(--color-text-base);
}

/* About page */
.about-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
}

.about-hero .text {
  flex: 1;
}

.about-hero .image {
  flex: 1;
  height: 300px;
  background-image: url('assets/hero.webp');
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
}

.values-section {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.value-card {
  flex: 1 1 250px;
  background-color: white;
  /*border: 1px solid var(--color-border-muted);*/
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

.value-card svg {
  width: 48px;
  height: 48px;
  fill: var(--color-brand-primary);
}

.value-card h4 {
  margin: 0;
}

.map {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-border-muted);
  border-radius: var(--radius);
}

.map p {
  margin: 0;
  color: var(--color-state-secondary);
}

.contact-buttons {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-4);
}

.contact-buttons a {
  flex: 1;
}

/* Prototypes page */
.prototypes-section {
  margin-top: var(--space-6);
}

.flow {
  margin-bottom: var(--space-5);
}

.flow h4 {
  margin-bottom: var(--space-3);
}

.flow ol {
  margin-left: var(--space-4);
  color: var(--color-state-secondary);
}

/* A/B Variants */
.ab-section {
  margin-top: var(--space-6);
}

.variant {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background-color: var(--color-bg-base);
}

.variant h4 {
  margin-bottom: var(--space-3);
}

.variant p {
  font-size: 0.9rem;
  color: var(--color-state-secondary);
}

/* Handoff page */
.handoff-section {
  margin-top: var(--space-6);
}

.handoff-section h4 {
  margin-bottom: var(--space-3);
}

.handoff-section ul {
  margin-left: var(--space-4);
  list-style-type: disc;
  color: var(--color-state-secondary);
}

/* Responsive behaviour */
@media (max-width: 700px) {
  .hero {
    flex-direction: column;
  }

  .hero .hero-text {
    padding-right: 0;
  }

  .hero .hero-image {
    width: 100%;
    height: 200px;
    margin-top: var(--space-4);
  }

  .menu-hero {
    flex-direction: column;
  }
  
  .menu-hero .image {
    width: 100%;
    height: 200px;
    margin-top: var(--space-4);
  }
  
  .about-hero {
    flex-direction: column;
  }
  
  .about-hero .image {
    width: 100%;
    height: 200px;
    margin-top: var(--space-4);
  }

  .nav-links {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .mobile-nav {
    display: none;
    flex-direction: column;
    background-color: var(--color-bg-base);
    position: absolute;
    top: 64px;
    right: 0;
    width: 200px;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border-muted);
    z-index: 1500;
  }

  .mobile-nav.open {
    display: flex;
  }

  .mobile-nav span {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-muted);
    text-decoration: none;
    color: var(--color-bg-base);
    background-color: var(--color-brand-primary);
  }

  .mobile-nav span:hover {
    background-color: var(--color-state-active);
  }

  .mobile-nav a {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-muted);
    text-decoration: none;
    color: var(--color-text-base);
  }

  .mobile-nav a:hover {
    background-color: var(--color-border-muted);
  }

  .menu-tabs{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--space-3);

    --left-fade: 24px;
    --right-fade: 48px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--left-fade), black calc(100% - var(--right-fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black var(--left-fade),black calc(100% - var(--right-fade)), transparent 100%);
  }

  .menu-tabs::-webkit-scrollbar { display: none; }

  .menu-tabs button {
    padding: var(--space-3) var(--space-2);
    width: fit-content;
    flex: 0 1 auto;
    text-align: center;
  }

  footer { 
    flex-direction: column;
  }

  .menu-items{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .menu-card{ margin:0; }
  .menu-card h5{ font-size:1.05rem; }
  .menu-card p { font-size:.95rem; line-height:1.35; }

  .featured-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .featured-card{ margin:0; }
  .featured-card h5{ font-size:1.05rem; }
  .featured-card p { font-size:.95rem; line-height:1.35; }
}

@supports (width: 100dvw) {
  html, body { width: 100dvw; }
}