/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap');

/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3rem;
  --nav-side-gap: 1.5rem; /* default horizontal padding for nav content */

  /*========== Bear Trap Light Theme Colors ==========*/
  --first-color: #333; /* Dark accent for light theme */
  --first-color-alt: #555; /* Lighter accent */
  --title-color: #000; /* Black titles */
  --text-color: #333; /* Dark gray text */
  --text-color-light: #666; /* Medium gray */
  --body-color: #fff; /* White background */
  --container-color: #f5f5f5; /* Light gray container */
  /* Divider color used for vertical separators in the menu grid. Black on
    the default light theme so dividers are visible; overridden in
    dark-theme to a light/white value. */
  --divider-color: #000;

  /*========== Font and typography ==========*/
  --body-font: 'Merriweather', serif;
  --nav-font: 'Inter', 'Poppins', Arial, sans-serif;
  --biggest-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes ==========*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  /* Logo glow vars (used for subtle hover glow, theme-aware) */
  --logo-glow: 0 12px 30px rgba(0,0,0,0.08);
  --logo-accent-glow: rgba(0,0,0,0.06);

@media screen and (min-width: 768px){
  :root{
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

}

/*========== BASE ==========*/
*,::before,::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

/*========== Variables Dark theme ==========*/
body.dark-theme{
  --first-color: #ddd; /* Light accent for dark theme */
  --first-color-alt: #fff; /* White accent */
  --title-color: #fff; /* White titles */
  --text-color: #e0e0e0; /* Light gray text */
  --text-color-light: #bdbdbd; /* Lighter gray */
  --body-color: #000; /* Black background */
  --container-color: #181818; /* Dark container */
  --logo-glow: 0 12px 32px rgba(255,255,255,0.06);
  --logo-accent-glow: rgba(255,255,255,0.045);
  /* Light divider for dark theme menus */
  --divider-color: rgba(255,255,255,0.22);
}
html body .change-theme,
html body .cart-button,
html body #theme-button,
html body #theme-button:hover {
  color: var(--text-color);
}

/*========== Button Dark/Light ==========*/
.change-theme{
  /* Place the theme toggle inside the header nav and align it vertically
     with nav items. Position it from the nav padding variable so it lines up
     with the left edge of the nav content. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--nav-side-gap);
  right: auto;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .3s ease;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.change-theme:hover{
  transform: translateY(-50%) rotate(20deg) scale(1.1);
  color: var(--title-color);
}

/* Cart button anchored to the right edge where the theme toggle used to be */
.cart-button{
  /* Align cart button inside the header nav on the right and use the same
     nav-side-gap so it lines up with right-side content. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--nav-side-gap);
  left: auto;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .25s ease;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* small numeric badge on the header cart icon */
.cart-button .cart-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--first-color);
  color: var(--body-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

.cart-button:hover{
  transform: translateY(-50%) scale(1.06);
  color: var(--title-color);
}

/* Ensure cart button is always visible and above header content (homepage had a tall centered logo that could overlap) */
.l-header .cart-button{
  display: flex !important;
  z-index: 9999 !important;
  color: var(--text-color);
}

/*========== CART DRAWER / OVERLAY ==========*/
.cart-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 9998;
}
.cart-overlay.open{
  opacity: 1;
  visibility: visible;
}
.cart-drawer{
  width: 420px;
  max-width: 95%;
  height: 100%;
  /* Solid black background for stronger contrast */
  background-color: #000;
  border-left: 1px solid rgba(255,255,255,0.04);
  color: var(--text-color);
  box-shadow: -18px 0 40px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 12px 0 0 12px;
  /* keep a subtle backdrop but reduce blur so content beneath is less visible */
  backdrop-filter: blur(2px) saturate(110%);
}
.cart-overlay.open .cart-drawer{
  transform: translateX(0);
}
.cart-close{
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-color);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.cart-close:hover{ background: rgba(0,0,0,0.06); }

/* Footer: inline contact row placed under logo for mobile UI
   Minimal, scoped styles so other footer columns/layout remain unchanged. */
.footer__contact-inline{
  display:flex;
  flex-direction:column; /* stack address above phone */
  gap:0.25rem;
  align-items:center;
  justify-content:center;
  margin-top:0.75rem;
}
.footer__contact-link{
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
}
.footer__contact-link:hover{
  text-decoration: underline;
}

/* Make address a single, non-wrapping line under the logo; keep phone on its own line */
.footer__contact-address{
  white-space: nowrap;
  display: block;
}
.footer__contact-phone{
  display: block;
}

/* Ensure footer logo area keeps spacing and does not push other columns
   on narrow screens; only adjusts the inner contact row. */
.footer__content { display: flex; flex-direction: column; align-items: center; }

@media screen and (min-width: 900px) {
  /* On wider screens keep existing grid/columns behavior by resetting alignment
     for footer content so it remains left-aligned where expected. */
  .footer__content { align-items: flex-start; }
  .footer__contact-inline { justify-content: flex-start; }
}
.cart__header{ display:flex; align-items:center; justify-content:space-between; gap: .75rem; margin-bottom: 1rem }
.cart__items{ margin-bottom: 1.3rem }
.cart-list{ display:flex; flex-direction:column; gap: 1rem }
.cart-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0,0,0,0.02);
  padding: .9rem 1.6rem .9rem 1rem; /* extra right padding so the top-right X sits comfortably */
  border-radius: 12px;
}
.cart-item-left{ flex: 1 1 auto; min-width: 0; max-width: calc(100% - 180px); }
.cart-item-right{ display: flex; gap: .25rem; align-items: center; flex: 0 0 auto }
.cart-item-desc{ margin-top: .25rem; color: var(--text-color-light); font-size: .95rem }
.cart-item-name{ font-weight: 600; color: var(--title-color) }
.cart-qty{ width: 64px; flex: 0 0 64px; padding: .36rem .48rem; border-radius: 10px; border:1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.02); color: var(--text-color); font-size: .95rem; text-align:center; margin-right: 4px }
.cart-item-price{ width: 80px; flex: 0 0 80px; text-align: right; font-weight: 700 }

/* New sleek desktop quantity stepper (only active on wider screens) */
@media screen and (min-width: 900px) {
  .qty-stepper{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* slightly tighter */
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
    border: 1px solid rgba(0,0,0,0.06);
    padding: 0.12rem 0.18rem; /* smaller padding for a sleeker look */
    border-radius: 8px; /* slightly tighter radius */
    min-width: 92px;
    justify-content: center;
  }

  .qty-stepper .qty-btn{
    background: transparent;
    border: 1px solid rgba(0,0,0,0.04);
    color: var(--text-color);
    font-size: 0.98rem; /* slightly smaller glyph */
    width: 28px; /* smaller square buttons */
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* sleeker corners */
    cursor: pointer;
    transition: background .12s ease, transform .08s ease, border-color .12s ease;
    box-shadow: none;
    padding: 0;
    line-height: 1;
  }

  .qty-stepper .qty-btn:hover{
    background: rgba(0,0,0,0.04);
    transform: translateY(-1px);
    border-color: rgba(0,0,0,0.06);
  }

  .qty-stepper .qty-value{
    width: 40px; /* narrower value field */
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.95rem; /* slightly reduced text size */
    color: var(--text-color);
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    padding: 0; /* remove inner padding so height remains small */
  }

  /* hide spinner in number input for webkit */
  .qty-stepper .qty-value::-webkit-outer-spin-button,
  .qty-stepper .qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* fallback: ensure small screens still show a compact numeric label */
  @media (max-width: 899px){ .qty-stepper{ display: none !important; } }
}

/* Mobile: nudge quantity to the right and tighten spacing in cart drawer */
@media (max-width: 700px) {
  .cart-item-left{ max-width: calc(100% - 220px); }
  .cart-qty{ margin-left: 0.6rem; margin-right: 0.6rem; width: 64px; flex: 0 0 64px; }
  .cart-item-price{ width: 92px; flex: 0 0 92px; }
}

@media (max-width: 480px) {
  /* push qty toward the right so it has visual separation from the name */
  .cart-qty{ margin-left: auto; margin-right: 0.5rem; width: 64px; flex: 0 0 64px; }
  .cart-item-left{ max-width: calc(100% - 180px); }
  .cart-item-price{ width: 88px; flex: 0 0 88px; }
}

/* remove button as part of the right-hand controls (inline, not absolute) */
.cart-remove{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  margin-left: 2px;
}
.cart-remove:hover{ background: rgba(0,0,0,0.06) }
.cart-remove i{ font-size: 1.05rem }

/* totals */
.cart__totals{ margin-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.04); padding-top: 1rem; }
.cart__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom: .75rem }
.cart__total{ font-size: 1.08rem }

/* checkout form inputs - modern styles */
.checkout-form fieldset{ border: none; padding: 0; margin: 0 0 1rem 0 }
.checkout-form fieldset legend{
  display:block;
  margin-bottom: .85rem; /* increase gap between legend and first field */
  font-weight:700;
  color: var(--title-color);
  padding-top: .25rem;
}
.checkout-form label{ display:block; margin-bottom: .35rem; font-weight:600; color: var(--title-color) }
.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form select,
.checkout-form input[type="email"]{
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.02);
  color: var(--text-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  margin-bottom: .85rem;
}
.checkout-form input:focus, .checkout-form select:focus{ outline: none; box-shadow: 0 10px 24px rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.12) }

/* place order primary style inside drawer */
.cart-drawer .button#place-order{ display: block; width: 100%; margin-top: .6rem; padding: .85rem .95rem; border-radius: 12px; background: var(--first-color); color: var(--body-color); border: none; font-weight:700 }

/* clear button subtle */
.cart-drawer .button#clear-cart{ background: transparent; color: var(--first-color); border: 1px solid rgba(0,0,0,0.06); padding: .55rem .7rem; border-radius: 10px }

@media screen and (min-width: 1024px){
  .cart-drawer{ width: 480px }
}

body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  line-height: 1.6;
}

h1,h2,h3,p,ul{
  margin: 0;
}

ul{
  padding: 0;
  list-style: none;
}

a{
  text-decoration: none;
}

img{
  max-width: none;
  height: auto;
}

/*========== CLASS CSS ==========*/
.section{
  padding: 4rem 0 2rem;
}

.section-title, .section-subtitle{
  text-align: center;
}

.section-title{
  font-size: var(--h1-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-3);
}

.section-subtitle{
  display: block;
  color: var(--title-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

/*========== MODERN CONTAINER STYLING ==========*/
.modern-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.modern-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-container:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.modern-container:hover::before {
  opacity: 1;
}

/*========== LAYOUT ==========*/
.bd-container{
  /* Wider, fluid page container to give components (like menu and modern-container) more horizontal room */
  max-width: 1400px;
  width: calc(100% - 4rem);
  margin: 0 auto;
  padding: 0 1rem;
}

.bd-grid{
  display: grid;
  gap: 1.5rem;
}

.l-header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*========== NAV (consolidated, mobile-first) ==========*/
  .nav{
  max-width: none;
  width: 100%;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* sensible default for narrow screens */
  align-items: center;
  padding: 0 var(--nav-side-gap);
  position: relative;
  gap: 0;
}

/* Centered logo anchor — non-clickable container; only the img inside is clickable */
.nav__logo-center{
  position: relative;
  grid-column: 2;
  justify-self: center;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  pointer-events: none; /* container ignores pointer events */
  overflow: hidden;
}

.nav__logo-center img{
  pointer-events: auto; /* only the logo image is clickable */
  height: 70px;
  width: auto;
  display: block;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease;
  will-change: transform, box-shadow;
}

/* Subtle, softer hover/focus for header logo: smaller lift & scale with eased timing */
.nav__logo-center img:hover,
.nav__logo-center img:focus-visible{
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06), 0 0 12px rgba(0,0,0,0.03);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.04));
  animation: none;
}

@keyframes logo-pulse {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Gentle pulse on focus (accessibility) */
.nav__logo-center img:focus-visible{
  animation: logo-pulse 0.9s ease-in-out 1;
}

/* Menu containers are transparent on the grid by default; lists control visibility */
.nav__menu--left,
.nav__menu--right{
  display: contents;
}

.nav__menu--left .nav__list,
.nav__menu--right .nav__list{
  display: none; /* mobile-first: desktop displays will enable these in the consolidated block */
  align-items: center;
  list-style: none;
}

.nav__menu--left .nav__list{
  justify-content: flex-end;
  gap: 1rem;
  padding-right: 0;
}

.nav__menu--right .nav__list{
  justify-content: flex-start;
  gap: 1rem;
  padding-left: 0;
}

/* Mobile menu and toggle behavior (unchanged) */
.nav__menu--mobile{
  display: none;
}

.nav__toggle{
  display: none;
}

@media screen and (max-width: 768px){
  /* Increase header height on small screens to give logo and header icons more breathing room
     Use a slightly larger header so tall logo glyphs aren't clipped; logo img height is computed
     from the header height so it always fits without overflow. */
  :root{ --header-height: 7.5rem; }

  .nav{
    --nav-side-gap: 1rem;
    padding: 0 var(--nav-side-gap);
    /* Fix mobile grid so center column (logo) has space - use 1fr for sides, minmax for center */
    grid-template-columns: 1fr minmax(200px, auto) 1fr;
  }

  /* Make the logo fit inside the header by sizing it relative to the header height */
  .nav__logo-center img{
    /* Slightly reduce logo size on mobile so header icons have more breathing room */
    height: 96px;
    width: auto;
    max-height: 96px;
  }

  /* Hide desktop menus on mobile */
  .nav__menu--left,
  .nav__menu--right{
    display: none;
  }

  .change-theme:not(#theme-button-mobile){
    display: none;
  }

  .nav__menu--mobile{
    display: block; /* ensure mobile menu is rendered (overrides default display:none) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* full viewport so we can align items top/bottom */
    padding: 2rem 0;
    text-align: center;
  /* Use a solid black background so the mobile panel reads as a solid nav */
  background-color: #000;
    /* Use flex to vertically distribute the menu list and theme toggle */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Use transform for smoother GPU-accelerated animation */
    transform: translateY(-110%);
    transition: transform .36s cubic-bezier(.22,.9,.25,1);
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    border-radius: 0 0 1rem 1rem;
    z-index: var(--z-fixed);
  }

  /* Remove the rounded/pill outline specifically for the first (Menu) link only */
  .nav__menu--mobile .nav__list li:first-child .nav__link{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }

  /* Also defensively remove any focus/outline/tap highlight for the Menu link */
  .nav__menu--mobile .nav__list li:first-child .nav__link,
  .nav__menu--mobile .nav__list li:first-child .nav__link:focus,
  .nav__menu--mobile .nav__list li:first-child .nav__link:focus-visible,
  .nav__menu--mobile .nav__list li:first-child .nav__link:active{
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .nav__menu--mobile .nav__list{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: flex-start;
    align-items: center; /* center children horizontally so links and controls line up */
    margin: 0; /* allow flex spacing to place list at top */
    padding-top: 1.5rem;
    width: 100%;
  }

  .mobile-theme-toggle{
    display: flex;
    align-items: center;
    justify-content: center; /* horizontally center the icon with nav links */
    gap: 0.75rem;
    padding: 0.75rem 0; /* remove lateral margin so it lines up with links */
    margin: 0;
    width: 100%;
    border-top: 1px solid var(--first-color);
    color: var(--text-color);
    font-size: 1rem;
  }

  .nav__toggle{ display: block; position: absolute; right: 1rem; font-size: 1.5rem; cursor: pointer; color: var(--text-color); z-index: 101; }
  /* Ensure the mobile menu (three-line) sits flush at the screen edge
    and the cart button sits directly to its left to avoid overlap. */
  .nav__toggle{ right: 0; padding-right: .5rem; }
  .cart-button{ right: 2.6rem; }

  /* Make the hamburger (three-line) icon the same tappable size as the cart
    icon and increase spacing between them for easier tapping on mobile. */
  /* Keep the hamburger a larger tappable target, but slightly reduce the cart
    icon so it visually matches the three-line icon glyph size while keeping
    comfortable touch targets. */
  .nav__toggle{
  font-size: 1.6rem; /* visual size for the hamburger */
  width: 52px; /* tappable target */
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 102;
  }

  .cart-button{
  /* slightly smaller than the hamburger so the visual glyphs read the same
    size while retaining a decent hit area for touch */
  font-size: 1.35rem;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 102;
  }

  /* push cart a bit further left so there's a comfortable gap */
  .cart-button{ right: 4.6rem; }
  .nav__toggle{ right: 0.6rem; }
}

.nav__item{
  margin-bottom: var(--mb-2);
}

.nav__link, .nav__logo, .nav__toggle{
  color: var(--text-color);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 1.08rem;
  font-family: var(--nav-font);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nav__logo{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--title-color);
  font-family: var(--nav-font);
}

.nav__logo:hover{
  color: var(--title-color);
  opacity: 0.8;
}

.nav__link{
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  text-transform: capitalize;
  font-size: 1.08rem;
  padding: 0.25em 0.7em;
  border-radius: 0.5em;
  font-family: var(--nav-font);
  font-weight: 600;
}

.nav__link::after{
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 50%;
  background-color: var(--title-color);
  transition: all .3s ease;
  transform: translateX(-50%);
}

.nav__link:hover{
  color: var(--first-color-alt);
  background: rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.nav__link:hover::after{
  width: 80%;
}

.nav__toggle{
  font-size: 1.3rem;
  cursor: pointer;
}

/* Show menu */
.show-menu{
  transform: translateY(0);
}

/* Active menu */
.active-link{
  color: var(--title-color);
  font-weight: 600;
}

.active-link::after{
  width: 80%;
}

/* Change background header */
.scroll-header{
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* Scroll top */
.scrolltop{
  position: fixed;
  right: 1rem;
  bottom: -20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  background: var(--title-color);
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
  visibility: hidden;
  opacity: 0.7;
}

.scrolltop:hover{
  opacity: 1;
  transform: translateY(-3px);
}

.scrolltop__icon{
  font-size: 1.8rem;
  color: var(--body-color);
}

/* Show scrolltop */
.show-scroll{
  visibility: visible;
  bottom: 1.5rem;
}

/*========== HOME ==========*/
.home__container{
  height: auto;
  min-height: calc(100vh - var(--header-height));
  align-content: start;
  /* Increase top padding so the page title isn't tightly tucked under the fixed header */
  padding: 9rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Apply the same top padding used on the homepage to other top-level page containers
   so pages have consistent vertical spacing beneath the fixed header. This targets
   bd-container elements inside the main area but explicitly excludes the
   homepage's `.home__container` to avoid double application. */
.l-main .bd-container:not(.home__container) {
  padding: 9rem 1rem 4rem;
  min-height: calc(100vh - var(--header-height));
  align-content: start;
}

.home__data{
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.home__title{
  font-size: var(--h1-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
  text-align: center;
  margin-bottom: var(--mb-3);
}

.home__subtitle{
  font-size: var(--h1-font-size);
  color: var(--first-color);
  margin-bottom: var(--mb-2);
  font-weight: 600;
}

.home__description{
  font-size: var(--h2-font-size);
  color: var(--text-color);
  margin-bottom: var(--mb-4);
  line-height: 1.6;
}

/* Specials wrapper for horizontal layout */
.home__specials-wrapper{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 4rem auto;
  padding: 0 2rem;
}

.home__specials{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2rem;
  text-align: center; /* Ensure text is centered */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center elements vertically */
  align-items: center;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: visible; /* Ensure child elements are not clipped */
  padding-left: 3rem; /* Increased left padding for better alignment */
}

.home__specials:first-child {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  padding: 2rem; /* Match Nightly Specials padding */
  text-align: center; /* Center text */
  gap: 1rem; /* Add spacing between elements */
}

.home__specials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.home__specials:hover {
  transform: none; /* Remove hover animation */
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.home__specials:hover::before {
  opacity: 0; /* Remove hover effect */
}

.specials__title{
  font-size: 1.5rem;
  color: var(--first-color);
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
}

.specials__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--first-color), transparent);
  border-radius: 2px;
}

.specials__text{
  font-size: 0.95rem;
  color: var(--text-color);
  text-align: center;
  line-height: 1.8;
  margin-bottom: 1rem;
  opacity: 0.9;
  font-weight: 300;
  margin-left: auto;
  margin-right: auto;
}

.specials__list{
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.specials__list li{
  font-size: 0.95rem;
  color: var(--text-color);
  padding: 0.35rem 0.5rem;
  position: relative;
  line-height: 1.5;
  background: transparent;
  border-radius: 0;
  border-left: none;
  transition: none;
  font-weight: 300;
}

.specials__list li:hover {
  background: transparent;
  border-left-color: transparent;
  transform: none;
  padding-left: 0.5rem;
}

.specials__list li:last-child{
  margin-bottom: 0;
}

.specials__list li::before{
  content: '';
  display: none;
}

.specials__list li:hover::before {
  transform: none;
}

.specials__list li strong{
  color: var(--first-color);
  font-weight: 700;
  font-size: 1.05rem;
}

.home__img{
  width: 300px;
  justify-self: center;
}

/* Desktop: TRUE Horizontal side-by-side layout */
@media screen and (min-width: 992px){
  .home__specials-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 3rem;
    max-width: 2200px;
    margin: 0 0 4rem 0;
    padding-left: 2rem;
    padding-right: 0;
  }

  .home__specials {
    min-width: 0;
    min-height: 340px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 24px;
    box-sizing: border-box;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    /* Align content to the top so card headings line up across columns */
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow-wrap: break-word;
    word-break: break-word;
    height: 100%;
  }
  .home__specials:first-child {
    padding: 2.5rem 2.5rem 2.5rem 0.5rem;
    text-align: center;
    /* keep first card content visually centered horizontally but start at top */
    justify-content: flex-start;
    align-items: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .home__specials:last-child {
    padding: 2.5rem 0 2.5rem 2.5rem;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1 1 0;
    max-width: 1600px;
  }

  .home__specials .specials__title {
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
  }

  .home__specials .specials__text {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    text-align: center;
    width: 100%;
  }

  .home__specials .specials__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem 2.5rem;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .home__specials .specials__list li {
    font-size: 0.98rem;
    padding: 0.35rem 0.5rem;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
  }

  .specials__title{
    font-size: 1.5rem;
    letter-spacing: 2.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .specials__title::after {
    width: 50px;
    height: 2px;
  }

  .specials__text{
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .specials__list li{
    font-size: 0.9rem;
    padding: 0.35rem 0.5rem;
    line-height: 1.4;
    text-align: left;
  }

  .specials__list li::before{
    display: none;
  }

  .specials__list li:hover {
    padding-left: 0.5rem;
  }

  .specials__list li strong{
    display: block;
    margin-bottom: 0.15rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 991px){
  .home__specials-wrapper{
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }

  .home__specials{
    min-height: 350px;
  }

  .specials__list{
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   Menu integration styles (from assets/bearmenu)
   Kept mostly as provided; scoped to menu page via
   using unique class names (menu-container, grid-* etc.)
   ==================================================*/

.menu-container {
  /* Mobile-first: full width on small screens, but allow wider max width on larger viewports */
  width: 100%;
  max-width: min(1280px, 96%);
  margin: 0 auto;
  padding: 22px 18px;
  box-sizing: border-box;
  transition: none !important; /* keep hover disabled */
  /* Small tunable offset to nudge the first line of menu item titles down so
     they visually align with the right-anchored price. Change this value if
     you want titles moved more/less. Scoped here so it only affects the menu. */
  /* Increased nudge so first-line titles sit lower and align with prices */
  --menu-title-nudge: 0.32rem;
}

/* Disable any hover-based lift/animation inside the menu panel to keep it visually stable */
.menu-container:hover,
.menu-container *:hover {
  transform: none !important;
  animation: none !important;
}

/* Explicitly prevent box-shadow/translate on focus/hover for any nested modern-container if present */
.menu-container .modern-container,
.menu-container .modern-container:hover,
.menu-container .modern-container:focus {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* --- LOGO SETTINGS --- */
header {
  text-align: center;
  margin-bottom: 30px;
}
.menu-logo {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- SECTION HEADERS ("APPETIZERS", etc.) --- */
.section-header {
  text-align: center;
  margin: 35px 0 5px 0;
}
.section-header h3 {
  font-family: 'Oswald', sans-serif;
  /* use theme-aware title color so menu headings invert with the theme */
  color: var(--title-color);
  font-size: 2.1rem;
  font-weight: 700;
  text-transform: uppercase;
  /* identical white lines above and below the title */
  border-top: 3px solid var(--title-color);
  border-bottom: 3px solid var(--title-color);
  display: inline-block;
  margin: 0;
  /* small vertical padding to give the lines breathing room */
  padding: 6px 8px;
  letter-spacing: 1px;
  line-height: 1;
}

.section-note {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 0.95rem;
  /* use theme-aware lighter text color for de-emphasis */
  color: var(--text-color-light);
  margin-top: 4px; /* reduced to tighten spacing under the logo */
  margin-bottom: 18px;
  padding: 0 10px;
}

/* --- MENU ITEMS --- */
.menu-item {
  margin: 0; /* gap handled by parent column gap */
  text-align: center;
  padding: 6px 0; /* consistent vertical rhythm */
}
/* Order page: left-align product card titles and descriptions while keeping
   the global menu layout unchanged. Scoped to .order-page so the main
   menu page continues to center items as before. */
.order-page .menu-item{
  text-align: left;
}
.order-page .menu-item .item-top{
  justify-content: flex-start; /* ensure name/price row starts at left */
}
.order-page .menu-item .item-name,
.order-page .menu-item .item-desc{
  text-align: left;
  justify-self: start; /* in grid contexts place name at start */
}

/* Desktop: enforce a two-column layout for product cards on order page so
   the name/description occupy the left column and price/add-controls stay
   in the right column. This prevents long descriptions from flowing under
   or into the price area. */
@media screen and (min-width: 769px) {
  .order-page .menu-item{
    display: grid;
    grid-template-columns: 1fr minmax(120px, 220px);
    align-items: center;
    gap: 12px 18px; /* row-gap, column-gap */
    padding: 12px 0; /* keep vertical rhythm inside cards */
  }

  /* Ensure the top row (name) sits in the left column and price is in the right */
  .order-page .menu-item .item-top{ display: contents; }
  .order-page .menu-item .item-name{ grid-column: 1 / 2; }
  .order-page .menu-item .item-price{ grid-column: 2 / 3; justify-self: end; }

  /* Description is constrained to the left column and wraps naturally */
  .order-page .menu-item .item-desc{
    grid-column: 1 / 2;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--text-color-light);
    margin-top: 6px;
  }

  /* Keep the Add/Customize button in the right column under the price if present */
  .order-page .menu-item .item-controls{ grid-column: 2 / 3; justify-self: end; }
}

/* Product card layout used by the order page (JS-rendered .product-card). Ensure
   product-meta occupies left column and product-foot (price + button) stays in
   the right column; long descriptions wrap inside the left column. Scoped to
   .order-page so other pages remain unaffected. */
@media screen and (min-width: 769px) {
  .order-page .product-card{
    display: grid;
    grid-template-columns: 1fr minmax(120px, 220px);
    gap: 12px 18px;
    align-items: center;
  }

  .order-page .product-card .product-meta{ grid-column: 1 / 2; }
  .order-page .product-card .product-foot{ grid-column: 2 / 3; justify-self: end; text-align: right; }

  .order-page .product-card .product-name{ text-align: left; margin: 0; }
  .order-page .product-card .product-desc{
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    margin: 6px 0 0 0;
    color: var(--text-color-light);
  }

  /* Ensure action button sits to the right and doesn't push into the meta column */
  .order-page .product-card .product-action-btn{ margin-left: 8px; }
}
    
/* The top line: NAME ... PRICE */
.item-top {
  display: flex;
  justify-content: center; 
  align-items: baseline;
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  /* theme-aware color so items invert with the theme */
  color: var(--title-color);
  gap: 8px; /* consistent spacing between name/dots/price */
  min-height: 34px; /* stabilizes row height across items */
}

.item-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
    
/* The 3 Dots */
.item-dots {
  margin: 0 4px;
  font-weight: 700;
}
.item-dots::after {
  content: "..."; 
}

.item-price {
  font-weight: 700;
}

/* The Description: Classic Serif Italic */
.item-desc {
  font-family: "Times New Roman", Times, serif;
  font-size: 0.95rem;
  font-style: italic;
  /* theme-aware description color */
  color: var(--text-color);
  margin-top: 1px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- LAYOUT GRIDS --- */
/* Mobile-first: stack columns on small screens */
.grid-3-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
    
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}

.col-content {
  /* Mobile-first: smaller horizontal padding so items don't wrap unnecessarily */
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* consistent vertical spacing between menu items */
  align-items: stretch;
}

/* Vertical Divider Lines (Desktop Only) */
@media (min-width: 769px) {
  /* Disable hover/transform of the surrounding outline when on the menu page.
     This prevents the menu's outer card (.menu-page__content) from lifting. */
  .menu-page__container .menu-page__content,
  .menu-page__container .menu-page__content:hover {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  .grid-3-col > div:nth-child(1), 
  .grid-3-col > div:nth-child(2) {
    border-right: 1px solid var(--divider-color); /* theme-aware divider */
    padding-right: 24px; /* increased breathing room from the divider */
  }
  .grid-2-col > div:nth-child(1) {
    border-right: 1px solid var(--divider-color); /* theme-aware divider */
    padding-right: 24px; /* increased breathing room */
  }
}

/* --- PIZZA SECTION --- */
.pizza-grid {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
}
.pizza-col {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--divider-color);
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pizza-col:last-child { border-right: none; }
    
.pizza-title { 
  font-family: 'Oswald', sans-serif;
  font-weight: 700; 
  text-transform: uppercase; 
  display: block; 
  font-size: 1rem;
  color: var(--title-color);
}
.pizza-desc { 
  font-family: "Times New Roman", Times, serif;
  font-style: italic; 
  font-size: 0.9rem; 
  color: var(--text-color);
}

/* --- SPECIALS LIST --- */
.specials__list li{
  font-size: 0.95rem;
  color: var(--title-color);
  padding: 0.35rem 0.5rem;
  position: relative;
  line-height: 1.5;
  background: transparent;
  border-radius: 0;
  border-left: none;
  transition: none;
  font-weight: 300;
}


/* --- EXTRAS & WARNINGS --- */
.extra-sauces {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 20px;
  color: var(--text-color);
}

.warning-box {
  border: 1px solid #aaa;
  padding: 8px;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 0.85rem;
  margin: 40px auto;
  max-width: 800px;
  color: #555;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  .grid-3-col, .grid-2-col, .pizza-grid {
    display: flex;
    flex-direction: column;
  }
  .grid-3-col > div, .grid-2-col > div, .pizza-col {
    border-right: none !important; 
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .item-desc { padding: 0 10px; }
}

/* Desktop: adjust menu columns so item titles are centered above the details */
@media (min-width: 769px) {
  /* Restore three-column grid on desktop while keeping mobile-first base above */
  .grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 48px; /* increased for better breathing room */
    row-gap: 8px;
    /* stretch columns to the same height so vertical dividers match */
    align-items: stretch;
  }
  .grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px; /* match 3-col gap */
    align-items: stretch;
  }

  /* Column padding and vertical rhythm for printed-menu look */
  .col-content {
    gap: 16px; /* slightly increased for better spacing */
    padding: 0 20px; /* increased padding for better divider spacing */
    min-height: 100%; /* ensure columns stretch to match */
  }

  /* Each menu item: proper grid layout for perfect alignment */
  .menu-item {
    text-align: center;
    padding: 10px 0; /* increased for better spacing */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px 16px; /* row-gap, column-gap - increased for clarity */
  }

  /* Treat the top row wrapper as a transparent container so its children
     (.item-name and .item-price) participate in the parent grid directly. */
  .item-top {
    display: contents;
  }

  /* Place elements into the parent grid explicitly */
  .item-name {
    grid-column: 1 / 2;
    justify-self: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
    white-space: normal; /* allow wrapping */
    margin: 0;
    align-self: center; /* vertically center with price */
  }

  .item-price {
    grid-column: 2 / 3;
    justify-self: end;
    align-self: center; /* vertically center with name */
    font-weight: 700;
    white-space: nowrap;
    position: static;
    margin-left: 0;
  }

  /* Hide dot leader when centering names */
  .item-dots { display: none; }

  .item-desc {
    grid-column: 1 / 2; /* keep description under the title column */
    justify-self: center;
    text-align: center;
    padding: 0 8px;
    margin-top: 6px; /* consistent spacing */
    max-width: 95%;
  }

  /* Tighten description spacing for items with single-line titles only.
     The small JS snippet adds .single-line or .two-line to each .menu-item. */
  .menu-item.single-line .item-desc {
    margin-top: 4px; /* tighter spacing when title is a single line */
  }

  /* For clarity, ensure two-line items keep a slightly larger gap */
  .menu-item.two-line .item-desc {
    margin-top: 8px;
  }

  /* Ensure vertical divider breathing room and proper alignment */
  .grid-3-col > div:nth-child(1),
  .grid-3-col > div:nth-child(2) {
    padding-right: 24px; /* increased for better spacing */
    /* reinforce divider color here as well for consistency */
    border-right: 1px solid var(--divider-color);
  }
  
  .grid-2-col > div:nth-child(1) {
    padding-right: 24px;
    border-right: 1px solid var(--divider-color);
  }
}

/* --------------------------------------------------
   Section-specific divider alignment
   Move grids slightly to the right so their vertical
   dividers align with the page center (Our Menu title).
   These selectors target the grid immediately following a
   `.section-header` to avoid changing HTML structure.
   -------------------------------------------------- */
@media (min-width: 769px) {
  /* Two-column sections (e.g., Burger Baskets, Chicken & Seafood)
     — shift right and keep a single middle divider only. */
  .section-header + .grid-2-col {
    transform: translateX(18px); /* tweak this value to nudge more/less */
  }
  .section-header + .grid-2-col > div:nth-child(1) {
    border-right: 1px solid var(--divider-color);
    padding-right: 18px;
  }
  .section-header + .grid-2-col > div:nth-child(2) {
    border-right: none; /* remove far-right divider for two-col sections */
  }

  /* Three-column sections (e.g., Appetizers) — shift entire grid right so
     both dividers move together and maintain their gap. */
  .section-header + .grid-3-col {
    transform: translateX(22px); /* slightly larger nudge for appetizers */
  }
  .section-header + .grid-3-col > div:nth-child(1),
  .section-header + .grid-3-col > div:nth-child(2) {
    border-right: 1px solid var(--divider-color);
    padding-right: 18px;
  }
}

/* ==================================================
   Disable all hover effects & animations inside menu
   ==================================================
   This block intentionally uses !important to override
   any existing hover/transition/animation rules that
   apply to elements nested in the menu panel. It leaves
   interactive behavior (clicks) intact while removing
   visual motion and hover styling.
*/
@media (min-width: 0px) {
  .menu-container,
  .menu-container * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .menu-container *:hover,
  .menu-container *:focus,
  .menu-container *:active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    /* keep the pointer cursor for clickable elements */
    cursor: inherit !important;
  }

  /* Remove hover pseudo-element effects often used for links/buttons */
  .menu-container a:hover::after,
  .menu-container a:focus::after,
  .menu-container .nav__link:hover::after {
    width: 0 !important;
    opacity: 0 !important;
  }
}

/* End menu integration styles */

/* --- Center specific section grids so their vertical dividers align with section headers --- */
.section-block.center-divider {
  /* default nudge for dividers to the right; tune per-section using a modifier class */
  --divider-shift: 18px;
}

.section-block.center-divider .grid-2-col,
.section-block.center-divider .grid-3-col {
  /* Restrict width so the center of the grid lines up with the page center */
  max-width: 980px; /* adjust if you want wider/narrower centered grids */
  margin: 0 auto; /* center the grid inside the menu container */
  box-sizing: border-box;
  /* Nudge the visual position of the entire grid to the right so vertical
     dividers line up precisely under centered headers. Tunable via
     --divider-shift on the .section-block.center-divider element. */
  transform: translateX(var(--divider-shift));
}

.section-block.center-divider .col-content {
  /* keep existing column padding but ensure symmetry */
  padding-left: 18px;
  padding-right: 18px;
}

.section-block.center-divider .grid-2-col > div:nth-child(1) {
  /* For two-column sections we only want a single middle divider (right side
     of the left column). Ensure the right column does not render a divider. */
  border-right: 1px solid var(--divider-color);
}
.section-block.center-divider .grid-2-col > div:nth-child(2) {
  border-right: none;
}
.section-block.center-divider .grid-3-col > div:nth-child(1),
.section-block.center-divider .grid-3-col > div:nth-child(2) {
  /* For three-column sections (appetizers) keep both dividers visible but
     the entire grid is shifted right by the same amount so the gap remains */
  border-right: 1px solid var(--divider-color);
}

/* Slightly larger nudge for appetizers to visually match the printed layout */
.section-block.center-divider.appetizers { --divider-shift: 22px; }


/* Responsive adjustments for home section */
@media screen and (max-width: 768px){
  .home__container{
    padding: 4rem 1rem 3rem;
  }

  .home__title{
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .home__specials-wrapper{
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .home__specials{
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    min-height: auto;
  }

  .specials__title{
    font-size: 1.5rem;
  }

  .specials__text{
    font-size: 1rem;
  }

  .specials__list li{
    font-size: 0.95rem;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
  }

  .specials__list li strong{
    font-size: 1rem;
  }
}

@media screen and (max-width: 576px){
  .home__container{
    padding: 3rem 0.75rem 2rem;
  }

  .home__title{
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .home__specials-wrapper{
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .home__specials{
    padding: 1.5rem 1rem;
    margin-bottom: 0;
  }

  .specials__title{
    font-size: 1.3rem;
  }

  .specials__text{
    font-size: 0.9rem;
  }

  .specials__list li{
    font-size: 0.9rem;
    padding-left: 1.5rem;
  }
}

/* ---------- Targeted fixes: Specials & Services responsiveness ---------- */
/* These overrides improve fluid reflow between desktop and mobile and
   avoid card overlap by using auto-fit/minmax grids and removing heavy
   asymmetric padding at intermediate breakpoints. Safe, reversible. */
@media screen and (max-width: 991px) {
  /* Make specials layout more fluid: switch to auto-fit grid so items
     wrap naturally instead of using a rigid flex with fixed gaps. */
  .home__specials-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    padding: 0 1rem;
    align-items: stretch;
    margin-bottom: 2rem;
  }

  /* Reduce heavy left padding and don't force tall fixed heights. */
  .home__specials {
    padding: 1.25rem;
    padding-left: 1rem; /* override earlier asymmetric padding */
    padding-right: 1rem;
    min-height: auto;
    box-sizing: border-box;
  }

  .home__specials:first-child {
    max-width: none;
    margin: 0;
  }

  .home__specials:last-child {
    text-align: center;
    align-items: center;
  }

  .home__specials .specials__list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Make services grid more flexible on tablets and small desktops. */
  .services__container {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }

  .services__content {
    padding: 1rem;
    min-height: auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
}

@media screen and (max-width: 480px) {
  /* Slightly smaller swipe-cards so they don't force overflow at some
     intermediate densities. Keep horizontal-swipe UX but reduce card width. */
  .services__content {
    flex: 0 0 70%; /* a bit smaller than previous 78% */
    min-width: 200px;
    scroll-snap-align: center;
  }

  /* Tighten specials padding on very small screens */
  .home__specials {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}


/*========== BUTTONS ==========*/
.button{
  display: inline-block;
  background-color: transparent;
  color: var(--title-color);
  padding: .75rem 1.5rem;
  border: 2px solid var(--title-color);
  border-radius: .5rem;
  transition: all .3s ease;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.button:hover{
  background-color: var(--title-color);
  color: var(--body-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body.dark-theme .button:hover{
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/*========== ORDER / CART UI (basic helpers) ==========*/
.product-card{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-align: center; /* center title & description */
}
.product-name{
  font-weight: 700;
  font-family: var(--nav-font);
  color: var(--title-color);
  margin: 0;
}
.product-desc{
  color: var(--text-color);
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
  margin: 0.25rem 0 0.5rem 0;
}
/* hide empty product descriptions (useful for kids items where section note covers inclusions) */
.product-desc:empty{ display:none; }
/* Ensure product titles and descriptions are centered across the site
   so they match the centered page and section headings. This overrides any
   page-scoped nudges that may have left them left-aligned. */
.product-name,
.product-desc{
  text-align: center !important;
  margin-left: 0 !important;
}
/* Place price above the Add button aligned to the far right of the card */
.product-foot{
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* align to right edge */
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
}
.product-price{
  font-weight: 700;
  font-size: 1rem;
  color: var(--first-color-alt);
  /* ensure price sits visually above the button */
}

/* Make sure the Add button is visible on the order page (overrides order-page button transparency)
   and stays aligned to the right under the price */
.order-page .product-foot .button{
  background-color: var(--first-color) !important;
  color: var(--body-color) !important;
  padding: .45rem .8rem !important;
  border-radius: .4rem !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* On small viewports keep the price & button compact */
@media screen and (max-width: 480px){
  .product-price{ font-size: .95rem; }
  .order-page .product-foot .button{ padding: .35rem .6rem !important; }
}

/* ===== Order page top filter/header bar (pickup/delivery, location, timing, category tabs, search) ===== */
.products__topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 0 1.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.products__topbar .topbar-left{ display:flex; flex-direction:row; align-items:center; gap:1rem }
.products__topbar .topbar-right{ display:flex; align-items:center; gap:1rem }

.products__topbar .order-type{ display:inline-flex; gap:.4rem; background: transparent; padding:.125rem; border-radius:999px }
.products__topbar .order-type .order-mode{ background: rgba(255,255,255,0.02); border:1px solid rgba(0,0,0,0.06); padding:.45rem .85rem; border-radius:999px; cursor:pointer; font-weight:600 }
.products__topbar .order-type .order-mode.active{ background: var(--body-color); color: var(--first-color); box-shadow: 0 6px 14px rgba(0,0,0,0.06) }

.products__topbar .pickup-info{ display:flex; flex-direction:column; gap:.2rem }
.pickup-location-copy{ color:var(--text-color-light); font-size:.95rem }
.timing-toggle{ background:transparent; border:1px solid rgba(0,0,0,0.06); padding:.28rem .48rem; border-radius:999px; cursor:pointer; font-weight:600; font-size:.95rem; line-height:1; min-width:48px }

/* inline address + timing when placed on the right */
.pickup-info-inline{ display:flex; align-items:center; gap:.75rem }
.pickup-info-inline .pickup-location-copy{ font-weight:600; color:var(--text-color); }
.pickup-info-inline .timing-toggle{ padding:.45rem .7rem }

/* Pickup badge (subtle, sleek) placed left of the address */
.pickup-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .18rem .46rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight:700;
  color: var(--first-color);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  margin-right: .4rem;
  min-width:42px;
}

/* Hover/active subtle lift */
.pickup-badge:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.04); }

/* Dark theme adjustments for badge */
body.dark-theme .pickup-badge{
  background: rgba(255,255,255,0.04);
  color: var(--text-color);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Pickup badge (subtle pill to the left of address) */
.pickup-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.18rem .46rem;
  border-radius:999px;
  font-weight:700;
  font-size:.78rem;
  color: var(--first-color);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  min-width:42px;
  text-align:center;
}

@media screen and (max-width: 900px){
  .pickup-badge{ font-size:.76rem; padding:.16rem .42rem; min-width:40px }
}

/* Dark theme pickup badge (final override to ensure visibility) */
body.dark-theme .pickup-badge{
  color: var(--text-color);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Timing modal styles */
.timing-modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:11000; opacity:0; visibility:hidden; transition: opacity .18s ease, visibility .18s ease; padding:1rem;
}
.timing-modal-overlay.open{ opacity:1; visibility:visible }
.timing-modal{ background: var(--body-color); color:var(--text-color); border-radius:10px; width:100%; max-width:420px; box-shadow:0 18px 60px rgba(0,0,0,0.25); overflow:hidden }
.timing-header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem; border-bottom:1px solid rgba(0,0,0,0.06) }
.timing-header h3{ margin:0; font-size:1.05rem }
.timing-body{ padding:1rem }
.timing-option{ display:block; padding:.6rem 0; font-weight:600 }
.schedule-time-row label{ display:block; margin-bottom:.25rem; color:var(--text-color-light) }
.timing-footer{ display:flex; gap:.75rem; padding:1rem; justify-content:flex-end; border-top:1px solid rgba(0,0,0,0.04) }
.timing-close{ background:transparent; border:none; font-size:1.2rem; cursor:pointer }

/* Dark theme adjustments for timing controls/modal */
body.dark-theme .timing-toggle{
  border:1px solid rgba(255,255,255,0.12);
  color: var(--text-color);
  background: rgba(255,255,255,0.04);
}

body.dark-theme .pickup-info-inline .pickup-location-copy{ color: var(--text-color); }

body.dark-theme .timing-modal{
  background: #141414;
  color: var(--text-color);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 60px rgba(255,255,255,0.03);
}
body.dark-theme .timing-header{ border-bottom:1px solid rgba(255,255,255,0.06); }
body.dark-theme .timing-footer{ border-top:1px solid rgba(255,255,255,0.06); }



.category-tabs{ display:flex; gap:.5rem; align-items:center }
.category-tabs .tab{ background: transparent; border:none; padding:.5rem .6rem; cursor:pointer; color:var(--text-color); font-weight:600 }
.category-tabs .tab.active{ border-bottom:3px solid var(--first-color); padding-bottom:.4rem }

/* Mobile category dropdown: hidden on desktop, visible on small screens */
.category-dropdown{ display:none; position:relative }
.category-dropdown-toggle{ background: transparent; border:1px solid rgba(0,0,0,0.06); padding:.45rem .7rem; border-radius:999px; cursor:pointer; font-weight:600 }
.category-dropdown-list{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-6px);
  /* prefer sizing to match the toggle where possible so the panel appears centered under it */
  width: auto;
  min-width: 130px;
  max-width: min(360px, 92vw);
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  background-color: var(--body-color);
  border: 1px solid rgba(0,0,0,0.08);
  padding: .25rem;
  z-index: 12000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.category-dropdown.open .category-dropdown-list{
  display:block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.category-dropdown-list::-webkit-scrollbar{ display:none; height:0; width:0 }
.category-dropdown-list .tab{ display:block; width:100%; text-align:left; padding:.6rem .9rem; border-radius:8px; margin:0 0 .25rem 0; color:var(--text-color); background: transparent; transition: background .12s ease, transform .08s ease }
.category-dropdown-list .tab:hover{ background: rgba(0,0,0,0.06); transform: translateY(-2px) }
/* make separators subtle */
.category-dropdown-list .tab + .tab{ border-top: 1px solid rgba(0,0,0,0.04); padding-top:.6rem }
.category-dropdown.open .category-dropdown-list{ display:block }

/* force the dropdown to center under the toggle's center reliably */
.category-dropdown{ position:relative; display:inline-flex; }
.category-dropdown-toggle{ position:relative; }

/* Mobile specifics: hide desktop tabs and show dropdown */
@media screen and (max-width: 768px){
  .category-tabs{ display:none }
  .category-dropdown{ display:block }
  .products__topbar{ align-items:center }
}

/* Mobile topbar layout: single horizontal row: pickup | category dropdown (center) | timing */
@media screen and (max-width: 768px){
  .products__topbar{ display:flex; align-items:center; gap:.4rem; padding:.6rem 0; }
  /* pickup-row: address and timing inline, centered */
  .products__topbar .pickup-row{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100% }
  .products__topbar .pickup-row .pickup-info-inline{ display:flex; align-items:center; gap:.5rem; flex:0 1 auto }
  /* allow address to show on single line where possible but truncate if extremely narrow */
  .products__topbar .pickup-row .pickup-location-copy{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: calc(100% - 150px) }
  .products__topbar .topbar-left{ order:2; flex:1 1 auto; display:flex; justify-content:center }
  .products__topbar .topbar-right{ order:1; display:flex; align-items:center; gap:.4rem }
  /* allow the address to take available space and wrap if needed so the full address is visible */
  .products__topbar .pickup-info-inline{ order:1; flex:1 1 auto; white-space:normal }
  .products__topbar .pickup-info-inline .pickup-location-copy{ max-width: none; overflow:visible; text-overflow:initial; white-space:normal }
  /* make timing tiny and compact on small screens */
  .products__topbar .timing-wrap{ order:3; flex:0 0 auto }
  .products__topbar .timing-wrap .timing-toggle{ padding:.22rem .42rem; font-size:.92rem }
  /* place category filter and timing side-by-side in a single controls row */
  .controls-row{ display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:nowrap; width:100% }
  .controls-row .topbar-left{ display:flex; align-items:center; gap:.5rem; flex:0 1 auto }
  .controls-row .timing-wrap{ display:flex; align-items:center; flex:0 0 auto }
  .controls-row{ margin-top:.5rem }
  /* ensure the dropdown wrapper sizes to the toggle (so centering works) */
  .category-dropdown{ order:2; max-width:260px; width:auto; display:inline-block; flex:0 0 auto; position:relative }
  /* make both controls visually identical: same font-size, weight and padding */
  .category-dropdown-toggle,
  .timing-toggle{ font-family: var(--nav-font); font-size: .95rem; font-weight:600; padding:.28rem .56rem; border-radius:999px }
  .category-dropdown-toggle{ width:auto; min-width:130px; text-align:center; display:inline-flex; align-items:center; justify-content:center }
}

/* Dark theme adjustments */
body.dark-theme .category-dropdown-toggle{ border:1px solid rgba(255,255,255,0.06); color:var(--text-color); background: rgba(255,255,255,0.02) }
body.dark-theme .category-dropdown-list{ border:1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 40px rgba(0,0,0,0.6); background: var(--body-color) }

.products-search .search-wrap{ display:flex; gap:.5rem; align-items:center; background: rgba(255,255,255,0.02); border:1px solid rgba(0,0,0,0.06); padding:.35rem .5rem; border-radius:999px }
.products-search input[type="search"]{ border:none; background:transparent; padding:.35rem .5rem; outline:none; color:var(--text-color); width:200px }
.products-search .search-clear{ background:transparent; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-color-light) }

@media screen and (max-width: 900px){
  .products__topbar{ flex-direction:column; align-items:stretch }
  .products__topbar .topbar-right{ justify-content:space-between }
  .products-search input[type="search"]{ width:120px }
}

/* Remove the decorative outline 'container' around the order page for a unified UI */
.order-page .order-page__content::before{
  display: none !important;
  content: none !important;
}
.order-page .order-page__content,
.order-page .order-page__container{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Make products list a two-column grid on wider screens */
.products__list{ display:block; }
.products-list-section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}
.products-list-section .product-card{ padding: 1rem; }

@media screen and (max-width: 900px){
  .products-list-section{ display:flex; flex-direction:column; gap:.6rem }
}


.cart-list{ display:flex; flex-direction:column; gap:10px; }

/* Each cart item is a compact horizontal row: name/desc on the left, controls on the right */
.cart-item{
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0,0,0,0.02);
  padding: .9rem 1rem;
  border-radius: 12px;
}
.cart-item-left{ flex: 1 1 auto; min-width: 0; }
.cart-item-right{ display: flex; gap: .25rem; align-items: center; flex: 0 0 auto; margin-left: auto }
.cart-item-controls{ display:flex; gap:6px; align-items:center; }
.cart-item-price{ font-weight:700; min-width:74px; text-align:right; margin-left:4px }

/* qty wrapper is inline inside the right-side controls so dropdown stays associated
  with the product and is not absolutely positioned (avoids fragile offsets). */
.cart-qty-wrap{ position: relative; display: inline-flex; align-items: center; margin-right:4px }
.cart-qty{ margin: 0; }

/* Kids tag and description in cart */
.cart-item .kids-tag{ font-size: .82rem; color: var(--first-color-alt); margin-left: 0.35rem; font-weight:600 }
.cart-item .cart-item-kids{ margin-top: .25rem; color: var(--text-color-light); font-size: .92rem }

.order-message{ min-height:1.5rem; color: var(--first-color); font-weight:600; transition: opacity .25s ease; opacity:0; }
.order-message.visible{ opacity:1; }

/* ==================================================
   Disable hover/interactive animations inside Order
   ==================================================
   For now we want the Order component to be visually stable
   (no hover lifts, pulses, transitions). These rules scope
   the overrides to the `.order-page` so other pages keep
   their subtle motion if desired.
*/
.order-page,
.order-page * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.order-page *:hover,
.order-page *:focus,
.order-page *:active {
  /* keep interactive behavior (click) but remove visual motion */
  transition: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Buttons inside order page: disable hover color/translate/box-shadow but keep obvious affordance */
.order-page .button,
.order-page .button:focus,
.order-page .button:hover {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  color: var(--title-color) !important;
}

/* Modern container (used on product cards) should not lift on hover */
.order-page .modern-container,
.order-page .product-card {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Remove any pseudo-element outlines/frames (used for decorative borders/hover outlines) */

/* Allow footer animations inside the Order page
   The Order page intentionally disables transforms/animations for interactive stability,
   but that blanket rule prevents ScrollReveal (which uses transforms/opacity) from
   animating the global footer. Re-enable animations only for the footer so its
   entrance matches other pages without restoring motion throughout the Order UI. */
.order-page .footer,
.order-page .footer * {
  transition: initial !important;
  animation: initial !important;
  transform: initial !important;
  box-shadow: initial !important;
  filter: initial !important;
}

.order-page .modern-container::before,
.order-page .modern-container::after,
.order-page .modern-container:hover::before,
.order-page .modern-container:hover::after,
.order-page .product-card::before,
.order-page .product-card::after,
.order-page .menu__content::before,
.order-page .menu__content::after,
.order-page .menu__content:hover::before,
.order-page .menu__content:hover::after,
.order-page .menu-container::before,
.order-page .menu-container::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  transition: none !important;
}

/* Remove border color changes and outline glows on hover/focus for order components */
.order-page .modern-container,
.order-page .product-card,
.order-page .menu__content,
.order-page .menu-container {
  border-color: transparent !important;
  box-shadow: none !important;
}

.order-page *:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ====== Order page: right-aligned price + sleek Add button (minimal safe edits) ======
/* - Reserve horizontal room on the right so controls don't overlap text
   - Place price above the Add button at the far right
   - Keep text content horizontally unchanged; move only vertically when required
   - Mobile: revert to stacked flow for accessible tap targets */
.order-page .product-card{
  position: relative; /* allow absolute controls */
  /* Symmetric padding so text is truly centered */
  padding: 0.8rem 6rem 1.4rem 6rem; /* equal left/right padding for perfect centering */
  gap: 0.32rem;
  min-height: 92px; /* slightly taller so price/button fit comfortably */
  display: flex;
  align-items: center; /* vertically center the text block */
  justify-content: center; /* center the content horizontally */
}

.order-page .product-name{
  font-size: 1rem;
  margin: 0;
}
.order-page .product-desc{
  font-size: .86rem;
  margin: .08rem 0 .12rem 0;
  color: var(--text-color-light);
}

/* Tighten spacing between the section helper line and the Order Online title
   when the helper is placed beneath the H2 in the products header. This
   keeps the helper text visually close without affecting other sections. */
.products__header .section-description{
  /* tightened spacing so the helper text sits tightly under the H2 */
  margin: 0.08rem 0 0.14rem 0;
  font-size: .95rem;
  color: var(--text-color-light);
  font-weight: 400;
}

/* small centered phone line under the header helper text */
.products__header .order-phone{ margin: 0.18rem 0 0.35rem 0; text-align: center; color: var(--text-color); font-weight:600 }
.products__header .order-phone a{ color: inherit; text-decoration: none; }

/* Slightly nudge the Order Online H2 left for tighter visual centering.
   Use margin (not transform) so it isn't affected by the order-page reset.
   Reset on small screens to keep the stacked, centered layout. */
.products__Header .order-category,
.products__header .order-category{
  display: block;
  /* Use centered layout for the main products header so section headings and
     product titles can follow the same visual center. This removes the previous
     left-nudge which caused misalignment. */
  margin-left: 0;
  text-align: center;
  /* tighten vertical rhythm for the main header */
  margin-bottom: 0.18rem;
  line-height: 1.1;
}

@media screen and (max-width: 768px){
  .products__header .order-category{ display: block; margin-left: 0; text-align: center; }
}

/* Shift product title & description slightly to the right so their
   horizontal position lines up visually with the Order Online header
   without altering markup or layout of controls. Revert on small screens. */
.order-page .product-name,
.order-page .product-desc{
  /* Reset product title/description offset so they center under the main header
     and section headings (Option B - consistent centered alignment). */
  margin-left: 0;
  text-align: center;
}

/* Align section headings (Appetizers, Burgers, etc.) with product titles
   so the H2s line up horizontally with individual items. This counteracts
   the page-title left nudge above which was intended only for the main header. */
.order-section .order-category,
.products-list-section + .order-category,
.products-list-section ~ .order-category{
  margin-left: 0;
  text-align: center;
}

/* Reduce vertical gap between the section heading and the first product so
   headings visually align with product titles. This tightens the vertical
   rhythm specifically for order sections without affecting other pages. */
.order-section .order-category{
  margin-bottom: 0.6rem; /* smaller gap under the H2 */
  /* add top padding so section headings feel vertically balanced
     (matches the visual weight of the bottom gap) */
  padding-top: 0.6rem;
}

/* Ensure section notes on order page are centered and properly spaced */
.order-section .section-note{
  text-align: center;
  margin: 0.4rem auto 0.8rem auto;
  max-width: 90%;
}

.products-list-section{
  margin-top: 0; /* remove any default top gap */
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* consistent gap between product cards */
}

/* Slightly reduce top padding on the first product card so its title sits
   closer to the section heading for tighter alignment. */
.products-list-section .product-card:first-child{
  padding-top: 0.6rem;
}

.order-page .product-foot{
  /* place controls at the bottom-right corner like the menu button */
  position: absolute;
  right: .6rem;
  bottom: .6rem; /* anchor to bottom */
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  width: auto; /* allow button shape like menu */
}

.order-page .product-price{
  font-weight: 700;
  font-size: .98rem;
  color: var(--first-color-alt);
  text-align: center;
  display: block;
}

/* Sleek rounded Add button placed under price */
.order-page .product-foot .button{
  /* sleek labeled button that sits under the price at the bottom-right */
  padding: .55rem .85rem !important;
  border-radius: .5rem 0 .5rem 0 !important; /* keep the same corner shape */
  background: rgba(255,255,255,0.02) !important;
  color: var(--first-color) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  line-height: 1 !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  min-height: 36px !important;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
  transition: background-color .16s ease, color .16s ease, transform .09s ease !important;
}

/* icon sizing inside the button */
.order-page .product-foot .button i{
  font-size: 1rem !important;
  line-height: 1 !important;
  display: inline-block;
}

/* label inside the product button */
.order-page .product-foot .button .btn-label{
  display: inline-block;
  color: inherit;
  font-family: var(--nav-font);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
}

/* hover: fill like menu button (only for this control in order-page) */
.order-page .product-foot .button:hover,
.order-page .product-foot .button:focus{
  background-color: var(--first-color) !important;
  color: var(--body-color) !important;
  transform: scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

/* Keep order page interactions visually static but ensure focus/active states are usable */
.order-page .product-foot .button:focus,
.order-page .product-foot .button:active{ outline: none; }

@media screen and (max-width: 480px){
  /* On small screens, stack controls beneath text and left-align content for readability */
  .order-page .product-card{
    padding: .7rem .9rem;
    min-height: auto;
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
  }
  .order-page .product-name,
  .order-page .product-desc{
    margin: 0;
    display: block;
    width: 100%;
    text-align: left;
    padding-right: 0;
  }
  /* Give the description a slightly tighter top margin for visual balance under the title */
  .order-page .product-desc{ margin-top: .18rem; color: var(--text-color-light); }
  /* Controls flow: stack price then full-width button for easy tapping on phones */
  .order-page .product-foot{
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: .25rem;
    padding: 0;
    gap: .35rem;
  }
  .order-page .product-price{ text-align: left; font-size: .96rem; margin-bottom: 0 }
  .order-page .product-foot .button{
    width: 100% !important;
    height: auto !important;
    padding: .5rem .7rem !important;
    border-radius: .45rem !important;
    font-size: .95rem !important;
  }
}

/* Better mid-size mobile responsiveness (phones up to small tablets) */
@media screen and (max-width: 768px){
  .products-list-section{ display:flex; flex-direction:column; gap:.6rem }
  .products-list-section .product-card{ padding:.7rem .9rem; min-height:auto; align-items:flex-start }
  .order-page .product-name{ font-size:1.02rem }
  .order-page .product-desc{ font-size:.9rem }
  .order-page .product-foot{ width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:.5rem }
  .order-page .product-foot .button{ padding:.38rem .72rem !important }
}


/*========== ABOUT ==========*/
.about__data{
  text-align: center;
}

.about__description{
  margin-bottom: var(--mb-3);
}

.about__img{
  width: 280px;
  border-radius: .5rem;
  justify-self: center;
}

/*========== SERVICES ==========*/
.services__container{
  row-gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.services__content{
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.services__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.services__content:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.services__content:hover::before {
  opacity: 1;
}

.services__img{
  width: 64px;
  height: 64px;
  fill: var(--title-color);
  margin-bottom: var(--mb-2);
  color: #222;
}

body.dark-theme .services__img {
  color: #fff;
}

.services__title{
  font-size: var(--h3-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-1);
}

.services__description{
  padding: 0 1.5rem;
}

/*========== MENU ==========*/
.menu__container{
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
}

.menu {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.menu__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu__content:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.menu__content:hover::before {
  opacity: 1;
}

.menu__img{
  width: 100px;
  align-self: center;
  margin-bottom: var(--mb-2);
}

.menu__name, .menu__preci{
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.menu__name{
  font-size: var(--normal-font-size);
}

.menu__detail, .menu__preci{
  font-size: var(--small-font-size);
}

.menu__detail{
  margin-bottom: var(--mb-1);
}

.menu__button{
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  padding: .625rem .813rem;
  border-radius: .5rem 0 .5rem 0;
}

/*========== APP ==========*/
.app__data{
  text-align: center;
}

.app__description{
  margin-bottom: var(--mb-5);
}

.app__stores{
  margin-bottom: var(--mb-4);
}

.app__store{
  width: 120px;
  margin: 0 var(--mb-1);
}

.app__img{
  width: 230px;
  justify-self: center;
}

/*========== CONTACT ==========*/
.contact__container{
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 3rem auto;
  padding: 4rem 2rem 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact__description{
  margin-bottom: var(--mb-3);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
}

.contact-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: visible; /* Ensure clickable area is not restricted */
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-icon {
  font-size: 3rem;
  color: var(--first-color);
  margin-bottom: 1rem;
}

.contact-card h3 {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  margin-bottom: 1rem;
}

.contact-card p {
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.contact-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/*========== FOOTER ==========*/
.footer__container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 3.5rem;
  max-width: 1200px;
  margin: 0 auto;
  /* Reduced bottom padding for a tighter, perfectly-padded footer */
  padding: 2rem 1.5rem 1rem 1.5rem;
}

/* Increase spacing specifically between the Address column (3rd) and
   Hours column (4th) for better visual separation on wider screens. */
@media screen and (min-width: 769px) {
  .footer__container .footer__content:nth-child(4) {
    margin-left: 1.25rem; /* extra breathing room between address and hours */
  }
}

.footer__content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 0 1 160px;
  min-width: 160px;
  max-width: 220px;
  font-size: 0.95rem;
}

.footer__content ul {
  list-style: none;
  padding-left: 0;
}

.footer__content ul li {
  white-space: nowrap;
  margin-bottom: 0.25rem;
}

.footer__logo-img {
      width: 240px; /* increased to ~2x the previous size */
      max-width: 100%; /* prevent overflow in narrow columns */
      height: auto;
      margin-bottom: 0; /* tighten spacing to bring socials closer */
      display: block;
      /* Disable interactive animations on the footer logo to keep it visually
         stable on hover/tap (user requested). */
      transition: none !important;
      will-change: auto;
}

/* Footer logo interactive hover */
.footer__logo-img:hover,
.footer__logo-img:focus-visible{
  /* Neutralize hover/focus visual changes */
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo-center img,
  .footer__logo-img {
    transition: none !important;
    animation: none !important;
  }
}

.footer__social-group {
      display: flex;
      justify-content: center;
      gap: 0.5rem; /* tighter gap between social icons */
      margin-top: 0; /* remove extra top spacing */
    }

.footer__social {
  font-size: 1.5rem;
  color: var(--text-color);
  margin: 0;
  transition: color 0.3s;
  display: block; /* Ensure the entire area is clickable */
  text-decoration: none; /* Remove underline */
}

.footer__social:hover {
  color: var(--first-color);
}

.footer__title {
  font-size: 1.05rem;
  color: var(--title-color);
  margin-bottom: 0.5rem;
}

.footer__link, .footer__description, .footer__copy, .footer__title, .footer__content ul, .footer__content li {
  font-size: 0.95rem;
}

.footer__link {
  color: var(--text-color);
  transition: color 0.3s;
}

.footer__link:hover {
  color: var(--first-color);
}

.footer__copy {
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  /* tighten the top gap above the copyright line */
  margin-top: 1rem;
  width: 100%;
  display: block;
  position: relative;
}

.specials__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* Increased spacing between icons */
  margin-top: 1rem;
}

.specials__links .footer__social {
  font-size: 2rem; /* Ensure larger icon size */
  color: var(--text-color);
  text-decoration: none; /* Remove underline */
  transition: color 0.3s;
}

.specials__links .footer__social:hover {
  color: var(--first-color); /* Add hover effect */
}

@media screen and (max-width: 768px) {
  /* Mobile footer: responsive 2-column grid with logo spanning full width.
     This keeps items compact and prevents long vertical stacks while
     preserving good tap targets and alignment. */
  .footer__container {
    display: grid;
    /* two columns for content; rows defined by grid-template-areas below */
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "links address"
      "hours hours"
      "logo logo"
      "copy copy";
    gap: 0.85rem 1rem;
    align-items: start;
    padding: 1rem 0.75rem 0.75rem 0.75rem;
    width: 100%;
  }

  /* Reduce spacing for Quick Links (footer column 2) to match Hours spacing */
  .footer__container .footer__content:nth-child(2) ul {
    gap: 0.18rem; /* tightened to better visually match Hours */
    margin-top: 0.08rem;
  }
  .footer__container .footer__content:nth-child(2) .footer__link {
    padding: 0.18rem 0; /* reduced vertical padding to align with Hours */
    display: block;
    line-height: 1.05;
  }

  /* For very small horizontally-scrollable footer cards, also tighten the Quick Links card */
  @media screen and (max-width: 480px) {
    .footer__container .footer__content:nth-child(2) ul { gap: 0.18rem; }
    .footer__container .footer__content:nth-child(2) .footer__link { padding: 0.18rem 0; }
  }

  /* Assign grid areas by source order: nth-child mapping
     (HTML order: 1=logo, 2=links, 3=address, 4=hours) */
  .footer__container .footer__content:nth-child(2) { grid-area: links; }
  .footer__container .footer__content:nth-child(3) { grid-area: address; }
  .footer__container .footer__content:nth-child(4) { grid-area: hours; }
  .footer__container .footer__content:nth-child(1) { grid-area: logo; justify-self: center; text-align: center; }

  /* Logo + socials centered inline at the bottom of the footer grid */
  .footer__container .footer__content:nth-child(1){
    /* keep the content stacked: logo/social row above, contact below */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
  }
  /* make logo and icon visually balanced on small screens; the .footer__logo-row
     contains both so they appear side-by-side while the contact row remains below */
  .footer__logo-row { display: flex; flex-direction: row; align-items: center; gap: 0.25rem; }
  .footer__logo-img { width: auto; height: 40px; margin: 0; display: inline-block; }
  .footer__social-group { display: inline-flex; gap: 0.2rem; margin: 0; }
  /* reduce facebook icon size so it sits inline with the logo */
  .footer__social { font-size: 0.95rem; padding: 0.12rem; line-height: 1; }
  /* ensure the icon itself doesn't add extra height */
  .footer__social i { display: inline-block; vertical-align: middle; }
  .footer__social { font-size: 1.9rem; padding: 0.45rem; border-radius: 8px; transition: background .18s, color .18s; }
  .footer__social:hover, .footer__social:focus { background: rgba(0,0,0,0.04); color: var(--first-color); }

  /* Content blocks: left-aligned for readability in grid columns */
  .footer__content { text-align: left; align-items: flex-start; padding: 0.3rem 0; }
  .footer__content:nth-child(2) { padding-left: 0.25rem; }
  .footer__content ul { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.25rem 0 0 0; }
  .footer__link { display: inline-block; padding: 0.45rem 0.6rem; border-radius: 8px; min-width: 0; }
  .footer__title{ font-size: 1.02rem; margin-bottom: 0.35rem }

  /* Hide the 'All rights reserved' line on mobile per request */
  .footer__copy { display: none; }

  /* --------- Prevent overlapping and improve general mobile fluidity --------- */

/* Desktop: place the social icons inline next to the footer logo
  (adjusted breakpoint for visual parity; temporary debug outline added) */
@media screen and (min-width: 900px) {
  /* Ensure the logo row shows logo and socials side-by-side */
  .footer__logo-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem; /* spacing between logo and social icons */
    justify-content: flex-start;
  }

  /* Make social icons sit immediately to the right of the logo */
  .footer__social-group {
    justify-content: flex-start;
    margin: 0; /* rely on gap for spacing */
  }

  /* Slightly reduce the social icon size on desktop so it lines up with the logo height */
  .footer__social { font-size: 1.5rem; padding: 0.25rem; }
}
/* Increase specificity and add !important to prevent other rules from overriding
   the desktop layout for the footer logo row and social icons. This targets
   the logo card inside the footer container so it applies only where the
   markup places the logo and icons together. */
@media screen and (min-width: 900px) {
  /* Debug outline added to `.footer__logo-row` to help locate and inspect layout
     in the browser. Remove this after verification. */
  .footer__container .footer__content:nth-child(1) .footer__logo-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    justify-content: flex-start !important;
    outline: 1px dashed rgba(255,60,60,0.9) !important; /* debug visual */
    padding: 0.2rem 0.2rem 0.2rem 0 !important;
  }

  .footer__container .footer__content:nth-child(1) .footer__social-group {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    gap: 0.6rem !important;
  }

  .footer__container .footer__content:nth-child(1) .footer__social {
    font-size: 1.5rem !important;
    padding: 0.25rem !important;
  }
}
  .l-main .bd-container:not(.home__container) { padding: calc(var(--header-height) + 1.25rem) 1rem 2rem; }

  /* Tidy up services grid and cards on small screens */
  .services__container { grid-template-columns: repeat(2, minmax(140px, 1fr)); row-gap: 1rem; column-gap: 0.75rem; }
  .services__content, .service-card { padding: 1rem; }
  .services__description, .service-card__description { padding: 0 0.6rem; }
  .services__content, .service-card { min-height: 120px; display:flex; flex-direction:column; justify-content:flex-start; }
}

/* Very small screens: make services and footer sections horizontally scrollable
   for a sleek, app-like mobile UX. This improves discoverability and avoids
   long vertical stacks while keeping good tap targets. */
@media screen and (max-width: 480px) {
  /* SERVICES: horizontal scroll cards */
  .services__container {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.5rem 0.5rem 0.75rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .services__content {
    flex: 0 0 78%; /* each card takes most of the viewport width */
    min-width: 220px;
    scroll-snap-align: center;
    padding: 1rem;
    margin: 0;
    border-radius: 14px;
  }

  /* SERVICE CARD visuals: tighter text and icon spacing for mobile */
  .services__img { width: 56px; height: 56px; }
  .services__title { font-size: 1rem; }
  .services__description { padding: 0 0.8rem; font-size: 0.95rem; }

  /* FOOTER: horizontal scroll for content sections; logo/socials stay at the end */
  .footer__container {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.75rem 0.6rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    align-items: flex-start;
  }
  .footer__content {
    flex: 0 0 auto;
    min-width: 220px;
    scroll-snap-align: start;
    background: linear-gradient(135deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
  }
  /* Put logo/socials at the end of the scroll sequence and center it */
  .footer__container .footer__content:nth-child(1){ order: 99; flex: 0 0 auto; min-width: 180px; display:flex; align-items:center; justify-content:center; gap:0.4rem; }
  .footer__container .footer__content:nth-child(2){ order: 1; }
  .footer__container .footer__content:nth-child(3){ order: 2; }
  .footer__container .footer__content:nth-child(4){ order: 3; }

  /* Make links and lists comfortable to tap inside the horizontal cards */
  .footer__link { display:block; padding: 0.5rem 0; }
  .footer__title{ margin-bottom: 0.5rem }

  /* Hide the copyright text on tiny screens (already hidden for <=768px) */
  .footer__copy{ display:none }
}

/* Slightly extend the right edge of the order outline on wider screens so
   the panel appears a touch wider to the right without affecting centered layout.
   This only nudges the right edge and is intentionally small. */
@media screen and (min-width: 960px) {
  .order-page__content{
    margin-right: -1.25rem; /* nudge right edge outward */
  }
}

/*========== MEDIA QUERIES ==========*/
@media screen and (min-width: 576px){
  .home__container,
  .about__container,
  .app__container{
    grid-template-columns: repeat(2,1fr);
    align-items: center;
  }

  .about__data, .about__initial,
  .app__data, .app__initial,
  .contact__container, .contact__initial{
    text-align: initial;
  }

  .about__img, .app__img{
    width: 380px;
    order: -1;
  }

  .contact__container{
    grid-template-columns: 1.75fr 1fr;
    align-items: center;
  }
  .contact__button{
    justify-self: center;
  }
  
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media screen and (min-width: 768px){
  body{
    margin: 0;
  }

  .section{
    padding-top: 8rem;
  }

  .nav{
    height: calc(var(--header-height) + 1.5rem);
    --nav-side-gap: 2.5rem;
    padding: 0 var(--nav-side-gap);
  }

  .nav__menu--left,
  .nav__menu--right{
    position: static;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .nav__menu--left .nav__list,
  .nav__menu--right .nav__list{
    display: flex;
    flex-direction: row;
  }

  .nav__menu--left .nav__list{
    gap: 0.75rem;
    padding-right: 0.75rem;
  }

  .nav__menu--right .nav__list{
    gap: 0.75rem;
    padding-left: 0.75rem;
  }

  .nav__logo-img{
    height: 180px;
  }

  .nav__item{
    margin-bottom: 0;
  }

  .nav__toggle{
    display: none;
  }

  .change-theme{
    left: clamp(0.75rem, 2vw, 1.5rem);
    top: calc((var(--header-height) + 1.5rem) / 2);
  }
}

  .home__container{
    height: 100vh;
    justify-items: center;
  }

  .services__container,
  .menu__container{
    /* Reduced top spacing so the Services section sits closer to the Specials
       on desktop/tablet. Changed from --mb-6 (3rem) to --mb-4 (2rem). */
    margin-top: var(--mb-4);
  }

  .menu__container{
    grid-template-columns: repeat(3, 210px);
    column-gap: 4rem;
  }
  .menu__content{
    padding: 1.5rem;
  }
  .menu__img{
    width: 130px;
  }

.app__store{
  margin: 0 var(--mb-1) 0 0;
}

@media screen and (min-width: 960px){
  .bd-container{
    margin-left: auto;
    margin-right: auto;
  }

  .nav{
    --nav-side-gap: 4rem;
    padding: 0 var(--nav-side-gap);
  }

  .nav__logo-img{
    height: 200px;
  }

  .nav__menu--left .nav__list{
    gap: 2rem;
    padding-right: 4.5rem;
  }

  .nav__menu--right .nav__list{
    gap: 2rem;
    padding-left: 4.5rem; /* match left side so spacing to center logo is symmetric */
  }

  .change-theme{
    left: clamp(0.75rem, 2vw, 1.5rem);
    right: auto;
    top: calc((var(--header-height) + 1.5rem) / 2);
  }

  .home__img{
    width: 500px;
  }

  .about__container,
  .app__container{
    column-gap: 7rem;
  }
}

@media screen and (min-width: 1200px){
  .nav{
    max-width: 1400px;
    margin: 0 auto;
    --nav-side-gap: 5rem;
    padding: 0 var(--nav-side-gap);
  }

  .nav__logo-img{
    height: 220px;
  }

  .change-theme{
    left: clamp(0.75rem, 2vw, 1.5rem);
    right: auto;
    top: calc((var(--header-height) + 1.5rem) / 2);
  }
}

/* For tall screens on mobiles y desktop*/
@media screen and (min-height: 721px) {
    .home__container {
        height: 640px;
    }
}

/*========== PAGE SECTIONS (MENU, ORDER, ABOUT, CONTACT) ==========*/
.menu-page__container,
.order-page__container,
.about-page__container,
.contact-page__container {
  /* Allow page section containers to be wider so inner components (menu, outlines) can expand */
  /* tighten max-width and give symmetric inner padding so the outline panel visually centers
     more precisely on large and medium viewports */
  max-width: min(1200px, 92%);
  margin: 0 auto;
  /* increase horizontal padding to balance left/right spacing visually */
  padding: 0 2.5rem 4rem;
  text-align: center;
}

.section-description {
  font-size: 1.2rem;
  color: var(--text-color);
  margin-bottom: 3rem;
  opacity: 0.9;
  text-align: center;
}

.menu-page__content,
.order-page__content,
.about-page__content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 3rem 2rem;
  margin-top: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Wider order-page outline and reduced side padding specifically for the Order page.
   This keeps other pages unchanged while making the Order outline reach closer
   to the viewport edge and reducing internal padding for a denser layout. */
@media screen and (min-width: 768px) {
  .order-page__container{
    /* allow the order container to occupy more of the viewport on medium+ screens */
    max-width: min(1400px, 96%);
    /* reduce left/right gutter so the outline sits nearer the screen edge */
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .order-page__content{
    /* tighten the inner padding of the outline */
    padding: 2rem 1rem;
  }
}

.menu-page__content::before,
.order-page__content::before,
.about-page__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-page__content:hover,
.order-page__content:hover,
.about-page__content:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.menu-page__content:hover::before,
.order-page__content:hover::before,
.about-page__content:hover::before {
  opacity: 1;
}

.menu-category,
.order-category,
.about-category {
  font-size: 1.8rem;
  color: var(--first-color);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.menu-message,
.order-message,
.about-text {
  font-size: 1.1rem;
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: center;
}

.about-text {
  text-align: left;
}

.order-info {
  margin-top: 2rem;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  text-align: left;
}

.order-info h3 {
  color: var(--title-color);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.order-info ul {
  list-style: none;
  padding: 0;
}

.order-info li {
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  color: var(--text-color);
}

.order-info strong {
  color: var(--first-color);
  font-weight: 700;
}

.about-features {
  margin-top: 2rem;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  text-align: left;
}

.about-features h3 {
  color: var(--title-color);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.about-features ul {
  list-style: none;
  padding: 0;
}

.about-features li {
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  color: var(--text-color);
  padding-left: 2rem;
  position: relative;
}

.about-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--first-color);
  font-weight: 700;
  font-size: 1.3rem;
}

/* ==========================
   About page visual polish
   ========================== */
.about-page__container {
  /* slightly wider container for the about page to improve copy flow */
  max-width: min(1400px, 96%);
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

.about-page__content {
  /* increase card width, padding and vertical spacing to read like a feature card */
  max-width: 1100px;
  margin: 2.25rem auto 0;
  padding: 3.25rem 2.5rem;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  display: block;
}

.about-page__content .lead{
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--text-color);
  margin-bottom: 1.75rem;
  text-align: center;
}

.about-feature{
  margin: 2rem 0;
  text-align: center;
}

.about-category{
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--title-color);
}

.about-bullets{
  list-style: none;
  padding: 0;
  margin: 0.75rem auto 0;
  max-width: 820px;
}

.about-bullets li{
  margin-bottom: 0.85rem;
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.6;
  text-align: left;
  padding-left: 1.25rem;
}

.about-bullets li strong{ color: var(--first-color); font-weight:700; }

.about-page__content .closing{
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  color: var(--title-color);
}

@media screen and (min-width: 992px){
  .about-page__content{
    padding: 4rem 3.5rem;
  }
  .about-feature{ text-align: left; }
  .about-bullets{ margin-left: 2rem; }
}

@media screen and (max-width: 768px){
  .about-page__content{ padding: 2rem 1.25rem; border-radius: 16px; }
  .about-bullets li{ text-align: left; }
  .about-page__container{ padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Revert About page typography to the site's default body font for consistency */
.about-page__container .section-title,
.about-page__content,
.about-page__content .lead,
.about-page__content .about-category {
  font-family: var(--body-font);
}

/* --------------------------------------------------------------------------
   Remove the decorative "card" / outline for the About page content
   The site previously used a rounded card with background/border/shadow.
   For a cleaner, more integrated About page we remove that outline while
   preserving reasonable spacing for the inner copy.
-----------------------------------------------------------------------------*/
.about-page__content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  /* keep modest spacing but remove the card padding used previously */
  padding: 0.75rem 0 !important;
  max-width: none !important;
  margin: 1rem 0 !important;
}

/* turn off the decorative pseudo-border and hover lift for the about section */
.about-page__content::before,
.about-page__content:hover,
.about-page__content:hover::before {
  display: none !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Explicitly disable transitions and hover behaviors for About content to
   prevent any movement/animation on mouse hover. This overrides earlier
   site-wide transition rules and ensures a stable, non-animated layout. */
.about-page__content {
  transition: none !important;
  -webkit-transition: none !important;
  /* Also disable pointer-triggered animations on children */
  will-change: auto !important;
}

.about-page__content *,
.about-page__content *::before,
.about-page__content *::after {
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
}

/*========== CONTACT PAGE ==========*/
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.contact-card {
  background-color: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--first-color);
  border-radius: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(10px);
  overflow: visible; /* Ensure clickable area is not restricted */
}

.contact-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-color: var(--title-color);
}

.contact-card a {
  display: block; /* Ensure the entire content is clickable */
  height: 100%; /* Extend clickable area */
}

.contact-icon {
  font-size: 3rem;
  color: var(--first-color);
  margin-bottom: 1rem;
}

.contact-card h3 {
  color: var(--title-color);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.contact-card p {
  color: var(--text-color);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.contact-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Responsive adjustments for new pages */
@media screen and (max-width: 768px) {
  .menu-page__container,
  .order-page__container,
  .about-page__container,
  .contact-page__container {
    /* keep top padding controlled by the outer bd-container while allowing
       reduced interior padding on small screens */
    padding: 0 1rem 3rem;
  }

  .menu-page__content,
  .order-page__content,
  .about-page__content {
    padding: 2rem 1.5rem;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-card {
    padding: 2rem 1rem;
  }
}

@media screen and (max-width: 576px) {
  .menu-page__container,
  .order-page__container,
  .about-page__container,
  .contact-page__container {
    padding: 0 0.75rem 2rem;
  }

  .section-description {
    font-size: 1rem;
  }

  .menu-page__content,
  .order-page__content,
  .about-page__content {
    padding: 1.5rem 1rem;
  }

  .menu-category,
  .order-category,
  .about-category {
    font-size: 1.5rem;
  }

  .contact-icon {
    font-size: 2.5rem;
  }

  .contact-card h3 {
    font-size: 1.3rem;
  }
}

/* Mobile-wide container tightening: bring outlines closer to screen edges and
   reduce internal padding for a denser mobile layout. Placed near EOF to
   override earlier, more generic rules. */
@media screen and (max-width: 768px) {
  .menu-page__container,
  .order-page__container,
  .about-page__container,
  .contact-page__container {
    /* reduce horizontal gutters so outlines sit nearer to the viewport edge */
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100% !important;
  }

  .menu-page__content,
  .order-page__content,
  .about-page__content,
  .contact-page__content {
    /* tighten inner content padding so the outline feels less bulky on phones */
    padding: 1.25rem 0.5rem !important;
    border-radius: 16px; /* slightly smaller radius on mobile */
  }
}

@media screen and (max-width: 480px) {
  .menu-page__container,
  .order-page__container,
  .about-page__container,
  .contact-page__container {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  .menu-page__content,
  .order-page__content,
  .about-page__content,
  .contact-page__content {
    padding: 1rem 0.35rem !important;
    border-radius: 12px;
  }
}

/* Stronger, high-specificity override for the Order page to ensure the outline
   container reaches closer to the viewport edge and has reduced inner padding.
   Added late in the file so it wins over earlier, more generic rules. */
@media screen and (min-width: 768px) {
  .order-page .order-page__container,
  .order-page__container{
    max-width: 96% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left: auto;
    margin-right: auto;
  }

  .order-page .order-page__content,
  .order-page__content{
    padding: 1.75rem 0.75rem !important;
  }
}

.specials__icon {
  font-size: 3rem; /* Larger icon size */
  color: var(--text-color);
  text-decoration: none; /* Remove underline */
  transition: color 0.3s;
  display: inline-block; /* Ensure proper alignment */
}

.specials__icon:hover {
  color: var(--first-color); /* Add hover effect */
}

.specials__link {
  position: relative; /* Ensure proper stacking context */
  z-index: 1; /* Bring clickable area to the front */
  display: inline-flex; /* Ensure proper alignment */
  justify-content: center;
  align-items: center;
  width: 4rem; /* Set a minimum clickable area */
  height: 4rem;
}

.specials__link:hover .specials__icon {
  color: var(--first-color); /* Add hover effect for better feedback */
}

.service-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}

.service-card__title {
  font-family: var(--body-font);
  font-size: var(--h2-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-1);
}

.service-card__description {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
}

/* ===== Menu logo (inline SVG) - minimal, responsive and animation-free ===== */
.menu-logo{
  display: block;
  /* Prefer the viewport-limited width but cap the rendered height so the logo doesn't become massive */
  width: min(100%, 920px);
  height: auto;
  max-height: 440px; /* increased to ~2x to make the header larger while keeping it responsive */
  margin: 0 auto 1rem auto;
  transition: none !important;
  -webkit-transition: none !important;
  will-change: auto !important;
  animation: none !important;
}

/* Center header wrapper and keep the logo restrained */
.menu-container > header{
  display: flex;
  justify-content: center;
  align-items: center;
  /* tighten vertical spacing between logo and following note */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Ensure the menu logo and its internal elements don't animate or transform */
.menu-container .menu-logo,
.menu-container .menu-logo *{
  transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
  pointer-events: none; /* make it non-interactive so hover styles elsewhere won't affect it */
}

/* ===== TOAST TAB INSPIRED ORDER PAGE STYLES ===== */
.order-page .products__header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.order-page .products__topbar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.order-page .pickup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.order-page .pickup-info-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 200px;
}

.order-page .pickup-badge {
  background: var(--first-color);
  color: var(--body-color);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.order-page .pickup-location-copy {
  color: var(--text-color);
  font-size: 0.95rem;
  font-weight: 500;
}

.order-page .timing-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-color);
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.order-page .timing-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.order-page .controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.order-page .category-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.order-page .category-tabs .tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-color);
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.order-page .category-tabs .tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.order-page .category-tabs .tab.active {
  background: var(--first-color);
  color: var(--body-color);
  border-color: var(--first-color);
}

/* Product Cards - Toast Tab Style */
.order-page .product-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.order-page .product-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.order-page .product-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.order-page .product-desc {
  font-size: 0.9rem;
  color: var(--text-color-light);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.order-page .product-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* keep foot near the top so price aligns across from the product title */
  margin-top: 0;
  gap: 0.5rem;
}

.order-page .product-price {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--first-color);
  margin-bottom: 0;
}

.order-page .product-action-btn {
  background: var(--first-color);
  color: var(--body-color);
  border: none;
  padding: 0.24rem 0.6rem; /* sleeker: reduced vertical and horizontal padding */
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.order-page .product-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
}

/* Product Grid Layout */
.order-page .products-list-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Section Headers */
.order-page .order-section {
  margin-bottom: 2.5rem;
}

.order-page .order-category {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 0.75rem;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--first-color);
}

.order-page .section-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-color-light);
  font-style: italic;
  margin-bottom: 1.5rem;
}

/* Mobile Dropdown for Categories */
.order-page .category-dropdown {
  display: none;
  position: relative;
}

.order-page .category-dropdown-toggle {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-color);
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.order-page .category-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--container-color);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
}

.order-page .category-dropdown.open .category-dropdown-list {
  display: flex;
  flex-direction: column;
}

.order-page .category-dropdown-list .tab {
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.2rem;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s ease;
}

.order-page .category-dropdown-list .tab:hover {
  background: rgba(255, 255, 255, 0.05);
}

.order-page .category-dropdown-list .tab:last-child {
  border-bottom: none;
}

/* Responsive Design */
@media screen and (max-width: 900px) {
  .order-page .category-tabs {
    display: none;
  }
  
  .order-page .category-dropdown {
    display: block;
  }
  
  .order-page .products-list-section {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
  }
  
  .order-page .pickup-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .order-page .timing-toggle {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  .order-page .products-list-section {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .order-page .product-card {
    padding: 1.25rem;
  }
  
  .order-page .order-category {
    font-size: 1.5rem;
  }
}

/* ===== CUSTOMIZATION MODAL STYLES ===== */
.customize-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
  overflow-y: auto;
}

.customize-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.customize-modal {
  background: var(--body-color);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.customize-modal-overlay.open .customize-modal {
  transform: scale(1);
}

.customize-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.customize-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--title-color);
  font-weight: 700;
}

.customize-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: var(--text-color);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s;
}

.customize-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.customize-body {
  padding: 1.5rem;
}

.customize-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.customize-section {
  border: none;
  padding: 0;
  margin: 0;
}

.customize-section legend {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 0.75rem;
  padding: 0;
}

.customize-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.customize-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  cursor: pointer;
  transition: all 0.2s;
}

.customize-option:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  border-color: var(--first-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.customize-option input {
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin: 0;
}

.customize-option .option-label {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text-color);
}

.customize-option .option-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--first-color);
}

.customize-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.customize-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.customize-price span {
  font-size: 0.9rem;
  color: var(--text-color-light);
}

.customize-price strong {
  font-size: 1.5rem;
  color: var(--title-color);
  font-weight: 700;
}

.customize-footer .button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: var(--first-color);
  color: var(--body-color);
  cursor: pointer;
  transition: all 0.2s;
}

.customize-footer .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dark theme adjustments for modal */
body.dark-theme .customize-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .customize-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .customize-option {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

body.dark-theme .customize-option:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));
  border-color: var(--first-color);
}

body.dark-theme .customize-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .customize-close:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .customize-modal {
    max-height: 95vh;
    border-radius: 12px 12px 0 0;
  }
  
  .customize-header {
    padding: 1rem;
  }
  
  .customize-body {
    padding: 1rem;
  }
  
  .customize-footer {
    flex-direction: column;
    gap: 1rem;
  }
  
  .customize-footer .button {
    width: 100%;
  }
}

/* Modernize customize modal: cleaner header, compact body scroll, hidden scrollbar */
.customize-modal-overlay{
  backdrop-filter: blur(6px) saturate(120%);
}

.customize-modal{
  border: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, var(--body-color), rgba(255,255,255,0.01));
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* we'll let the body scroll */
}

.customize-header h2{ font-size:1.6rem; letter-spacing:0.2px; margin:0; }
.customize-close{ font-size:1.2rem; width:44px; height:44px; border-radius:10px }
.customize-close:hover{ background: rgba(0,0,0,0.06) }

.customize-body{
  padding: 1rem 1.25rem;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.customize-body::-webkit-scrollbar{ width:0; height:0; }

.customize-option{ background: transparent; border-radius: 10px; padding: 0.8rem; }
.customize-option .option-label{ font-weight:600 }
.customize-option input{ width:20px; height:20px }

.customize-footer{ padding: 1rem 1.25rem; gap:0.5rem }

/* subtle focus state for keyboard users */
.customize-option:focus-within{ outline: 3px solid rgba(0,0,0,0.06); outline-offset: 3px }

/* Dark theme tweaks for new modal visuals */
body.dark-theme .customize-modal{ border-color: rgba(255,255,255,0.06); background: linear-gradient(180deg, #0f0f0f, rgba(255,255,255,0.01)) }
body.dark-theme .customize-body::-webkit-scrollbar{ display:none }


/* Tighten vertical spacing above the Order Online header on small screens
   so the gap between the top nav and H2 matches the compact rhythm used
   around the phone/address lines. */
@media screen and (max-width: 900px) {
  /* Reduce the section top padding for the order page specifically */
  .order-page.section {
    padding-top: 1.6rem !important; /* was 4rem on desktop; tighten for mobile */
    padding-bottom: 1rem !important;
  }

}


/* ============================
   Quick fix: restore header logo
   sizing and icon top padding
   (scoped, non-destructive overrides)
   ============================ */
/* Ensure the fixed header nav is tall enough and centers its children */
.l-header .nav {
  align-items: center;
  height: calc(var(--header-height) + 2.25rem);
}

/* Make the centered logo larger while remaining responsive.
   Use high-specificity and !important to win over earlier rules
   without changing upstream variables. */
.nav__logo-center img {
  max-height: 140px !important;
  width: auto !important;
  display: block;
}

@media screen and (min-width: 768px) {
  /* Desktop/tablet: allow a taller logo and keep icons vertically centered */
  .l-header .nav { height: calc(var(--header-height) + 1.8rem); }
  .nav__logo-center img { max-height: 180px !important; }
  .change-theme, .cart-button, .nav__toggle {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media screen and (max-width: 768px) {
  /* Mobile: slightly reduce logo so it fits comfortably and give icons
     a small top margin so they don't hug the screen edge. */
  .nav__logo-center img { 
    height: 96px !important; 
    max-height: 96px !important; 
    width: auto !important;
    min-width: 200px !important;
  }
  .change-theme, .cart-button, .nav__toggle { margin-top: 6px; top: auto; transform: none !important; }
}

/* ==================================================
   Mobile stacking fix — ensure centered header logo
   appears above the full-screen mobile menu overlay.
   This is intentionally scoped to <=768px and only
   adjusts stacking (no layout/size changes). Reversible.
   ================================================== */
@media screen and (max-width: 768px) {
  .nav__logo-center {
    position: relative !important;
    z-index: calc(var(--z-fixed) + 10) !important;
  }
  .nav__logo-center img {
    position: relative !important;
    z-index: calc(var(--z-fixed) + 11) !important;
    /* keep existing sizing rules intact */
    height: auto !important;
    max-height: 96px !important;
    width: auto !important;
    display: block !important;
  }
}

/* Slightly reduce the space above the products header itself (global) */
.products__header{ margin-top: 0.6rem !important; padding-top: 0 !important }

/* For the Order page we prefer a bit more breathing room and a centered container
   so the 'Order Online' header reads like a card rather than a cramped line. This
   is scoped to `.order-page` and placed after the earlier rule to ensure it takes
   precedence without disturbing other pages. */
.order-page.section { padding-top: 2rem !important; padding-bottom: 2rem !important }
.order-page .products__header {
  /* Plain header — no boxed container. Keep simpler spacing so it reads as part of the page. */
  margin-top: 1rem !important;
  padding: 0.5rem 0 !important;
  text-align: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Very small phones: keep it slightly tighter to match inline controls spacing */
@media screen and (max-width: 480px){
  .order-page.section { padding-top: 1.1rem !important; padding-bottom: 0.8rem !important }
  .products__header{ margin-top: 0.4rem !important }
}

/* Cart qty dropdown UI */

/* ============================
   Order page: clean hover overlay
   Replace heavy gradient overlays with a subtle, modern sheen
   Scoped to `.order-page` so desktop/menu pages keep existing visuals
   ============================ */
.order-page .product-card:hover,
.order-page .modern-container:hover,
.order-page .menu__content:hover {
  /* subtle single-color overlay instead of a multi-stop gradient */
  background: rgba(255,255,255,0.02) !important;
  /* gentle elevation to indicate interactivity without motion */
  box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
  transform: none !important;
}

/* Slightly stronger shadow for non-dark theme contexts */
body:not(.dark-theme) .order-page .product-card:hover,
body:not(.dark-theme) .order-page .modern-container:hover,
body:not(.dark-theme) .order-page .menu__content:hover{
  background: rgba(0,0,0,0.02) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}

/* Dark-theme hover: keep it subtle and legible */
body.dark-theme .order-page .product-card:hover,
body.dark-theme .order-page .modern-container:hover,
body.dark-theme .order-page .menu__content:hover{
  background: rgba(255,255,255,0.02) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
}

.cart-qty-wrap{ position: relative; display: inline-flex; vertical-align: middle; margin-right:4px }
.cart-qty-btn{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--text-color);
  padding: 0.28rem 0.5rem;
  border-radius: 10px;
  min-width: 40px;
  text-align: center;
  font-weight:600;
  cursor: pointer;
}
.cart-qty-btn:active,
.cart-qty-btn.pressed{
  /* subtle pressed state for touch: slightly brighter background + soft inset ring */
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.03);
}
.cart-qty-btn:focus{ outline: 3px solid rgba(0,0,0,0.06); outline-offset: 2px }
.cart-qty-menu{ display: none; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 8px); background: var(--container-color); color: var(--text-color); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 10px 40px rgba(0,0,0,0.28); border-radius: 10px; padding: 8px 6px; z-index: 14000; min-width: 64px; max-width: 96px; max-height: 260px; overflow:auto }
.cart-qty-wrap.open .cart-qty-menu{ display: block }
.cart-qty-option{ display:block; width:100%; padding: .28rem .45rem; text-align:center; background:transparent; border:none; cursor:pointer; font-weight:600; color: var(--text-color) }
.cart-qty-option:hover{ background: rgba(0,0,0,0.02); }

/* Dark-theme specific tweaks so the qty menu is visible against dark drawer */
body.dark-theme .cart-qty-menu{
  /* Use a near-black panel so the dropdown reads as part of the dark drawer */
  background: rgba(0,0,0,0.92);
  border-color: rgba(255,255,255,0.03);
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
body.dark-theme .cart-qty-option:hover{ background: rgba(255,255,255,0.08); }

/* make option rows taller and readable on touch */
.cart-qty-option{ padding: .35rem .6rem; font-size: .98rem; line-height: 1.4; }
.cart-qty-menu::-webkit-scrollbar{ width:6px; }
.cart-qty-menu::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.2); border-radius: 6px }

/* Tighter spacing adjustments for small screens - keep right-side controls fixed width
   so left area can truncate gracefully. Use the cart-qty-btn (not a legacy .cart-qty)
   so the dropdown and button remain visible on narrow viewports. */
@media (max-width: 700px) {
  .cart-item-left{ max-width: calc(100% - 160px); }
  .cart-qty-btn{ min-width: 40px; padding: 0.26rem 0.48rem; }
  .cart-item-price{ min-width: 72px; text-align: right; }
}

@media (max-width: 480px) {
  .cart-item-left{ max-width: calc(100% - 140px); margin-right: 0; }
  .cart-qty-btn{ min-width: 36px; padding: 0.22rem 0.42rem; font-size: 0.94rem; }
  .cart-item-price{ min-width: 64px; text-align: right; }
  .cart-remove{ margin-left: 4px; }
}

/* == Mobile product-card fluid fixes (overrides) == */
@media (max-width: 768px) {
  /* Force product cards to use full available width and remove large side padding */
  .order-page .products-list-section .product-card,
  .products-list-section .product-card,
  .order-page .product-card {
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
    align-items: flex-start;
    overflow: visible;
  }

  .product-card .product-name {
    font-size: 1.02rem;
    line-height: 1.2;
    text-align: left;
  }

  .product-card .product-desc {
    font-size: 0.88rem;
    margin-top: 0.25rem;
    text-align: left;
    color: var(--text-color-light);
  }

  /* Footer: price left, button right on larger phones */
  .product-card .product-foot {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
  }

  .product-card .product-price {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 0.5rem;
  }

/* Final alignment tweaks for product price and action on order page
   Placed at end to ensure these tighter rules win over older, broader rules. */
html body.order-page .products__list .product-card .product-foot,
html body.order-page .product-card .product-foot {
  gap: 0.45rem !important;
  margin-top: 0 !important;
}

html body.order-page .products__list .product-card .product-price,
html body.order-page .product-card .product-price {
  font-size: 0.98rem !important;
  margin-bottom: 0 !important;
}

html body.order-page .products__list .product-card .product-action-btn,
html body.order-page .product-card .product-action-btn {
  padding: 0.24rem 0.6rem !important;
  font-size: 0.78rem !important;
}

/* Ensure buttons remain comfortably tappable on small touch devices */
@media screen and (max-width: 640px) {
  .order-page .product-action-btn { padding: 0.5rem 0.9rem; font-size: 0.92rem; }
  html body.order-page .product-card .product-action-btn { padding: 0.5rem 0.9rem !important; font-size: 0.92rem !important; }
}

  .product-card .product-add-button,
  .product-card .btn-add,
  .product-card .add-to-cart-btn {
    flex: 0 0 auto;
    margin-left: 0.25rem;
  }

  /* Layout: keep product cards horizontal (meta left, controls right) */
  .product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .product-meta {
    flex: 1 1 auto;
    min-width: 0; /* allow text to wrap/shrink */
  }

  .product-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Further compact and stack controls for very small phones */
  .order-page .products-list-section .product-card,
  .products-list-section .product-card,
  .order-page .product-card {
    padding: 0.6rem 0.75rem !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  /* Preserve horizontal layout on very small phones but tighten spacing */
  .product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }

  .product-card .product-foot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    margin-top: 0;
  }

  /* Make Add button full width and easier to tap */
  .product-card .product-add-button,
  .product-card .btn-add,
  .product-card .add-to-cart-btn {
    width: 100% !important;
    display: inline-block;
    text-align: center;
    padding: 0.45rem 0.6rem;
    font-size: 0.95rem;
    border-radius: 6px;
  }

  /* Ensure price appears above the button and is left-aligned */
  .product-card .product-price {
    text-align: right;
    margin-bottom: 0;
    font-weight: 700;
  }

  /* Prevent unexpected transforms from causing overlap */
  .product-card * {
    transform: none !important;
  }
}

/* Stronger overrides to pin controls to the right and keep product cards horizontal */
@media (max-width: 768px) {
  .order-page .products__list .product-card,
  .products-list-section .product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.7rem 1rem !important;
  }

  .order-page .products__list .product-card .product-meta,
  .products-list-section .product-card .product-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .order-page .products__list .product-card .product-foot,
  .products-list-section .product-card .product-foot {
    margin-left: auto !important; /* push to far right */
    width: 140px !important;
    max-width: 34% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .order-page .products__list .product-card .product-action-btn,
  .products-list-section .product-card .product-action-btn {
    width: auto !important;
    padding: 0.36rem 0.6rem !important;
  }
}

@media (max-width: 480px) {
  .order-page .products__list .product-card .product-foot,
  .products-list-section .product-card .product-foot {
    width: 110px !important;
    max-width: 36% !important;
  }

  .order-page .products__list .product-card .product-action-btn,
  .products-list-section .product-card .product-action-btn {
    padding: 0.34rem 0.5rem !important;
    font-size: 0.92rem !important;
  }
}

/* Ensure product meta sits flush to the left inner edge of the card on mobile */
@media (max-width: 768px) {
  .products-list-section .product-card .product-meta,
  .order-page .products__list .product-card .product-meta {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .products-list-section .product-card .product-name,
  .order-page .products__list .product-card .product-name,
  .products-list-section .product-card .product-desc,
  .order-page .products__list .product-card .product-desc {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .products-list-section .product-card .product-meta,
  .order-page .products__list .product-card .product-meta {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .products-list-section .product-card .product-name,
  .order-page .products__list .product-card .product-name,
  .products-list-section .product-card .product-desc,
  .order-page .products__list .product-card .product-desc {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Final, high-specificity overrides for order page product cards (desktop)
   placed at the end to ensure they win over earlier rules. These force a
   two-column layout, pin the meta to the left, and make descriptions wrap
   inside the left column so they never collide with price/actions on the
   right. */
@media screen and (min-width: 769px) {
  .order-page .products-list-section .product-card,
  .order-page .product-card {
    display: grid !important;
    grid-template-columns: 1fr minmax(120px, 220px) !important;
    gap: 12px 18px !important;
    align-items: center !important;
    padding: 0.9rem 1rem !important;
  }

  .order-page .products-list-section .product-card .product-meta,
  .order-page .product-card .product-meta {
    grid-column: 1 / 2 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important; /* allow wrapping */
  }

  .order-page .products-list-section .product-card .product-foot,
  .order-page .product-card .product-foot {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    text-align: right !important;
    align-self: center !important;
    width: auto !important;
  }

  .order-page .products-list-section .product-card .product-name,
  .order-page .product-card .product-name {
    text-align: left !important;
    margin: 0 !important;
    font-weight: 700;
  }

  .order-page .products-list-section .product-card .product-desc,
  .order-page .product-card .product-desc {
    grid-column: 1 / 2 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin-top: 6px !important;
    color: var(--text-color-light) !important;
    max-width: 100% !important;
  }
}

/* ==================================================
   SQUARE PAYMENT FORM STYLES
   Production-ready styling for Square Web Payments SDK
   ================================================== */

/* Card payment container */
#card-container {
  margin: 1rem 0;
  min-height: 90px;
}

/* Square payment form iframe styling */
#card-container iframe {
  border: 1px solid var(--text-color-light);
  border-radius: 8px;
  padding: 0.75rem;
}

/* Payment message styling */
.payment-message {
  display: none;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.payment-message--info {
  background-color: #e3f2fd;
  color: #1976d2;
  border-left: 4px solid #1976d2;
}

.payment-message--success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #2e7d32;
}

.payment-message--error {
  background-color: #ffebee;
  color: #c62828;
  border-left: 4px solid #c62828;
}

/* Dark theme overrides for payment messages */
body.dark-theme .payment-message--info {
  background-color: rgba(25, 118, 210, 0.15);
  color: #90caf9;
  border-left-color: #90caf9;
}

body.dark-theme .payment-message--success {
  background-color: rgba(46, 125, 50, 0.15);
  color: #a5d6a7;
  border-left-color: #a5d6a7;
}

body.dark-theme .payment-message--error {
  background-color: rgba(198, 40, 40, 0.15);
  color: #ef9a9a;
  border-left-color: #ef9a9a;
}

/* Checkout form fieldsets */
.checkout-form fieldset {
  border: none;
  padding: 0;
  margin: 1.5rem 0;
}

.checkout-form legend {
  font-weight: var(--font-semi-bold);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--title-color);
}

.checkout-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--font-medium);
  color: var(--text-color);
  font-size: 0.9rem;
}

.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form input[type="email"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--text-color-light);
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 1rem;
  background-color: var(--body-color);
  color: var(--text-color);
  transition: border-color 0.3s ease;
}

.checkout-form input[type="text"]:focus,
.checkout-form input[type="tel"]:focus,
.checkout-form input[type="email"]:focus {
  outline: none;
  border-color: var(--first-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

body.dark-theme .checkout-form input[type="text"]:focus,
body.dark-theme .checkout-form input[type="tel"]:focus,
body.dark-theme .checkout-form input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

/* Primary button styling for checkout */
.button--primary {
  background-color: var(--first-color);
  color: var(--body-color);
  font-weight: var(--font-semi-bold);
  padding: 1rem 2rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.button--primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.dark-theme .button--primary {
  background-color: var(--first-color);
  color: var(--body-color);
}

/* Responsive adjustments for payment form */
@media screen and (max-width: 768px) {
  .checkout-form fieldset {
    margin: 1rem 0;
  }

  .checkout-form legend {
    font-size: 1rem;
  }

  #card-container {
    min-height: 80px;
  }

  .button--primary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

/* Strong override: enforce two-column product grid on desktop for order page */
/* This ensures product cards display 2 columns on wide screens and stack
   to a single column on smaller screens. Using selector specificity so it
   overrides other generic grid rules. */
.order-page .products-list-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 0.9rem !important;
}

@media screen and (max-width: 900px) {
  .order-page .products-list-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
}

/* Checkout modal styles - smooth popup overlay */
.checkout-modal{
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 220ms ease-in-out;
}
.checkout-modal.show-modal{
  display: flex;
  opacity: 1;
}
.checkout-modal__content{
  background: var(--body-color);
  color: var(--text-color);
  width: min(740px, calc(100% - 40px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  transform: translateY(12px) scale(0.995);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
}
/* Slightly increase spacing between modal title and the first form field */
.checkout-modal__content h2{ margin-bottom: 1.25rem; font-size: 1.2rem; }
.checkout-modal.show-modal .checkout-modal__content{
  transform: translateY(0) scale(1);
}
.checkout-modal__close{
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-color);
}

/* Prevent body scroll when modal open */
body.modal-open{ overflow: hidden; }

/* Payment message area inside modal */
.payment-message{ display: none; margin: .5rem 0; padding: .5rem .75rem; border-radius: 4px; }
.payment-message--error{ background: rgba(255,60,60,0.08); color: #ffb3b3; display: block; }
.payment-message--success{ background: rgba(40,180,99,0.06); color: #b9ffda; display: block; }

/* Final explicit override: force left-alignment for product titles and descriptions
   on the order page. This wins over the site-wide centering rule by being
   more specific and using !important. */
html body.order-page .products-list-section .product-card .product-name,
html body.order-page .products-list-section .product-card .product-desc,
html body.order-page .product-card .product-name,
html body.order-page .product-card .product-desc {
  text-align: left !important;
  margin-left: 0 !important;
}

/* ------------------------------------------------------------------
   Disable hover motion for header controls
   Ensure the theme toggle and cart icon do not translate/scale/rotate on hover.
   Placed at end so it overrides earlier transform/hover rules.
   ------------------------------------------------------------------ */
html body .change-theme,
html body .cart-button,
html body .nav__toggle,
html body #theme-button,
html body #cart-button {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html body .change-theme:hover,
html body .cart-button:hover,
html body .nav__toggle:hover,
html body #theme-button:hover,
html body #cart-button:hover {
  transform: none !important;
  transition: none !important;
}

/* Also prevent any child icons from receiving hover transforms */
html body .change-theme *,
html body .cart-button *,
html body .nav__toggle * {
  transform: none !important;
  transition: none !important;
}


/* ======= DEV: Force header icons visible and on-top across pages =======
   Temporary override to diagnose missing theme/cart icons when served
   through ngrok or different page classes. Remove or narrow for production. */
/* Dev overrides removed. If header icons are still misplaced, we'll add a small,
   targeted rule instead of broad !important overrides. */

/* Final, site-end override to absolutely disable any outline/hover for the
   About page content. Placed at file end so it wins over all previous rules.
   This will remove background, border, shadow, pseudo-elements and any
   transition or transform on the content container and its children. */
body .about-page__content,
html .about-page__content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  margin: 0.5rem 0 !important;
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
}

body .about-page__content::before,
body .about-page__content:hover,
body .about-page__content:hover::before,
body .about-page__content *,
body .about-page__content *::before,
body .about-page__content *::after {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Center-align all paragraph and descriptive content inside the About page
   so the paragraphs match the visual alignment of the first lead paragraph. */
body .about-page__content,
body .about-page__content p,
body .about-page__content .about-feature,
body .about-page__content .about-category,
body .about-page__content .about-bullets,
body .about-page__content .about-bullets li,
body .about-page__content .about-bullets li strong,
body .about-page__content .closing {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tweak bullets for centered layout: keep bullets readable while centering text */
body .about-page__content .about-bullets{
  list-style-position: inside !important;
  padding-left: 0.5rem !important;
}

/* Ensure list items don't inherit left padding that prevents centering */
body .about-page__content .about-bullets li{
  display: block;
}

/* Increase space between the feature list (including 'Honest Pricing') and
   the closing line so they visually separate more. */
body .about-page__content .about-bullets{ margin-bottom: 2rem !important; }
body .about-page__content .closing{ margin-top: 3rem !important; }

/* ---------- Specials / Services spacing tweaks (safety overrides) ---------- */
/* Ensure services sits in normal flow and reduce chance of overlap on very small screens. */
.services{ position: relative; }

@media screen and (max-width: 480px){
  /* Small devices: reduce top gap and ensure services appear after specials
     without overlay by forcing normal stacking and a small clear margin. */
  .services{ z-index: 2; margin-top: 1rem; padding-top: 0.5rem; }
  .home__specials-wrapper{ margin-bottom: 2.25rem; }
}