/* ==========================================================================
   Dhee's Bistro — Design tokens
   ========================================================================== */

:root {
  /* Brand colors (client-supplied — do not alter) */
  --brown-deep: #3A1A0D;
  --orange: #C95A1A;
  --cream: #F8F1DF;
  --white: #FFFFFF;

  /* Supporting tones derived from the brand palette */
  --brown-text: #2A130A;
  --brown-soft: #5C3220;
  --cream-card: #FFFDF8;
  --orange-hover: #A84813;
  --orange-tint: #F1D9C4;
  --line: rgba(58, 26, 13, 0.14);
  --line-on-dark: rgba(248, 241, 223, 0.18);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --content-width: 1200px;
  --gutter: 24px;
  --radius: 6px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--brown-text);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brown-deep);
  margin: 0;
  line-height: 1.15;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 72px 0; }

.eyebrow-free-heading { max-width: 640px; }

/* ==========================================================================
   Navbar
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header.is-scrolled {
  background: var(--cream);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--line);
}

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

.brand img {
  height: 48px;
  width: auto;
  border-radius: 8px;
  transition: height 0.35s ease;
}

.site-header.is-scrolled .brand img { height: 38px; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--white);
  transition: color 0.35s ease;
}

.site-header.is-scrolled .brand-name { color: var(--brown-deep); }

.main-nav {
  display: none;
}

.main-nav ul {
  display: flex;
  gap: 36px;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s ease, border-color 0.2s ease;
}

.site-header.is-scrolled .main-nav a { color: var(--brown-text); }

.main-nav a:hover,
.main-nav a.is-active {
  border-bottom-color: currentColor;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  transition: color 0.35s ease;
}

.site-header.is-scrolled .cart-link { color: var(--brown-deep); }

.cart-count {
  background: var(--orange);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--line-on-dark);
  border-radius: 8px;
  color: var(--white);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.site-header.is-scrolled .nav-toggle {
  color: var(--brown-deep);
  border-color: var(--line);
}

.nav-toggle svg { width: 20px; height: 20px; }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--brown-deep);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 100px var(--gutter) 40px;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

.mobile-nav.is-open { transform: translateY(0); }

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--cream);
}

.mobile-nav .contact-line {
  margin-top: auto;
  color: var(--orange-tint);
  font-size: 0.95rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--brown-deep);
  color: var(--cream);
  padding: 160px 0 110px;
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hero-text { max-width: 640px; }

.hero-eyebrow-line {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--orange-tint);
  font-size: 0.95rem;
  margin-bottom: 22px;
}

.hero-eyebrow-line .rule {
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
}

.hero h1 .line-mask {
  display: block;
}

.hero h1 .hero-sub {
  display: block;
  font-style: normal;
  font-weight: 300;
  font-size: 0.30em;
  line-height: 1.4;
  color: var(--orange-tint);
  margin-top: 18px;
  max-width: 22ch;
  letter-spacing: 0.01em;
}

.hero-copy {
  max-width: 480px;
  font-size: 1.05rem;
  color: var(--orange-tint);
  margin-top: 26px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-on-dark);
}

.hero-meta div {
  font-size: 0.88rem;
  color: var(--orange-tint);
}

.hero-meta strong {
  display: block;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
}

/* Drip divider — echoes the logo's dripping-chocolate letterforms */
.drip-divider {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: -1px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
}

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

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-on-dark);
}

.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange-tint);
}

.btn-dark {
  background: var(--brown-deep);
  color: var(--white);
}

.btn-dark:hover { background: var(--brown-soft); }

.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================================
   Intro section
   ========================================================================== */

.intro {
  display: grid;
  gap: 44px;
  align-items: start;
}

.intro-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--orange);
}

.intro h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-top: 12px;
}

.intro-body p {
  color: var(--brown-soft);
  font-size: 1.02rem;
  max-width: 54ch;
}

.intro-body p + p { margin-top: 16px; }

/* ==========================================================================
   Offer / what we serve
   ========================================================================== */

.offer { background: var(--white); }

.offer-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
}

.offer-item {
  background: var(--cream-card);
  padding: 36px 30px;
}

.offer-item h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.offer-item p {
  color: var(--brown-soft);
  font-size: 0.95rem;
}

.offer-item .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 18px;
}

/* ==========================================================================
   Menu preview (home)
   ========================================================================== */

.menu-preview .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

/* ==========================================================================
   Food cards
   --------------------------------------------------------------------------
   The photo carries the card, so it gets the space: a tall 5:4 frame with
   the price floating over it as a chip. Text below is a clean hierarchy —
   small letterspaced category, dish name in the display face, muted
   description — with the action pinned to the bottom so cards of different
   text lengths still line up along the row.
   ========================================================================== */

.food-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .food-grid { gap: 28px; }
}

.food-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(58, 26, 13, 0.04);
}

/* Thin brand bar that wipes across the top edge on hover */
.food-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #E08A4A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.food-card:hover::before,
.food-card:focus-within::before {
  transform: scaleX(1);
}

/* ---- media ---- */

.food-card-media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: linear-gradient(140deg, #6B3A22, var(--brown-deep) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Placeholder panel inside the media frame — clearly a placeholder,
   but styled so the card still reads as finished */
.food-card-media .media-inner {
  flex-direction: column;
  gap: 8px;
  color: rgba(248, 241, 223, 0.88);
  font-size: 0.78rem;
  text-align: center;
  padding: 18px;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.045) 0 14px,
    transparent 14px 28px
  );
}

/* Gradient foot on the photo so the price chip stays readable */
.food-card-media::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(36, 16, 7, 0.82), transparent);
  z-index: 1;
  pointer-events: none;
}

.placeholder-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(36, 16, 7, 0.72);
  border: 1px solid rgba(248, 241, 223, 0.22);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 600;
}

/* Price sits on the photo, bottom-right */
.food-price {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--white);
  background: rgba(201, 90, 26, 0.94);
  padding: 7px 15px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(36, 16, 7, 0.6);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.food-card:hover .food-price { transform: translateY(-3px); }

/* ---- body ---- */

.food-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.food-category {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 1;
}

.food-card-body h3 {
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.25;
}

.food-card-body p {
  color: var(--brown-soft);
  font-size: 0.89rem;
  line-height: 1.6;
  flex: 1;
}

/* ---- footer ---- */

.food-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.add-to-cart {
  flex: 1;
  padding: 12px 18px;
  font-size: 0.86rem;
  border-radius: 10px;
}

.add-to-cart svg {
  width: 15px;
  height: 15px;
}

/* Small round button for a second action later (favourite, details) */
.card-icon-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--brown-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.card-icon-btn svg { width: 17px; height: 17px; }

.card-icon-btn:hover {
  background: var(--cream);
  border-color: var(--orange);
  color: var(--orange);
}

/* Unavailable items stay visible but clearly marked */
.food-card.is-unavailable { opacity: 0.66; }

.food-card.is-unavailable .food-card-media::after {
  content: "Sold out";
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 16, 7, 0.62);
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  transform: none;
}

/* ==========================================================================
   Category tabs (menu page)
   ========================================================================== */

.category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 36px 0 40px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.category-tabs button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brown-text);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-tabs button.is-active {
  background: var(--brown-deep);
  border-color: var(--brown-deep);
  color: var(--white);
}

.category-tabs button:hover:not(.is-active) {
  border-color: var(--orange);
}

.menu-page-header {
  padding-top: 150px;
  padding-bottom: 0;
  background: var(--cream);
}

.menu-page-header .intro-label { margin-bottom: 6px; }

.menu-page-header p.lede {
  color: var(--brown-soft);
  max-width: 56ch;
  margin-top: 14px;
}

.menu-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--orange-tint);
  border: 1px solid rgba(201, 90, 26, 0.35);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 32px;
  font-size: 0.9rem;
  color: var(--brown-text);
}

.menu-notice strong { display: block; margin-bottom: 3px; }

.menu-category-block { padding-top: 0; }
.menu-category-block h2 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.menu-category-block .category-count {
  color: var(--brown-soft);
  font-size: 0.88rem;
  margin-bottom: 24px;
  display: block;
}

/* ==========================================================================
   Simple placeholder pages (cart / checkout)
   ========================================================================== */

.page-header {
  padding: 150px 0 40px;
  background: var(--cream);
}

.page-header h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.page-header p {
  color: var(--brown-soft);
  margin-top: 14px;
  max-width: 56ch;
}

.status-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
}

.status-panel .icon-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.status-panel .icon-ring svg { width: 28px; height: 28px; }

.status-panel h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.status-panel p {
  color: var(--brown-soft);
  max-width: 42ch;
  margin: 0 auto;
}

.status-panel .btn { margin-top: 28px; }

.cart-line-preview {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 32px;
  background: var(--cream-card);
}

.cart-line-preview .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 0.9rem;
  color: var(--brown-soft);
  border-bottom: 1px solid var(--line);
}

.cart-line-preview .row:last-child { border-bottom: none; }

.checkout-form-preview {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.checkout-form-preview label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--brown-text);
}

.checkout-form-preview input,
.checkout-form-preview textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
  color: var(--brown-text);
}

.checkout-form-preview input:disabled,
.checkout-form-preview textarea:disabled {
  background: var(--cream);
  color: var(--brown-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--brown-deep);
  color: var(--orange-tint);
  padding: 64px 0 28px;
}

.footer-grid {
  display: grid;
  gap: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-brand img {
  height: 40px;
  border-radius: 6px;
}

.footer-brand span {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.05rem;
}

.footer-col h4 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 16px;
  font-weight: 500;
}

.footer-col p,
.footer-col li,
.footer-col a {
  font-size: 0.9rem;
  color: var(--orange-tint);
  line-height: 1.8;
}

.footer-col a:hover { color: var(--white); }

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(248, 241, 223, 0.65);
}

/* ==========================================================================
   Tablet — 768px
   ========================================================================== */

@media (min-width: 768px) {
  .wrap { padding: 0 40px; }
  section { padding: 96px 0; }

  .hero { padding: 180px 0 130px; }

  .intro { grid-template-columns: 0.9fr 1.1fr; gap: 60px; }

  .offer-grid { grid-template-columns: repeat(2, 1fr); }

  .food-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }

  .status-panel { padding: 64px 48px; }
}

/* ==========================================================================
   Laptop — 1024px
   ========================================================================== */

@media (min-width: 1024px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }

  .hero-text { max-width: 60%; }

  .offer-grid { grid-template-columns: repeat(4, 1fr); }

  .food-grid { grid-template-columns: repeat(3, 1fr); }

  .menu-preview .food-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Desktop — 1440px
   ========================================================================== */

@media (min-width: 1440px) {
  .wrap { padding: 0 64px; }
  .hero { padding: 210px 0 150px; }
  section { padding: 120px 0; }
}

/* ==========================================================================
   MOTION LAYER
   Everything below is animation. It's kept in one block on purpose so it's
   easy to tune (or strip) without touching the base layout above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page-load hero sequence
   The headline lines are masked and rise into view, then the supporting
   copy, buttons and meta row follow. One orchestrated moment on arrival.
   -------------------------------------------------------------------------- */

.line-mask {
  display: block;
  overflow: hidden;
}

.line-mask > span {
  display: block;
  animation: lineRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.line-mask:nth-of-type(1) > span { animation-delay: 0.15s; }
.line-mask:nth-of-type(2) > span { animation-delay: 0.28s; }

@keyframes lineRise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

.hero-sub,
.hero-eyebrow-line,
.hero-copy,
.hero-actions,
.hero-meta {
  animation: softRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero-eyebrow-line { animation-delay: 0.05s; }
.hero-sub          { animation-delay: 0.46s; }
.hero-copy         { animation-delay: 0.58s; }
.hero-actions      { animation-delay: 0.70s; }
.hero-meta         { animation-delay: 0.84s; }

@keyframes softRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The drip divider draws itself downward once the hero has settled */
.drip-divider {
  transform-origin: top center;
  animation: dripDrop 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.9s backwards;
}

@keyframes dripDrop {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

/* Slow ambient drift on the hero backdrop — gives the dark panel depth
   without pulling focus from the headline */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle, rgba(201, 90, 26, 0.28), transparent 62%);
  border-radius: 50%;
  z-index: 1;
  animation: emberDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes emberDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 5%, 0) scale(1.15); }
}

/* --------------------------------------------------------------------------
   2. Scroll reveals
   Elements marked [data-reveal] start hidden and are released by
   IntersectionObserver. Children stagger via --i.
   -------------------------------------------------------------------------- */

.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Heading variant: masked rise rather than a plain fade */
.js-ready [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-ready [data-reveal="mask"].is-revealed {
  clip-path: inset(0 0 -10% 0);
}

/* Scale variant for imagery/cards */
.js-ready [data-reveal="rise"] {
  transform: translateY(34px) scale(0.97);
}

.js-ready [data-reveal="rise"].is-revealed {
  transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   3. Food card interactions
   The photo is the hero of each card, so it gets the motion: the image
   scales up inside its frame and a soft light sweeps across it.
   -------------------------------------------------------------------------- */

.food-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
  will-change: transform;
}

.food-card:hover,
.food-card:focus-within {
  transform: translateY(-7px);
  border-color: rgba(201, 90, 26, 0.38);
  box-shadow: 0 24px 48px -20px rgba(58, 26, 13, 0.42);
}

.food-card-media {
  overflow: hidden;
}

.food-card-media img,
.food-card-media .media-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.food-card:hover .food-card-media img,
.food-card:hover .food-card-media .media-inner {
  transform: scale(1.07);
}

/* Light sweep across the photo on hover (own element so the media
   pseudo-elements stay free for the gradient foot and sold-out state) */
.food-card-media .sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.food-card:hover .food-card-media .sheen {
  transform: translateX(120%);
}

.add-to-cart {
  transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.food-card:hover .add-to-cart:not(:disabled) {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   4. Meal carousel
   Native scroll-snap does the swiping (so touch drag is smooth and free on
   phones), with arrows, dots and keyboard for everything else.
   -------------------------------------------------------------------------- */

.carousel {
  position: relative;
  margin-top: 40px;
}

.carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 6px 30px;
  margin: 0 -6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track > .food-card {
  scroll-snap-align: center;
  flex: 0 0 82%;
  min-width: 0;
}

.carousel-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.carousel-track.is-dragging > .food-card {
  pointer-events: none;
}

/* Arrows */
.carousel-nav {
  display: none;
  gap: 10px;
}

.carousel-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--brown-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.carousel-btn svg { width: 20px; height: 20px; }

.carousel-btn:hover:not(:disabled) {
  background: var(--brown-deep);
  border-color: var(--brown-deep);
  color: var(--white);
}

.carousel-btn:active:not(:disabled) { transform: scale(0.94); }

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(58, 26, 13, 0.22);
  transition: background-color 0.3s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-dots button.is-active {
  background: var(--orange);
  width: 24px;
  border-radius: 999px;
}

.carousel-hint {
  text-align: center;
  font-size: 0.82rem;
  color: var(--brown-soft);
  opacity: 0.75;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   5. Category tab motion
   -------------------------------------------------------------------------- */

.category-tabs button {
  transform-origin: center;
}

.category-tabs button:active { transform: scale(0.96); }

.menu-category-block {
  animation: blockIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blockIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   6. Nav + button polish
   -------------------------------------------------------------------------- */

.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
  transform: scaleX(1);
}

/* Replaces the plain border-bottom from the base layer */
.main-nav a:hover,
.main-nav a.is-active {
  border-bottom-color: transparent;
}

/* Hidden only inside a panel that is itself clipped shut, so these can
   never be stranded on a visible page */
.mobile-nav li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav.is-open li {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav.is-open li:nth-child(1) { transition-delay: 0.12s; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: 0.20s; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: 0.28s; }

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover::before { transform: translateX(130%); }

.cart-count {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-count.is-bumped { transform: scale(1.35); }

/* --------------------------------------------------------------------------
   7. Offer items — the number is the accent that animates
   -------------------------------------------------------------------------- */

.offer-item {
  transition: background-color 0.4s ease;
}

.offer-item:hover { background: var(--white); }

.offer-item .num {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
  transform-origin: left center;
}

.offer-item:hover .num {
  transform: scale(1.18);
}

/* --------------------------------------------------------------------------
   8. Carousel responsive sizing
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .carousel-track > .food-card { flex-basis: 46%; }
}

@media (min-width: 1024px) {
  .carousel-track > .food-card { flex-basis: 30.5%; }
  .carousel-nav { display: flex; }
  .carousel-track { cursor: grab; }
  .carousel-hint { display: none; }
}

@media (min-width: 1440px) {
  .carousel-track > .food-card { flex-basis: 23.2%; }
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   Anyone who has asked their device to limit motion gets the layout with
   no movement at all — content must never be stuck hidden.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .line-mask > span,
  .hero-eyebrow-line,
  .hero-sub,
  .hero-copy,
  .hero-actions,
  .hero-meta {
    opacity: 1;
    transform: none;
    animation: none;
  }

  [data-reveal],
  [data-reveal="rise"] {
    opacity: 1;
    transform: none;
  }

  [data-reveal="mask"] { clip-path: none; }

  .hero::before,
  .drip-divider { animation: none; }

  .carousel-track { scroll-behavior: auto; }
}

/* ==========================================================================
   HERO SLIDESHOW
   A rotating food-photo background behind the headline. Slides crossfade and
   drift slowly (Ken Burns) so the food reads as the subject of the page.
   Content is driven by SITE_DEFAULTS.heroSlides in js/site-data.js, so the
   admin dashboard will be able to change it without touching this file.
   ========================================================================== */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--brown-deep);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero-slide img,
.hero-slide .slide-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slow drift on whichever slide is showing */
.hero-slide.is-active img,
.hero-slide.is-active .slide-placeholder {
  animation: slideDrift 8s ease-out forwards;
}

@keyframes slideDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

/* Placeholder panel, shown until real photos are dropped in.
   Clearly labelled so it can never be mistaken for a real dish. */
.slide-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: rgba(248, 241, 223, 0.92);
  font-family: var(--font-body);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0 18px,
      transparent 18px 36px
    ),
    linear-gradient(150deg, #5C3220, #3A1A0D 55%, #241007);
}

.slide-placeholder .label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  font-style: italic;
}

.slide-placeholder .note {
  font-size: 0.8rem;
  opacity: 0.7;
  max-width: 28ch;
}

.slide-placeholder svg {
  width: 34px;
  height: 34px;
  opacity: 0.55;
  margin-bottom: 4px;
}

/* Scrim: keeps the headline legible whatever photo is behind it.
   Darker on the left where the type sits, lighter on the right so the
   food stays visible. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to top,
      rgba(36, 16, 7, 0.94) 0%,
      rgba(36, 16, 7, 0.72) 38%,
      rgba(36, 16, 7, 0.46) 100%
    );
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero-scrim {
    background:
      linear-gradient(
        100deg,
        rgba(36, 16, 7, 0.95) 0%,
        rgba(36, 16, 7, 0.82) 42%,
        rgba(36, 16, 7, 0.34) 78%,
        rgba(36, 16, 7, 0.52) 100%
      );
  }
}

/* The hero's own content sits above the slides */
.hero .wrap { z-index: 3; }
.hero::before { z-index: 2; }

/* Slide caption — names what's on screen */
.hero-slide-caption {
  position: absolute;
  bottom: 112px;
  right: var(--gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  color: var(--cream);
  background: rgba(36, 16, 7, 0.6);
  border: 1px solid var(--line-on-dark);
  backdrop-filter: blur(8px);
  padding: 9px 16px;
  border-radius: 999px;
  max-width: 62vw;
}

.hero-slide-caption .dot-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .hero-slide-caption { font-size: 0.85rem; gap: 10px; padding: 9px 16px; }
}

@media (min-width: 1440px) {
  .hero-slide-caption { right: 64px; }
}

/* Slide controls — dots to jump, and a pause toggle so the motion is
   never something the visitor is stuck with */
.hero-controls {
  position: absolute;
  bottom: 66px;
  left: var(--gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (min-width: 1440px) {
  .hero-controls { left: 64px; }
}

.hero-dots {
  display: flex;
  gap: 8px;
}

.hero-dots button {
  width: 26px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(248, 241, 223, 0.32);
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.hero-dots button:hover { background: rgba(248, 241, 223, 0.55); }

.hero-dots button.is-active { background: rgba(248, 241, 223, 0.32); }

/* The active dot fills like a progress bar over the slide's duration */
.hero-dots button.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
  animation: dotProgress var(--slide-duration, 5500ms) linear forwards;
}

.hero-dots button.is-active.is-paused::after {
  animation-play-state: paused;
}

@keyframes dotProgress {
  to { transform: scaleX(1); }
}

.hero-pause {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  background: rgba(36, 16, 7, 0.45);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hero-pause:hover {
  background: rgba(201, 90, 26, 0.85);
  border-color: var(--orange);
}

.hero-pause svg { width: 12px; height: 12px; }
.hero-pause .icon-play { display: none; }
.hero-pause.is-paused .icon-play { display: block; }
.hero-pause.is-paused .icon-pause { display: none; }

/* Reduced motion: no drift, no crossfade loop running on its own */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active img,
  .hero-slide.is-active .slide-placeholder { animation: none; }
  .hero-slide { transition: none; }
  .hero-dots button.is-active::after { animation: none; transform: scaleX(1); }
}


/* ==========================================================================
   RESPONSIVE REFINEMENTS
   Tuned against 375 / 414 / 768 / 1024 / 1280 / 1440 / 1920.
   ========================================================================== */

/* --- Small phones (360-390px): the hero was the tightest spot --- */
@media (max-width: 420px) {
  :root { --gutter: 20px; }

  .hero {
    padding: 132px 0 96px;
    min-height: 88vh;
    display: flex;
    align-items: center;
  }

  .hero .wrap { gap: 34px; width: 100%; }

  .hero h1 { font-size: clamp(2.5rem, 13vw, 3.4rem); }

  .hero h1 .hero-sub { font-size: 0.34em; margin-top: 14px; }

  .hero-copy { font-size: 0.98rem; margin-top: 20px; }

  /* Stacked full-width buttons read better than two cramped ones */
  .hero-actions { flex-direction: column; gap: 12px; margin-top: 30px; }
  .hero-actions .btn { width: 100%; }

  /* Two columns of meta instead of one long stack */
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 16px;
    margin-top: 40px;
  }

  .hero-meta div:last-child { grid-column: 1 / -1; }

  .hero-controls { bottom: 58px; }

  section { padding: 56px 0; }

  .offer-item { padding: 28px 22px; }

  .status-panel { padding: 36px 22px; }

  .carousel-track > .food-card { flex-basis: 88%; }
}

/* --- Large phones / small tablets --- */
@media (min-width: 421px) and (max-width: 767px) {
  .hero { padding: 150px 0 104px; }
  .hero-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* --- Tablet portrait: the 4-up offer grid was too cramped at 2 cols,
       and the hero needed a wider measure --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { padding: 176px 0 124px; }
  .hero h1 { font-size: clamp(3.4rem, 8.5vw, 4.6rem); }
  .hero-text { max-width: 88%; }

  .hero-meta { gap: 32px; }

  /* Two-column intro at this width squeezed both sides — stack it */
  .intro { grid-template-columns: 1fr; gap: 24px; }
  .intro-body p { max-width: 62ch; }

  .section-head { align-items: flex-start; }
}

/* --- Laptop --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero { padding: 190px 0 140px; }
  .hero-text { max-width: 66%; }
  .offer-item { padding: 32px 24px; }
}

/* --- Desktop: give the composition room, not just bigger text --- */
@media (min-width: 1280px) {
  .hero h1 { font-size: clamp(4.4rem, 6vw, 6.2rem); }
  .hero-text { max-width: 620px; }
  .hero-copy { font-size: 1.12rem; }
  .hero-meta { gap: 56px; }
  .intro { gap: 80px; }
  .offer-item { padding: 44px 34px; }
}

/* --- Very wide screens: stop the layout drifting apart --- */
@media (min-width: 1800px) {
  :root { --content-width: 1360px; }
  .hero { padding: 240px 0 170px; }
  .hero h1 { font-size: 6.4rem; }
}

/* --- Short landscape (phone rotated): don't let the hero eat the screen --- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 116px 0 72px; min-height: auto; }
  .hero h1 { font-size: 2.6rem; }
  .hero-meta { margin-top: 26px; padding-top: 18px; }
  .hero-controls, .hero-slide-caption { display: none; }
}

/* ==========================================================================
   GLASS LAYER
   --------------------------------------------------------------------------
   A background photo sits behind the whole site and every surface above it
   is frosted glass. Set the photo in js/site-data.js under siteBackground,
   or drop a file into assets/background/ and point to it there.

   The glass reads as premium only if three things hold: the blur is strong
   enough to separate the panel from the photo, the panel has a visible
   bright edge, and the text on top has real contrast. All three are tuned
   below, so change the tokens rather than individual rules.
   ========================================================================== */

:root {
  /* Glass tokens. Adjust these to tune every panel at once. */
  --glass-bg: rgba(255, 253, 248, 0.58);
  --glass-bg-strong: rgba(255, 253, 248, 0.76);
  --glass-dark: rgba(36, 16, 7, 0.46);
  --glass-dark-strong: rgba(36, 16, 7, 0.68);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-edge-dark: rgba(248, 241, 223, 0.16);
  --glass-blur: 22px;
  --glass-blur-heavy: 34px;
  --glass-shadow: 0 16px 40px -18px rgba(36, 16, 7, 0.34);
  --glass-shadow-lift: 0 28px 60px -22px rgba(36, 16, 7, 0.46);
}

/* --------------------------------------------------------------------------
   Background photo
   Fixed behind everything, with a dim layer over it so text stays readable.
   -------------------------------------------------------------------------- */

.site-bg,
.site-bg-dim {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.site-bg {
  background-color: var(--brown-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.site-bg-dim {
  z-index: -1;
  background: rgba(36, 16, 7, var(--bg-dim, 0.55));
}

/* When a photo is set, the page itself goes transparent so the photo shows */
body.has-bg-image {
  background: transparent;
}

/* Sections are transparent over the photo, with a soft tint for legibility */
body.has-bg-image .story,
body.has-bg-image .menu-preview,
body.has-bg-image .menu-page-body,
body.has-bg-image .menu-page-header,
body.has-bg-image .page-header {
  background: transparent;
}

body.has-bg-image .offer {
  background: rgba(255, 253, 248, 0.14);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Text flips to cream over a photo so it stays readable */
body.has-bg-image h1,
body.has-bg-image h2,
body.has-bg-image h3,
body.has-bg-image h4 {
  color: var(--cream);
}

body.has-bg-image .intro-body p,
body.has-bg-image .menu-page-header p.lede,
body.has-bg-image .page-header p,
body.has-bg-image .category-count {
  color: rgba(248, 241, 223, 0.84);
}

body.has-bg-image .category-tabs {
  border-bottom-color: var(--glass-edge-dark);
}

body.has-bg-image .category-tabs button {
  color: var(--cream);
  border-color: var(--glass-edge-dark);
  background: rgba(36, 16, 7, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.has-bg-image .category-tabs button.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Glass navbar
   Transparent over the hero, then frosted once the page scrolls.
   -------------------------------------------------------------------------- */

.site-header.is-scrolled {
  background: var(--glass-dark);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border-bottom: 1px solid var(--glass-edge-dark);
  box-shadow: 0 8px 32px -12px rgba(36, 16, 7, 0.4);
}

/* Nav text stays cream on the frosted bar, so it reads over any photo */
.site-header.is-scrolled .brand-name,
.site-header.is-scrolled .main-nav a,
.site-header.is-scrolled .cart-link {
  color: var(--cream);
}

.site-header.is-scrolled .nav-toggle {
  color: var(--cream);
  border-color: var(--glass-edge-dark);
  background: rgba(255, 255, 255, 0.06);
}

.brand img {
  box-shadow: 0 4px 14px -6px rgba(36, 16, 7, 0.5);
}

.nav-toggle {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, color 0.35s ease, border-color 0.35s ease;
}

.nav-toggle:hover {
  background: rgba(201, 90, 26, 0.85);
  border-color: var(--orange);
}

.cart-link {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge-dark);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.35s ease;
}

.cart-link:hover {
  background: rgba(201, 90, 26, 0.9);
  border-color: var(--orange);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Glass mobile nav
   -------------------------------------------------------------------------- */

.mobile-nav {
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(140%);
}

.mobile-nav ul { gap: 4px; }

.mobile-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 1.55rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}

.mobile-nav li a:hover,
.mobile-nav li a:active {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--glass-edge-dark);
  padding-left: 26px;
}

.mobile-nav li a::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  transform: rotate(-45deg);
  opacity: 0.8;
}

.mobile-nav .contact-line {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-edge-dark);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Close button for the drawer */
.mobile-nav-close {
  position: absolute;
  top: 26px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.3s ease;
}

.mobile-nav-close:hover {
  background: rgba(201, 90, 26, 0.9);
  transform: rotate(90deg);
}

.mobile-nav-close svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Glass food cards
   -------------------------------------------------------------------------- */

.food-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}

/* Bright top edge, the detail that makes glass look like glass */
.food-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  z-index: 4;
  pointer-events: none;
}

.food-card:hover,
.food-card:focus-within {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-lift);
}

body.has-bg-image .food-card {
  background: rgba(36, 16, 7, 0.42);
  border-color: var(--glass-edge-dark);
}

body.has-bg-image .food-card:hover {
  background: rgba(36, 16, 7, 0.56);
}

body.has-bg-image .food-card-body h3 { color: var(--cream); }
body.has-bg-image .food-card-body p { color: rgba(248, 241, 223, 0.8); }
body.has-bg-image .food-card-footer { border-top-color: var(--glass-edge-dark); }
body.has-bg-image .card-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-edge-dark);
  color: var(--cream);
}

/* Frosted price chip */
.food-price {
  background: rgba(201, 90, 26, 0.86);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   Glass panels, offer grid and footer
   -------------------------------------------------------------------------- */

.offer-grid {
  background: transparent;
  border-color: var(--glass-edge);
  border-radius: 18px;
  gap: 1px;
}

.offer-item {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.offer-item:hover { background: var(--glass-bg-strong); }

body.has-bg-image .offer-grid { border-color: var(--glass-edge-dark); }

body.has-bg-image .offer-item {
  background: rgba(36, 16, 7, 0.4);
}

body.has-bg-image .offer-item:hover { background: rgba(36, 16, 7, 0.56); }
body.has-bg-image .offer-item p { color: rgba(248, 241, 223, 0.82); }

.status-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}

body.has-bg-image .status-panel {
  background: rgba(36, 16, 7, 0.46);
  border-color: var(--glass-edge-dark);
}

body.has-bg-image .status-panel p { color: rgba(248, 241, 223, 0.82); }

.menu-notice {
  background: rgba(201, 90, 26, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(201, 90, 26, 0.4);
  border-radius: 14px;
}

body.has-bg-image .menu-notice { color: var(--cream); }

.cart-line-preview {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 16px;
  border-style: solid;
  border-color: var(--glass-edge);
}

body.has-bg-image .cart-line-preview {
  background: rgba(36, 16, 7, 0.42);
  border-color: var(--glass-edge-dark);
}

.checkout-form-preview input,
.checkout-form-preview textarea {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--glass-edge);
  border-radius: 12px;
}

body.has-bg-image .checkout-form-preview input,
body.has-bg-image .checkout-form-preview textarea {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-edge-dark);
  color: var(--cream);
}

body.has-bg-image .checkout-form-preview label { color: var(--cream); }

.site-footer {
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  border-top: 1px solid var(--glass-edge-dark);
}

body.has-bg-image .site-footer h4,
body.has-bg-image .site-footer .footer-brand span { color: var(--cream); }

/* Buttons pick up a glass edge too */
.btn-outline {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-dark {
  background: var(--glass-dark-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--glass-edge-dark);
}

/* --------------------------------------------------------------------------
   Fallback for browsers with no backdrop-filter
   Without this the panels would be flat washes with nothing behind them.
   -------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: rgba(255, 253, 248, 0.94);
    --glass-bg-strong: rgba(255, 253, 248, 0.98);
    --glass-dark: rgba(36, 16, 7, 0.93);
    --glass-dark-strong: rgba(36, 16, 7, 0.97);
  }

  body.has-bg-image .food-card,
  body.has-bg-image .offer-item,
  body.has-bg-image .status-panel { background: rgba(36, 16, 7, 0.9); }
}

/* ==========================================================================
   CART DRAWER
   --------------------------------------------------------------------------
   Slides in from the right on desktop and up from the bottom on phones.
   Frosted glass, spring easing, staggered rows. The WhatsApp button sits
   pinned at the foot so it is always reachable.
   ========================================================================== */

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(20, 9, 4, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cart-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  z-index: 195;
  display: flex;
  flex-direction: column;
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border: 1px solid var(--glass-edge-dark);
  color: var(--cream);
  box-shadow: -20px 0 70px -20px rgba(20, 9, 4, 0.7);
  transition: transform 0.52s cubic-bezier(0.22, 1.12, 0.36, 1);
  will-change: transform;
}

/* Phones: a sheet that rises from the bottom */
.cart-drawer {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  border-radius: 24px 24px 0 0;
  transform: translateY(102%);
}

.cart-drawer.is-open { transform: translateY(0); }

/* A grab handle, so it reads as a sheet you can pull */
.cart-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(248, 241, 223, 0.32);
  margin: 12px auto 0;
  flex: 0 0 auto;
}

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--glass-edge-dark);
  flex: 0 0 auto;
}

.cart-drawer-head h2 {
  color: var(--cream);
  font-size: 1.24rem;
}

.cart-drawer-head .count-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--orange-tint);
  margin-top: 3px;
}

.cart-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--glass-edge-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.35s ease;
}

.cart-close:hover {
  background: rgba(201, 90, 26, 0.9);
  transform: rotate(90deg);
}

.cart-close svg { width: 17px; height: 17px; }

/* ---- items ---- */

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  -webkit-overflow-scrolling: touch;
}

.cart-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-edge-dark);
  margin-bottom: 10px;
  animation: cartRowIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes cartRowIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Row sliding out when removed */
.cart-item.is-leaving {
  animation: cartRowOut 0.34s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes cartRowOut {
  to { opacity: 0; transform: translateX(40px); height: 0; margin: 0; padding: 0; }
}

.cart-item-thumb {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(140deg, #6B3A22, var(--brown-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 241, 223, 0.5);
}

.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-thumb svg { width: 20px; height: 20px; }

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-info h4 {
  color: var(--cream);
  font-size: 0.96rem;
  font-weight: 500;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-info .unit {
  font-size: 0.8rem;
  color: var(--orange-tint);
}

/* Quantity stepper */
.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  background: rgba(20, 9, 4, 0.4);
  border: 1px solid var(--glass-edge-dark);
  border-radius: 999px;
  padding: 3px;
}

.qty button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.18s ease;
}

.qty button:hover { background: rgba(201, 90, 26, 0.85); }
.qty button:active { transform: scale(0.88); }

.qty .qty-value {
  min-width: 22px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Value pops when it changes */
.qty .qty-value.is-bumped { animation: qtyPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes qtyPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.4); color: var(--orange); }
  100% { transform: scale(1); }
}

/* Empty state */
.cart-empty {
  text-align: center;
  padding: 44px 20px;
}

.cart-empty .ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(201, 90, 26, 0.18);
  border: 1px solid rgba(201, 90, 26, 0.4);
  color: var(--orange-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  animation: emptyFloat 3.4s ease-in-out infinite;
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.cart-empty .ring svg { width: 26px; height: 26px; }

.cart-empty h3 { color: var(--cream); font-size: 1.1rem; margin-bottom: 8px; }
.cart-empty p { color: rgba(248, 241, 223, 0.74); font-size: 0.9rem; }

/* ---- foot ---- */

.cart-foot {
  flex: 0 0 auto;
  padding: 18px 22px 24px;
  border-top: 1px solid var(--glass-edge-dark);
  background: rgba(20, 9, 4, 0.34);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.cart-total-row .label { font-size: 0.88rem; color: var(--orange-tint); }

.cart-total-row .value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.cart-total-row .value.is-bumped { animation: qtyPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

.btn-whatsapp {
  width: 100%;
  background: #1FA855;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-whatsapp:hover { background: #178E47; }

.cart-foot .note {
  font-size: 0.76rem;
  color: rgba(248, 241, 223, 0.6);
  text-align: center;
  margin-top: 12px;
}

/* ---- desktop: side panel instead of a bottom sheet ---- */

@media (min-width: 768px) {
  .cart-drawer {
    left: auto;
    top: 0;
    bottom: 0;
    width: 420px;
    max-height: none;
    border-radius: 0;
    border-right: none;
    transform: translateX(102%);
  }

  .cart-drawer.is-open { transform: translateX(0); }

  .cart-handle { display: none; }

  .cart-drawer-head { padding: 26px 26px 20px; }
  .cart-body { padding: 22px 26px; }
  .cart-foot { padding: 20px 26px 26px; }
}

/* --------------------------------------------------------------------------
   Add to cart feedback
   A small chip flies from the card to the cart icon, the icon bumps, and the
   button briefly confirms. Short and sharp, not a long animation.
   -------------------------------------------------------------------------- */

.fly-chip {
  position: fixed;
  z-index: 500;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(36, 16, 7, 0.6);
  pointer-events: none;
}

.fly-chip svg { width: 18px; height: 18px; }

/* Button confirm state */
.add-to-cart.is-added {
  background: #1FA855;
  animation: addedPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes addedPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Ripple from the tap point */
.add-to-cart .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: rippleOut 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes rippleOut {
  to { transform: scale(2.6); opacity: 0; }
}

/* Whole card acknowledges the tap */
.food-card.is-picked {
  animation: cardPick 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardPick {
  0%   { transform: translateY(-7px) scale(1); }
  35%  { transform: translateY(-7px) scale(0.975); }
  100% { transform: translateY(-7px) scale(1); }
}

/* Cart badge bump, stronger than the base one */
.cart-count.is-bumped {
  animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55); background: #1FA855; }
  100% { transform: scale(1); }
}

/* Toast confirmation */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 300;
  transform: translate(-50%, 130%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--glass-dark-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge-dark);
  color: var(--cream);
  font-size: 0.88rem;
  box-shadow: 0 18px 44px -16px rgba(20, 9, 4, 0.7);
  transition: transform 0.46s cubic-bezier(0.22, 1.12, 0.36, 1);
  max-width: calc(100vw - 40px);
}

.toast.is-open { transform: translate(-50%, 0); }

.toast .tick {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1FA855;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast .tick svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-scrim, .toast { transition-duration: 0.01ms; }
  .cart-item, .cart-empty .ring, .food-card.is-picked,
  .add-to-cart.is-added, .cart-count.is-bumped { animation: none; }
  .fly-chip { display: none; }
}

/* ==========================================================================
   LOADING SCREEN
   --------------------------------------------------------------------------
   The logo holds the screen while the fonts, the background photo and the
   first hero slide load, then it lifts away. Without this the page would
   flash unstyled text and half loaded images on a slow connection.
   Turn it off or retime it in the loader block of js/site-data.js.
   ========================================================================== */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brown-deep);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Warm glow behind the logo, same ember as the hero */
.site-loader::before {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 90, 26, 0.3), transparent 62%);
  animation: loaderGlow 2.6s ease-in-out infinite alternate;
}

@keyframes loaderGlow {
  from { transform: scale(0.9); opacity: 0.75; }
  to   { transform: scale(1.12); opacity: 1; }
}

.loader-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}

.loader-logo {
  width: 168px;
  max-width: 62vw;
  margin: 0 auto 26px;
  animation: loaderLogoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.loader-logo img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.6);
}

@keyframes loaderLogoIn {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.loader-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--orange-tint);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
  animation: loaderLogoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

/* Progress bar that fills, then loops while waiting */
.loader-bar {
  width: 160px;
  max-width: 60vw;
  height: 3px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(248, 241, 223, 0.16);
  overflow: hidden;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #E89A5C);
  animation: loaderSlide 1.15s ease-in-out infinite;
}

@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Lift away once loaded */
.site-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

/* Hold the page still underneath while the loader is up */
body.is-loading {
  overflow: hidden;
}

/* The page fades up as the loader leaves */
/* Superseded by the animation based failsafe further down, which reveals
   these on its own even if no script ever runs. */

main, .site-header, .site-footer {
  transition: opacity 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .site-loader::before,
  .loader-logo,
  .loader-text { animation: none; }
  .loader-bar span { animation-duration: 2s; }
}

/* ==========================================================================
   HERO META FIX
   --------------------------------------------------------------------------
   The hours, location and phone row was getting lost: the parallax faded
   the whole hero as you scrolled, so by the time the row came into view it
   had almost no opacity left. The parallax now moves only the text block
   above it, and the row itself is a proper set of glass tiles so it reads
   clearly over any photo.
   ========================================================================== */

.hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 44px;
  padding-top: 0;
  border-top: none;
}

.hero-meta div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--glass-edge-dark);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  font-size: 0.92rem;
  color: var(--cream);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-meta div:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(201, 90, 26, 0.5);
  transform: translateY(-2px);
}

.hero-meta strong {
  display: block;
  color: var(--orange-tint);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hero-meta .meta-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(201, 90, 26, 0.9);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-meta .meta-ico svg { width: 16px; height: 16px; }

@media (min-width: 640px) {
  .hero-meta { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero-meta div { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (min-width: 1024px) {
  .hero-meta { max-width: 720px; }
}

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Four columns on a glass panel, with a call to action band across the top
   and an open now flag that checks the clock against the opening hours.
   Every value comes from js/site-data.js.
   ========================================================================== */

.site-footer { padding: 0 0 26px; }

/* ---- top band ---- */

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 0 38px;
  border-bottom: 1px solid var(--glass-edge-dark);
  margin-bottom: 44px;
}

.footer-cta-label {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.footer-cta h2 {
  color: var(--cream);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  max-width: 22ch;
  line-height: 1.2;
}

.footer-cta-btn {
  align-self: flex-start;
  width: auto;
  padding: 15px 26px;
}

/* ---- columns ---- */

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
}

.footer-col h4 {
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.72;
}

.footer-brand {
  display: block;
  margin-bottom: 18px;
}

.footer-brand img {
  height: auto;
  width: 132px;
  border-radius: 12px;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}

.footer-blurb {
  color: rgba(248, 241, 223, 0.8);
  font-size: 0.93rem;
  line-height: 1.7;
  max-width: 34ch;
}

.footer-tagline {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--orange);
}

/* ---- contact list ---- */

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  color: rgba(248, 241, 223, 0.86);
  line-height: 1.4;
}

.footer-list a {
  color: rgba(248, 241, 223, 0.86);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-list a:hover {
  color: var(--white);
  border-bottom-color: var(--orange);
}

.footer-ico {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge-dark);
  color: var(--orange-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-ico svg { width: 15px; height: 15px; }

/* ---- hours ---- */

.hours-card {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-edge-dark);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hours-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--glass-edge-dark);
}

.hours-row .days {
  font-size: 0.82rem;
  color: rgba(248, 241, 223, 0.7);
}

.hours-row .time {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.32rem;
  color: var(--cream);
}

.open-flag {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: rgba(248, 241, 223, 0.74);
}

.open-flag .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C24A3A;
  flex: 0 0 auto;
}

.open-flag.is-open { color: #7BD8A4; }

.open-flag.is-open .pulse {
  background: #4ED184;
  box-shadow: 0 0 0 0 rgba(78, 209, 132, 0.7);
  animation: openPulse 2.2s ease-out infinite;
}

@keyframes openPulse {
  70%  { box-shadow: 0 0 0 9px rgba(78, 209, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 209, 132, 0); }
}

/* ---- socials ---- */

.social-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-edge-dark);
  transition: background-color 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(201, 90, 26, 0.5);
  transform: translateX(3px);
}

.social-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icon svg { width: 17px; height: 17px; }

.social-link:hover .social-icon { transform: scale(1.1); }

/* Brand colours, so the icons read as the real thing */
.social-link[aria-label="Instagram"] .social-icon {
  background: linear-gradient(45deg, #F9CE34, #EE2A7B 50%, #6228D7);
}

.social-link[aria-label="Tiktok"] .social-icon {
  background: #111;
  box-shadow: 1px 0 0 #25F4EE inset, -1px 0 0 #FE2C55 inset;
}

.social-link[aria-label="Facebook"] .social-icon { background: #1877F2; }
.social-link[aria-label="X"] .social-icon { background: #111; }
.social-link[aria-label="Whatsapp"] .social-icon { background: #1FA855; }

.social-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.social-text strong {
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 500;
}

.social-text span {
  font-size: 0.79rem;
  color: rgba(248, 241, 223, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- bottom ---- */

.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
}

/* ---- footer layout ---- */

@media (min-width: 640px) {
  .footer-main { grid-template-columns: repeat(2, 1fr); gap: 38px 34px; }
  .footer-col-brand { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .footer-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    padding: 52px 0 46px;
  }
  .footer-cta-btn { flex: 0 0 auto; }
}

@media (min-width: 1024px) {
  .site-footer { padding-bottom: 30px; }
  .footer-main {
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 44px;
  }
  .footer-col-brand { grid-column: auto; }
}

/* ==========================================================================
   CLOSED BANNER
   Shows across the top when the admin turns ordering off.
   ========================================================================== */

.closed-banner {
  position: relative;
  z-index: 5;
  margin-top: 74px;
  padding: 14px 0;
  background: rgba(194, 74, 58, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.closed-banner .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.closed-banner p {
  color: #fff;
  font-size: 0.92rem;
}

.closed-banner .dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  animation: openPulse 2s ease-out infinite;
}

/* The hero sits under the fixed header, so no top margin is needed there */
.hero + .closed-banner,
body:not(.orders-closed) .closed-banner { margin-top: 0; }

/* Small note used when the menu has nothing in it yet */
.empty-note {
  padding: 40px 24px;
  text-align: center;
  color: var(--brown-soft);
  font-size: 0.95rem;
}

body.has-bg-image .empty-note { color: rgba(248, 241, 223, 0.8); }

/* ==========================================================================
   MENU CATEGORY HEADS
   ========================================================================== */

.category-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

body.has-bg-image .category-head { border-bottom-color: var(--glass-edge-dark); }

.category-head h2 { font-size: 1.44rem; }

.category-head .category-count {
  margin: 0;
  font-size: 0.8rem;
  color: var(--brown-soft);
  white-space: nowrap;
}

.menu-category-block + .menu-category-block { margin-top: 56px; }

/* Item badge on the photo */
.item-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(255, 253, 248, 0.92);
  color: var(--brown-deep);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px -4px rgba(36, 16, 7, 0.4);
}

/* ==========================================================================
   LOADER HANDOFF
   --------------------------------------------------------------------------
   The hero entrance animations used to start the moment the page loaded,
   which meant they played out behind the loading screen and the visitor
   only caught the clipped tail of them as it lifted. Holding every entrance
   animation paused while the loader is up fixes that: the loader lifts
   first, then the hero plays from the beginning.
   ========================================================================== */

body.is-loading .line-mask > span,
body.is-loading .hero-eyebrow-line,
body.is-loading .hero-sub,
body.is-loading .hero-copy,
body.is-loading .hero-actions,
body.is-loading .hero-meta,
body.is-loading .drip-divider,
body.is-loading .hero::before,
body.is-loading .hero-slide.is-active img,
body.is-loading .hero-slide.is-active .slide-placeholder {
  animation-play-state: paused;
}

/* The loader lifts and scales away rather than just fading, so the handoff
   reads as one movement instead of two separate events */
.site-loader {
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 1, 1),
    visibility 0.55s linear,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-loader.is-done {
  transform: scale(1.04) translateY(-8px);
}

/* Inner content drops away slightly faster than the panel */
.loader-inner {
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 1, 1);
}

.site-loader.is-done .loader-inner {
  opacity: 0;
  transform: translateY(-14px);
}

/* Page surfaces come up in a short sequence rather than all at once */
/* Held hidden while the loader is up, then revealed by the animation on
   their own after five seconds. That makes the reveal independent of any
   script: if JS never runs, the page still appears. Normally the loader
   removes .is-loading long before this animation reaches its end. */
body.is-loading .site-header,
body.is-loading main,
body.is-loading .site-footer {
  animation: loadSafety 5s linear forwards;
}

@keyframes loadSafety {
  0%   { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

.site-header { transition: opacity 0.55s ease 0.05s, background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease; }
main { transition: opacity 0.6s ease 0.12s; }
.site-footer { transition: opacity 0.6s ease 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .site-loader.is-done,
  .loader-inner,
  .site-loader.is-done .loader-inner { transform: none; }
}

/* ==========================================================================
   HEADER ON INNER PAGES
   --------------------------------------------------------------------------
   The header starts transparent with cream text, which works over the dark
   hero on the homepage. Every other page starts on a light background, so
   cream on cream made the whole navbar disappear. Pages without a hero carry
   .page-inner on the body and get the frosted bar from the start.
   ========================================================================== */

body.page-inner .site-header {
  background: var(--glass-dark);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border-bottom: 1px solid var(--glass-edge-dark);
  box-shadow: 0 8px 32px -12px rgba(36, 16, 7, 0.4);
}

/* Text is cream on that frosted bar, same as the scrolled state */
body.page-inner .brand-name,
body.page-inner .main-nav a,
body.page-inner .cart-link {
  color: var(--cream);
}

body.page-inner .nav-toggle {
  color: var(--cream);
  border-color: var(--glass-edge-dark);
  background: rgba(255, 255, 255, 0.06);
}

/* Inner pages tighten the bar slightly on scroll rather than changing colour */
body.page-inner .site-header.is-scrolled {
  padding: 10px 0;
  box-shadow: 0 10px 36px -12px rgba(36, 16, 7, 0.5);
}

/* Those pages start below the bar, so give the first section room */
body.page-inner .menu-page-header,
body.page-inner .page-header { padding-top: 132px; }

@media (min-width: 768px) {
  body.page-inner .menu-page-header,
  body.page-inner .page-header { padding-top: 152px; }
}

/* ==========================================================================
   HERO ACTIONS AND META, REWORKED
   --------------------------------------------------------------------------
   Two problems with the old block. The two buttons carried equal weight, so
   neither led, and asking someone to open WhatsApp before they have seen any
   food is the wrong first step. And the three meta tiles were large enough to
   compete with the headline.

   Now: one clear primary action, WhatsApp as a quieter second, and the
   hours, location and phone reduced to a single slim line of chips.
   ========================================================================== */

.hero-actions {
  align-items: center;
  gap: 10px;
}

/* Primary action gets the weight */
.hero-actions .btn-primary {
  padding: 17px 34px;
  font-size: 1rem;
  border-radius: 12px;
  box-shadow: 0 14px 34px -12px rgba(201, 90, 26, 0.7);
}

/* WhatsApp becomes a quieter text action with a rule under it */
.hero-actions .btn-outline {
  background: transparent;
  border: none;
  padding: 16px 12px;
  color: var(--cream);
  position: relative;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-actions .btn-outline::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 1px;
  background: rgba(248, 241, 223, 0.45);
  transform: scaleX(0.999);
  transform-origin: left;
  transition: background-color 0.3s ease;
}

.hero-actions .btn-outline:hover {
  color: var(--white);
}

.hero-actions .btn-outline:hover::after {
  background: var(--orange);
}

/* ---- meta reduced to a slim chip row ---- */

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
  max-width: none;
}

.hero-meta div {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-edge-dark);
  font-size: 0.82rem;
  line-height: 1.25;
}

.hero-meta div:hover { transform: none; }

/* Label and value sit on one line now, not stacked */
.hero-meta strong {
  display: none;
}

.hero-meta .meta-ico {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(201, 90, 26, 0.9);
}

.hero-meta .meta-ico svg { width: 12px; height: 12px; }

.hero-meta a { color: inherit; }
.hero-meta a:hover { color: var(--white); }

@media (min-width: 640px) {
  .hero-meta { gap: 9px; }
  .hero-meta div { flex-direction: row; align-items: center; gap: 8px; }
}

@media (min-width: 1024px) {
  .hero-meta { margin-top: 40px; }
  .hero-meta div { font-size: 0.86rem; padding: 9px 16px 9px 10px; }
}

/* Small phones: let the chips wrap two up rather than one long column */
@media (max-width: 420px) {
  .hero-meta { gap: 7px; }
  .hero-meta div { font-size: 0.78rem; padding: 7px 12px 7px 8px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary { width: 100%; }
  .hero-actions .btn-outline { width: 100%; }
}

/* ==========================================================================
   SPLIT HEADINGS AND COUNTERS
   --------------------------------------------------------------------------
   Words rise out of a mask one after another. This is the same idea as the
   hero headline, reused on section headings so the page has one consistent
   way of introducing text rather than a different effect each time.
   ========================================================================== */

.split-lines {
  /* Words are inline blocks, so the heading needs its own line spacing */
  line-height: 1.16;
}

.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* A little room so descenders such as g and y are not clipped */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--w, 0) * 62ms);
}

.is-split-in .word {
  transform: translateY(0);
}

/* Counters sit above the card text and keep a fixed width so the layout
   does not jump while the number is still counting */
.offer-item .num {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

/* A short rule that draws itself under the number as the card arrives */
.offer-item {
  position: relative;
  overflow: hidden;
}

.offer-item .num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.offer-item .num {
  position: relative;
  display: inline-block;
}

.offer-item.is-revealed .num::after {
  transform: scaleX(1);
}

/* Wash of colour that follows the cursor across the card */
.offer-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(201, 90, 26, 0.14),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.offer-item:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .word { transform: none; transition: none; }
  .offer-item .num::after { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   MOBILE NAV, ARC VERSION
   --------------------------------------------------------------------------
   The old drawer slid down as one solid block, which is the movement every
   template has used for a decade. This one opens differently: a circle grows
   out of the toggle button until it fills the screen, a large arc sweeps in
   behind the links, and the links themselves sit along that curve, each one
   arriving after the last.

   The circle is a clip-path on the panel, anchored to the top right where
   the toggle sits, so the opening reads as coming out of the button the
   visitor just pressed.
   ========================================================================== */

.mobile-nav {
  /* Override the old translateY drawer entirely */
  transform: none;
  clip-path: circle(0% at calc(100% - 42px) 42px);
  transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1);
  padding: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.mobile-nav.is-open {
  clip-path: circle(148% at calc(100% - 42px) 42px);
  pointer-events: auto;
}

/* The arc itself: an oversized circle sitting off the left edge, so only
   its curve crosses the screen behind the links */
.nav-arc {
  position: absolute;
  top: 50%;
  right: -46%;
  width: 150vmax;
  height: 150vmax;
  border-radius: 50%;
  transform: translateY(-50%) scale(0.72);
  background:
    radial-gradient(circle at 30% 30%, rgba(201, 90, 26, 0.32), transparent 58%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(248, 241, 223, 0.12);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    opacity 0.7s ease 0.1s;
  pointer-events: none;
}

.mobile-nav.is-open .nav-arc {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

/* A second, thinner ring for depth */
.nav-arc::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(248, 241, 223, 0.08);
}

.mobile-nav-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 92px var(--gutter) 34px;
}

.nav-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 26px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.34s, transform 0.5s ease 0.34s;
}

.mobile-nav.is-open .nav-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* ---- links on the curve ----
   Each item is nudged right by an amount that follows the arc, so the
   column of links bends outward in the middle rather than sitting flush. */

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: auto;
}

/* Hidden only inside a panel that is itself clipped shut, so these can
   never be stranded on a visible page */
.mobile-nav li {
  opacity: 0;
  /* The curve: items step out then back, tracing the arc */
  transform: translate(calc(var(--n) * 14px + 26px), 26px) rotate(-3deg);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.3s + var(--n) * 0.09s);
}

.mobile-nav.is-open li {
  opacity: 1;
  transform: translate(calc(var(--n) * 12px), 0) rotate(0deg);
}

.mobile-nav li a {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
  padding: 13px 20px 13px 18px;
  border-radius: 999px 18px 18px 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

/* The old chevron is gone, the number leads instead */
.mobile-nav li a::after { content: none; }

.mobile-nav li a:hover,
.mobile-nav li a:active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(201, 90, 26, 0.45);
  transform: translateX(10px);
  padding-left: 18px;
  color: var(--white);
}

.nav-num {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
  flex: 0 0 auto;
  padding-top: 0.2em;
}

.nav-label { line-height: 1.05; }

/* ---- foot ---- */

.nav-foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease 0.58s, transform 0.6s ease 0.58s;
}

.mobile-nav.is-open .nav-foot {
  opacity: 1;
  transform: translateY(0);
}

.nav-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #1FA855;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 20px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.nav-wa svg { width: 16px; height: 16px; }
.nav-wa:hover { background: #178E47; transform: translateY(-2px); }

.mobile-nav .contact-line {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0.86rem;
  line-height: 1.75;
  color: rgba(248, 241, 223, 0.66);
}

/* Close button rides above the arc */
.mobile-nav-close {
  z-index: 3;
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.4s ease 0.3s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, background-color 0.25s ease;
}

.mobile-nav.is-open .mobile-nav-close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Toggle button spins as the menu opens */
.nav-toggle {
  transition: background-color 0.3s ease, color 0.35s ease, border-color 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-toggle[aria-expanded="true"] {
  transform: rotate(90deg) scale(0.9);
}

/* Taller phones get a little more curve in the link column */
@media (min-height: 700px) {
  .mobile-nav li { transition-delay: calc(0.3s + var(--n) * 0.1s); }
  .mobile-nav.is-open li { transform: translate(calc(var(--n) * 16px), 0); }
}

/* Short landscape: drop the arc, there is no room for it */
@media (max-height: 460px) {
  .nav-arc { display: none; }
  .mobile-nav-inner { padding-top: 74px; justify-content: flex-start; }
  .mobile-nav li a { font-size: 1.5rem; padding: 9px 16px; }
  .nav-wa { margin-bottom: 12px; }
  .mobile-nav .contact-line { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition-duration: 0.01ms; }
  .nav-arc,
  .mobile-nav li,
  .nav-eyebrow,
  .nav-foot,
  .mobile-nav-close { transition-duration: 0.01ms; transform: none; opacity: 1; }
  .nav-toggle[aria-expanded="true"] { transform: none; }
}

/* ==========================================================================
   ORDER PAGE
   --------------------------------------------------------------------------
   Two columns on desktop: the lines on the left, a sticky summary on the
   right. Each line shows unit price, times quantity, equals line total, in
   that order, so the arithmetic is visible rather than implied.
   ========================================================================== */

.cart-page { padding-top: 34px; }

.order-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

/* ---- the lines ---- */

.order-list {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  overflow: hidden;
}

body.has-bg-image .order-list {
  background: rgba(36, 16, 7, 0.44);
  border-color: var(--glass-edge-dark);
}

.order-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

body.has-bg-image .order-list-head {
  border-bottom-color: var(--glass-edge-dark);
  color: rgba(248, 241, 223, 0.7);
}

.order-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  grid-template-areas:
    "thumb name"
    "sum   sum"
    "qty   qty";
  gap: 12px 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  animation: cartRowIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-bg-image .order-row { border-bottom-color: var(--glass-edge-dark); }

.order-row:last-child { border-bottom: none; }

.order-row.is-leaving {
  animation: cartRowOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.order-thumb {
  grid-area: thumb;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, #6B3A22, var(--brown-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 241, 223, 0.5);
}

.order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-thumb svg { width: 22px; height: 22px; }

.order-name { grid-area: name; min-width: 0; }

.order-name h3 {
  font-size: 1.04rem;
  font-weight: 600;
  margin-bottom: 5px;
}

body.has-bg-image .order-name h3 { color: var(--cream); }

.order-remove {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--brown-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.order-remove:hover {
  color: #C24A3A;
  border-bottom-color: #C24A3A;
}

body.has-bg-image .order-remove { color: rgba(248, 241, 223, 0.62); }

/* ---- the arithmetic, laid out plainly ---- */

.order-sum {
  grid-area: sum;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(201, 90, 26, 0.09);
  border: 1px solid rgba(201, 90, 26, 0.22);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.order-sum .unit { color: var(--brown-soft); }
.order-sum .times,
.order-sum .equals { color: var(--orange); font-weight: 600; }

.order-sum .qty-count {
  min-width: 1.4em;
  text-align: center;
  font-weight: 700;
  color: var(--brown-text);
}

.order-sum .line-total {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.14rem;
  color: var(--orange);
  font-weight: 600;
}

.order-sum .line-total.is-bumped {
  animation: qtyPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.has-bg-image .order-sum {
  background: rgba(201, 90, 26, 0.16);
  color: var(--cream);
}

body.has-bg-image .order-sum .unit { color: rgba(248, 241, 223, 0.78); }
body.has-bg-image .order-sum .qty-count { color: var(--cream); }

.order-qty { grid-area: qty; }

.order-qty .qty {
  background: var(--brown-deep);
  border-color: var(--glass-edge-dark);
}

.order-qty .qty button { color: var(--cream); }

.order-qty .qty .qty-value { color: var(--cream); }

/* ---- summary column ---- */

.order-summary {
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border: 1px solid var(--glass-edge-dark);
  border-radius: 20px;
  padding: 24px 22px;
  color: var(--cream);
}

.order-summary h2 {
  color: var(--cream);
  font-size: 1.16rem;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-edge-dark);
}

.summary-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--glass-edge-dark);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  color: rgba(248, 241, 223, 0.84);
  font-variant-numeric: tabular-nums;
}

.summary-line em {
  font-style: normal;
  color: var(--orange);
  font-weight: 600;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.summary-total .label {
  font-size: 0.82rem;
  color: var(--orange-tint);
  max-width: 12ch;
}

.summary-total .value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.85rem;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.summary-warn {
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(201, 90, 26, 0.18);
  border: 1px solid rgba(201, 90, 26, 0.4);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--cream);
  margin-bottom: 16px;
}

.summary-note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(248, 241, 223, 0.62);
  margin-top: 13px;
}

.summary-back {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--orange-tint);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease;
}

.summary-back:hover { color: var(--white); }

.order-empty { max-width: 520px; margin: 0 auto; }

/* ---- layout up ---- */

@media (min-width: 560px) {
  .order-row {
    grid-template-columns: 70px 1fr auto;
    grid-template-areas:
      "thumb name qty"
      "sum   sum  sum";
    align-items: center;
  }
  .order-thumb { width: 70px; height: 70px; }
}

@media (min-width: 900px) {
  .order-layout { grid-template-columns: 1.55fr 1fr; gap: 30px; }

  .order-summary {
    position: sticky;
    top: 110px;
  }

  .order-row {
    grid-template-columns: 74px 1.3fr auto auto;
    grid-template-areas: "thumb name sum qty";
    gap: 18px;
    padding: 20px 22px;
  }

  .order-thumb { width: 74px; height: 74px; }

  .order-sum {
    min-width: 268px;
    margin: 0;
  }
}

/* ==========================================================================
   HERO BUTTONS, CORRECTED
   --------------------------------------------------------------------------
   The WhatsApp action was reduced to an underlined text link to give the
   menu button clear priority. That went too far: it stopped reading as a
   button at all, and the most direct way to order looked like a footnote.

   Both are buttons again. Priority now comes from fill and size rather than
   from taking the button away. The menu button is solid orange and larger.
   WhatsApp is a glass button in its own green, so it is clearly tappable and
   clearly the second option.
   ========================================================================== */

.btn-hero-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 12px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--cream);
  background: rgba(31, 168, 85, 0.22);
  border: 1px solid rgba(31, 168, 85, 0.6);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    transform 0.2s ease;
}

.btn-hero-wa svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #4FD188;
  transition: color 0.28s ease;
}

.btn-hero-wa:hover {
  background: #1FA855;
  border-color: #1FA855;
  color: var(--white);
}

.btn-hero-wa:hover svg { color: var(--white); }

.btn-hero-wa:active { transform: translateY(1px); }

/* Remove the text-link treatment that was applied to .btn-outline here */
.hero-actions .btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge-dark);
  padding: 16px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-actions .btn-outline::after { content: none; }

@media (max-width: 420px) {
  .hero-actions .btn-hero-wa { width: 100%; }
}

/* ==========================================================================
   CHECKOUT FORM NOTE
   ========================================================================== */

.form-note {
  margin-top: 6px;
  padding: 13px 15px;
  border-radius: 11px;
  background: rgba(201, 90, 26, 0.12);
  border: 1px solid rgba(201, 90, 26, 0.3);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--brown-soft);
}

body.has-bg-image .form-note { color: rgba(248, 241, 223, 0.86); }

/* ==========================================================================
   ITEM OPTIONS SHEET
   --------------------------------------------------------------------------
   Opens when a dish has choices. Bottom sheet on phones, centred panel on
   desktop. The total updates as the customer picks, and the add button stays
   disabled until every required group is answered, so nobody can add half a
   plate by accident.
   ========================================================================== */

.opt-scrim {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 9, 4, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.opt-scrim.is-open { opacity: 1; }

.opt-sheet {
  position: fixed;
  z-index: 305;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border: 1px solid var(--glass-edge-dark);
  border-radius: 26px 26px 0 0;
  color: var(--cream);
  transform: translateY(102%);
  transition: transform 0.5s cubic-bezier(0.22, 1.12, 0.36, 1);
  box-shadow: 0 -20px 60px -20px rgba(20, 9, 4, 0.8);
}

.opt-sheet.is-open { transform: translateY(0); }

.opt-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(248, 241, 223, 0.32);
  margin: 12px auto 0;
  flex: 0 0 auto;
}

.opt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--glass-edge-dark);
  flex: 0 0 auto;
}

.opt-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 5px;
}

.opt-head h3 {
  color: var(--cream);
  font-size: 1.24rem;
  line-height: 1.2;
}

.opt-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--glass-edge-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.3s ease;
}

.opt-close:hover { background: rgba(201, 90, 26, 0.9); transform: rotate(90deg); }
.opt-close svg { width: 16px; height: 16px; }

.opt-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 8px;
  -webkit-overflow-scrolling: touch;
}

.opt-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(248, 241, 223, 0.78);
  margin-bottom: 22px;
}

/* ---- a group of choices ---- */

.opt-group { margin-bottom: 24px; }

.opt-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.opt-group-head h4 {
  color: var(--cream);
  font-size: 1rem;
  font-weight: 600;
}

.opt-tag {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(248, 241, 223, 0.72);
}

.opt-tag.is-required {
  background: rgba(201, 90, 26, 0.28);
  border: 1px solid rgba(201, 90, 26, 0.5);
  color: var(--orange-tint);
}

.opt-max {
  font-size: 0.74rem;
  color: rgba(248, 241, 223, 0.55);
}

/* A required group still waiting gets a quiet marker, not a red alarm */
.opt-group.is-waiting .opt-tag.is-required {
  animation: waitPulse 2.4s ease-in-out infinite;
}

@keyframes waitPulse {
  50% { background: rgba(201, 90, 26, 0.5); }
}

.opt-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--glass-edge-dark);
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.opt-row:hover { background: rgba(255, 255, 255, 0.1); }

/* The real input is hidden but still focusable and still keyboard usable */
.opt-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.opt-mark {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(248, 241, 223, 0.4);
  position: relative;
  transition: border-color 0.22s ease, background-color 0.22s ease;
}

/* Checkboxes get a square mark so multiple choice is obvious at a glance */
.opt-row input[type="checkbox"] ~ .opt-mark { border-radius: 6px; }

.opt-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--white);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opt-row input:checked ~ .opt-mark {
  border-color: var(--orange);
  background: var(--orange);
}

.opt-row input:checked ~ .opt-mark::after { transform: scale(1); }

.opt-row input:focus-visible ~ .opt-mark {
  box-shadow: 0 0 0 3px rgba(201, 90, 26, 0.45);
}

.opt-row input:checked ~ .opt-name { color: var(--white); }

.opt-row:has(input:checked) {
  background: rgba(201, 90, 26, 0.16);
  border-color: rgba(201, 90, 26, 0.5);
}

.opt-name {
  flex: 1;
  font-size: 0.95rem;
  color: rgba(248, 241, 223, 0.92);
}

.opt-price {
  font-size: 0.84rem;
  color: var(--orange-tint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- foot ---- */

.opt-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--glass-edge-dark);
  background: rgba(20, 9, 4, 0.36);
}

.opt-total { flex: 1; min-width: 0; }

.opt-total .label {
  display: block;
  font-size: 0.74rem;
  color: var(--orange-tint);
  margin-bottom: 2px;
}

.opt-total .value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.44rem;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.opt-add {
  flex: 0 0 auto;
  padding: 14px 24px;
  border-radius: 12px;
}

/* ---- desktop: centred panel ---- */

@media (min-width: 720px) {
  .opt-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: 520px;
    max-height: 82vh;
    border-radius: 22px;
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    transition:
      transform 0.46s cubic-bezier(0.22, 1.12, 0.36, 1),
      opacity 0.3s ease;
  }

  .opt-sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .opt-handle { display: none; }
  .opt-head { padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .opt-sheet, .opt-scrim { transition-duration: 0.01ms; }
  .opt-mark::after { transition: none; }
  .opt-group.is-waiting .opt-tag.is-required { animation: none; }
}

/* ==========================================================================
   CHECKOUT
   --------------------------------------------------------------------------
   Two cards side by side on desktop, stacked on phones. The form on the
   left, the order and the send button on the right. Numbered steps at the
   top so the customer can see where they are.
   ========================================================================== */

/* ---- step trail ---- */

.co-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin-bottom: 26px;
  padding: 0;
}

.co-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: rgba(248, 241, 223, 0.5);
}

body:not(.has-bg-image) .co-steps li { color: var(--brown-soft); opacity: 0.6; }

.co-steps li span {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid currentColor;
}

.co-steps li.is-done {
  color: var(--orange);
  opacity: 1;
}

.co-steps li.is-done span {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.co-steps li.is-current {
  color: var(--cream);
  opacity: 1;
  font-weight: 600;
}

body:not(.has-bg-image) .co-steps li.is-current { color: var(--brown-deep); }

.co-steps li.is-current span {
  background: rgba(201, 90, 26, 0.18);
  border-color: var(--orange);
  color: var(--orange);
}

/* ---- layout ---- */

.co-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.co-form-card,
.co-review-card {
  border-radius: 22px;
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.co-form-card {
  background: var(--glass-bg);
  padding: 24px 22px 26px;
}

body.has-bg-image .co-form-card {
  background: rgba(36, 16, 7, 0.46);
  border-color: var(--glass-edge-dark);
}

.co-review-card {
  background: var(--glass-dark-strong);
  border-color: var(--glass-edge-dark);
  color: var(--cream);
  padding: 24px 22px 26px;
}

/* ---- card heads with the step number ---- */

.co-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.co-review-card .co-card-head { border-bottom-color: var(--glass-edge-dark); }
body.has-bg-image .co-form-card .co-card-head { border-bottom-color: var(--glass-edge-dark); }

.co-step {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.94rem;
  font-weight: 600;
}

.co-card-head h2 { font-size: 1.14rem; line-height: 1.25; }
.co-review-card .co-card-head h2 { color: var(--cream); }
body.has-bg-image .co-form-card .co-card-head h2 { color: var(--cream); }

.co-card-head p {
  font-size: 0.85rem;
  color: var(--brown-soft);
  margin-top: 4px;
}

body.has-bg-image .co-card-head p { color: rgba(248, 241, 223, 0.74); }

/* ---- the form ---- */

.co-form {
  display: grid;
  gap: 18px;
}

.co-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.co-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brown-text);
}

body.has-bg-image .co-field label { color: var(--cream); }

/* Required and optional are stated outright, so nobody has to guess */
.co-label-row .req,
.co-label-row .opt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.co-label-row .req {
  background: rgba(201, 90, 26, 0.16);
  border: 1px solid rgba(201, 90, 26, 0.42);
  color: var(--orange);
}

.co-label-row .opt {
  background: rgba(58, 26, 13, 0.07);
  border: 1px solid var(--line);
  color: var(--brown-soft);
}

body.has-bg-image .co-label-row .opt {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--glass-edge-dark);
  color: rgba(248, 241, 223, 0.7);
}

.co-field input,
.co-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 1rem;
  color: var(--brown-text);
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.co-field textarea { resize: vertical; min-height: 82px; line-height: 1.55; }

.co-field input::placeholder,
.co-field textarea::placeholder { color: rgba(92, 50, 32, 0.55); }

.co-field input:focus,
.co-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(201, 90, 26, 0.16);
}

body.has-bg-image .co-field input,
body.has-bg-image .co-field textarea {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-edge-dark);
  color: var(--cream);
}

body.has-bg-image .co-field input::placeholder,
body.has-bg-image .co-field textarea::placeholder { color: rgba(248, 241, 223, 0.45); }

body.has-bg-image .co-field input:focus,
body.has-bg-image .co-field textarea:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--orange);
}

.co-hint {
  font-size: 0.79rem;
  color: var(--brown-soft);
  margin-top: 6px;
}

body.has-bg-image .co-hint { color: rgba(248, 241, 223, 0.6); }

/* ---- validation feedback ---- */

.co-msg {
  font-size: 0.8rem;
  color: #C24A3A;
  margin-top: 6px;
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.co-field.has-error .co-msg {
  opacity: 1;
  transform: translateY(0);
}

.co-field.has-error input,
.co-field.has-error textarea {
  border-color: #C24A3A;
  background: rgba(194, 74, 58, 0.07);
}

body.has-bg-image .co-field.has-error input,
body.has-bg-image .co-field.has-error textarea {
  background: rgba(194, 74, 58, 0.18);
}

/* A quiet tick once a field is filled in properly */
.co-field.is-good input,
.co-field.is-good textarea {
  border-color: rgba(31, 168, 85, 0.55);
}

.co-field.shake input,
.co-field.shake textarea {
  animation: fieldShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes fieldShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ---- review side ---- */

.co-review-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--glass-edge-dark);
}

.co-review-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.co-qty {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(201, 90, 26, 0.9);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.co-line-name {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--cream);
  line-height: 1.35;
}

.co-line-name em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: rgba(248, 241, 223, 0.6);
  margin-top: 2px;
}

.co-line-total {
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--orange-tint);
  font-variant-numeric: tabular-nums;
}

.co-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.co-total .label {
  font-size: 0.82rem;
  color: var(--orange-tint);
  max-width: 12ch;
}

.co-total .value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.co-submit { padding: 17px 24px; font-size: 1rem; border-radius: 13px; }

.co-note {
  font-size: 0.79rem;
  line-height: 1.6;
  color: rgba(248, 241, 223, 0.62);
  margin-top: 13px;
}

.sr-title { font-size: 1.14rem; }

/* ==========================================================================
   ORDER CONFIRMATION CARD
   --------------------------------------------------------------------------
   Shown after the order is handed to WhatsApp. Deliberately large and plain:
   the customer has just done something that costs money and needs to see
   exactly what was sent, with no ambiguity about what happens next.
   ========================================================================== */

/* Added and revealed by script on the same tick. The is-in class only
   drives the movement, and the card is visible without it. */
.co-done {
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 24px 34px;
  text-align: center;
  border-radius: 26px;
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border: 1px solid var(--glass-edge-dark);
  color: var(--cream);
  box-shadow: 0 30px 70px -26px rgba(20, 9, 4, 0.7);
  animation: coDoneIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes coDoneIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The tick draws itself, rather than simply appearing */
.co-done-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  color: #4ED184;
}

.co-done-mark svg { width: 100%; height: 100%; }

.co-done-mark .ring {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}

.co-done-mark .tick {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.co-done.is-in .co-done-mark .ring {
  animation: drawRing 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}

.co-done.is-in .co-done-mark .tick {
  animation: drawTick 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.62s forwards;
}

@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }

.co-done h2 {
  color: var(--cream);
  font-size: clamp(1.45rem, 5vw, 1.95rem);
  margin-bottom: 12px;
}

.co-done-body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(248, 241, 223, 0.82);
  max-width: 44ch;
  margin: 0 auto 28px;
}

/* ---- the receipt ---- */

.co-done-card {
  text-align: left;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-edge-dark);
  overflow: hidden;
  margin-bottom: 24px;
}

.co-done-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-edge-dark);
  font-size: 0.9rem;
  align-items: start;
}

.co-done-row:last-child { border-bottom: none; }

.co-done-row span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 241, 223, 0.55);
  padding-top: 2px;
}

.co-done-row strong {
  font-weight: 500;
  color: var(--cream);
  line-height: 1.5;
  word-break: break-word;
}

.co-done-items strong { line-height: 1.8; }

.co-done-total {
  background: rgba(201, 90, 26, 0.16);
}

.co-done-total strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.32rem;
  color: var(--white);
}

.co-done-hint {
  font-size: 0.82rem;
  color: rgba(248, 241, 223, 0.6);
  margin-bottom: 16px;
}

.co-done-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.co-done-actions .btn { width: 100%; }

/* ---- layout up ---- */

@media (min-width: 560px) {
  .co-done { padding: 48px 34px 38px; }
  .co-done-actions { flex-direction: row; justify-content: center; }
  .co-done-actions .btn { width: auto; }
  .co-done-row { grid-template-columns: 104px 1fr; }
}

@media (min-width: 900px) {
  .co-layout { grid-template-columns: 1.35fr 1fr; gap: 28px; }

  .co-review-card {
    position: sticky;
    top: 110px;
  }

  .co-form-card { padding: 30px 28px 32px; }
  .co-review-card { padding: 28px 26px 30px; }

  /* Name and phone sit side by side once there is room */
  .co-form {
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }

  .co-field[data-co-field="deliveryAddress"],
  .co-field[data-co-field="orderNote"] { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .co-form-card, .co-review-card { padding: 20px 18px 22px; border-radius: 18px; }
  .co-done { padding: 34px 18px 28px; border-radius: 20px; }
  .co-done-row { grid-template-columns: 1fr; gap: 4px; }
  .co-steps { gap: 6px 12px; }
  .co-steps li { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .co-done { transition-duration: 0.01ms; transform: none; }
  .co-done-mark .ring,
  .co-done-mark .tick { stroke-dashoffset: 0; animation: none; }
  .co-field.shake input, .co-field.shake textarea { animation: none; }
}

/* ==========================================================================
   HERO WHATSAPP BUTTON, SIZED DOWN
   It was matching the primary button too closely, which flattened the
   hierarchy again. Smaller padding and a smaller label keep it clearly the
   second option while still reading as a button.
   ========================================================================== */

.btn-hero-wa {
  padding: 13px 20px;
  font-size: 0.88rem;
  border-radius: 10px;
}

.btn-hero-wa svg { width: 15px; height: 15px; }

@media (min-width: 1024px) {
  .btn-hero-wa { padding: 14px 22px; font-size: 0.9rem; }
}

/* ==========================================================================
   QUANTITY STEPPERS, SIZED UP
   --------------------------------------------------------------------------
   The minus and plus were 28px, which is well under the 44px that a finger
   actually needs. They were also thin, so the signs themselves read small
   even where the button was tappable.
   ========================================================================== */

.qty {
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
}

.qty button {
  width: 42px;
  height: 42px;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-edge-dark);
  color: var(--cream);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qty button:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.qty button:active { transform: scale(0.86); }

.qty .qty-value {
  min-width: 34px;
  font-size: 1.06rem;
  font-weight: 700;
}

/* The order page stepper can be larger still, there is room for it */
.order-qty .qty button { width: 46px; height: 46px; font-size: 1.55rem; }
.order-qty .qty .qty-value { min-width: 38px; font-size: 1.12rem; }

@media (max-width: 420px) {
  .qty button { width: 44px; height: 44px; }
  .order-qty .qty { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   PRESS FEEDBACK ON EVERYTHING TAPPABLE
   Every button and link that acts now answers the tap, rather than only the
   ones that happened to have an animation.
   ========================================================================== */

.btn,
.card-icon-btn,
.category-tabs button,
.carousel-btn,
.order-remove,
.opt-row,
.social-link,
.cart-close,
.opt-close,
.mobile-nav-close {
  -webkit-tap-highlight-color: transparent;
}

.btn:active,
.card-icon-btn:active,
.category-tabs button:active,
.carousel-btn:active,
.cart-close:active,
.opt-close:active { transform: scale(0.965); }

.opt-row:active { transform: scale(0.99); }

/* Ripple, reused from the add button, now available to any button */
.has-ripple { position: relative; overflow: hidden; }

/* ==========================================================================
   DEPTH
   --------------------------------------------------------------------------
   The site read flat and, on a laptop, empty. Three things fix that without
   adding clutter: an ambient light behind the page so surfaces have
   something to sit against, real layered shadows on the cards rather than a
   single soft one, and tighter maximum widths so content is not stranded
   across a wide screen.
   ========================================================================== */

/* Ambient light, sitting behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(900px circle at 12% 8%, rgba(201, 90, 26, 0.09), transparent 60%),
    radial-gradient(700px circle at 88% 22%, rgba(107, 58, 34, 0.12), transparent 62%),
    radial-gradient(1000px circle at 50% 98%, rgba(201, 90, 26, 0.07), transparent 60%);
}

body.has-bg-image::before { opacity: 0.6; }

/* Layered shadows read as depth. A single blurred shadow reads as a sticker. */
.food-card {
  box-shadow:
    0 1px 2px rgba(58, 26, 13, 0.05),
    0 4px 10px -4px rgba(58, 26, 13, 0.1),
    0 16px 34px -18px rgba(58, 26, 13, 0.22);
}

.food-card:hover,
.food-card:focus-within {
  box-shadow:
    0 2px 4px rgba(58, 26, 13, 0.06),
    0 10px 22px -8px rgba(58, 26, 13, 0.16),
    0 30px 60px -22px rgba(58, 26, 13, 0.34);
}

.order-list,
.co-form-card,
.co-review-card,
.order-summary,
.status-panel {
  box-shadow:
    0 1px 2px rgba(58, 26, 13, 0.05),
    0 8px 20px -10px rgba(58, 26, 13, 0.16),
    0 28px 56px -24px rgba(58, 26, 13, 0.28);
}

.offer-grid {
  box-shadow: 0 24px 54px -26px rgba(58, 26, 13, 0.3);
}

/* ==========================================================================
   DESKTOP, FILLED OUT
   --------------------------------------------------------------------------
   On a laptop the content was sitting in the middle of a wide screen with
   nothing either side. Rather than stretching everything, the sections now
   carry more inside them: bigger type, deeper padding, and a visible edge
   between sections so the page has rhythm.
   ========================================================================== */

@media (min-width: 1024px) {
  /* Sections get a hairline edge, so the page reads as panels rather than
     one long scroll of nothing */
  .story,
  .offer,
  .menu-preview {
    position: relative;
  }

  .story::after,
  .offer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 128px));
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
  }

  body.has-bg-image .story::after,
  body.has-bg-image .offer::after {
    background: linear-gradient(90deg, transparent, var(--glass-edge-dark), transparent);
  }

  /* The story section had a lot of air. Give the label column something to
     hold and let the copy breathe at a comfortable measure. */
  .intro { grid-template-columns: 0.75fr 1.25fr; gap: 72px; }
  .intro-label { font-size: 1.3rem; }
  .intro h2 { font-size: clamp(2.1rem, 3vw, 2.9rem); }
  .intro-body p { font-size: 1.08rem; line-height: 1.7; }

  .offer-item { padding: 40px 30px; }
  .offer-item .num { font-size: 1.9rem; }
  .offer-item h3 { font-size: 1.28rem; }
  .offer-item p { font-size: 1rem; }

  .eyebrow-free-heading { max-width: 760px; }

  /* Order and checkout pages were narrow columns on a wide screen */
  .cart-page .wrap { max-width: 1220px; }
}

@media (min-width: 1400px) {
  .intro { gap: 96px; }
  .offer-item { padding: 46px 34px; }
}

/* ==========================================================================
   CHECKOUT, FILLED OUT
   --------------------------------------------------------------------------
   The page was a form and a total on a wide empty screen. It now carries a
   third panel that answers the question every customer has at this point:
   what happens when I press the button. On desktop the form and that panel
   sit in the left column with the order sticky on the right.
   ========================================================================== */

/* Panels arrive one after another rather than all at once.

   These animate themselves the moment they are placed on the page, using a
   backwards fill so the starting state applies during the delay. Nothing
   here depends on JavaScript adding a class, which means the content is
   always visible even if a script fails. Animation decides how something
   arrives, never whether it is there at all. */
.co-form-card  { animation: coPanelIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards; }
.co-next-card  { animation: coPanelIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.16s backwards; }
.co-review-card { animation: coPanelIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.27s backwards; }

@keyframes coPanelIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- what happens next ---- */

.co-next-card {
  border-radius: 22px;
  padding: 24px 22px 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow:
    0 1px 2px rgba(58, 26, 13, 0.05),
    0 10px 24px -12px rgba(58, 26, 13, 0.18);
}

body.has-bg-image .co-next-card {
  background: rgba(36, 16, 7, 0.42);
  border-color: var(--glass-edge-dark);
}

.co-next-card h3 {
  font-size: 1.08rem;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

body.has-bg-image .co-next-card h3 {
  color: var(--cream);
  border-bottom-color: var(--glass-edge-dark);
}

.co-next-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.co-next-steps li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}

/* A line joining the steps, so it reads as a sequence */
.co-next-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 42px;
  bottom: -2px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(201, 90, 26, 0.5), rgba(201, 90, 26, 0.08));
}

.co-next-num {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(201, 90, 26, 0.14);
  border: 1px solid rgba(201, 90, 26, 0.45);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.co-next-steps strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brown-text);
  margin-bottom: 3px;
}

body.has-bg-image .co-next-steps strong { color: var(--cream); }

.co-next-steps p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--brown-soft);
}

body.has-bg-image .co-next-steps p { color: rgba(248, 241, 223, 0.74); }

/* ---- reassurance strip ---- */

.co-assure {
  display: grid;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

body.has-bg-image .co-assure {
  background: var(--glass-edge-dark);
  border-color: var(--glass-edge-dark);
}

.co-assure-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  color: var(--brown-text);
}

body.has-bg-image .co-assure-item {
  background: rgba(36, 16, 7, 0.5);
  color: rgba(248, 241, 223, 0.88);
}

.co-assure-item svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--orange);
}

.co-help {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--brown-soft);
}

body.has-bg-image .co-help { color: rgba(248, 241, 223, 0.7); }

.co-help a {
  color: var(--orange);
  border-bottom: 1px solid rgba(201, 90, 26, 0.45);
  transition: border-color 0.25s ease;
}

.co-help a:hover { border-bottom-color: var(--orange); }

/* ---- layout ---- */

@media (min-width: 900px) {
  .co-layout {
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas:
      "form  review"
      "next  review";
    align-items: start;
    gap: 24px 28px;
  }

  .co-form-card { grid-area: form; }
  .co-next-card { grid-area: next; }
  .co-review-card { grid-area: review; }

  .co-assure { grid-template-columns: 1fr; }
  .co-next-card { padding: 26px 26px 24px; }
}

@media (min-width: 560px) and (max-width: 899px) {
  .co-assure { grid-template-columns: repeat(3, 1fr); }
  .co-assure-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 420px) {
  .co-next-card { padding: 20px 18px; border-radius: 18px; }
  .co-next-steps li { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-form-card, .co-next-card, .co-review-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   AT A GLANCE BAND
   --------------------------------------------------------------------------
   Sits between the story and the reasons. Its job is partly information and
   partly rhythm: it breaks up two text heavy sections and stops the desktop
   layout from reading as one long empty column. The hours and address come
   from the business record, so the admin controls them.
   ========================================================================== */

.glance { padding: 0; }

.glance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body.has-bg-image .glance-grid {
  background: var(--glass-edge-dark);
  border-color: var(--glass-edge-dark);
}

.glance-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 26px 24px;
  background: rgba(255, 253, 248, 0.45);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background-color 0.35s ease;
}

.glance-item:hover { background: rgba(255, 253, 248, 0.72); }

body.has-bg-image .glance-item { background: rgba(36, 16, 7, 0.44); }
body.has-bg-image .glance-item:hover { background: rgba(36, 16, 7, 0.6); }

.glance-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(201, 90, 26, 0.14);
  border: 1px solid rgba(201, 90, 26, 0.32);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: background-color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glance-item:hover .glance-ico {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-3px);
}

.glance-ico svg { width: 18px; height: 18px; }

.glance-item strong {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--brown-deep);
  line-height: 1.25;
}

body.has-bg-image .glance-item strong { color: var(--cream); }

.glance-item > span:last-child {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--brown-soft);
}

body.has-bg-image .glance-item > span:last-child { color: rgba(248, 241, 223, 0.74); }

@media (min-width: 560px) {
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .glance-grid { grid-template-columns: repeat(4, 1fr); }
  .glance-item { padding: 34px 28px; }
  .glance-item strong { font-size: 1.22rem; }
}

/* ==========================================================================
   CHECKOUT MOTION
   --------------------------------------------------------------------------
   The page assembles rather than appearing. Fields rise in sequence, the
   step trail draws itself, the review lines slide in, and the figures roll
   up from zero. The figures are set from the real cart value on the last
   frame, so the arithmetic is never what is being animated.
   ========================================================================== */

/* Step trail draws in */
.co-steps li {
  animation: coStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.co-steps li:nth-child(1) { animation-delay: 0.08s; }
.co-steps li:nth-child(2) { animation-delay: 0.16s; }
.co-steps li:nth-child(3) { animation-delay: 0.24s; }

@keyframes coStepIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The current step keeps a gentle pulse, so the eye finds it */
.co-steps li.is-current span {
  animation: coStepPulse 2.6s ease-in-out 1s infinite;
}

@keyframes coStepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 90, 26, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(201, 90, 26, 0); }
}

/* Form fields rise one after another */
.co-field {
  animation: coFieldIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.co-field:nth-child(1) { animation-delay: 0.22s; }
.co-field:nth-child(2) { animation-delay: 0.29s; }
.co-field:nth-child(3) { animation-delay: 0.36s; }
.co-field:nth-child(4) { animation-delay: 0.43s; }
.co-field:nth-child(5) { animation-delay: 0.50s; }

@keyframes coFieldIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Focused field lifts slightly out of the card */
.co-field input,
.co-field textarea {
  transform: translateY(0);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.28s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.co-field input:focus,
.co-field textarea:focus {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(201, 90, 26, 0.16),
    0 10px 24px -12px rgba(58, 26, 13, 0.3);
}

/* Steps in the next panel arrive with the panel */
.co-next-card .co-next-steps li {
  animation: coNextIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.co-next-card .co-next-steps li:nth-child(1) { animation-delay: 0.34s; }
.co-next-card .co-next-steps li:nth-child(2) { animation-delay: 0.42s; }
.co-next-card .co-next-steps li:nth-child(3) { animation-delay: 0.50s; }
.co-next-card .co-next-steps li:nth-child(4) { animation-delay: 0.58s; }

@keyframes coNextIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Review lines slide in from the right */
.co-review-card .co-review-line {
  animation: coLineIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.co-review-card .co-review-line:nth-child(1) { animation-delay: 0.30s; }
.co-review-card .co-review-line:nth-child(2) { animation-delay: 0.37s; }
.co-review-card .co-review-line:nth-child(3) { animation-delay: 0.44s; }
.co-review-card .co-review-line:nth-child(4) { animation-delay: 0.51s; }
.co-review-card .co-review-line:nth-child(5) { animation-delay: 0.58s; }
.co-review-card .co-review-line:nth-child(n+6) { animation-delay: 0.64s; }

@keyframes coLineIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* The quantity chip pops as its line arrives */
.co-review-card .co-qty {
  animation: coQtyPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
}

@keyframes coQtyPop {
  from { transform: scale(0.5); opacity: 0; }
}

/* The total sits on its own tinted shelf, so the eye lands on it */
.co-total {
  padding: 16px 18px;
  border-radius: 15px;
  background: rgba(201, 90, 26, 0.15);
  border: 1px solid rgba(201, 90, 26, 0.34);
  align-items: center;
}

.co-total .value {
  font-variant-numeric: tabular-nums;
  /* Room reserved so the layout does not shift while the figure rolls */
  min-width: 5ch;
  text-align: right;
}

.co-count-num {
  font-weight: 700;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.co-line-total {
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
  text-align: right;
  display: inline-block;
}

/* The send button breathes until it is pressed */
.co-submit {
  position: relative;
  overflow: hidden;
  animation: coSubmitReady 3.4s ease-in-out 1.4s infinite;
}

@keyframes coSubmitReady {
  0%, 100% { box-shadow: 0 10px 26px -12px rgba(31, 168, 85, 0.7); }
  50%      { box-shadow: 0 16px 38px -12px rgba(31, 168, 85, 0.95); }
}

.co-submit:hover { animation-play-state: paused; }

/* Sweep across the button on hover */
.co-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.26) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.co-submit:hover::after { transform: translateX(130%); }

@media (prefers-reduced-motion: reduce) {
  .co-steps li,
  .co-field,
  .co-next-card .co-next-steps li,
  .co-review-card .co-review-line,
  .co-review-card .co-qty {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .co-steps li.is-current span,
  .co-submit { animation: none; }

  .co-field input:focus,
  .co-field textarea:focus { transform: none; }
}


/* ==========================================================================
   FONT FALLBACKS
   Fonts now load without blocking, so the first paint may use the fallback.
   Matching the metrics keeps the text from jumping when the real font lands.
   ========================================================================== */

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.loader-text,
.hero h1 {
  font-synthesis: none;
}

/* ==========================================================================
   OVERFLOW AND OFF SCREEN PANELS
   --------------------------------------------------------------------------
   The cart drawer, the toast and the option sheet were hidden only by being
   translated off screen. That relies on the browser measuring their height
   the way we expect, and a rounding difference or a rubber band scroll can
   leave an edge of them visible past the footer.

   Adding visibility means a closed panel is genuinely not there: it cannot
   be seen, cannot be tapped, and cannot be reached by tabbing. The
   translate still does the animating.
   ========================================================================== */

.cart-drawer {
  visibility: hidden;
}

.cart-drawer.is-open {
  visibility: visible;
}

.toast {
  visibility: hidden;
}

.toast.is-open {
  visibility: visible;
}

/* Transition visibility alongside the movement, so it does not vanish
   half way through sliding away */
.cart-drawer {
  transition:
    transform 0.52s cubic-bezier(0.22, 1.12, 0.36, 1),
    visibility 0.52s linear;
}

.toast {
  transition:
    transform 0.46s cubic-bezier(0.22, 1.12, 0.36, 1),
    visibility 0.46s linear;
}

/* The page background should match the footer, not the body.

   Scrolling past the end of a page, which phones do by default, shows the
   html background rather than the body. With a cream body under a dark
   footer, that bounce flashed a pale band below the footer and read as
   something overflowing underneath. */
html {
  background: var(--brown-deep);
}

/* The body keeps its own cream, so only the over scroll area is dark */
body {
  background: var(--cream);
}

body.has-bg-image {
  background: transparent;
}

/* Nothing should be able to push the page sideways either. overflow-x on
   body alone is unreliable once a fixed element sits off the right edge,
   so clip it at the root as well. */
html {
  overflow-x: hidden;
}

/* A closed panel must not be tabbable. Without this a visitor pressing tab
   could move focus into the hidden drawer and scroll the page to a panel
   they cannot see. */
.cart-drawer[aria-hidden="true"] {
  pointer-events: none;
}

.cart-drawer.is-open {
  pointer-events: auto;
}

/* ==========================================================================
   CHECKOUT, MADE WORTH FILLING IN
   --------------------------------------------------------------------------
   A form is the least enjoyable part of ordering, so this one answers every
   keystroke: the heading greets them by name, a ring fills as the required
   fields are answered, each field ticks itself off, and the order button
   visibly comes alive once everything needed is in.
   ========================================================================== */

.co-card-head {
  align-items: center;
}

.co-head-text { flex: 1; min-width: 0; }

.co-head-text h2 {
  transition: color 0.4s ease;
}

/* When their name is known, the heading changes and the orange follows */
.co-head-text h2.is-personal {
  color: var(--orange);
  animation: greetIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-bg-image .co-head-text h2.is-personal { color: var(--orange); }

@keyframes greetIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- progress ring ---- */

.co-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.co-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.co-ring .ring-track {
  stroke: var(--line);
}

body.has-bg-image .co-ring .ring-track { stroke: var(--glass-edge-dark); }

.co-ring .ring-fill {
  stroke: var(--orange);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease;
}

.co-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brown-soft);
  transition: color 0.4s ease;
}

body.has-bg-image .co-ring-num { color: rgba(248, 241, 223, 0.8); }

/* All three in: the ring turns green and gives one pulse */
.co-ring.is-complete .ring-fill { stroke: #1FA855; }
.co-ring.is-complete .co-ring-num { color: #1FA855; }

.co-ring.is-complete {
  animation: ringDone 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ringDone {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ---- the tick on each field ---- */

.co-control {
  position: relative;
}

.co-tick {
  position: absolute;
  top: 15px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1FA855;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.25s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.co-tick svg { width: 12px; height: 12px; }

.co-field.is-good .co-tick {
  opacity: 1;
  transform: scale(1);
}

/* Leave room so the tick never sits on top of the text */
.co-field.is-good input,
.co-field.is-good textarea { padding-right: 46px; }

/* A field that is done gets a green edge rather than staying neutral */
.co-field.is-good input,
.co-field.is-good textarea {
  border-color: rgba(31, 168, 85, 0.6);
  background: rgba(31, 168, 85, 0.05);
}

body.has-bg-image .co-field.is-good input,
body.has-bg-image .co-field.is-good textarea {
  background: rgba(31, 168, 85, 0.1);
}

/* The label lifts and colours while the field is being used */
.co-field label {
  display: inline-block;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
}

.co-field:focus-within label {
  color: var(--orange);
  transform: translateX(3px);
}

/* Phone gets tabular figures so the spacing does not jitter as it groups */
.co-field[data-co-field="phone"] input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Required chip settles once satisfied */
.co-field.is-good .co-label-row .req {
  background: rgba(31, 168, 85, 0.14);
  border-color: rgba(31, 168, 85, 0.45);
  color: #1FA855;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

/* ---- the order button waking up ---- */

.co-submit,
.co-sticky-btn {
  opacity: 0.55;
  transition: opacity 0.4s ease, box-shadow 0.4s ease, transform 0.25s ease;
}

.co-submit.is-ready,
.co-sticky-btn.is-ready {
  opacity: 1;
}

.co-submit:not(.is-ready) { animation: none; }

/* ---- sticky action bar ---- */

.co-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-dark-strong);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
  border-top: 1px solid var(--glass-edge-dark);
  box-shadow: 0 -12px 34px -14px rgba(20, 9, 4, 0.6);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1.12, 0.36, 1);
}

/* Slides up once there is something worth ordering */
.co-sticky { transform: translateY(0); }

.co-sticky-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.co-sticky-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-tint);
}

.co-sticky-total {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.24rem;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.co-sticky-btn {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
}

/* Room so the bar never covers the last field or the footer */
body.page-inner .cart-page { padding-bottom: 96px; }

/* The bar is only needed while the review panel is off screen, so it is
   hidden on desktop where both columns are visible at once */
@media (min-width: 900px) {
  .co-sticky { display: none; }
  body.page-inner .cart-page { padding-bottom: 34px; }
}

/* ---- a cue that there is more below ---- */

.co-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(201, 90, 26, 0.1);
  border: 1px dashed rgba(201, 90, 26, 0.45);
  color: var(--orange);
  font-size: 0.88rem;
  font-weight: 600;
}

.co-jump svg {
  width: 15px;
  height: 15px;
  animation: jumpNudge 1.8s ease-in-out infinite;
}

@keyframes jumpNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.co-jump:hover { background: rgba(201, 90, 26, 0.18); }

@media (min-width: 900px) {
  .co-jump { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .co-head-text h2.is-personal,
  .co-ring.is-complete { animation: none; }
  .co-tick { transition-duration: 0.01ms; }
  .co-jump svg { animation: none; }
  .co-sticky { transition: none; }
}

/* ==========================================================================
   ITEM THUMBNAILS THROUGH CHECKOUT
   --------------------------------------------------------------------------
   The food a customer picked should be visible at every step, not just its
   name. These appear on the review panel and on the confirmation receipt,
   matching the ones already in the cart drawer and on the order page.
   ========================================================================== */

.co-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 11px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #6B3A22, var(--brown-deep));
  border: 1px solid var(--glass-edge-dark);
}

.co-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.co-thumb.is-empty { color: rgba(248, 241, 223, 0.45); }
.co-thumb.is-empty svg { width: 18px; height: 18px; }

.co-thumb.is-small {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.co-thumb.is-small svg { width: 13px; height: 13px; }

/* Review lines make room for the photo */
.co-review-line { align-items: center; gap: 11px; }

.co-review-line .co-qty {
  width: 24px;
  height: 24px;
  font-size: 0.76rem;
  border-radius: 7px;
}

/* Receipt lines */
.co-done-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.co-done-items strong { line-height: 1.4; }

/* ==========================================================================
   THE NEXT STEP BUTTON
   --------------------------------------------------------------------------
   This was a dashed outline with a gentle nudge, which read as a hint rather
   than the thing the customer is supposed to press. It is now a solid brand
   button with a light sweeping across it and an arrow that keeps moving, so
   there is no question where to go next. Same size as before.
   ========================================================================== */

.co-jump {
  position: relative;
  overflow: hidden;
  background: var(--orange);
  border: 1px solid var(--orange);
  color: var(--white);
  font-weight: 700;
  box-shadow:
    0 8px 20px -8px rgba(201, 90, 26, 0.7),
    0 2px 5px rgba(201, 90, 26, 0.3);
  animation: jumpBreathe 2.8s ease-in-out infinite;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

@keyframes jumpBreathe {
  0%, 100% {
    box-shadow: 0 8px 20px -8px rgba(201, 90, 26, 0.7),
                0 0 0 0 rgba(201, 90, 26, 0.45);
  }
  50% {
    box-shadow: 0 12px 28px -8px rgba(201, 90, 26, 0.85),
                0 0 0 10px rgba(201, 90, 26, 0);
  }
}

.co-jump:hover {
  background: var(--orange-hover);
  animation-play-state: paused;
}

.co-jump:active { transform: scale(0.98); }

/* A light travels across it, the same treatment as the primary buttons */
.co-jump::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: jumpSweep 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

@keyframes jumpSweep {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.co-jump svg {
  width: 17px;
  height: 17px;
  animation: jumpNudge 1.4s ease-in-out infinite;
}

/* ==========================================================================
   CHANGE THE ORDER LINK
   It was low contrast text that read as disabled. Now a visible outlined
   control, still clearly secondary to the order button.
   ========================================================================== */

.summary-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid rgba(248, 241, 223, 0.32);
  background: rgba(255, 255, 255, 0.07);
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.summary-back::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1.6px solid var(--orange);
  border-bottom: 1.6px solid var(--orange);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.summary-back:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--orange);
  color: var(--white);
}

.summary-back:hover::before { transform: rotate(45deg) translate(-2px, 2px); }
.summary-back:active { transform: scale(0.98); }

/* ==========================================================================
   STEP TRAIL
   --------------------------------------------------------------------------
   A line travels from the first step to the one the customer is on. Its
   position is measured in JS, because it depends on where the steps land
   after the text wraps.
   ========================================================================== */

.co-steps {
  position: relative;
  align-items: center;
  gap: 10px 22px;
}

.co-trail-line {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

body.has-bg-image .co-trail-line { background: var(--glass-edge-dark); }

.co-trail-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #E89A5C);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

/* The dots sit above the line */
.co-steps li { position: relative; z-index: 1; }

.co-steps li span {
  background: var(--cream);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

body.has-bg-image .co-steps li span { background: var(--brown-deep); }

.co-steps li.is-done span {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

/* Completed steps get a tick instead of their number once passed */
.co-steps li.is-done span::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0);
  animation: stepTick 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.co-steps li.is-done:nth-child(1) span::after { animation-delay: 0.45s; }
.co-steps li.is-done:nth-child(2) span::after { animation-delay: 0.75s; }

@keyframes stepTick {
  to { transform: rotate(-45deg) scale(1); }
}

/* Hide the number once the tick lands */
.co-steps li.is-done span {
  color: transparent;
}

.co-steps li.is-done span::after { border-color: var(--white); }

/* The current step draws a ring that keeps pulsing */
.co-steps li.is-current span {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .co-jump,
  .co-jump::after,
  .co-jump svg,
  .co-steps li.is-done span::after { animation: none; }
  .co-steps li.is-done span::after { transform: rotate(-45deg) scale(1); }
  .co-trail-fill { transition: none; transform: scaleX(1); }
}

/* Panel shown in place of a photo that is missing or has not arrived */
.media-inner.is-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: rgba(248, 241, 223, 0.86);
  font-size: 0.78rem;
  text-align: center;
  padding: 16px;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.045) 0 14px,
    transparent 14px 28px
  );
}

/* A hero slide with no photo keeps the labelled panel it already had */
.hero-slide .media-inner.is-missing {
  font-size: 0.9rem;
}


/* Hero caption on a phone: smaller, and kept clear of the controls */
@media (max-width: 767px) {
  .hero-slide-caption {
    right: var(--gutter);
    left: var(--gutter);
    bottom: 104px;
    max-width: none;
    justify-content: center;
    padding: 7px 14px;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .hero-slide-caption { bottom: 96px; font-size: 0.72rem; }
}

/* ==========================================================================
   MENU SEARCH
   --------------------------------------------------------------------------
   Sits above the category tabs. Matches dish names, descriptions, section
   names and the choices on a dish, so searching "fish" finds a plate that
   offers fish even when fish is not in its title.
   ========================================================================== */

.menu-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.menu-search-ico {
  position: absolute;
  left: 18px;
  display: flex;
  color: var(--brown-soft);
  pointer-events: none;
  transition: color 0.25s ease;
}

.menu-search-ico svg { width: 19px; height: 19px; }

.menu-search input {
  width: 100%;
  padding: 16px 52px 16px 50px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-family: inherit;
  font-size: 1rem;
  color: var(--brown-text);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.28s ease, background-color 0.25s ease;
}

/* The browser's own clear button would sit beside ours */
.menu-search input::-webkit-search-cancel-button { display: none; }

.menu-search input::placeholder { color: rgba(92, 50, 32, 0.6); }

.menu-search input:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow:
    0 0 0 4px rgba(201, 90, 26, 0.14),
    0 14px 30px -14px rgba(58, 26, 13, 0.3);
}

.menu-search:focus-within .menu-search-ico { color: var(--orange); }

body.has-bg-image .menu-search input {
  background: rgba(36, 16, 7, 0.5);
  border-color: var(--glass-edge-dark);
  color: var(--cream);
}

body.has-bg-image .menu-search input::placeholder { color: rgba(248, 241, 223, 0.5); }
body.has-bg-image .menu-search-ico { color: rgba(248, 241, 223, 0.65); }

body.has-bg-image .menu-search input:focus {
  background: rgba(36, 16, 7, 0.72);
  border-color: var(--orange);
}

.menu-search-clear.is-hidden { display: none; }

.menu-search-clear {
  position: absolute;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(58, 26, 13, 0.1);
  color: var(--brown-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.22s ease, transform 0.25s ease;
}

.menu-search-clear:hover {
  background: var(--orange);
  color: var(--white);
  transform: rotate(90deg);
}

.menu-search-clear svg { width: 15px; height: 15px; }

body.has-bg-image .menu-search-clear {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream);
}

/* Result count */
.menu-search-count {
  margin-top: 11px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
  min-height: 1.2em;
}

.menu-search-count.is-empty { color: #C24A3A; }

body.has-bg-image .menu-search-count.is-empty { color: #E8846F; }

/* While searching, the category tabs step back, since results span all
   sections and no single tab is current */
body.is-searching .category-tabs {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.category-tabs { transition: opacity 0.3s ease; }

/* Cards settle in as results change */
body.is-searching .food-card {
  animation: searchIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Transform only. Nothing here can leave a card invisible. */
@keyframes searchIn {
  from { transform: translateY(12px) scale(0.98); }
  to   { transform: translateY(0) scale(1); }
}

@media (min-width: 768px) {
  .menu-search { max-width: 520px; }
  .menu-search input { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-searching .food-card { animation: none; }
  .menu-search-clear:hover { transform: none; }
}

/* ==========================================================================
   HERO BOTTOM BAR, REBUILT
   --------------------------------------------------------------------------
   The caption, the dots and the pause button were each positioned on their
   own with fixed distances from the bottom. On a narrow screen those
   distances collided with each other and with the drip divider, which is
   what made the area look jammed.

   They are now one flex bar. It stacks on a phone with the caption above
   the controls, and sits on a single row from tablet up with the controls
   on the left and the caption on the right. Nothing is positioned against
   a guessed offset any more.
   ========================================================================== */

.hero-bottom {
  position: absolute;
  left: 0;
  right: 0;
  /* Clear of the drip divider, which is 46px tall and sits at the very
     bottom of the hero */
  bottom: 54px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0 var(--gutter);
}

/* These no longer position themselves, the bar does it */
.hero-slide-caption,
.hero-controls {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
}

.hero-slide-caption {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 8px 15px;
  font-size: 0.78rem;
  line-height: 1.35;
  border-radius: 999px;
  background: rgba(36, 16, 7, 0.62);
  border: 1px solid var(--glass-edge-dark);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  /* Fades and rises with each new slide */
  animation: captionIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes captionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-slide-caption .dot-mark {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
}

.hero-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- the hero needs room for the bar underneath its content ---- */

@media (max-width: 420px) {
  .hero { padding-bottom: 168px; }
  .hero-bottom { bottom: 50px; gap: 11px; }
  .hero-slide-caption { font-size: 0.73rem; padding: 7px 13px; }
  .hero-dots button { width: 22px; }
  .hero-meta { margin-top: 28px; }
}

@media (min-width: 421px) and (max-width: 767px) {
  .hero { padding-bottom: 176px; }
  .hero-bottom { bottom: 54px; }
}

/* From tablet up there is room for one row */
@media (min-width: 768px) {
  .hero { padding-bottom: 150px; }

  .hero-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    bottom: 60px;
    padding: 0 40px;
  }

  .hero-slide-caption {
    order: 2;
    font-size: 0.85rem;
    padding: 9px 17px;
  }

  .hero-controls { order: 1; }
}

@media (min-width: 1024px) {
  .hero { padding-bottom: 164px; }
  .hero-bottom { bottom: 66px; }
}

@media (min-width: 1440px) {
  .hero { padding-bottom: 180px; }
  .hero-bottom { padding: 0 64px; bottom: 72px; }
}

/* Rotated phone: the bar would eat the whole screen, so it goes */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-bottom: 80px; }
  .hero-bottom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-caption { animation: none; }
}

/* ==========================================================================
   BACKDROP
   --------------------------------------------------------------------------
   Frosted glass works by blurring whatever sits behind it. Against a flat
   colour there is nothing to blur, so the panels read as flat tints no
   matter how much blur is applied. That is why the site did not look glassy.

   This puts real content behind the glass: four large soft colour orbs that
   drift slowly, and a fine grain over the top. The orbs give the blur
   something to smear, so every panel now shows colour bleeding through and
   shifting as you scroll. It works with or without a background photo.
   ========================================================================== */

.site-aura {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.aura-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform;
}

/* Warm orange, top left */
.aura-1 {
  width: 62vmax;
  height: 62vmax;
  top: -22vmax;
  left: -16vmax;
  background: radial-gradient(circle, rgba(201, 90, 26, 0.30), transparent 68%);
  animation: auraDrift1 26s ease-in-out infinite alternate;
}

/* Deep cocoa, upper right */
.aura-2 {
  width: 54vmax;
  height: 54vmax;
  top: -8vmax;
  right: -18vmax;
  background: radial-gradient(circle, rgba(107, 58, 34, 0.34), transparent 66%);
  animation: auraDrift2 32s ease-in-out infinite alternate;
}

/* Amber, low left */
.aura-3 {
  width: 58vmax;
  height: 58vmax;
  bottom: -24vmax;
  left: -10vmax;
  background: radial-gradient(circle, rgba(232, 154, 92, 0.24), transparent 66%);
  animation: auraDrift3 29s ease-in-out infinite alternate;
}

/* Dark anchor, low right, keeps the bottom from going pale */
.aura-4 {
  width: 50vmax;
  height: 50vmax;
  bottom: -18vmax;
  right: -14vmax;
  background: radial-gradient(circle, rgba(58, 26, 13, 0.26), transparent 64%);
  animation: auraDrift4 35s ease-in-out infinite alternate;
}

@keyframes auraDrift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vmax, 6vmax, 0) scale(1.14); }
}
@keyframes auraDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vmax, 9vmax, 0) scale(1); }
}
@keyframes auraDrift3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vmax, -7vmax, 0) scale(1.12); }
}
@keyframes auraDrift4 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-8vmax, -6vmax, 0) scale(1); }
}

/* Fine grain. Stops the orbs looking like flat gradients and gives the
   blur a texture to pick up, which is most of what reads as real glass. */
.aura-grain {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* The old flat ambient wash is no longer needed */
body::before { display: none; }

/* With a photo set, the orbs step back so they do not fight it */
body.has-bg-image .site-aura { opacity: 0.45; }

/* --------------------------------------------------------------------------
   Panels tuned to the new backdrop
   Now that there is colour behind them, the glass can be more transparent
   and the edge highlight can do its job.
   -------------------------------------------------------------------------- */

:root {
  --glass-bg: rgba(255, 253, 248, 0.46);
  --glass-bg-strong: rgba(255, 253, 248, 0.64);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-blur: 26px;
  --glass-blur-heavy: 38px;
}

/* A highlight along the top edge and a soft inner shadow below it is what
   makes a surface read as a pane of glass rather than a tinted rectangle */
.food-card,
.offer-item,
.order-list,
.co-form-card,
.co-next-card,
.status-panel,
.cart-line-preview,
.glance-item,
.hours-card,
.menu-search input {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(58, 26, 13, 0.05),
    0 1px 2px rgba(58, 26, 13, 0.05),
    0 10px 24px -12px rgba(58, 26, 13, 0.2),
    0 28px 56px -26px rgba(58, 26, 13, 0.26);
}

.food-card:hover,
.food-card:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(58, 26, 13, 0.06),
    0 14px 30px -10px rgba(58, 26, 13, 0.2),
    0 36px 70px -26px rgba(58, 26, 13, 0.36);
}

/* Dark panels get their highlight from the cream side instead */
.order-summary,
.co-review-card,
.cart-drawer,
.opt-sheet,
.site-footer,
.co-done {
  box-shadow:
    inset 0 1px 0 rgba(248, 241, 223, 0.14),
    0 -2px 30px -12px rgba(20, 9, 4, 0.5),
    0 30px 66px -28px rgba(20, 9, 4, 0.6);
}

/* Saturating the blur is what gives glass its slight colour lift */
.food-card,
.offer-item,
.glance-item,
.status-panel,
.co-form-card,
.co-next-card,
.order-list,
.menu-search input {
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
}

/* Sections go transparent, so the orbs show through between the panels
   rather than being hidden behind solid blocks */
.offer,
.story,
.menu-preview,
.menu-page-body,
.menu-page-header,
.page-header,
.cart-page,
.glance {
  background: transparent;
}

/* Keep the body light so the cream palette still reads */
body { background: #FBF6EA; }

/* Reduced motion: keep the depth, drop the drifting */
@media (prefers-reduced-motion: reduce) {
  .aura-orb { animation: none; }
}

/* Older browsers with no blur support get solid panels, so the orbs must
   not show through as muddle */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-aura { opacity: 0.5; }
}

/* ==========================================================================
   SEARCH FEEDBACK
   --------------------------------------------------------------------------
   The search filters on the keystroke itself. These are the signals that it
   is working: the box lifts and its ring pulses while typing, the matched
   letters are marked inside each dish name, and the results arrive in
   sequence rather than all at once.
   ========================================================================== */

.menu-search {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-search.is-typing {
  transform: scale(1.008);
}

/* Ring that pulses out with each burst of typing */
.menu-search::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid rgba(201, 90, 26, 0.55);
  opacity: 0;
  pointer-events: none;
}

.menu-search.is-typing::after {
  animation: searchPulse 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchPulse {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.035); }
}

/* The magnifier leans in while typing */
.menu-search.is-typing .menu-search-ico {
  color: var(--orange);
  animation: icoNudge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes icoNudge {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.18) rotate(-12deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Matched letters inside a dish name */
mark.search-hit {
  background: rgba(201, 90, 26, 0.26);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
  box-shadow: inset 0 -2px 0 rgba(201, 90, 26, 0.8);
  animation: hitFlash 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hitFlash {
  from { background: rgba(201, 90, 26, 0.6); }
  to   { background: rgba(201, 90, 26, 0.26); }
}

body.has-bg-image mark.search-hit { color: var(--white); }

/* Results arrive one after another, using the index set in JS */
body.is-searching .food-card {
  animation: searchIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: calc(var(--hit, 0) * 30ms);
}

/* The count animates in with each change */
.menu-search-count {
  transition: color 0.3s ease;
}

.menu-search-count:not(:empty) {
  animation: countIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes countIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-search.is-typing,
  .menu-search.is-typing::after,
  .menu-search.is-typing .menu-search-ico,
  mark.search-hit,
  .menu-search-count:not(:empty) { animation: none; transform: none; }
}

/* ==========================================================================
   MENU PAGE
   --------------------------------------------------------------------------
   This is the page that sells the food, so it gets the most attention. Three
   facts under the heading instead of a notice about the site, category tabs
   that count what is in them, section headers with a rule that draws itself,
   and a card grid with proper rhythm.
   ========================================================================== */

/* ---- the three facts ---- */

.menu-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 30px;
}

.menu-fact {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border-radius: 15px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 20px -12px rgba(58, 26, 13, 0.22);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
}

.menu-fact:hover {
  transform: translateY(-3px);
  background: var(--glass-bg-strong);
}

body.has-bg-image .menu-fact {
  background: rgba(36, 16, 7, 0.46);
  border-color: var(--glass-edge-dark);
}

.menu-fact-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(201, 90, 26, 0.14);
  border: 1px solid rgba(201, 90, 26, 0.32);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-fact:hover .menu-fact-ico {
  background: var(--orange);
  color: var(--white);
  transform: rotate(-8deg) scale(1.06);
}

.menu-fact-ico svg { width: 18px; height: 18px; }

.menu-fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brown-deep);
  margin-bottom: 2px;
}

body.has-bg-image .menu-fact strong { color: var(--cream); }

.menu-fact span:last-child,
.menu-fact div > span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--brown-soft);
}

body.has-bg-image .menu-fact div > span { color: rgba(248, 241, 223, 0.78); }

/* ---- category tabs, with more presence ---- */

.category-tabs {
  gap: 9px;
  margin: 30px 0 42px;
  padding-bottom: 0;
  border-bottom: none;
  /* Scrolls sideways on a phone rather than wrapping into a tall block */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  margin-left: -2px;
  margin-right: -2px;
}

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

.category-tabs button {
  flex: 0 0 auto;
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

.category-tabs button:hover:not(.is-active) {
  transform: translateY(-2px);
  border-color: rgba(201, 90, 26, 0.5);
  color: var(--orange);
}

.category-tabs button.is-active {
  background: var(--brown-deep);
  border-color: var(--brown-deep);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 22px -10px rgba(58, 26, 13, 0.6);
}

@media (min-width: 768px) {
  .category-tabs { flex-wrap: wrap; overflow: visible; }
}

/* ---- section headers ---- */

.category-head {
  align-items: baseline;
  gap: 16px;
  padding-bottom: 0;
  margin-bottom: 26px;
  border-bottom: none;
  position: relative;
}

.category-head h2 {
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  letter-spacing: -0.01em;
}

/* A rule that grows out from the heading as the section arrives */
.category-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), rgba(201, 90, 26, 0.08));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-category-block .category-head::after { transform: scaleX(1); }

.category-head .category-count {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(201, 90, 26, 0.12);
  border: 1px solid rgba(201, 90, 26, 0.3);
}

.menu-category-block + .menu-category-block { margin-top: 64px; }

/* ---- the grid ---- */

@media (min-width: 640px) {
  .menu-page-body .food-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .menu-page-body .food-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .menu-facts { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
  .menu-fact { padding: 18px 20px; }
  .menu-category-block + .menu-category-block { margin-top: 76px; }
}

@media (min-width: 1440px) {
  .menu-page-body .food-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 560px) and (max-width: 1023px) {
  .menu-facts { grid-template-columns: repeat(3, 1fr); }
  .menu-fact { flex-direction: column; align-items: flex-start; gap: 11px; }
}

/* ==========================================================================
   MENU PAGE HEADER, TIGHTENED
   --------------------------------------------------------------------------
   A customer opening the menu wants the food, not a page of writing. The
   heading, the intro and the three facts all shrink so the first dish sits
   higher up the page, especially on a phone where every line pushes the
   food further out of reach.
   ========================================================================== */

.menu-page-header h1 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  letter-spacing: -0.015em;
}

.menu-page-header .intro-label {
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.menu-page-header p.lede {
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 50ch;
  margin-top: 10px;
}

/* The facts become a compact row rather than three tall cards */
.menu-facts {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.menu-fact {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px;
  border-radius: 13px;
}

.menu-fact-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.menu-fact-ico svg { width: 14px; height: 14px; }

.menu-fact strong {
  font-size: 0.82rem;
  line-height: 1.25;
  margin-bottom: 1px;
}

.menu-fact div > span {
  font-size: 0.74rem;
  line-height: 1.35;
}

/* Less air above and below the whole header */
body.page-inner .menu-page-header { padding-top: 110px; padding-bottom: 0; }

.menu-page-body { padding-top: 26px; }

.category-tabs { margin: 22px 0 30px; }

.menu-search { margin-top: 20px; }

.menu-search input {
  padding: 13px 48px 13px 46px;
  font-size: 0.95rem;
}

.menu-search-ico { left: 16px; }
.menu-search-ico svg { width: 17px; height: 17px; }

.menu-search-count { margin-top: 8px; font-size: 0.8rem; }

/* Section headings come down a step too */
.category-head h2 { font-size: clamp(1.3rem, 3.4vw, 1.6rem); }
.category-head { margin-bottom: 22px; }
.menu-category-block + .menu-category-block { margin-top: 48px; }

@media (min-width: 768px) {
  body.page-inner .menu-page-header { padding-top: 132px; }
  .menu-facts { gap: 11px; margin-top: 24px; }
  .menu-fact { padding: 14px 15px; }
  .menu-fact strong { font-size: 0.88rem; }
  .menu-fact div > span { font-size: 0.79rem; }
  .menu-page-header p.lede { font-size: 0.97rem; }
}

@media (min-width: 1024px) {
  .menu-page-header h1 { font-size: 2.6rem; }
  .menu-category-block + .menu-category-block { margin-top: 58px; }
}

/* Very small phones: the facts stack two and one rather than squeezing */
@media (max-width: 400px) {
  .menu-facts { grid-template-columns: 1fr 1fr; }
  .menu-fact:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .menu-fact div > span { font-size: 0.72rem; }
}

/* ==========================================================================
   CHECKOUT, GIVEN ROOM
   --------------------------------------------------------------------------
   On a phone the page ran form, then an explainer, then the order. That put
   a block of writing between the customer and the thing they came to do.

   The order now comes straight after the form, and the explanation of what
   happens next sits below it, where someone can read it if they want it.
   Everything also gets more space between blocks.
   ========================================================================== */

@media (max-width: 899px) {
  .co-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .co-form-card  { order: 1; }
  .co-review-card { order: 2; }
  .co-next-card  { order: 3; }

  /* The jump button points at the order, which is now directly below it */
  .co-jump { margin-top: 20px; }
}

/* More air inside each card, so nothing feels crowded */
.co-form-card,
.co-review-card,
.co-next-card {
  padding: 22px 20px 24px;
}

.co-form { gap: 22px; }

.co-card-head {
  padding-bottom: 20px;
  margin-bottom: 22px;
}

.co-review-lines {
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.co-total { margin-bottom: 22px; padding: 18px 20px; }

/* The explainer is secondary, so it reads quieter than the other two */
.co-next-card h3 {
  font-size: 1rem;
  margin-bottom: 18px;
}

.co-next-steps { gap: 0; margin-bottom: 20px; }
.co-next-steps li { padding: 11px 0; }
.co-next-steps strong { font-size: 0.9rem; }
.co-next-steps p { font-size: 0.83rem; }

.co-assure-item { padding: 12px 14px; font-size: 0.82rem; }

/* Page header, lighter */
body.page-inner .page-header { padding-bottom: 26px; }

.page-header p { font-size: 0.93rem; line-height: 1.6; max-width: 52ch; }

@media (min-width: 900px) {
  .co-layout { gap: 26px 30px; }
  .co-form-card { padding: 30px 28px 32px; }
  .co-review-card { padding: 28px 26px 30px; }
  .co-next-card { padding: 26px 26px 24px; }
}

@media (max-width: 420px) {
  .co-form-card,
  .co-review-card,
  .co-next-card { padding: 20px 17px 22px; }
  .co-form { gap: 19px; }
}

/* The jump button is calm until the form is complete, then it takes over */
.co-jump:not(.is-ready) {
  background: rgba(201, 90, 26, 0.12);
  border-color: rgba(201, 90, 26, 0.4);
  color: var(--orange);
  box-shadow: none;
  animation: none;
}

.co-jump:not(.is-ready)::after { animation: none; }

.co-jump:not(.is-ready) svg { animation: none; opacity: 0.6; }

body.has-bg-image .co-jump:not(.is-ready) { color: var(--orange-tint); }

.co-jump.is-ready {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

/* When the receipt is shown on a return visit rather than straight after
   sending, it says when the order went */
.co-done-when {
  display: inline-block;
  margin: 0 auto 22px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge-dark);
  font-size: 0.78rem;
  color: var(--orange-tint);
}