:root {
  --bg: #f6f5f1;             /* Main page background (off-white/cream) */
  --cream: #efd9b4;          /* Secondary cream color for highlights */
  --cream-soft: #fbf3e6;     /* A very light cream for subtle section backgrounds */
  --card: #ffffff;           /* Clean white background for cards/containers */
  --text-main: #141414;      /* Deep black for high readability in headings */
  --text-soft: #575757;      /* Muted gray for descriptions and secondary text */
  --red: #ef474f;            /* Brand primary red for buttons, active links, and accents */
  --gold: #f4b64f;           /* Secondary gold accent color for icons and special tags */
  --shadow: 0 18px 40px rgba(27, 27, 27, 0.08); /* Generic soft shadow for a floating look */
  --radius-xl: 34px;         /* Large rounded corners for the premium UI feel */
}

* {
  box-sizing: border-box;    /* Ensures padding doesn't increase element width/height */
}

body {
  margin: 0;                 /* Remove default browser margin */
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif; /* Modern, readable sans-serif font */
  background: radial-gradient(circle at 8% 0%, #fff8ed 0%, var(--bg) 45%), var(--bg); /* Luxury gradient effect */
  color: var(--text-main);   /* Set the default text color */
  min-height: 100vh;         /* Ensure body fills at least the whole screen height */
  overflow-x: hidden;        /* Prevent accidental horizontal scrolling */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Outfit", sans-serif; /* Distinct font for headings for extra personality */
}

.page-bg-shape {
  position: fixed;           /* Stay in place while the user scrolls */
  z-index: -2;               /* Place behind all main content */
  top: 4rem;                 /* Position 4rem from the top */
  width: 19vw;               /* Dynamic width based on screen size (19% of viewport width) */
  max-width: 250px;          /* Ensure it doesn't get too large on big screens */
  min-width: 72px;           /* Ensure it doesn't disappear on smaller screens */
  bottom: 4rem;              /* Position 4rem from the bottom */
  border-radius: 8px;        /* Slightly rounded corners for the background bars */
  background: linear-gradient(180deg, #edd7b0 0%, #e8c896 100%); /* Warm gold-tone gradient */
}

.page-bg-shape--left {
  left: 2.5vw;               /* Position from the left edge */
}

.page-bg-shape--right {
  right: 2.5vw;              /* Position from the right edge */
}

.layout-card,
.menu-page-main {
  width: min(1320px, 96vw);  /* Use 96% of screen or 1320px max—whichever is smaller */
  border-radius: var(--radius-xl); /* Apply the large 34px rounded corners */
  overflow: hidden;          /* Clip content that spills outside the rounded edges */
  box-shadow: var(--shadow); /* Apply the soft brand shadow defined in :root */
  background: #fff;          /* Keep the main content card strictly white */
}

.right-pane {
  background: linear-gradient(180deg, #f9f8f5 0%, #ffffff 55%); /* Subtle fade gradient for the sidebar */
  border-left: 1px solid #f0ede7; /* Light border to separate the main section and sidebar */
}

.brand-title {
  letter-spacing: 0.2px;     /* Slight space between letters for a cleaner brand look */
  font-size: 1rem;           /* Standard readable brand name size */
}

.brand-subtitle {
  color: #7f7f7f;            /* Muted gray for the brand tagline */
  font-size: 0.66rem;        /* Smaller size for the tagline */
  font-weight: 600;          /* Semi-bold to keep it legible even at small sizes */
}

.leaf-dot {
  width: 1rem;               /* Small fixed width for the brand icon dot */
  height: 1rem;              /* Small fixed height */
  border-radius: 999px;      /* Make it a perfect circle */
  background: linear-gradient(145deg, #81c445, #3f9f29); /* Natural green gradient for the logo */
  box-shadow: 0 0 0 3px #f0f8e4; /* Light green "glow" border around the dot */
}

.navbar .nav-link {
  color: #2f2f2f;            /* Dark gray for standard navigation links */
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--red);         /* Change color to brand red when link is active or hovered */
}

.tag {
  background: #ffe3e5;       /* Very light red background for small badges */
  color: #dc5f6d;            /* Contrasting pinkish-red text for badges */
  font-size: 0.72rem;        /* Small font for meta tags/categories */
  font-weight: 600;          /* Bold to make it readable */
}

.hero-title {
  font-size: clamp(2rem, 2.7vw, 3.15rem); /* Responsive size: min 2rem, scales with screen width, max 3.15rem */
  line-height: 1.02;         /* Tight line spacing for a modern headline feel */
  letter-spacing: -0.02em;   /* Slightly tighter letters for aesthetic impact */
}

.play-icon {
  width: 2rem;               /* Size for the circle background of the play button */
  height: 2rem;              /* Same height for a perfect circle */
  border-radius: 999px;      /* Circle shape */
  background: var(--gold);   /* Gold background for the watch button */
  display: inline-grid;      /* Centering container */
  place-items: center;       /* Center the play arrow perfectly */
  color: #fff;               /* White arrow color */
  font-size: 0.68rem;        /* Arrow icon size */
}

.avatars img {
  width: 2rem;               /* Small fixed width for customer faces */
  height: 2rem;              /* Fixed height */
  border-radius: 999px;      /* Round faces */
  border: 2px solid #fff;    /* White border so faces don't blend when they overlap */
  margin-left: -0.35rem;     /* Negative margin to "stack" the avatars slightly */
  object-fit: cover;         /* Ensure pictures aren't stretched */
}

.avatars img:first-child {
  margin-left: 0;            /* First face doesn't need to overlap anything to its left */
}

.hero-plate-wrap {
  position: relative;        /* Necessary to position leaves and rings absolutely inside it */
  width: min(470px, 100%);   /* Max 470px width, but shrinks on small screens */
  aspect-ratio: 1 / 1;       /* Keep it a perfect square box */
  display: grid;             /* Center the plate inside */
  place-items: center;       /* Center content both vertically and horizontally */
}

.hero-plate-ring {
  position: absolute;        /* Position independently of the food plate */
  width: 90%;                /* Slightly smaller than the wrap container */
  height: 90%;               /* Keep it a circle */
  top: 50%;                  /* Move to center vertical */
  left: 50%;                 /* Move to center horizontal */
  transform: translate(-50%, -50%); /* Offset by half its size to center perfectly */
  border-radius: 50%;        /* Round shape */
  background: var(--cream-soft); /* Subtle cream background ring behind the plate */
}

.hero-plate {
  width: 88%;                /* The main food image size */
  height: 88%;               /* Match width for circle */
  object-fit: cover;         /* Fill the circle without distortion */
  border-radius: 50%;        /* Make the food photo a circle */
  box-shadow: 0 26px 44px rgba(85, 44, 8, 0.25); /* Deep shadow to give a 3D effect of food on a table */
  z-index: 2;                /* Place above the ring but below floating leaves */
}

.leaf {
  position: absolute;        /* Randomly floating leaves */
  z-index: 3;                /* Above the food plate */
  width: 34px;               /* Leaf width */
  height: 22px;              /* Leaf height */
  background: linear-gradient(140deg, #72be53, #2f8f2f); /* Fresh green leaf color */
  border-radius: 100% 0 100% 0; /* Creates an organic leaf shape from a square */
  box-shadow: 0 6px 16px rgba(46, 125, 43, 0.32); /* Small shadow to make leaves "pop" off the page */
}

.leaf::after {
  content: "";               /* Creates the "stem/vein" inside the leaf */
  position: absolute;        /* Independent positioning */
  width: 1px;                /* Thin line stem */
  height: 18px;              /* Stem length */
  background: rgba(255, 255, 255, 0.85); /* White highlight for the stem */
  left: 16px;                /* Position stem center */
  top: 2px;                  /* Offset from top */
  transform: rotate(24deg);  /* Angled stem for realism */
}

.leaf-1 {
  right: 12%;                /* Position top-right leaf */
  top: 10%;                  /* Top offset */
  transform: rotate(-14deg); /* Rotation angle */
}

.leaf-2 {
  left: 13%;                 /* Position mid-left leaf */
  top: 23%;                  /* Vertical position */
  transform: rotate(28deg);  /* Rotation angle */
}

.steps-title {
  font-size: clamp(1.95rem, 2.5vw, 3rem); /* Responsive size for section headings */
}

.steps-sub {
  font-size: clamp(1.12rem, 1.7vw, 2rem); /* Responsive size for subtags/descriptions */
}

.step-card {
  border-radius: 20px;       /* Rounded card corners for the instruction steps */
  border: 1px solid #f2efe8; /* Light border for definition */
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f6 100%); /* Subtle dual-tone background */
}

.step-icon {
  width: 54px;               /* Square base for the custom icons */
  height: 54px;              /* Same as width */
  border-radius: 14px;       /* Slightly rounded icon background */
  background: linear-gradient(145deg, #ffe9bf, #ffd78f); /* Gold/orange background for icon circle */
  position: relative;        /* Anchor for the pseudo-elements inside icons */
  box-shadow: inset 0 -4px 10px rgba(215, 162, 66, 0.2); /* Inset shadow for depth */
}

.icon-order::before {
  content: "";               /* Represents a "plate" or order icon */
  position: absolute;        /* Custom drawing */
  width: 34px;               /* Item width */
  height: 18px;              /* Item height */
  border-radius: 10px;       /* Corners */
  background: #f9b33e;       /* Gold color */
  left: 10px;                /* Centering */
  top: 16px;                 /* Centering */
  box-shadow: 0 -9px 0 #7f4d1b, 0 9px 0 #64b552; /* Stacked coloring to look like a burger/order icon */
}

.icon-deliver::before {
  content: "";               /* Represents a "delivery vehicle" body symbol */
  position: absolute;        /* Drawing base */
  width: 28px;               /* Base width */
  height: 20px;              /* Base height */
  border-radius: 5px;        /* Corner rounding */
  background: #32a8f5;       /* Modern blue for delivery */
  left: 13px;                /* Centering offset */
  top: 15px;                 /* Centering offset */
}

.icon-deliver::after {
  content: "";               /* Represents the "wheels" of the delivery icon */
  position: absolute;        /* Drawing attachment */
  width: 8px;                /* Wheel diameter */
  height: 8px;               /* Correct aspect ratio */
  border-radius: 999px;      /* Round wheels */
  background: #c9791f;       /* Dark orange wheels */
  left: 16px;                /* Left wheel position */
  bottom: 8px;               /* Vertical attachment */
  box-shadow: 14px 0 0 #c9791f; /* Second wheel drawn with CSS shadow trick */
}

.icon-cook::before {
  content: "";               /* Represents a chef's "bowl" or "pot" base */
  position: absolute;        /* Drawing base */
  width: 24px;               /* Bowl width */
  height: 14px;              /* Bowl height */
  border-radius: 0 0 12px 12px; /* Curved bottom bowl shape */
  background: #df5f3f;       /* Reddish color for kitchen heat */
  left: 15px;                /* Centering */
  top: 18px;                 /* Centering */
}

.icon-cook::after {
  content: "";               /* Chef hat/lid top part */
  position: absolute;        /* Drawing top */
  width: 18px;               /* Top width */
  height: 12px;              /* Top height */
  border-radius: 9px 9px 2px 2px; /* Rounded top lid style */
  border: 2px solid #1e1e1e; /* Outline for the lid */
  border-bottom: 0;          /* Remove bottom border to blend with base */
  left: 18px;                /* Centered above base */
  top: 8px;                  /* Position top */
}

.right-title,
.offer-card h2 {
  font-size: clamp(1.72rem, 2vw, 2.35rem); /* Responsive title sizing */
  line-height: 1.04;         /* Tight headers */
}

.right-sub,
.offer-card > div > p {
  font-size: clamp(1.2rem, 1.6vw, 1.85rem); /* Responsive secondary description sizing */
}

.menu-card {
  background: #fff;          /* Clean white card for menu items */
  border-radius: 999px;      /* Capsule shape for the side-menu cards */
  border: 1px solid #eee8dc; /* Subtle border for definition */
  padding: 0.8rem 0.5rem 0.75rem; /* Space around the image and text */
  transition: transform 180ms ease, box-shadow 180ms ease; /* Smooth hover animations */
}

.menu-card.active,
.menu-card:hover {
  transform: translateY(-6px); /* Pop up effect when interacted with */
  box-shadow: 0 12px 30px rgba(52, 44, 32, 0.13); /* Elegant shadow highlight */
}

.menu-card img {
  width: 124px;               /* Fixed size for side-menu thumbnails */
  height: 124px;              /* Consistent aspect ratio */
  object-fit: cover;          /* Clip image to fit circle nicely */
  border-radius: 999px;       /* Circular images */
}

.menu-card strong {
  color: #ea4950;             /* Red price tag for visibility */
  font-size: 1.35rem;         /* Bold large font for price */
  font-family: "Outfit", sans-serif; /* Consistent heading font family */
}

.menu-card button {
  width: 1.75rem;             /* Fixed width for the add (+) button */
  height: 1.75rem;            /* Square aspect for rounding */
  border-radius: 999px;       /* Round button shape */
  border: 0;                  /* Remove default styling */
  background: #121212;        /* Dark background for focus */
  color: #fff;                /* White plus symbol */
}

.offer-card {
  background: #fff;           /* White background card */
  border-radius: var(--radius-xl); /* Standard XL rounding */
  border: 1px solid #f3eee5;  /* Subtle boarder */
  padding: 1.15rem;           /* Content spacing */
  position: relative;         /* Anchor for children like the food image and discount badge */
  overflow: hidden;           /* Clip the oversized background food image */
  min-height: 250px;          /* Minimum card height */
}

.offer-card small {
  display: block;             /* Force new line */
  color: #686868;             /* Muted description gray */
  line-height: 1.6;           /* Comfortable reading spacing */
  max-width: 31ch;            /* Limit text width so it doesn't run into icons */
}

.offer-card > div {
  padding-left: 146px;        /* Push text to the right to avoid overlapping the food image */
  position: relative;         /* Z-index requires a position setting */
  z-index: 2;                 /* Put text over the image shadow */
}

.offer-card img {
  position: absolute;         /* Break image out of flow to stick it in the corner */
  width: 180px;               /* Hero-style food image size */
  height: 180px;              /* Matched height */
  object-fit: cover;          /* Don't stretch the ingredients in the picture */
  border-radius: 999px;       /* Circle shape */
  bottom: -56px;              /* Offset into the corner gap */
  left: -30px;                /* Partially hide part of the circle for style */
  opacity: 0.95;              /* Slight transparency for blending */
  border: 14px solid #fbf5eb; /* Thick decorative frame around the plate image */
}

.discount-pill {
  position: absolute;         /* Free floating pill */
  left: 8px;                  /* Corner pin */
  bottom: 8px;                /* Corner pin */
  width: 72px;                /* Pill circle size */
  height: 72px;               /* Matched height */
  border-radius: 999px;       /* Round shape */
  background: #e73a47;        /* Energetic red for "Sale" style badges */
  color: #fff;                /* White high-contrast text */
  font-weight: 800;           /* Extra bold for impact */
  display: grid;              /* Grid layout for centering multi-line text */
  place-items: center;        /* Perfect center alignment */
  text-align: center;         /* Center the text within lines */
  font-size: 0.9rem;          /* Sizing for the text */
  line-height: 1.05;          /* Close lines for the "20% OFF" feel */
}

.menu-title {
  font-size: clamp(1.9rem, 2.6vw, 3rem); /* Responsive title font */
  line-height: 1.03;         /* Tight header line spacing */
}

.menu-category-row {
  position: sticky;          /* Fix header to top once the user scrolls to it */
  top: 0.5rem;               /* Offset from the exact top for spacing */
  z-index: 14;               /* Above all regular page content */
  padding: 0.25rem 0;        /* Minor breathing room */
}

.menu-empty-state {
  border: 1px dashed #e7d9c0;/* Dashed line to signify an empty/temp space */
  border-radius: 14px;       /* Sizing consistent with blocks */
  background: #fff9ee;       /* Soft gold theme */
  color: #755625;            /* Deep brown text */
  font-weight: 600;          /* Legible bolding */
  padding: 0.65rem 0.8rem;   /* Internal padding */
}

.menu-feature-card {
  overflow: hidden;          /* Clip the images inside the card */
  border-radius: 22px;       /* Softer card edges for feature items */
  background: linear-gradient(180deg, #fff 0%, #fdfaf5 100%); /* Clean white-to-cream background */
  border: 1px solid #f0e8da; /* Boundary definition */
  transition: transform 180ms ease, box-shadow 180ms ease; /* Interactivity feel */
}

.menu-feature-card:hover {
  transform: translateY(-4px); /* Lift-up response */
  box-shadow: 0 12px 30px rgba(42, 29, 9, 0.12); /* Shadow depth highlight on interaction */
}

.menu-feature-card img {
  width: 100%;               /* Image should fill the top of the card */
  height: 180px;             /* Fixed image height for uniform grid look */
  object-fit: cover;         /* Fill space nicely */
}

.menu-section-card {
  border: 1px solid #f0e8da; /* Light frame around category sections */
  border-radius: 22px;       /* Section rounding */
  background: linear-gradient(180deg, #fff 0%, #fdfaf5 100%); /* Same subtle background gradient as cards */
  padding: 1rem;             /* Standard buffer inside sections */
}

.menu-photo {
  width: 100%;               /* Category photos take the full width of their column */
  height: 100%;              /* Fill container height */
  min-height: 220px;         /* Avoid being too thin on wide boxes */
  max-height: 320px;         /* Limit expansion on huge screens */
  object-fit: cover;         /* Proper image clipping */
  border-radius: 18px;       /* Rounded edges for photos */
}

.menu-section-card h3 {
  margin: 0 0 0.55rem;       /* Gap between category title and the list of items */
  font-size: 1.35rem;         /* Bold category header size */
}

.menu-list {
  border: 1px solid #f1eadc; /* Frame around the group of food items */
  border-radius: 14px;       /* Group rounding */
  background: #fff;          /* Clean white background to make list items readable */
  overflow: hidden;          /* Ensure child borders don''t spill over rounding */
}

.menu-item-row {
  display: grid;             /* Layout engine */
  grid-template-columns: minmax(0, 1fr) auto; /* Item name fills left, price/button stays right */
  align-items: center;       /* Vertical centering */
  gap: 1rem;                 /* Space between name and the controls */
  padding: 0.62rem 0.8rem;   /* Sizing for comfortable list touch targets */
  border-bottom: 1px dashed #efe6d7; /* Dotted line separator between items */
}

.menu-item-row:last-child {
  border-bottom: 0;          /* Final item doesn''t need a bottom separator line */
}

.menu-item-row span {
  color: #2f2f2f;            /* Neutral gray-black for food names */
  font-size: 0.92rem;        /* Main text sizing */
  min-width: 0;              /* Flex/Grid safety to prevent overflow */
}

.menu-item-row strong {
  font-size: 0.94rem;        /* Price text size */
  color: #eb4b54;            /* Red theme for values and costs */
  white-space: nowrap;       /* Ensure prices stay on one line even on small screens */
}

.menu-item-actions {
  display: inline-flex;      /* Horizontal layout for price + button combo */
  align-items: center;       /* Match centers */
  gap: 0.45rem;              /* Breathing room between price and button */
}

.add-menu-btn,
.add-feature-btn {
  border-width: 1px;         /* Standard thin border */
  font-weight: 700;          /* Bold text for the "Add" call to action */
}

.cart-fab {
  position: fixed;           /* Float the cart button on top of fixed location */
  right: 1rem;               /* Offset from right */
  bottom: 1rem;              /* Offset from bottom */
  z-index: 1061;             /* Stay above even floating modals/navbars */
  display: inline-flex;      /* Alignment engine */
  align-items: center;       /* Center text and badge vertical */
  gap: 0.45rem;              /* Space around badge */
  box-shadow: 0 12px 28px rgba(35, 17, 9, 0.28); /* Prominent heavy shadow for floating action button */
}

.cart-count-badge {
  min-width: 1.4rem;         /* Size for the red dot */
  height: 1.4rem;            /* Same as width */
  border-radius: 999px;      /* Perfect circle */
  background: #fff;          /* White badge circle contrasted with red button */
  color: #d52f3a;            /* Red text for the number */
  display: inline-grid;      /* Centering container */
  place-items: center;       /* Dead center alignment */
  font-weight: 800;          /* Boldest text */
  font-size: 0.74rem;        /* Size for the item number */
  padding: 0 0.3rem;         /* Horizontal buffer for multi-digit numbers (e.g., 10+) */
}

.cart-items-list {
  display: flex;             /* Stack cart rows vertically */
  flex-direction: column;    /* Explicit stack direction */
  gap: 0.65rem;              /* Space between items in the drawer */
}

.cart-line-item {
  border: 1px solid #f0e8da; /* Definition frame around each item row */
  border-radius: 12px;       /* Individual line item rounding */
  padding: 0.7rem;           /* Breathing room inside row */
  display: flex;             /* Horizontal layout inside row */
  gap: 0.7rem;               /* Space between info and controls */
  justify-content: space-between; /* Stick name far left and controls far right */
  align-items: center;       /* Perfectly aligned center lines */
  background: #fff;          /* Plain base color */
}

.cart-line-info h6 {
  margin: 0;                 /* Reset heading margins */
  font-size: 0.95rem;        /* Food name size in cart */
}

.cart-line-info small {
  color: var(--text-soft);    /* Muted pricing info description */
}

.cart-line-controls {
  display: inline-flex;      /* Mini-toolbar layout for + / - / x icons */
  align-items: center;       /* Vertical alignment */
  gap: 0.35rem;              /* Buttons spacing */
}

.cart-qty {
  min-width: 1.2rem;         /* Consistent spacing so buttons don''t dance when number changes */
  text-align: center;        /* Centered digit */
  font-weight: 700;          /* Large bold font */
}

.checkout-total-line {
  display: flex;             /* Alignment for final total */
  justify-content: space-between; /* Label left, Value right */
  align-items: center;       /* Center vertical */
  border: 1px dashed #f0d2d5;/* High-impact dashed border for total */
  border-radius: 12px;       /* Box rounded corners */
  padding: 0.62rem 0.75rem;   /* Sizing */
  background: #fff5f6;       /* Soft red theme to signify a final summary box */
}

.shell-reveal {
  animation: rise-in 520ms ease; /* Initial page load entry animation */
}

@keyframes rise-in {
  from {
    opacity: 0;              /* Start completely invisible */
    transform: translateY(16px); /* Start slightly lower on screen */
  }
  to {
    opacity: 1;              /* Fade in to visible */
    transform: translateY(0);    /* Slide up to original home location */
  }
}

@media (max-width: 1199.98px) {
  .right-pane {
    border-left: 0;          /* Stack the sections, so side border becomes top border */
    border-top: 1px solid #f0ede7; /* Breakpoint transition logic */
  }

  .hero-plate-wrap {
    width: min(360px, 88vw); /* Shrink main image for smaller tablets/laptops */
  }

  .page-bg-shape {
    display: none;           /* Hide the side bars on busy smaller screens to clear space */
  }
}

@media (max-width: 991.98px) {
  .layout-card,
  .menu-page-main {
    width: 100%;             /* Use full screen width on mobile */
    border-radius: 0;        /* Remove card rounded corners—full width looks better on phones */
    box-shadow: none;        /* Skip shadow—it wastes processing and space on mobile */
  }

  .hero-plate-wrap {
    width: min(76vw, 320px); /* Tighter image constraint for mobile layout */
  }

  .offer-card {
    min-height: 230px;       /* Slightly smaller base height for phone card */
  }

  .offer-card > div {
    padding-left: 0;         /* Clear the "sidebar text" look since everything is centered vertically */
    padding-bottom: 120px;   /* Add space for image at the bottom */
  }

  .offer-card img {
    width: 118px;            /* Slower image size for phone card */
    height: 118px;           /* Square ratio */
    left: 12px;              /* Corner pin */
    bottom: 12px;            /* Corner pin */
    border-width: 6px;       /* Smaller frame border */
    border-radius: 24px;     /* Square-ish rounding for modern mobile feel */
  }

  .discount-pill {
    width: 56px;             /* Compact badge size for phones */
    height: 56px;            /* Keep it a circle */
    font-size: 0.76rem;      /* Scale text down */
    left: auto;              /* Switch position to allow room for the food image */
    right: 10px;             /* Pin to right corner */
    bottom: 10px;            /* Pin to bottom corner */
  }

  .leaf {
    width: 28px;             /* Scale leaves down for mobile UI consistency */
    height: 18px;            /* Responsive scaling */
  }

  .menu-photo {
    min-height: 200px;       /* Prevent category images from vanishing */
    max-height: 240px;       /* Keep vertical scroll tight */
  }

  .cart-line-item {
    flex-direction: column;  /* Stack cart controls below name for better thumb reach/width */
    align-items: stretch;    /* Fill full row width */
  }

  .cart-line-controls {
    justify-content: flex-end; /* Keep buttons standardly aligned right */
  }
}

@media (max-width: 575.98px) {
  .menu-category-row {
    overflow-x: auto;        /* Enable side-scrolling for the filter categories on narrow phones */
    flex-wrap: nowrap !important; /* Force items to stay in one single row */
    padding-bottom: 0.3rem;  /* Space for the invisible scroll bar */
    -webkit-overflow-scrolling: touch; /* Enable smooth "momentum" scrolling on iPhones */
    scrollbar-width: none;   /* Hide standard ugly scroll bars for Firefox */
  }

  .menu-category-row::-webkit-scrollbar {
    display: none;           /* Completely hide scroll bar to maintain clean aesthetic and save pixels */
  }

  .menu-filter-btn {
    flex: 0 0 auto;          /* Prevent buttons from squishing to fit—let them scroll horizontally */
    white-space: nowrap;     /* Avoid text wrapping inside buttons */
  }

  .hero-plate-wrap {
    width: min(72vw, 250px); /* Smallest image size for tiny phones */
  }

  .hero-title {
    font-size: clamp(1.75rem, 8.2vw, 2.2rem); /* Dynamic header size for phone screens */
  }

  .steps-title {
    font-size: clamp(1.5rem, 8vw, 2rem);    /* Responsive mobile headers */
  }

  .steps-sub {
    font-size: clamp(1rem, 5vw, 1.3rem);     /* Responsive mobile subheaders */
  }

  .menu-card img {
    width: 92px;               /* Scaled down side-menu image for narrow screens */
    height: 92px;              /* Consistent height */
  }

  .offer-card {
    min-height: 215px;         /* Tightest offer card height */
  }

  .offer-card > div {
    padding-bottom: 106px;     /* Gap for overlap */
  }

  .offer-card img {
    width: 102px;              /* Tiniest hero-card thumbnails */
    height: 102px;             /* Clean circle */
  }

  .discount-pill {
    width: 50px;               /* Miniature discount badge */
    height: 50px;              /* circle ratio */
    font-size: 0.7rem;         /* Text meta sizing */
  }

  .menu-photo {
    min-height: 180px;         /* Smallest photo limit */
    max-height: 220px;         /* Vertical economy */
  }

  .menu-section-card {
    padding: 0.8rem;           /* Tighter section space for mobile */
  }

  .menu-item-row {
    align-items: flex-start;  /* Align to top-left for list look */
    grid-template-columns: 1fr; /* Use full-width rows for food name and controls separately */
    gap: 0.45rem;              /* Minimal gap */
  }

  .menu-item-actions {
    width: 100%;               /* Buttons fill the line below the name */
    justify-content: space-between; /* Push price left and Add button right */
  }

  .cart-fab {
    right: 0.7rem;             /* Pin button slightly closer to the corner for reachability */
    bottom: 0.7rem;            /* Pin to corner */
  }
}