/* ==========================================================================
   Pashtun Palace — Public storefront stylesheet
   --------------------------------------------------------------------------
   Hand-authored, no build step, no @import, no webfonts. The file is served
   directly and is expected to be gzip/brotli compressed by the web server, so
   readability is favoured over minification-by-hand.

   Layer order (source order IS the cascade here — we deliberately avoid
   @layer so the file works on older Safari/Firefox ESR builds that some of
   the restaurant's customers still run):
     1. Tokens          2. Reset/base      3. Utilities
     4. Layout          5. Components      6. Page blocks
     7. State/motion    8. Media queries (contrast, motion, print)

   CONTRAST AUDIT (WCAG 2.1 AA, computed with the sRGB relative-luminance
   formula — ratios rounded down):
     charcoal #1a1512 on saffron  #d4a017 .... 8.38:1  PASS (primary button)
     saffron  #d4a017 on charcoal #1a1512 .... 7.52:1  PASS (gold text on dark)
     cream    #faf6ef on pomegranate #9b2226 . 7.35:1  PASS (danger button)
     ink      #221c17 on cream    #faf6ef .... 15.6:1  PASS (body copy)
     muted    #6b5d4f on cream    #faf6ef ....  6.00:1 PASS (secondary copy)
     muted    #6b5d4f on sand     #efe6d6 ....  5.17:1 PASS
     success  #2d6a4f on cream ................ 6.03:1 PASS
     info     #1d4e6b on cream ................ 8.42:1 PASS
     danger   #9b2226 on cream ................ 7.35:1 PASS
   FAILURES we designed around (do NOT use these as text pairs):
     saffron  #d4a017 on cream ................ 2.20:1 FAIL -> use --pp-gold-ink
     saffron-dark #a67c0d on cream ............ 3.54:1 FAIL for body text,
                                                 OK for >=24px display text and
                                                 for non-text UI borders (3:1).
     warning  #b8860b on cream ................ 3.05:1 FAIL -> use --pp-warning-ink
     clay     #b8845f on cream ................ 3.03:1 FAIL -> decorative only
   Hence the extra *-ink tokens below: they exist purely to give every status
   colour a text-safe sibling on light surfaces.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* -- Brand -------------------------------------------------------------- */
  --pp-saffron: #d4a017;
  --pp-saffron-light: #e8be4f;
  --pp-saffron-dark: #a67c0d;
  --pp-pomegranate: #9b2226;
  --pp-pomegranate-light: #c1393d;
  --pp-charcoal: #1a1512;
  --pp-charcoal-soft: #2a231e;
  --pp-cream: #faf6ef;
  --pp-sand: #efe6d6;
  --pp-clay: #b8845f;
  --pp-ink: #221c17;
  --pp-muted: #6b5d4f;
  --pp-line: #e2d6c3;

  /* -- Status ------------------------------------------------------------- */
  --pp-success: #2d6a4f;
  --pp-warning: #b8860b;
  --pp-danger: #9b2226;
  --pp-info: #1d4e6b;

  /* Text-safe siblings for light surfaces (see contrast audit above). */
  --pp-gold-ink: #7a5c08;      /* 5.86:1 on cream — gold-flavoured link text */
  --pp-success-ink: #1f4c38;
  --pp-warning-ink: #7a5c08;
  --pp-danger-ink: #7d1a1e;
  --pp-info-ink: #163b52;

  /* Tinted surfaces for alerts/badges. Kept as flat hex rather than
     colour-mix() so IE-era mobile browsers still render a solid fill. */
  --pp-success-bg: #e6f0ea;
  --pp-warning-bg: #f8efd6;
  --pp-danger-bg: #f6e4e4;
  --pp-info-bg: #e2edf3;

  /* -- Spacing scale (4px base, doubling-ish) ----------------------------- */
  --pp-space-1: 0.25rem;   /*  4px */
  --pp-space-2: 0.5rem;    /*  8px */
  --pp-space-3: 0.75rem;   /* 12px */
  --pp-space-4: 1rem;      /* 16px */
  --pp-space-5: 1.5rem;    /* 24px */
  --pp-space-6: 2rem;      /* 32px */
  --pp-space-7: 2.5rem;    /* 40px */
  --pp-space-8: 3rem;      /* 48px */
  --pp-space-9: 4rem;      /* 64px */
  --pp-space-10: 5rem;     /* 80px */
  --pp-space-11: 6rem;     /* 96px */
  --pp-space-12: 8rem;     /* 128px */

  /* -- Radii -------------------------------------------------------------- */
  --pp-radius-sm: 4px;
  --pp-radius-md: 10px;
  --pp-radius-lg: 18px;
  --pp-radius-full: 999px;

  /* -- Shadows ------------------------------------------------------------
     Warm-tinted (brown-black rather than blue-black) so cards sit on the
     cream background without looking cold. */
  --pp-shadow-sm: 0 1px 2px rgba(34, 28, 23, 0.06), 0 1px 3px rgba(34, 28, 23, 0.08);
  --pp-shadow-md: 0 4px 10px rgba(34, 28, 23, 0.07), 0 2px 4px rgba(34, 28, 23, 0.06);
  --pp-shadow-lg: 0 18px 40px rgba(34, 28, 23, 0.12), 0 6px 14px rgba(34, 28, 23, 0.08);

  /* -- Typography ---------------------------------------------------------
     System stack only: zero network requests, zero FOUT, instant LCP text. */
  --pp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pp-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --pp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale: min is the 360px-viewport size, max the 1440px size. */
  --pp-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --pp-text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  --pp-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --pp-text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --pp-text-xl: clamp(1.3125rem, 1.2rem + 0.55vw, 1.625rem);
  --pp-text-2xl: clamp(1.5rem, 1.32rem + 0.85vw, 2rem);
  --pp-text-3xl: clamp(1.875rem, 1.55rem + 1.5vw, 2.75rem);
  --pp-text-4xl: clamp(2.25rem, 1.75rem + 2.3vw, 3.5rem);
  --pp-text-5xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);

  --pp-leading-tight: 1.15;
  --pp-leading-snug: 1.35;
  --pp-leading-normal: 1.6;
  --pp-leading-loose: 1.75;

  --pp-tracking-tight: -0.015em;
  --pp-tracking-wide: 0.04em;
  --pp-tracking-widest: 0.14em;

  /* -- Transitions -------------------------------------------------------- */
  --pp-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --pp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pp-transition-fast: 120ms var(--pp-ease);
  --pp-transition: 200ms var(--pp-ease);
  --pp-transition-slow: 360ms var(--pp-ease-out);

  /* -- Layout ------------------------------------------------------------- */
  --pp-container: 1200px;
  --pp-container-narrow: 760px;
  --pp-header-h: 64px;
  --pp-z-header: 100;
  --pp-z-sticky: 120;
  --pp-z-drawer: 200;
  --pp-z-modal: 300;
  --pp-z-toast: 400;

  /* Focus ring is a token so every component stays identical. */
  --pp-focus-ring: 0 0 0 3px var(--pp-cream), 0 0 0 6px var(--pp-pomegranate);
  --pp-focus-ring-dark: 0 0 0 3px var(--pp-charcoal), 0 0 0 6px var(--pp-saffron);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must clear the sticky header. */
  scroll-padding-top: calc(var(--pp-header-h) + var(--pp-space-4));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0;
  background-color: var(--pp-cream);
  color: var(--pp-ink);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  line-height: var(--pp-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Prevents horizontal jitter when a decorative motif overflows slightly. */
  overflow-x: hidden;
}

/* Set by MobileNav / Modal so background content cannot scroll behind an
   overlay. position:fixed keeps iOS Safari from rubber-banding. */
body.pp-scroll-locked {
  overflow: hidden;
  /* touch-action guards against the iOS momentum-scroll bleed-through. */
  touch-action: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--pp-space-3);
  font-family: var(--pp-font-display);
  font-weight: 700;
  line-height: var(--pp-leading-tight);
  letter-spacing: var(--pp-tracking-tight);
  color: var(--pp-charcoal);
  text-wrap: balance; /* Progressive: ignored where unsupported. */
}

h1 { font-size: var(--pp-text-4xl); }
h2 { font-size: var(--pp-text-3xl); }
h3 { font-size: var(--pp-text-2xl); }
h4 { font-size: var(--pp-text-xl); }
h5 { font-size: var(--pp-text-lg); }
h6 {
  font-size: var(--pp-text-sm);
  font-family: var(--pp-font-body);
  text-transform: uppercase;
  letter-spacing: var(--pp-tracking-widest);
  color: var(--pp-muted);
}

p { margin: 0 0 var(--pp-space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--pp-pomegranate);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--pp-transition-fast);
}

a:hover { color: var(--pp-pomegranate-light); }

/* Every focusable thing gets a ring. Declared once, high in the file, so a
   component that forgets to style focus still inherits an accessible one. */
:focus-visible {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
  border-radius: var(--pp-radius-sm);
}

/* Remove the ring for mouse users only where :focus-visible is supported. */
:focus:not(:focus-visible) { outline: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* The UA sheet gives [hidden] display:none at the lowest specificity, so any
   component rule that sets display (flex/grid/block) silently defeats it.
   Since JS toggles the hidden ATTRIBUTE as the single source of truth for
   visibility (conditional checkout blocks, tab panels, the cart badge), the
   attribute has to win. */
[hidden] {
  display: none !important;
}

/* Images always know their box before they load — this is the single biggest
   CLS win on a photography-forward site. */
img { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

ul, ol { margin: 0 0 var(--pp-space-4); padding-inline-start: var(--pp-space-5); }
li + li { margin-top: var(--pp-space-1); }

hr {
  border: 0;
  border-top: 1px solid var(--pp-line);
  margin: var(--pp-space-6) 0;
}

blockquote {
  margin: 0 0 var(--pp-space-4);
  padding-inline-start: var(--pp-space-5);
  border-inline-start: 3px solid var(--pp-saffron);
  font-family: var(--pp-font-display);
  font-style: italic;
  color: var(--pp-charcoal-soft);
}

small { font-size: var(--pp-text-sm); }

code, kbd, pre { font-family: var(--pp-font-mono); font-size: 0.92em; }

table { border-collapse: collapse; width: 100%; }

::selection {
  background: var(--pp-saffron);
  color: var(--pp-charcoal);
}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

/* The clip-path + clip pair: clip() for legacy engines, clip-path for modern.
   1px box (not 0) because some screen readers skip zero-sized elements. */
.visually-hidden,
.pp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip links must be reachable — reveal on focus. */
.visually-hidden--focusable:focus,
.visually-hidden--focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

.pp-skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: var(--pp-space-4);
  z-index: 999;
  padding: var(--pp-space-3) var(--pp-space-5);
  background: var(--pp-charcoal);
  color: var(--pp-saffron);
  border-radius: 0 0 var(--pp-radius-md) var(--pp-radius-md);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--pp-shadow-lg);
  transition: top var(--pp-transition);
}

.pp-skip-link:focus {
  top: 0;
  color: var(--pp-saffron);
}

.pp-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -webkit-line-clamp still needs the prefixed box model in every engine. */
.pp-clamp-2,
.pp-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.pp-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.pp-text-center { text-align: center; }
.pp-text-left { text-align: start; }
.pp-text-right { text-align: end; }

.pp-text-xs { font-size: var(--pp-text-xs); }
.pp-text-sm { font-size: var(--pp-text-sm); }
.pp-text-lg { font-size: var(--pp-text-lg); }
.pp-text-xl { font-size: var(--pp-text-xl); }

.pp-muted { color: var(--pp-muted); }
.pp-ink { color: var(--pp-ink); }
.pp-gold { color: var(--pp-gold-ink); }
.pp-pom { color: var(--pp-pomegranate); }

.pp-display { font-family: var(--pp-font-display); }
.pp-eyebrow {
  display: block;
  margin-bottom: var(--pp-space-2);
  font-size: var(--pp-text-xs);
  font-weight: 700;
  letter-spacing: var(--pp-tracking-widest);
  text-transform: uppercase;
  color: var(--pp-gold-ink);
}

.pp-bold { font-weight: 700; }
.pp-nowrap { white-space: nowrap; }
.pp-uppercase { text-transform: uppercase; letter-spacing: var(--pp-tracking-wide); }

.pp-mt-0 { margin-top: 0; }
.pp-mt-2 { margin-top: var(--pp-space-2); }
.pp-mt-4 { margin-top: var(--pp-space-4); }
.pp-mt-6 { margin-top: var(--pp-space-6); }
.pp-mb-0 { margin-bottom: 0; }
.pp-mb-2 { margin-bottom: var(--pp-space-2); }
.pp-mb-4 { margin-bottom: var(--pp-space-4); }
.pp-mb-6 { margin-bottom: var(--pp-space-6); }

.pp-hidden { display: none !important; }
.pp-block { display: block; }
.pp-flex { display: flex; }
.pp-w-full { width: 100%; }

/* Show only on small / only on large. Used by the sticky mobile bar. */
@media (min-width: 768px) { .pp-mobile-only { display: none !important; } }
@media (max-width: 767.98px) { .pp-desktop-only { display: none !important; } }

/* Decorative kilim divider: a repeating diamond lattice drawn purely with
   gradients — no image request, scales to any width. */
.pp-motif-divider {
  height: 14px;
  border: 0;
  margin: var(--pp-space-8) 0;
  background-image:
    linear-gradient(135deg, var(--pp-saffron) 25%, transparent 25%),
    linear-gradient(225deg, var(--pp-saffron) 25%, transparent 25%),
    linear-gradient(315deg, var(--pp-saffron) 25%, transparent 25%),
    linear-gradient(45deg, var(--pp-saffron) 25%, transparent 25%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 0, 7px -7px, 0 7px;
  opacity: 0.55;
}

.pp-motif-divider--pom {
  background-image:
    linear-gradient(135deg, var(--pp-pomegranate) 25%, transparent 25%),
    linear-gradient(225deg, var(--pp-pomegranate) 25%, transparent 25%),
    linear-gradient(315deg, var(--pp-pomegranate) 25%, transparent 25%),
    linear-gradient(45deg, var(--pp-pomegranate) 25%, transparent 25%);
}

/* A thin woven band, used under section headings. */
.pp-motif-rule {
  width: 96px;
  height: 4px;
  margin: var(--pp-space-3) 0 var(--pp-space-5);
  border-radius: var(--pp-radius-full);
  background: repeating-linear-gradient(
    90deg,
    var(--pp-saffron) 0 12px,
    var(--pp-pomegranate) 12px 18px
  );
}

.pp-section--center .pp-motif-rule { margin-inline: auto; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.pp-container {
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding-inline: var(--pp-space-4);
}

@media (min-width: 768px) {
  .pp-container { padding-inline: var(--pp-space-6); }
}

.pp-container--narrow { max-width: var(--pp-container-narrow); }
.pp-container--wide { max-width: 1440px; }

.pp-section {
  padding-block: var(--pp-space-8);
}

@media (min-width: 768px) {
  .pp-section { padding-block: var(--pp-space-10); }
}

.pp-section--tight { padding-block: var(--pp-space-6); }
.pp-section--loose { padding-block: var(--pp-space-11); }
.pp-section--center { text-align: center; }
.pp-section--sand { background: var(--pp-sand); }
.pp-section--cream { background: var(--pp-cream); }

.pp-section--dark {
  background: var(--pp-charcoal);
  color: var(--pp-sand);
}

.pp-section--dark h1,
.pp-section--dark h2,
.pp-section--dark h3,
.pp-section--dark h4 { color: var(--pp-cream); }

.pp-section--dark .pp-eyebrow { color: var(--pp-saffron); }
.pp-section--dark a { color: var(--pp-saffron-light); }
.pp-section--dark :focus-visible { outline-color: var(--pp-saffron); }

/* Below-the-fold sections skip layout/paint until they scroll near the
   viewport. contain-intrinsic-size supplies a placeholder height so the
   scrollbar does not jump — the value is a rough average measured from the
   real pages, not a magic number. */
.pp-section--deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.pp-grid {
  display: grid;
  gap: var(--pp-space-5);
  grid-template-columns: 1fr;
}

/* Mobile-first: single column until there is genuinely room. auto-fit with a
   minmax floor beats hard breakpoints for card grids because it also adapts
   inside narrow sidebars. */
@media (min-width: 560px) {
  .pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .pp-grid { gap: var(--pp-space-6); }
  .pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pp-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Sidebar + content (menu filters, checkout summary). */
.pp-grid--sidebar { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .pp-grid--sidebar { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .pp-grid--sidebar-right { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* Vertical rhythm without margin collapse surprises. */
.pp-stack { display: flex; flex-direction: column; gap: var(--pp-space-4); }
.pp-stack--sm { gap: var(--pp-space-2); }
.pp-stack--lg { gap: var(--pp-space-6); }
.pp-stack > * { margin-block: 0; }

/* Horizontal group that wraps gracefully. */
.pp-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-3);
}

.pp-cluster--between { justify-content: space-between; }
.pp-cluster--center { justify-content: center; }
.pp-cluster--end { justify-content: flex-end; }
.pp-cluster--tight { gap: var(--pp-space-2); }
.pp-cluster--top { align-items: flex-start; }

/* Every image wrapper reserves its box. */
.pp-ratio {
  position: relative;
  overflow: hidden;
  background: var(--pp-sand);
  aspect-ratio: 4 / 3;
}

.pp-ratio > img,
.pp-ratio > video,
.pp-ratio > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-ratio--square { aspect-ratio: 1 / 1; }
.pp-ratio--wide { aspect-ratio: 16 / 9; }
.pp-ratio--portrait { aspect-ratio: 3 / 4; }
.pp-ratio--hero { aspect-ratio: 3 / 4; }

@media (min-width: 768px) {
  .pp-ratio--hero { aspect-ratio: 21 / 9; }
}

/* ==========================================================================
   5. COMPONENTS — HEADER & NAVIGATION
   ========================================================================== */

.pp-topbar {
  background: var(--pp-charcoal);
  color: var(--pp-sand);
  font-size: var(--pp-text-xs);
  letter-spacing: 0.02em;
}

.pp-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-4);
  min-height: 34px;
  padding-block: var(--pp-space-1);
  text-align: center;
}

.pp-topbar a { color: var(--pp-saffron-light); }
.pp-topbar :focus-visible { outline-color: var(--pp-saffron); }
.pp-topbar__item { display: inline-flex; align-items: center; gap: var(--pp-space-2); }

/* Phone number hides on the narrowest phones so the promo line stays legible. */
@media (max-width: 479.98px) {
  .pp-topbar__item--secondary { display: none; }
}

.pp-header {
  position: sticky;
  top: 0;
  z-index: var(--pp-z-header);
  background: rgba(250, 246, 239, 0.94);
  border-bottom: 1px solid var(--pp-line);
  /* backdrop-filter is a progressive nicety; the rgba fallback above keeps
     text legible when it is unsupported or disabled for battery reasons. */
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}

.pp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-4);
  min-height: var(--pp-header-h);
  padding-block: var(--pp-space-2);
}

.pp-header.is-stuck { box-shadow: var(--pp-shadow-md); }

.pp-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-3);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--pp-tracking-tight);
  color: var(--pp-charcoal);
  text-decoration: none;
  flex: 0 0 auto;
}

.pp-logo:hover { color: var(--pp-pomegranate); }

.pp-logo__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--pp-radius-md);
  background:
    conic-gradient(from 45deg,
      var(--pp-saffron) 0deg 90deg,
      var(--pp-saffron-dark) 90deg 180deg,
      var(--pp-saffron) 180deg 270deg,
      var(--pp-saffron-dark) 270deg 360deg);
  color: var(--pp-charcoal);
  font-family: var(--pp-font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.pp-logo__text { display: flex; flex-direction: column; }

.pp-logo__sub {
  font-family: var(--pp-font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--pp-tracking-widest);
  text-transform: uppercase;
  color: var(--pp-muted);
}

@media (max-width: 400px) {
  .pp-logo__sub { display: none; }
}

/* -- Desktop nav ---------------------------------------------------------- */

.pp-nav { display: none; }

@media (min-width: 992px) {
  .pp-nav {
    display: flex;
    align-items: center;
    gap: var(--pp-space-1);
    margin-inline: auto;
  }
}

.pp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--pp-space-2) var(--pp-space-3);
  border-radius: var(--pp-radius-sm);
  color: var(--pp-ink);
  font-size: var(--pp-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--pp-transition-fast), background-color var(--pp-transition-fast);
}

.pp-nav__link:hover { color: var(--pp-pomegranate); background: var(--pp-sand); }

/* Underline grows from the centre. transform-only so it never triggers layout. */
.pp-nav__link::after {
  content: "";
  position: absolute;
  left: var(--pp-space-3);
  right: var(--pp-space-3);
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--pp-saffron);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--pp-transition);
}

.pp-nav__link:hover::after,
.pp-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.pp-nav__link[aria-current="page"] { color: var(--pp-pomegranate); }

.pp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pp-space-2);
  flex: 0 0 auto;
}

/* -- Cart button ---------------------------------------------------------- */

.pp-cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--pp-space-2) var(--pp-space-3);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-full);
  background: var(--pp-cream);
  color: var(--pp-charcoal);
  font-size: var(--pp-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--pp-transition-fast), background-color var(--pp-transition-fast);
}

.pp-cart-button:hover {
  border-color: var(--pp-saffron);
  background: var(--pp-sand);
  color: var(--pp-charcoal);
}

.pp-cart-button__label { display: none; }
@media (min-width: 992px) { .pp-cart-button__label { display: inline; } }

.pp-cart-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--pp-radius-full);
  background: var(--pp-pomegranate);
  color: var(--pp-cream);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Server renders the badge with hidden="" when the cart is empty; JS toggles
   the attribute. Using an attribute rather than a class keeps it semantic. */
.pp-cart-count[hidden] { display: none; }

/* Pulse confirms an item landed in the cart without a layout shift. */
.pp-cart-count.is-bumped { animation: pp-bump 380ms var(--pp-ease-out); }

@keyframes pp-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* -- Hamburger ------------------------------------------------------------ */

.pp-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: var(--pp-cream);
}

@media (min-width: 992px) { .pp-nav-toggle { display: none; } }

.pp-nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--pp-charcoal);
  transition: transform var(--pp-transition), opacity var(--pp-transition-fast);
}

/* Animate to an X. The outer bars translate to the centre then rotate; the
   middle one fades. Only transform/opacity animate — compositor-friendly. */
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -- Mobile nav panel ----------------------------------------------------- */

.pp-mobile-nav {
  position: fixed;
  inset: var(--pp-header-h) 0 0 0;
  z-index: var(--pp-z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--pp-space-5) var(--pp-space-4) var(--pp-space-8);
  background: var(--pp-cream);
  border-top: 1px solid var(--pp-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Hidden state uses visibility (not display:none) so the open transition
     can run and so the focus trap can measure the panel. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--pp-transition), transform var(--pp-transition),
    visibility 0s linear var(--pp-transition);
}

.pp-mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (min-width: 992px) {
  .pp-mobile-nav { display: none; }
}

.pp-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  min-height: 52px;
  padding: var(--pp-space-3) var(--pp-space-2);
  border-bottom: 1px solid var(--pp-line);
  color: var(--pp-charcoal);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
  font-weight: 600;
  text-decoration: none;
}

.pp-mobile-nav__link:hover,
.pp-mobile-nav__link[aria-current="page"] { color: var(--pp-pomegranate); }

.pp-mobile-nav__meta {
  margin-top: auto;
  padding-top: var(--pp-space-6);
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
}

.pp-mobile-nav__cta { margin-top: var(--pp-space-5); }

/* Dim layer behind the panel on tablets where the panel is not full width. */
.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--pp-z-drawer) - 1);
  background: rgba(26, 21, 18, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pp-transition), visibility 0s linear var(--pp-transition);
}

.pp-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ==========================================================================
   6. COMPONENTS — HERO
   ========================================================================== */

.pp-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  background: var(--pp-charcoal);
  color: var(--pp-cream);
  overflow: hidden;
}

.pp-hero__media {
  position: relative;
  grid-area: 1 / 1;
  aspect-ratio: 3 / 4;
  width: 100%;
}

@media (min-width: 768px) {
  .pp-hero__media { aspect-ratio: 21 / 9; min-height: 480px; }
}

.pp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight dim so the overlaid text clears 4.5:1 against any photo. The
     gradient below does the heavy lifting; this catches bright-sky shots. */
  filter: brightness(0.82) saturate(1.05);
}

/* Two-stop scrim: opaque enough at the text end to guarantee contrast,
   transparent at the top so the food photography still reads. */
.pp-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 21, 18, 0.94) 0%,
    rgba(26, 21, 18, 0.78) 34%,
    rgba(26, 21, 18, 0.28) 72%,
    rgba(26, 21, 18, 0.12) 100%
  );
}

.pp-hero__content {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding: var(--pp-space-6) var(--pp-space-4) var(--pp-space-8);
}

@media (min-width: 768px) {
  .pp-hero__content {
    align-self: center;
    padding: var(--pp-space-10) var(--pp-space-6);
  }
  .pp-hero__inner { max-width: 620px; }
}

.pp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-2);
  margin-bottom: var(--pp-space-4);
  padding: var(--pp-space-2) var(--pp-space-4);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: var(--pp-radius-full);
  background: rgba(26, 21, 18, 0.7);
  color: var(--pp-saffron);
  font-size: var(--pp-text-xs);
  font-weight: 700;
  letter-spacing: var(--pp-tracking-widest);
  text-transform: uppercase;
}

.pp-hero__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--pp-saffron);
}

.pp-hero__title {
  margin: 0 0 var(--pp-space-4);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-4xl);
  line-height: 1.05;
  color: var(--pp-cream);
  text-wrap: balance;
}

@media (min-width: 992px) {
  .pp-hero__title { font-size: var(--pp-text-5xl); }
}

.pp-hero__title em {
  font-style: italic;
  color: var(--pp-saffron);
}

.pp-hero__sub {
  max-width: 54ch;
  margin: 0 0 var(--pp-space-6);
  font-size: var(--pp-text-lg);
  line-height: var(--pp-leading-snug);
  color: var(--pp-sand);
}

.pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-3);
}

@media (max-width: 479.98px) {
  /* Full-width stacked CTAs beat cramped side-by-side buttons on small phones. */
  .pp-hero__actions .pp-btn { flex: 1 1 100%; }
}

.pp-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-3) var(--pp-space-6);
  margin-top: var(--pp-space-6);
  padding: 0;
  list-style: none;
  font-size: var(--pp-text-sm);
  color: var(--pp-sand);
}

.pp-hero__points li { display: flex; align-items: center; gap: var(--pp-space-2); margin: 0; }

.pp-hero__points li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  transform: rotate(45deg);
  background: var(--pp-saffron);
}

.pp-hero :focus-visible { outline-color: var(--pp-saffron); }

/* Compact page header for interior pages. */
.pp-page-hero {
  padding-block: var(--pp-space-8);
  background: var(--pp-charcoal);
  color: var(--pp-cream);
  /* Faint lattice motif so interior headers are not flat blocks of colour. */
  background-image:
    repeating-linear-gradient(45deg,
      rgba(212, 160, 23, 0.06) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg,
      rgba(212, 160, 23, 0.06) 0 2px, transparent 2px 14px);
}

.pp-page-hero h1 { color: var(--pp-cream); margin-bottom: var(--pp-space-2); }
.pp-page-hero p { color: var(--pp-sand); max-width: 62ch; margin-bottom: 0; }
.pp-page-hero a { color: var(--pp-saffron-light); }
.pp-page-hero :focus-visible { outline-color: var(--pp-saffron); }

/* ==========================================================================
   7. COMPONENTS — BUTTONS
   ========================================================================== */

.pp-btn {
  --_btn-bg: var(--pp-sand);
  --_btn-fg: var(--pp-charcoal);
  --_btn-border: var(--pp-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-2);
  /* 44x44 is the WCAG 2.5.5 / Apple HIG floor. min-height alone is not
     enough for icon-only buttons, hence min-width too. */
  min-height: 44px;
  min-width: 44px;
  padding: var(--pp-space-3) var(--pp-space-5);
  border: 1px solid var(--_btn-border);
  border-radius: var(--pp-radius-full);
  background-color: var(--_btn-bg);
  color: var(--_btn-fg);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pp-transition-fast),
    border-color var(--pp-transition-fast),
    color var(--pp-transition-fast),
    transform var(--pp-transition-fast),
    box-shadow var(--pp-transition-fast);
}

.pp-btn:hover { color: var(--_btn-fg); }
.pp-btn:active { transform: translateY(1px); }

/* 3px ring, 2px offset — required by the spec and by SC 2.4.11. */
.pp-btn:focus-visible {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
}

.pp-btn[disabled],
.pp-btn.is-disabled,
.pp-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.pp-btn--primary {
  --_btn-bg: var(--pp-saffron);
  --_btn-fg: var(--pp-charcoal);   /* 8.38:1 — see contrast audit */
  --_btn-border: var(--pp-saffron);
  box-shadow: var(--pp-shadow-sm);
}

.pp-btn--primary:hover {
  --_btn-bg: var(--pp-saffron-light);
  --_btn-border: var(--pp-saffron-light);
  box-shadow: var(--pp-shadow-md);
}

.pp-btn--secondary {
  --_btn-bg: var(--pp-pomegranate);
  --_btn-fg: var(--pp-cream);      /* 7.35:1 */
  --_btn-border: var(--pp-pomegranate);
}

.pp-btn--secondary:hover {
  --_btn-bg: var(--pp-pomegranate-light);
  --_btn-border: var(--pp-pomegranate-light);
}

.pp-btn--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--pp-charcoal);
  --_btn-border: var(--pp-charcoal);
}

.pp-btn--ghost:hover {
  --_btn-bg: var(--pp-charcoal);
  --_btn-fg: var(--pp-cream);
}

/* On dark sections the ghost button inverts so it stays visible. */
.pp-section--dark .pp-btn--ghost,
.pp-hero .pp-btn--ghost,
.pp-page-hero .pp-btn--ghost {
  --_btn-fg: var(--pp-cream);
  --_btn-border: var(--pp-sand);
}

.pp-section--dark .pp-btn--ghost:hover,
.pp-hero .pp-btn--ghost:hover,
.pp-page-hero .pp-btn--ghost:hover {
  --_btn-bg: var(--pp-cream);
  --_btn-fg: var(--pp-charcoal);
}

.pp-section--dark .pp-btn:focus-visible,
.pp-hero .pp-btn:focus-visible,
.pp-page-hero .pp-btn:focus-visible { outline-color: var(--pp-saffron); }

.pp-btn--danger {
  --_btn-bg: var(--pp-danger);
  --_btn-fg: var(--pp-cream);
  --_btn-border: var(--pp-danger);
}

.pp-btn--danger:hover {
  --_btn-bg: var(--pp-pomegranate-light);
  --_btn-border: var(--pp-pomegranate-light);
}

/* A quiet text-only button for "remove", "clear" etc. */
.pp-btn--link {
  --_btn-bg: transparent;
  --_btn-fg: var(--pp-danger-ink);
  --_btn-border: transparent;
  padding-inline: var(--pp-space-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pp-btn--link:hover { --_btn-bg: var(--pp-danger-bg); }

.pp-btn--lg {
  min-height: 54px;
  padding: var(--pp-space-4) var(--pp-space-7);
  font-size: var(--pp-text-base);
}

.pp-btn--sm {
  /* Still 44px tall for touch: only the padding and type shrink. Visual
     compactness comes from the reduced horizontal padding. */
  padding: var(--pp-space-2) var(--pp-space-4);
  font-size: var(--pp-text-xs);
}

.pp-btn--block { display: flex; width: 100%; }

.pp-btn--icon {
  padding: var(--pp-space-2);
  width: 44px;
  border-radius: var(--pp-radius-full);
}

.pp-btn__icon { width: 18px; height: 18px; flex: 0 0 18px; }

/* Loading state driven by FormEnhancer: the label is hidden and a spinner
   replaces it, keeping the button's width so nothing shifts. */
.pp-btn.is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.pp-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--_btn-fg);
  animation: pp-spin 700ms linear infinite;
}

@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pp-spin 700ms linear infinite;
}

/* ==========================================================================
   8. COMPONENTS — CARDS
   ========================================================================== */

.pp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--pp-transition), transform var(--pp-transition),
    border-color var(--pp-transition);
}

.pp-card--flat { box-shadow: none; }
.pp-card--sand { background: var(--pp-sand); }
.pp-card__body { padding: var(--pp-space-5); flex: 1 1 auto; }
.pp-card__header {
  padding: var(--pp-space-5) var(--pp-space-5) 0;
}
.pp-card__footer {
  padding: var(--pp-space-4) var(--pp-space-5);
  border-top: 1px solid var(--pp-line);
  background: var(--pp-cream);
}
.pp-card__title { margin-bottom: var(--pp-space-2); font-size: var(--pp-text-lg); }

/* -- Dish card ------------------------------------------------------------ */

.pp-dish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--pp-transition), transform var(--pp-transition),
    border-color var(--pp-transition);
}

@media (hover: hover) {
  .pp-dish-card:hover {
    transform: translateY(-3px);
    border-color: var(--pp-saffron);
    box-shadow: var(--pp-shadow-lg);
  }
  .pp-dish-card:hover .pp-dish-card__media img { transform: scale(1.05); }
}

/* Focus-within so keyboard users get the same affordance as hover. */
.pp-dish-card:focus-within {
  border-color: var(--pp-saffron);
  box-shadow: var(--pp-shadow-lg);
}

.pp-dish-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pp-sand);
  overflow: hidden;
}

.pp-dish-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pp-transition-slow);
}

/* Ribbon for "Sold out" / "Chef's pick". */
.pp-dish-card__ribbon {
  position: absolute;
  top: var(--pp-space-3);
  inset-inline-start: var(--pp-space-3);
  padding: var(--pp-space-1) var(--pp-space-3);
  border-radius: var(--pp-radius-full);
  background: var(--pp-charcoal);
  color: var(--pp-saffron);
  font-size: var(--pp-text-xs);
  font-weight: 700;
  letter-spacing: var(--pp-tracking-wide);
  text-transform: uppercase;
}

.pp-dish-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  padding: var(--pp-space-4) var(--pp-space-4) var(--pp-space-3);
  flex: 1 1 auto;
}

.pp-dish-card__title {
  margin: 0;
  font-size: var(--pp-text-lg);
  line-height: var(--pp-leading-snug);
}

/* Stretched link: the whole card is clickable, but only the title is the
   accessible link name — no duplicate tab stops, no div-with-onclick. */
.pp-dish-card__title a {
  color: var(--pp-charcoal);
  text-decoration: none;
}

.pp-dish-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pp-dish-card__title a:hover { color: var(--pp-pomegranate); }

.pp-dish-card__desc {
  margin: 0;
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  line-height: var(--pp-leading-snug);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.pp-dish-card__price {
  margin-top: auto;
  padding-top: var(--pp-space-2);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
  font-weight: 700;
  color: var(--pp-charcoal);
  font-variant-numeric: tabular-nums;
}

.pp-dish-card__price del {
  margin-inline-end: var(--pp-space-2);
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  font-weight: 400;
}

.pp-dish-card__price small {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-xs);
  font-weight: 500;
  color: var(--pp-muted);
}

.pp-dish-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-1);
}

.pp-dish-card__actions {
  position: relative;
  z-index: 2; /* Sits above the stretched link so buttons remain clickable. */
  display: flex;
  gap: var(--pp-space-2);
  padding: 0 var(--pp-space-4) var(--pp-space-4);
}

.pp-dish-card__actions .pp-btn { flex: 1 1 auto; }

/* Horizontal variant used in search results and the catering builder. */
.pp-dish-card--row { flex-direction: row; }
.pp-dish-card--row .pp-dish-card__media {
  flex: 0 0 112px;
  aspect-ratio: 1 / 1;
}
@media (min-width: 560px) {
  .pp-dish-card--row .pp-dish-card__media { flex-basis: 160px; }
}

/* -- Category card -------------------------------------------------------- */

.pp-category-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  background: var(--pp-charcoal);
  color: var(--pp-cream);
  text-decoration: none;
  isolation: isolate;
}

@media (min-width: 768px) { .pp-category-card { aspect-ratio: 1 / 1; } }

.pp-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pp-transition-slow);
}

.pp-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(26, 21, 18, 0.92) 0%,
    rgba(26, 21, 18, 0.5) 45%,
    rgba(26, 21, 18, 0.08) 100%);
}

@media (hover: hover) {
  .pp-category-card:hover img { transform: scale(1.06); }
}

.pp-category-card:focus-visible { outline: 3px solid var(--pp-saffron); outline-offset: 3px; }

.pp-category-card__content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--pp-space-5) var(--pp-space-4);
}

.pp-category-card__title {
  margin: 0 0 var(--pp-space-1);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-xl);
  color: var(--pp-cream);
}

.pp-category-card__meta {
  margin: 0;
  font-size: var(--pp-text-xs);
  letter-spacing: var(--pp-tracking-wide);
  text-transform: uppercase;
  color: var(--pp-saffron);
}

/* -- Testimonial ---------------------------------------------------------- */

.pp-testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
  height: 100%;
  padding: var(--pp-space-6) var(--pp-space-5) var(--pp-space-5);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
}

/* Decorative quote mark — aria-hidden by virtue of being a pseudo-element. */
.pp-testimonial::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  inset-inline-start: var(--pp-space-4);
  font-family: var(--pp-font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--pp-saffron);
  opacity: 0.4;
}

.pp-testimonial__quote {
  margin: 0;
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
  font-style: italic;
  line-height: var(--pp-leading-snug);
  color: var(--pp-charcoal-soft);
}

.pp-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  margin-top: auto;
}

.pp-testimonial__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pp-sand);
}

.pp-testimonial__name { font-weight: 700; font-size: var(--pp-text-sm); }
.pp-testimonial__role { color: var(--pp-muted); font-size: var(--pp-text-xs); }

/* Star rating built from CSS shapes so no icon font is needed. */
.pp-stars { display: inline-flex; gap: 2px; }

.pp-stars__star {
  width: 14px;
  height: 14px;
  background: var(--pp-line);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.pp-stars__star.is-filled { background: var(--pp-saffron); }

/* -- Package card (catering tiers) ---------------------------------------- */

.pp-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
  height: 100%;
  padding: var(--pp-space-6) var(--pp-space-5);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition),
    transform var(--pp-transition);
}

.pp-package-card--featured {
  border-color: var(--pp-saffron);
  border-width: 2px;
  box-shadow: var(--pp-shadow-lg);
}

/* Woven top edge marks the recommended tier without extra markup. */
.pp-package-card--featured::before {
  content: "";
  position: absolute;
  inset-inline: -2px;
  top: -2px;
  height: 6px;
  border-radius: var(--pp-radius-lg) var(--pp-radius-lg) 0 0;
  background: repeating-linear-gradient(90deg,
    var(--pp-saffron) 0 14px, var(--pp-pomegranate) 14px 20px);
}

.pp-package-card__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--pp-space-1) var(--pp-space-4);
  border-radius: var(--pp-radius-full);
  background: var(--pp-pomegranate);
  color: var(--pp-cream);
  font-size: var(--pp-text-xs);
  font-weight: 700;
  letter-spacing: var(--pp-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.pp-package-card__name {
  margin: 0;
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-xl);
}

.pp-package-card__price {
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--pp-charcoal);
  font-variant-numeric: tabular-nums;
}

.pp-package-card__price span {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-sm);
  font-weight: 500;
  color: var(--pp-muted);
}

.pp-package-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  font-size: var(--pp-text-sm);
}

.pp-package-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-2);
  margin: 0;
}

/* Diamond bullet echoes the kilim motif. */
.pp-package-card__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 0.45em;
  transform: rotate(45deg);
  background: var(--pp-saffron);
}

.pp-package-card__list li.is-excluded { color: var(--pp-muted); }
.pp-package-card__list li.is-excluded::before { background: var(--pp-line); }

.pp-package-card__cta { margin-top: auto; padding-top: var(--pp-space-2); }

/* ==========================================================================
   9. COMPONENTS — BADGES & SPICE METER
   ========================================================================== */

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--pp-space-2);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-full);
  background: var(--pp-sand);
  color: var(--pp-ink);
  font-size: var(--pp-text-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* A small coloured dot carries the meaning redundantly with the text label,
   so the badge never relies on colour alone (SC 1.4.1). */
.pp-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}

.pp-badge--veg {
  background: var(--pp-success-bg);
  border-color: #c3ddd0;
  color: var(--pp-success-ink);
}

.pp-badge--vegan {
  background: #dff0e6;
  border-color: #b3d8c2;
  color: #14503a;
}

.pp-badge--halal {
  background: var(--pp-info-bg);
  border-color: #bcd6e3;
  color: var(--pp-info-ink);
}

.pp-badge--gf {
  background: var(--pp-warning-bg);
  border-color: #e4d2a4;
  color: var(--pp-warning-ink);
}

.pp-badge--frozen {
  background: #e6eef2;
  border-color: #c4d6de;
  color: #1c4657;
}

.pp-badge--popular {
  background: var(--pp-charcoal);
  border-color: var(--pp-charcoal);
  color: var(--pp-saffron); /* 7.52:1 */
}

.pp-badge--new {
  background: var(--pp-danger-bg);
  border-color: #e0bcbc;
  color: var(--pp-danger-ink);
}

.pp-badge--soldout {
  background: #eee9e1;
  border-color: var(--pp-line);
  color: var(--pp-muted);
}

.pp-badge--lg { padding: var(--pp-space-1) var(--pp-space-3); font-size: var(--pp-text-sm); }

/* Badges printed on a dark surface need their own treatment. */
.pp-section--dark .pp-badge {
  background: rgba(250, 246, 239, 0.1);
  border-color: rgba(250, 246, 239, 0.28);
  color: var(--pp-sand);
}

/* -- Spice meter ----------------------------------------------------------
   Four pips drawn as CSS diamonds. Deliberately NOT emoji: emoji render
   inconsistently across platforms, get announced as "hot pepper hot pepper"
   by screen readers, and cannot be styled. The visible pips are decorative
   (aria-hidden in the template); the .visually-hidden span carries the real
   label, e.g. "Spice level 2 of 4 — medium". */

.pp-spice {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.pp-spice__pip {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  transform: rotate(45deg);
  border: 1px solid var(--pp-clay);
  background: transparent;
  border-radius: 1px;
}

.pp-spice__pip.is-filled {
  background: var(--pp-pomegranate);
  border-color: var(--pp-pomegranate);
}

/* Level modifiers let a template fill pips without per-pip classes:
   <span class="pp-spice pp-spice--2">…4 pips…</span> */
.pp-spice--1 .pp-spice__pip:nth-child(-n + 1),
.pp-spice--2 .pp-spice__pip:nth-child(-n + 2),
.pp-spice--3 .pp-spice__pip:nth-child(-n + 3),
.pp-spice--4 .pp-spice__pip:nth-child(-n + 4) {
  background: var(--pp-pomegranate);
  border-color: var(--pp-pomegranate);
}

/* Level 4 gets a deeper tone so the top of the scale is distinguishable in
   greyscale as well as by count. */
.pp-spice--4 .pp-spice__pip { border-color: var(--pp-danger-ink); }
.pp-spice--4 .pp-spice__pip.is-filled,
.pp-spice--4 .pp-spice__pip:nth-child(-n + 4) { background: var(--pp-danger-ink); }

.pp-spice__label {
  margin-inline-start: var(--pp-space-1);
  font-size: var(--pp-text-xs);
  font-weight: 600;
  color: var(--pp-muted);
}

/* ==========================================================================
   10. COMPONENTS — FORMS
   ========================================================================== */

.pp-field {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  margin-bottom: var(--pp-space-4);
}

.pp-field--inline { flex-direction: row; align-items: center; gap: var(--pp-space-3); }

.pp-label {
  font-size: var(--pp-text-sm);
  font-weight: 700;
  color: var(--pp-charcoal);
}

/* Required marker is redundant with the input's required attribute, but
   sighted users need the visual cue too. The asterisk carries a title in
   the template; here we only style it. */
.pp-label__req { color: var(--pp-danger); margin-inline-start: 2px; }
.pp-label__optional {
  margin-inline-start: var(--pp-space-2);
  font-weight: 500;
  font-size: var(--pp-text-xs);
  color: var(--pp-muted);
  text-transform: uppercase;
  letter-spacing: var(--pp-tracking-wide);
}

.pp-input,
.pp-select,
.pp-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--pp-space-3) var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: #fff;
  color: var(--pp-ink);
  /* 16px minimum stops iOS Safari from zooming the viewport on focus. */
  font-size: max(16px, var(--pp-text-base));
  line-height: 1.4;
  transition: border-color var(--pp-transition-fast), box-shadow var(--pp-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.pp-input::placeholder,
.pp-textarea::placeholder {
  color: var(--pp-muted);
  opacity: 1; /* Firefox dims placeholders by default; that breaks contrast. */
}

.pp-input:hover,
.pp-select:hover,
.pp-textarea:hover { border-color: var(--pp-clay); }

.pp-input:focus,
.pp-select:focus,
.pp-textarea:focus {
  outline: none;
  border-color: var(--pp-saffron-dark);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.28);
}

.pp-input:focus-visible,
.pp-select:focus-visible,
.pp-textarea:focus-visible {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
  box-shadow: none;
}

.pp-input[disabled],
.pp-select[disabled],
.pp-textarea[disabled] {
  background: var(--pp-sand);
  color: var(--pp-muted);
  cursor: not-allowed;
}

.pp-input[readonly] { background: var(--pp-cream); }

.pp-textarea { min-height: 130px; resize: vertical; line-height: var(--pp-leading-normal); }

/* Custom chevron drawn with gradients — no background-image request. */
.pp-select {
  padding-inline-end: var(--pp-space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pp-charcoal) 50%),
    linear-gradient(135deg, var(--pp-charcoal) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.pp-select[multiple] {
  background-image: none;
  padding-inline-end: var(--pp-space-4);
  min-height: 140px;
}

/* Invalid state is announced by aria-invalid; the styling follows it so the
   two can never drift apart. */
.pp-input[aria-invalid="true"],
.pp-select[aria-invalid="true"],
.pp-textarea[aria-invalid="true"],
.pp-field.has-error .pp-input,
.pp-field.has-error .pp-select,
.pp-field.has-error .pp-textarea {
  border-color: var(--pp-danger);
  background: #fffdfd;
}

.pp-help {
  font-size: var(--pp-text-xs);
  color: var(--pp-muted);
  line-height: var(--pp-leading-snug);
}

.pp-error {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-2);
  font-size: var(--pp-text-xs);
  font-weight: 600;
  color: var(--pp-danger-ink);
}

.pp-error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pp-danger);
  color: var(--pp-cream);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.pp-error:empty { display: none; }

.pp-fieldset {
  margin: 0 0 var(--pp-space-5);
  padding: var(--pp-space-5);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: #fff;
}

.pp-fieldset > legend {
  padding-inline: var(--pp-space-2);
  margin-inline-start: calc(var(--pp-space-2) * -1);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
  font-weight: 700;
  color: var(--pp-charcoal);
}

.pp-fieldset--plain { border: 0; padding: 0; background: none; }

/* -- Checkbox / radio -----------------------------------------------------
   The native control is kept (never display:none — it must stay focusable
   and announceable); it is made transparent and overlaid by the styled box
   so keyboard focus, :checked and forced-colors all keep working. */

.pp-checkbox,
.pp-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-3);
  min-height: 44px;
  padding: var(--pp-space-2) 0;
  cursor: pointer;
  font-size: var(--pp-text-sm);
  line-height: 1.45;
}

.pp-checkbox input,
.pp-radio input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--pp-clay);
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--pp-transition-fast), border-color var(--pp-transition-fast);
}

.pp-checkbox input { border-radius: var(--pp-radius-sm); }
.pp-radio input { border-radius: 50%; }

.pp-checkbox input:checked,
.pp-radio input:checked {
  background: var(--pp-pomegranate);
  border-color: var(--pp-pomegranate);
}

/* Checkmark drawn with a rotated border — crisp at any DPR. */
.pp-checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--pp-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pp-radio input:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-cream);
}

.pp-checkbox input:focus-visible,
.pp-radio input:focus-visible {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
}

.pp-checkbox input[disabled],
.pp-radio input[disabled] { background: var(--pp-sand); border-color: var(--pp-line); cursor: not-allowed; }

.pp-checkbox__text { flex: 1 1 auto; }
.pp-checkbox__note { display: block; color: var(--pp-muted); font-size: var(--pp-text-xs); }
.pp-checkbox__price { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Card-style option rows used by DishOptions. */
.pp-option-row {
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: #fff;
  transition: border-color var(--pp-transition-fast), background-color var(--pp-transition-fast);
}

.pp-option-row:hover { border-color: var(--pp-clay); }

/* :has() styles the row from the input's state without any JS. Browsers
   without :has() simply show the plain row — an acceptable degradation. */
.pp-option-row:has(input:checked) {
  border-color: var(--pp-saffron);
  background: #fffdf5;
}

.pp-option-row:has(input:focus-visible) {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
}

/* -- Quantity stepper ----------------------------------------------------- */

.pp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-full);
  background: #fff;
  overflow: hidden;
}

.pp-qty__btn {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pp-charcoal);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--pp-transition-fast), color var(--pp-transition-fast);
}

.pp-qty__btn:hover { background: var(--pp-sand); }
.pp-qty__btn:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: -3px; }

.pp-qty__btn[disabled] { color: var(--pp-line); cursor: not-allowed; background: transparent; }

.pp-qty__input {
  width: 56px;
  min-height: 44px;
  padding: 0 var(--pp-space-1);
  border: 0;
  border-inline: 1px solid var(--pp-line);
  background: transparent;
  color: var(--pp-ink);
  font-size: max(16px, var(--pp-text-base));
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Native spinners duplicate our buttons and are tiny touch targets. */
.pp-qty__input::-webkit-outer-spin-button,
.pp-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pp-qty__input:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: -3px; }

.pp-qty--sm .pp-qty__btn { width: 40px; min-height: 40px; font-size: 1rem; }
.pp-qty--sm .pp-qty__input { width: 44px; min-height: 40px; }

/* Search / filter bar on the menu page. */
.pp-search {
  position: relative;
  display: flex;
  gap: var(--pp-space-2);
}

.pp-search .pp-input { padding-inline-start: var(--pp-space-8); }

.pp-search__icon {
  position: absolute;
  inset-inline-start: var(--pp-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--pp-muted);
  pointer-events: none;
}

.pp-filter-chips {
  display: flex;
  gap: var(--pp-space-2);
  overflow-x: auto;
  padding-bottom: var(--pp-space-2);
  /* Momentum scrolling with snap points feels native on phones. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pp-filter-chips::-webkit-scrollbar { height: 4px; }
.pp-filter-chips::-webkit-scrollbar-thumb { background: var(--pp-line); border-radius: 2px; }

.pp-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-2);
  min-height: 40px;
  padding: var(--pp-space-2) var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-full);
  background: #fff;
  color: var(--pp-ink);
  font-size: var(--pp-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--pp-transition-fast);
}

.pp-chip:hover { border-color: var(--pp-saffron); color: var(--pp-ink); }

.pp-chip.is-active,
.pp-chip[aria-pressed="true"] {
  background: var(--pp-charcoal);
  border-color: var(--pp-charcoal);
  color: var(--pp-saffron);
}

/* ==========================================================================
   11. COMPONENTS — CART & CHECKOUT
   ========================================================================== */

.pp-cart-line {
  display: grid;
  /* thumb | details | price. The quantity control drops to its own row on
     phones, which is why details spans two columns there. */
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas:
    "media body price"
    "media qty  qty";
  gap: var(--pp-space-2) var(--pp-space-4);
  padding: var(--pp-space-4) 0;
  border-bottom: 1px solid var(--pp-line);
}

@media (min-width: 640px) {
  .pp-cart-line {
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    grid-template-areas: "media body qty price";
    align-items: center;
    gap: var(--pp-space-5);
  }
}

.pp-cart-line:last-child { border-bottom: 0; }

.pp-cart-line.is-updating { opacity: 0.55; pointer-events: none; }
.pp-cart-line.is-removing {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--pp-transition), transform var(--pp-transition);
}

.pp-cart-line__media {
  grid-area: media;
  aspect-ratio: 1 / 1;
  border-radius: var(--pp-radius-md);
  overflow: hidden;
  background: var(--pp-sand);
}

.pp-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.pp-cart-line__body { grid-area: body; min-width: 0; }

.pp-cart-line__title {
  margin: 0 0 2px;
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-base);
  font-weight: 700;
}

.pp-cart-line__title a { color: var(--pp-charcoal); text-decoration: none; }
.pp-cart-line__title a:hover { color: var(--pp-pomegranate); }

.pp-cart-line__meta {
  margin: 0;
  color: var(--pp-muted);
  font-size: var(--pp-text-xs);
  line-height: var(--pp-leading-snug);
}

.pp-cart-line__qty { grid-area: qty; }

.pp-cart-line__price {
  grid-area: price;
  text-align: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pp-cart-line__remove {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: var(--pp-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pp-danger-ink);
  font-size: var(--pp-text-xs);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* -- Order summary -------------------------------------------------------- */

.pp-summary {
  padding: var(--pp-space-5);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  background: #fff;
  box-shadow: var(--pp-shadow-sm);
}

@media (min-width: 900px) {
  /* Summary follows the customer down a long checkout form. */
  .pp-summary--sticky { position: sticky; top: calc(var(--pp-header-h) + var(--pp-space-4)); }
}

.pp-summary__title {
  margin: 0 0 var(--pp-space-4);
  padding-bottom: var(--pp-space-3);
  border-bottom: 1px solid var(--pp-line);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
}

.pp-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-space-4);
  padding-block: var(--pp-space-2);
  font-size: var(--pp-text-sm);
  color: var(--pp-muted);
}

.pp-summary__row > span:last-child {
  color: var(--pp-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pp-summary__row--discount > span:last-child { color: var(--pp-success-ink); }

.pp-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-space-4);
  margin-top: var(--pp-space-3);
  padding-top: var(--pp-space-4);
  border-top: 2px solid var(--pp-charcoal);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-xl);
  font-weight: 700;
  color: var(--pp-charcoal);
}

.pp-summary__total > span:last-child { font-variant-numeric: tabular-nums; }

.pp-summary__note {
  margin-top: var(--pp-space-4);
  font-size: var(--pp-text-xs);
  color: var(--pp-muted);
}

/* Coupon row. */
.pp-coupon { display: flex; gap: var(--pp-space-2); margin-top: var(--pp-space-4); }
.pp-coupon .pp-input { flex: 1 1 auto; min-height: 44px; }

/* -- Steps ---------------------------------------------------------------- */

.pp-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-2);
  margin: 0 0 var(--pp-space-6);
  padding: 0;
  list-style: none;
  counter-reset: pp-step;
}

.pp-step {
  position: relative;
  flex: 1 1 0;
  margin: 0;
  padding-top: 38px;
  text-align: center;
  font-size: var(--pp-text-xs);
  font-weight: 600;
  color: var(--pp-muted);
}

.pp-step::before {
  counter-increment: pp-step;
  content: counter(pp-step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--pp-line);
  border-radius: 50%;
  background: var(--pp-cream);
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  font-weight: 700;
  z-index: 1;
}

/* Connector line sits behind the numbers. */
.pp-step::after {
  content: "";
  position: absolute;
  top: 14px;
  inset-inline-start: calc(-50% + 15px);
  inset-inline-end: calc(50% + 15px);
  height: 2px;
  background: var(--pp-line);
}

.pp-step:first-child::after { display: none; }

.pp-step.is-current { color: var(--pp-charcoal); }
.pp-step.is-current::before {
  border-color: var(--pp-saffron);
  background: var(--pp-saffron);
  color: var(--pp-charcoal);
}

.pp-step.is-done { color: var(--pp-charcoal); }
.pp-step.is-done::before {
  content: "\2713"; /* Check glyph replaces the number once complete. */
  border-color: var(--pp-success);
  background: var(--pp-success);
  color: #fff;
}
.pp-step.is-done::after { background: var(--pp-success); }

.pp-step__label { display: none; }
@media (min-width: 560px) { .pp-step__label { display: block; } }

/* -- Order type toggle ---------------------------------------------------- */

.pp-order-type-toggle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--pp-space-2);
  padding: var(--pp-space-1);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-sand);
}

.pp-order-type-toggle__option { position: relative; margin: 0; }

/* The radio itself is visually hidden but still focusable and hit-testable. */
.pp-order-type-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pp-order-type-toggle__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: var(--pp-space-2);
  border-radius: var(--pp-radius-md);
  background: transparent;
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  font-weight: 700;
  text-align: center;
  transition: background-color var(--pp-transition-fast), color var(--pp-transition-fast),
    box-shadow var(--pp-transition-fast);
}

.pp-order-type-toggle__face small { font-weight: 500; font-size: var(--pp-text-xs); }

.pp-order-type-toggle input:checked + .pp-order-type-toggle__face {
  background: #fff;
  color: var(--pp-charcoal);
  box-shadow: var(--pp-shadow-sm);
}

.pp-order-type-toggle input:focus-visible + .pp-order-type-toggle__face {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
}

/* Blocks CheckoutFlow shows/hides. hidden attribute is authoritative; the
   class exists for the animated variant. */
.pp-conditional[hidden] { display: none !important; }

/* -- Payment method ------------------------------------------------------- */

.pp-payment-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--pp-transition-fast), background-color var(--pp-transition-fast);
}

.pp-payment-method + .pp-payment-method { margin-top: var(--pp-space-2); }

.pp-payment-method:hover { border-color: var(--pp-clay); }

.pp-payment-method input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--pp-pomegranate);
}

.pp-payment-method:has(input:checked) {
  border-color: var(--pp-saffron);
  background: #fffdf5;
  box-shadow: 0 0 0 1px var(--pp-saffron);
}

.pp-payment-method:has(input:focus-visible) {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
}

.pp-payment-method__body { flex: 1 1 auto; min-width: 0; }
.pp-payment-method__name { font-weight: 700; font-size: var(--pp-text-sm); }
.pp-payment-method__desc { color: var(--pp-muted); font-size: var(--pp-text-xs); }
.pp-payment-method__logos { display: flex; gap: var(--pp-space-1); flex: 0 0 auto; }
.pp-payment-method__logos img { height: 22px; width: auto; }

/* Container the payment SDK mounts into. min-height reserves space so the
   iframe does not shift the page when it loads. */
.pp-payment-frame {
  min-height: 120px;
  margin-top: var(--pp-space-4);
  padding: var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: var(--pp-cream);
}

/* Delivery zone result chip. */
.pp-zone-result {
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  margin-top: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  border-radius: var(--pp-radius-md);
  background: var(--pp-info-bg);
  color: var(--pp-info-ink);
  font-size: var(--pp-text-sm);
  font-weight: 600;
}

.pp-zone-result.is-out { background: var(--pp-danger-bg); color: var(--pp-danger-ink); }
.pp-zone-result.is-ok { background: var(--pp-success-bg); color: var(--pp-success-ink); }

/* Time slot grid. */
.pp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--pp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-slots li { margin: 0; }

.pp-slot {
  position: relative;
  display: block;
  min-height: 44px;
  cursor: pointer;
}

.pp-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.pp-slot__face {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: var(--pp-space-2);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: #fff;
  font-size: var(--pp-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: all var(--pp-transition-fast);
}

.pp-slot input:checked + .pp-slot__face {
  border-color: var(--pp-saffron);
  background: var(--pp-saffron);
  color: var(--pp-charcoal);
}

.pp-slot input:focus-visible + .pp-slot__face {
  outline: 3px solid var(--pp-pomegranate);
  outline-offset: 2px;
}

.pp-slot input[disabled] + .pp-slot__face {
  background: var(--pp-sand);
  color: var(--pp-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ==========================================================================
   12. COMPONENTS — GALLERY, SLIDER, LIGHTBOX
   ========================================================================== */

.pp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--pp-space-2);
}

@media (min-width: 768px) {
  .pp-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pp-space-3); }
}

.pp-gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--pp-radius-md);
  overflow: hidden;
  background: var(--pp-sand);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
}

.pp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pp-transition-slow);
}

@media (hover: hover) {
  .pp-gallery__item:hover img { transform: scale(1.05); }
}

.pp-gallery__item:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: 3px; }

.pp-gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.pp-gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }

/* -- Slider ---------------------------------------------------------------
   Scroll-snap does the heavy lifting so the component works with zero JS:
   the track is a horizontally scrollable flex row. JS only adds dots,
   arrows, keyboard support and aria-live announcements. */

.pp-slider { position: relative; }

.pp-slider__viewport {
  overflow: hidden;
  border-radius: var(--pp-radius-lg);
  background: var(--pp-sand);
}

.pp-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Hide the native scrollbar; the dots communicate position instead. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pp-slider__track::-webkit-scrollbar { display: none; }

.pp-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  background: var(--pp-sand);
}

.pp-slider__slide img { width: 100%; height: 100%; object-fit: cover; }

.pp-slider--thirds .pp-slider__slide { flex-basis: 86%; }

@media (min-width: 768px) {
  .pp-slider--thirds .pp-slider__slide { flex-basis: 48%; }
}

@media (min-width: 1100px) {
  .pp-slider--thirds .pp-slider__slide { flex-basis: 32.5%; }
}

.pp-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pp-line);
  border-radius: 50%;
  background: rgba(250, 246, 239, 0.94);
  color: var(--pp-charcoal);
  box-shadow: var(--pp-shadow-md);
  z-index: 2;
  transition: background-color var(--pp-transition-fast), opacity var(--pp-transition-fast);
}

/* Arrows are pointer-only: touch users swipe, and the buttons would cover
   the photo. Keyboard users still reach the slides via the scroll container. */
@media (hover: hover) and (min-width: 768px) {
  .pp-slider__nav { display: grid; }
}

.pp-slider__nav:hover { background: var(--pp-cream); }
.pp-slider__nav[disabled] { opacity: 0.35; cursor: default; }
.pp-slider__nav--prev { inset-inline-start: var(--pp-space-3); }
.pp-slider__nav--next { inset-inline-end: var(--pp-space-3); }

.pp-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--pp-space-2);
  margin-top: var(--pp-space-3);
}

.pp-slider__dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}

/* The visible dot is a pseudo-element so the hit area stays 30px while the
   indicator itself is small — a common a11y/aesthetics compromise. */
.pp-slider__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-line);
  transition: background-color var(--pp-transition-fast), transform var(--pp-transition-fast);
}

.pp-slider__dot[aria-selected="true"]::before,
.pp-slider__dot.is-active::before {
  background: var(--pp-pomegranate);
  transform: scale(1.4);
}

.pp-slider__dot:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: 2px; border-radius: 50%; }

/* Thumbnail strip under the main dish photo. */
.pp-slider__thumbs {
  display: flex;
  gap: var(--pp-space-2);
  margin-top: var(--pp-space-3);
  overflow-x: auto;
  scrollbar-width: thin;
}

.pp-slider__thumb {
  flex: 0 0 68px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--pp-radius-sm);
  overflow: hidden;
  background: var(--pp-sand);
  aspect-ratio: 1 / 1;
  opacity: 0.7;
  transition: opacity var(--pp-transition-fast), border-color var(--pp-transition-fast);
}

.pp-slider__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-slider__thumb.is-active { border-color: var(--pp-saffron); opacity: 1; }
.pp-slider__thumb:hover { opacity: 1; }

/* -- Lightbox ------------------------------------------------------------- */

.pp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--pp-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pp-space-4);
  background: rgba(26, 21, 18, 0.94);
}

.pp-lightbox.is-open { display: flex; animation: pp-fade-in var(--pp-transition) both; }

@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pp-lightbox__figure {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
}

.pp-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--pp-radius-md);
  object-fit: contain;
  background: var(--pp-charcoal-soft);
}

.pp-lightbox__caption {
  color: var(--pp-sand);
  font-size: var(--pp-text-sm);
  text-align: center;
}

.pp-lightbox__close,
.pp-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(250, 246, 239, 0.3);
  border-radius: 50%;
  background: rgba(26, 21, 18, 0.7);
  color: var(--pp-cream);
  font-size: 1.25rem;
  line-height: 1;
  z-index: 1;
}

.pp-lightbox__close { top: calc(var(--pp-space-4) * -1); inset-inline-end: 0; }
.pp-lightbox__nav { top: 50%; transform: translateY(-50%); }
.pp-lightbox__nav--prev { inset-inline-start: calc(var(--pp-space-5) * -1); }
.pp-lightbox__nav--next { inset-inline-end: calc(var(--pp-space-5) * -1); }

/* On phones there is no room for outset controls — bring them inside. */
@media (max-width: 767.98px) {
  .pp-lightbox__close { top: var(--pp-space-2); inset-inline-end: var(--pp-space-2); }
  .pp-lightbox__nav--prev { inset-inline-start: var(--pp-space-2); }
  .pp-lightbox__nav--next { inset-inline-end: var(--pp-space-2); }
}

.pp-lightbox__close:hover,
.pp-lightbox__nav:hover { background: var(--pp-pomegranate); border-color: var(--pp-pomegranate); }

.pp-lightbox :focus-visible { outline: 3px solid var(--pp-saffron); outline-offset: 2px; }

.pp-lightbox__counter {
  position: absolute;
  bottom: calc(var(--pp-space-6) * -1);
  left: 50%;
  transform: translateX(-50%);
  color: var(--pp-sand);
  font-size: var(--pp-text-xs);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   13. COMPONENTS — MISC
   ========================================================================== */

/* -- Alerts --------------------------------------------------------------- */

.pp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-inline-start-width: 4px;
  border-radius: var(--pp-radius-md);
  background: var(--pp-sand);
  color: var(--pp-ink);
  font-size: var(--pp-text-sm);
  line-height: var(--pp-leading-snug);
}

.pp-alert + .pp-alert { margin-top: var(--pp-space-3); }
.pp-alert__body { flex: 1 1 auto; min-width: 0; }
.pp-alert__title { display: block; margin-bottom: 2px; font-weight: 700; }

/* The glyph is decorative; the tone is also carried by the wording and by
   role="alert"/"status" in the markup, so colour is never the only cue. */
.pp-alert__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: currentColor;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.pp-alert__icon::before { content: attr(data-glyph); color: #fff; }

.pp-alert__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.pp-alert__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

.pp-alert--success { background: var(--pp-success-bg); border-color: var(--pp-success); color: var(--pp-success-ink); }
.pp-alert--warning { background: var(--pp-warning-bg); border-color: var(--pp-warning); color: var(--pp-warning-ink); }
.pp-alert--danger  { background: var(--pp-danger-bg);  border-color: var(--pp-danger);  color: var(--pp-danger-ink); }
.pp-alert--info    { background: var(--pp-info-bg);    border-color: var(--pp-info);    color: var(--pp-info-ink); }

/* -- Toast ---------------------------------------------------------------- */

.pp-toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--pp-space-5);
  transform: translateX(-50%);
  z-index: var(--pp-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  width: min(420px, calc(100vw - var(--pp-space-6)));
  /* The region itself must not swallow clicks on the page beneath it. */
  pointer-events: none;
}

@media (min-width: 768px) {
  .pp-toast-region { inset-inline-start: auto; inset-inline-end: var(--pp-space-6); bottom: var(--pp-space-6); transform: none; }
}

.pp-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  border-radius: var(--pp-radius-md);
  background: var(--pp-charcoal);
  color: var(--pp-cream);
  font-size: var(--pp-text-sm);
  font-weight: 600;
  box-shadow: var(--pp-shadow-lg);
  animation: pp-toast-in 260ms var(--pp-ease-out) both;
}

.pp-toast.is-leaving { animation: pp-toast-out 200ms var(--pp-ease) both; }

@keyframes pp-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes pp-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

.pp-toast--success { background: var(--pp-success); }
.pp-toast--danger  { background: var(--pp-danger); }
.pp-toast--warning { background: var(--pp-warning-ink); }
.pp-toast--info    { background: var(--pp-info); }

.pp-toast__body { flex: 1 1 auto; }

.pp-toast__close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 246, 239, 0.15);
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
}

.pp-toast__close:hover { background: rgba(250, 246, 239, 0.3); }
.pp-toast :focus-visible { outline: 2px solid var(--pp-saffron); outline-offset: 2px; }

/* -- Accordion ------------------------------------------------------------ */

.pp-accordion {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  background: #fff;
  overflow: hidden;
}

.pp-accordion__item + .pp-accordion__item { border-top: 1px solid var(--pp-line); }

.pp-accordion__heading { margin: 0; }

.pp-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-4);
  width: 100%;
  min-height: 56px;
  padding: var(--pp-space-4) var(--pp-space-5);
  border: 0;
  background: transparent;
  color: var(--pp-charcoal);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-base);
  font-weight: 700;
  text-align: start;
  transition: background-color var(--pp-transition-fast);
}

.pp-accordion__trigger:hover { background: var(--pp-cream); }
.pp-accordion__trigger:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: -3px; }

/* Plus/minus built from two bars; the vertical one collapses when open. */
.pp-accordion__icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.pp-accordion__icon::before,
.pp-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--pp-pomegranate);
  border-radius: 1px;
  transition: transform var(--pp-transition);
}

.pp-accordion__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.pp-accordion__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.pp-accordion__trigger[aria-expanded="true"] .pp-accordion__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.pp-accordion__panel {
  padding: 0 var(--pp-space-5) var(--pp-space-5);
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  line-height: var(--pp-leading-normal);
}

/* [hidden] is what JS toggles; the animated height is handled by a wrapper
   with grid-template-rows, which animates cleanly from 0 to auto. */
.pp-accordion__panel[hidden] { display: none; }

.pp-accordion__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pp-transition);
}

.pp-accordion__item.is-open .pp-accordion__wrap { grid-template-rows: 1fr; }
.pp-accordion__wrap > div { overflow: hidden; }

/* -- Tabs ----------------------------------------------------------------- */

.pp-tabs__list {
  display: flex;
  gap: var(--pp-space-1);
  margin: 0 0 var(--pp-space-5);
  padding: 0 0 2px;
  border-bottom: 2px solid var(--pp-line);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.pp-tabs__list::-webkit-scrollbar { display: none; }
.pp-tabs__list li { margin: 0; }

.pp-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--pp-space-2) var(--pp-space-4);
  border: 0;
  background: none;
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--pp-transition-fast);
}

.pp-tabs__tab::after {
  content: "";
  position: absolute;
  left: var(--pp-space-2);
  right: var(--pp-space-2);
  bottom: -2px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--pp-saffron);
  transform: scaleX(0);
  transition: transform var(--pp-transition);
}

.pp-tabs__tab:hover { color: var(--pp-charcoal); }
.pp-tabs__tab[aria-selected="true"] { color: var(--pp-charcoal); }
.pp-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.pp-tabs__tab:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: -3px; }

.pp-tabs__panel:focus-visible { outline: 3px solid var(--pp-pomegranate); outline-offset: 4px; }
.pp-tabs__panel[hidden] { display: none; }

/* -- Breadcrumb ----------------------------------------------------------- */

.pp-breadcrumb {
  margin-bottom: var(--pp-space-4);
  font-size: var(--pp-text-xs);
  color: var(--pp-muted);
}

.pp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-breadcrumb li { display: flex; align-items: center; gap: var(--pp-space-2); margin: 0; }

/* Separator is a pseudo-element so it is never read by a screen reader. */
.pp-breadcrumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--pp-clay);
}

.pp-breadcrumb a { color: var(--pp-muted); text-decoration: none; }
.pp-breadcrumb a:hover { color: var(--pp-pomegranate); text-decoration: underline; }
.pp-breadcrumb [aria-current="page"] { color: var(--pp-charcoal); font-weight: 600; }

/* -- Pagination ----------------------------------------------------------- */

.pp-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--pp-space-8);
}

.pp-pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-pagination li { margin: 0; }

.pp-pagination__link {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--pp-space-2);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: #fff;
  color: var(--pp-ink);
  font-size: var(--pp-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: all var(--pp-transition-fast);
}

.pp-pagination__link:hover { border-color: var(--pp-saffron); background: var(--pp-sand); color: var(--pp-ink); }

.pp-pagination__link[aria-current="page"] {
  background: var(--pp-charcoal);
  border-color: var(--pp-charcoal);
  color: var(--pp-saffron);
}

.pp-pagination__link.is-disabled,
.pp-pagination__link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.pp-pagination__gap { display: grid; place-items: center; min-width: 28px; color: var(--pp-muted); }

/* -- Empty state ---------------------------------------------------------- */

.pp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-space-4);
  padding: var(--pp-space-9) var(--pp-space-5);
  border: 1px dashed var(--pp-line);
  border-radius: var(--pp-radius-lg);
  background: #fff;
  text-align: center;
}

.pp-empty__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pp-sand);
  color: var(--pp-clay);
}

.pp-empty__title { margin: 0; font-family: var(--pp-font-display); font-size: var(--pp-text-xl); }
.pp-empty__text { margin: 0; max-width: 44ch; color: var(--pp-muted); font-size: var(--pp-text-sm); }

/* -- Skeleton ------------------------------------------------------------- */

.pp-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-sand);
  /* Prevents any child text from flashing before the real content lands. */
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.pp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%);
  animation: pp-shimmer 1.4s infinite;
}

@keyframes pp-shimmer { to { transform: translateX(100%); } }

.pp-skeleton--text { height: 0.85em; margin-block: 0.25em; }
.pp-skeleton--title { height: 1.4em; width: 60%; }
.pp-skeleton--line-short { width: 45%; }
.pp-skeleton--media { aspect-ratio: 4 / 3; border-radius: var(--pp-radius-md); }
.pp-skeleton--circle { border-radius: 50%; aspect-ratio: 1 / 1; width: 44px; }

/* -- Sticky mobile add-to-cart bar ---------------------------------------- */

.pp-sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--pp-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  /* env() keeps the bar above the iOS home indicator. */
  padding-bottom: max(var(--pp-space-3), env(safe-area-inset-bottom));
  background: rgba(250, 246, 239, 0.97);
  border-top: 1px solid var(--pp-line);
  box-shadow: 0 -6px 20px rgba(34, 28, 23, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--pp-transition), visibility 0s linear var(--pp-transition);
}

.pp-sticky-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

@media (min-width: 992px) {
  .pp-sticky-bar { display: none; }
}

.pp-sticky-bar__info { flex: 1 1 auto; min-width: 0; }
.pp-sticky-bar__name {
  font-size: var(--pp-text-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-sticky-bar__price {
  font-size: var(--pp-text-sm);
  color: var(--pp-muted);
  font-variant-numeric: tabular-nums;
}
.pp-sticky-bar .pp-btn { flex: 0 0 auto; }

/* When the sticky bar is present the page needs bottom breathing room so the
   footer links are not permanently covered. */
body.has-sticky-bar { padding-bottom: 76px; }
@media (min-width: 992px) { body.has-sticky-bar { padding-bottom: 0; } }

/* ==========================================================================
   14. PAGE BLOCKS
   ========================================================================== */

.pp-section__head {
  max-width: 62ch;
  margin-bottom: var(--pp-space-6);
}

.pp-section--center .pp-section__head { margin-inline: auto; }

.pp-section__title { margin-bottom: var(--pp-space-2); }
.pp-section__lead { color: var(--pp-muted); font-size: var(--pp-text-lg); margin-bottom: 0; }

/* Value props / how-it-works row. */
.pp-feature {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  padding: var(--pp-space-5);
  border-radius: var(--pp-radius-lg);
  background: #fff;
  border: 1px solid var(--pp-line);
}

.pp-feature__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pp-radius-md);
  background: var(--pp-sand);
  color: var(--pp-pomegranate);
}

.pp-feature__title { margin: 0; font-size: var(--pp-text-lg); }
.pp-feature__text { margin: 0; color: var(--pp-muted); font-size: var(--pp-text-sm); }

/* Numbered "how catering works" steps. */
.pp-howto { counter-reset: pp-howto; }

.pp-howto__item {
  position: relative;
  padding-inline-start: var(--pp-space-9);
  padding-bottom: var(--pp-space-6);
}

.pp-howto__item::before {
  counter-increment: pp-howto;
  content: counter(pp-howto);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pp-saffron);
  color: var(--pp-charcoal);
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg);
  font-weight: 700;
}

/* Vertical connector between steps. */
.pp-howto__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 21px;
  top: 50px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom, var(--pp-line) 0 6px, transparent 6px 12px);
}

.pp-howto__title { margin: 0 0 var(--pp-space-1); font-size: var(--pp-text-lg); }
.pp-howto__text { margin: 0; color: var(--pp-muted); font-size: var(--pp-text-sm); }

/* Full-bleed CTA band. */
.pp-cta-band {
  padding-block: var(--pp-space-9);
  background: var(--pp-pomegranate);
  color: var(--pp-cream);
  text-align: center;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(250, 246, 239, 0.05) 0 2px, transparent 2px 16px);
}

.pp-cta-band h2 { color: var(--pp-cream); }
.pp-cta-band p { color: rgba(250, 246, 239, 0.9); max-width: 56ch; margin-inline: auto; }
.pp-cta-band :focus-visible { outline-color: var(--pp-saffron); }

/* Menu section heading that sticks while scrolling a long category list. */
.pp-menu-anchor {
  position: sticky;
  top: calc(var(--pp-header-h) + 1px);
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-space-4);
  padding-block: var(--pp-space-3);
  background: var(--pp-cream);
  border-bottom: 1px solid var(--pp-line);
  margin-bottom: var(--pp-space-5);
}

.pp-menu-anchor h2 { margin: 0; font-size: var(--pp-text-2xl); }
.pp-menu-anchor__count { color: var(--pp-muted); font-size: var(--pp-text-sm); white-space: nowrap; }

/* Nutrition / allergen table on the dish page. */
.pp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pp-text-sm);
}

.pp-table th,
.pp-table td {
  padding: var(--pp-space-3) var(--pp-space-4);
  border-bottom: 1px solid var(--pp-line);
  text-align: start;
}

.pp-table th {
  background: var(--pp-sand);
  font-weight: 700;
  color: var(--pp-charcoal);
  white-space: nowrap;
}

.pp-table tbody tr:last-child td { border-bottom: 0; }
.pp-table td.is-numeric,
.pp-table th.is-numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* -- Footer --------------------------------------------------------------- */

.pp-footer {
  margin-top: var(--pp-space-10);
  padding-top: var(--pp-space-9);
  background: var(--pp-charcoal);
  color: var(--pp-sand);
  font-size: var(--pp-text-sm);
  /* Woven top edge ties the footer back to the brand motif. */
  border-top: 5px solid transparent;
  border-image: repeating-linear-gradient(90deg,
    var(--pp-saffron) 0 18px, var(--pp-pomegranate) 18px 26px) 5;
}

.pp-footer h2,
.pp-footer h3 { color: var(--pp-cream); }

.pp-footer a {
  color: var(--pp-sand);
  text-decoration: none;
}

.pp-footer a:hover { color: var(--pp-saffron); text-decoration: underline; }
.pp-footer :focus-visible { outline-color: var(--pp-saffron); }

.pp-footer__grid {
  display: grid;
  gap: var(--pp-space-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--pp-space-8);
}

@media (min-width: 640px) {
  .pp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .pp-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--pp-space-7); }
}

.pp-footer__title {
  margin: 0 0 var(--pp-space-4);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-xs);
  font-weight: 700;
  letter-spacing: var(--pp-tracking-widest);
  text-transform: uppercase;
  color: var(--pp-saffron);
}

.pp-footer__list { margin: 0; padding: 0; list-style: none; }
.pp-footer__list li { margin: 0 0 var(--pp-space-2); }

.pp-footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pp-space-1) var(--pp-space-4);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.pp-footer__hours dt { color: var(--pp-sand); opacity: 0.8; }
.pp-footer__hours dd { margin: 0; }
.pp-footer__hours dd.is-closed { color: var(--pp-clay); }

.pp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  padding-block: var(--pp-space-5);
  border-top: 1px solid rgba(250, 246, 239, 0.14);
  color: rgba(250, 246, 239, 0.7);
  font-size: var(--pp-text-xs);
}

.pp-footer__social { display: flex; gap: var(--pp-space-2); }

.pp-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(250, 246, 239, 0.2);
  border-radius: 50%;
  transition: background-color var(--pp-transition-fast), border-color var(--pp-transition-fast);
}

.pp-footer__social a:hover {
  background: var(--pp-saffron);
  border-color: var(--pp-saffron);
  color: var(--pp-charcoal);
}

.pp-footer__social svg { width: 20px; height: 20px; }

/* Newsletter form inside the footer. */
.pp-footer .pp-input {
  background: rgba(250, 246, 239, 0.08);
  border-color: rgba(250, 246, 239, 0.25);
  color: var(--pp-cream);
}

.pp-footer .pp-input::placeholder { color: rgba(250, 246, 239, 0.6); }
.pp-footer .pp-input:focus { border-color: var(--pp-saffron); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.3); }

/* Trust row: badges for halal certification, payment logos etc. */
.pp-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-4);
  color: rgba(250, 246, 239, 0.75);
  font-size: var(--pp-text-xs);
}

/* -- Order status timeline (account/receipt pages) ------------------------- */

.pp-timeline { margin: 0; padding: 0; list-style: none; }

.pp-timeline__item {
  position: relative;
  margin: 0;
  padding-block: 0 var(--pp-space-5);
  padding-inline: var(--pp-space-7) 0;
}

.pp-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pp-line);
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}

.pp-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 11px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--pp-line);
}

.pp-timeline__item.is-done::before { background: var(--pp-success); border-color: var(--pp-success); }
.pp-timeline__item.is-done::after { background: var(--pp-success); }
.pp-timeline__item.is-current::before { background: var(--pp-saffron); border-color: var(--pp-saffron-dark); }

.pp-timeline__label { font-weight: 700; font-size: var(--pp-text-sm); }
.pp-timeline__time { color: var(--pp-muted); font-size: var(--pp-text-xs); }

/* ==========================================================================
   15. STATE & MOTION HELPERS
   ========================================================================== */

/* JS adds .pp-js to <html> as its first act. Anything that must look
   different when scripting is available hangs off this class, so the
   no-JS experience is the default rather than an afterthought. */
.pp-js .pp-requires-js { display: revert; }
.pp-requires-js { display: none; }
.pp-js .pp-no-js-only { display: none; }

/* Reveal-on-scroll. The un-revealed state is only applied when JS is present;
   without JS the content is simply visible. */
.pp-js .pp-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--pp-transition-slow), transform var(--pp-transition-slow);
}

.pp-js .pp-reveal.is-revealed { opacity: 1; transform: none; }

/* Images loaded by LazyImages fade in once decoded, which hides the
   progressive-render "wipe" on slow connections. */
img[data-src] { opacity: 0; transition: opacity var(--pp-transition); }
img.is-loaded { opacity: 1; }

.pp-is-busy { cursor: progress; }

/* Live regions must not take up space but must remain in the a11y tree. */
.pp-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   16. MEDIA QUERIES — MOTION, CONTRAST, PRINT
   ========================================================================== */

/* -- Reduced motion -------------------------------------------------------
   Vestibular disorders are triggered by movement, not by state change, so we
   collapse durations to ~0 rather than removing the rules (which would break
   transitionend listeners in the JS). smooth scrolling is also disabled. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .pp-slider__track { scroll-behavior: auto; }
  .pp-skeleton::after { animation: none; opacity: 0.4; }
  .pp-js .pp-reveal { opacity: 1; transform: none; }

  /* Hover zooms are motion too. */
  .pp-dish-card:hover { transform: none; }
  .pp-dish-card:hover .pp-dish-card__media img,
  .pp-category-card:hover img,
  .pp-gallery__item:hover img { transform: none; }
}

/* -- Increased contrast ---------------------------------------------------
   Users who ask for more contrast get solid, thicker borders, no translucent
   surfaces and no decorative scrims that could wash out text. */
@media (prefers-contrast: more) {
  :root {
    --pp-line: #8a7a63;
    --pp-muted: #4a4038;
    --pp-clay: #7d5636;
  }

  .pp-card,
  .pp-dish-card,
  .pp-package-card,
  .pp-testimonial,
  .pp-summary,
  .pp-fieldset,
  .pp-accordion,
  .pp-option-row,
  .pp-payment-method,
  .pp-empty {
    border-width: 2px;
    border-color: var(--pp-charcoal);
  }

  .pp-input,
  .pp-select,
  .pp-textarea,
  .pp-qty,
  .pp-chip,
  .pp-pagination__link {
    border-width: 2px;
    border-color: var(--pp-charcoal);
  }

  .pp-btn { border-width: 2px; }
  .pp-btn--ghost { --_btn-border: var(--pp-charcoal); }

  .pp-badge { border-width: 2px; }

  .pp-header,
  .pp-sticky-bar {
    background: var(--pp-cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-width: 2px;
  }

  .pp-hero__media img { filter: brightness(0.6); }
  .pp-hero__media::after { background: rgba(26, 21, 18, 0.82); }

  :focus-visible { outline-width: 4px; }

  /* Decorative motifs add visual noise at high contrast — mute them. */
  .pp-motif-divider { opacity: 1; }
  .pp-page-hero,
  .pp-cta-band { background-image: none; }
}

/* -- Forced colours (Windows High Contrast) -------------------------------
   In forced-colors mode the OS overrides our palette. We only need to make
   sure nothing disappears: elements whose meaning came from background-color
   get an explicit border, and pseudo-element shapes get forced-color-adjust
   so they keep rendering. */
@media (forced-colors: active) {
  .pp-btn,
  .pp-badge,
  .pp-chip,
  .pp-pagination__link,
  .pp-qty,
  .pp-slot__face,
  .pp-order-type-toggle__face {
    border: 1px solid ButtonBorder;
  }

  .pp-btn:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible { outline: 3px solid Highlight; }

  .pp-spice__pip,
  .pp-stars__star,
  .pp-nav-toggle__bar { forced-color-adjust: none; }

  .pp-spice__pip.is-filled,
  .pp-spice--1 .pp-spice__pip:nth-child(-n + 1),
  .pp-spice--2 .pp-spice__pip:nth-child(-n + 2),
  .pp-spice--3 .pp-spice__pip:nth-child(-n + 3),
  .pp-spice--4 .pp-spice__pip:nth-child(-n + 4) { background: Highlight; border-color: Highlight; }

  .pp-hero__media::after,
  .pp-category-card::after { background: none; }

  .pp-skeleton::after { display: none; }
}

/* -- Print ----------------------------------------------------------------
   Targets the invoice/receipt page. Everything interactive or decorative is
   removed; link URLs are printed inline so a paper receipt is self-contained. */
@media print {
  @page {
    margin: 14mm;
    size: auto;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.4;
  }

  /* Chrome/Safari drop background colours by default; for the few elements
     where the fill IS the information we opt back in. */
  .pp-badge,
  .pp-table th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pp-topbar,
  .pp-header,
  .pp-mobile-nav,
  .pp-nav,
  .pp-nav-toggle,
  .pp-cart-button,
  .pp-hero,
  .pp-page-hero,
  .pp-footer,
  .pp-sticky-bar,
  .pp-toast-region,
  .pp-slider__nav,
  .pp-slider__dots,
  .pp-slider__thumbs,
  .pp-lightbox,
  .pp-breadcrumb,
  .pp-pagination,
  .pp-skip-link,
  .pp-cta-band,
  .pp-motif-divider,
  .pp-motif-rule,
  .pp-filter-chips,
  .pp-btn,
  .pp-qty,
  .pp-no-print {
    display: none !important;
  }

  .pp-print-only { display: block !important; }

  .pp-section,
  .pp-section--deferred {
    padding-block: 0 !important;
    /* content-visibility:auto would leave off-screen sections unprinted. */
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    break-inside: auto;
  }

  .pp-container { max-width: none; padding: 0; }

  .pp-card,
  .pp-summary,
  .pp-cart-line,
  .pp-fieldset {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    background: #fff !important;
    break-inside: avoid;
  }

  .pp-summary__total { border-top: 2px solid #000; }

  h1, h2, h3, h4 { break-after: avoid; color: #000 !important; }
  p, li, tr { break-inside: avoid; }
  table { break-inside: auto; }
  thead { display: table-header-group; } /* Repeat headers across pages. */

  a { color: #000 !important; text-decoration: none; }

  /* Print the destination of content links (but not of anchors or of links
     whose text already IS the URL). */
  .pp-print-urls a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }

  .pp-invoice__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12mm;
    padding-bottom: 6mm;
    margin-bottom: 6mm;
    border-bottom: 2px solid #000;
  }

  .pp-invoice__meta { font-size: 10pt; text-align: end; }
  .pp-invoice__total { font-size: 14pt; font-weight: 700; }

  img { max-width: 100% !important; break-inside: avoid; }
  .pp-ratio { aspect-ratio: auto; }
}

/* Screen-only counterpart so .pp-print-only never shows on screen. */
.pp-print-only { display: none; }

/* -- Wide screens ---------------------------------------------------------
   Above the container width the hero can afford a taller crop and sections
   get more air. Kept last so it wins over the component defaults. */
@media (min-width: 1400px) {
  .pp-section { padding-block: var(--pp-space-11); }
  .pp-hero__media { min-height: 560px; }
}

/* -- Data saver -----------------------------------------------------------
   Save-Data users get the decorative gradients dropped; they cost paint time
   and bytes-equivalent battery for no informational value. */
@media (prefers-reduced-data: reduce) {
  .pp-page-hero,
  .pp-cta-band { background-image: none; }
  .pp-header,
  .pp-sticky-bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   FIXES — 2026-08-05
   Grouped at the end of the file so the intent of each change is obvious and
   a future edit can find it. Every rule here corrects a specific reported
   problem rather than restyling for its own sake.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dark sections must not colour light-surfaced children.
   `.pp-section--dark` sets cream headings and sand body text for content
   sitting directly on the charcoal background. Cards inside that section keep
   their own white background, so those inherited colours rendered cream-on-
   white — the catering package names were effectively invisible.
   Re-assert the light-surface palette for any card inside a dark section.
   -------------------------------------------------------------------------- */
.pp-section--dark .pp-card,
.pp-section--dark .pp-package-card,
.pp-section--dark .pp-dish-card,
.pp-section--dark .pp-testimonial {
  color: var(--pp-ink);
}

.pp-section--dark .pp-card h1, .pp-section--dark .pp-card h2,
.pp-section--dark .pp-card h3, .pp-section--dark .pp-card h4,
.pp-section--dark .pp-package-card h1, .pp-section--dark .pp-package-card h2,
.pp-section--dark .pp-package-card h3, .pp-section--dark .pp-package-card h4,
.pp-section--dark .pp-dish-card h1, .pp-section--dark .pp-dish-card h2,
.pp-section--dark .pp-dish-card h3, .pp-section--dark .pp-dish-card h4,
.pp-section--dark .pp-testimonial h3 {
  color: var(--pp-ink);
}

.pp-section--dark .pp-package-card__name { color: var(--pp-ink); }
.pp-section--dark .pp-package-card__price { color: var(--pp-charcoal); }

/* Links inside a light card go back to the readable gold-ink, not the
   light saffron meant for dark backgrounds. */
.pp-section--dark .pp-card a:not(.pp-btn),
.pp-section--dark .pp-package-card a:not(.pp-btn),
.pp-section--dark .pp-dish-card a:not(.pp-btn) {
  color: var(--pp-gold-ink);
}

/* The primary button is charcoal-on-saffron everywhere; the dark-section link
   rule was overriding its label colour. */
.pp-section--dark .pp-btn--primary { color: var(--pp-charcoal); }
.pp-section--dark .pp-btn--secondary { color: var(--pp-cream); }

/* Muted text on charcoal needs to be lighter than the light-background muted
   token, which fails contrast on dark. */
.pp-section--dark .pp-section__lead,
.pp-section--dark .pp-text-muted,
.pp-section--dark .pp-eyebrow + h2 + .pp-section__lead {
  color: #d9cbb4;
}

/* ...but not when that text sits inside a card. */
.pp-section--dark .pp-card .pp-text-muted,
.pp-section--dark .pp-package-card .pp-text-sm,
.pp-section--dark .pp-package-card .pp-text-muted {
  color: var(--pp-muted);
}

/* --------------------------------------------------------------------------
   2. Section intro measure.
   A centred lead paragraph running the full 1200px container is hard to read.
   Cap it at a comfortable ~62 characters and centre it.
   -------------------------------------------------------------------------- */
.pp-section__head { margin-bottom: var(--pp-space-8); }

.pp-section__lead {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--pp-text-lg);
  line-height: 1.65;
}

.pp-section__head.pp-text-center .pp-motif-rule { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Testimonials.
   The slider was written for the photo gallery, where a fixed 4:3 box is
   correct. Reused for quotes it cropped the text. This variant drops the
   aspect ratio, gives every card the same height, and pins the attribution to
   the bottom so the cards line up regardless of quote length.
   -------------------------------------------------------------------------- */
/* (The quotes-slider variant now lives in FIX BLOCK 13, at the end of this
   file, where it is defined once instead of patched twice.) */

/* --------------------------------------------------------------------------
   4. Two-column sections with nothing in the second column.
   The About block used a 2-up grid whose right cell holds an optional photo.
   With no photo uploaded the text was squeezed into the left half and the
   right half sat empty. `--auto` collapses to one column and caps the measure.
   -------------------------------------------------------------------------- */
.pp-grid--split-optional {
  display: grid;
  gap: var(--pp-space-8);
  grid-template-columns: 1fr;
  align-items: center;
}

.pp-grid--split-optional > :only-child { max-width: 68ch; }

@media (min-width: 900px) {
  .pp-grid--split-optional:has(> :nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fallback for browsers without :has() — two children still get two columns
   via the explicit modifier the template adds. */
@media (min-width: 900px) {
  .pp-grid--split-optional.has-media { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   5. Hours and delivery tables.
   The caption was absolutely positioned and collided with the header row, and
   the two tables did not share a baseline. Make the caption a normal block,
   even out the cell rhythm, and let both cards stretch to equal height.
   -------------------------------------------------------------------------- */
.pp-info-grid {
  display: grid;
  gap: var(--pp-space-8);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .pp-info-grid { grid-template-columns: 1fr 1fr; gap: var(--pp-space-10); }
}

.pp-info-grid > * { min-width: 0; }

.pp-table caption {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  margin-bottom: var(--pp-space-2);
  padding: 0;
  text-align: start;
  font-size: var(--pp-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-gold-ink);
}

.pp-table th, .pp-table td {
  padding: var(--pp-space-3) var(--pp-space-4);
  vertical-align: top;
}

.pp-table thead th {
  background: var(--pp-sand);
  font-size: var(--pp-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-muted);
  white-space: nowrap;
}

.pp-table td.is-numeric, .pp-table th.is-numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pp-table tbody tr + tr { border-top: 1px solid var(--pp-line); }

.pp-table .pp-table__note {
  display: block;
  margin-top: 2px;
  font-size: var(--pp-text-sm);
  line-height: 1.5;
  color: var(--pp-muted);
}

/* The current day should be obvious at a glance. */
.pp-table tr.is-today { background: rgba(212, 160, 23, .10); }
.pp-table tr.is-today th, .pp-table tr.is-today td { font-weight: 600; }

.pp-table tr.is-closed td { color: var(--pp-muted); }

@media (max-width: 560px) {
  .pp-table th, .pp-table td { padding: var(--pp-space-2) var(--pp-space-3); }
  .pp-table .pp-table__note { font-size: var(--pp-text-xs); }
}

/* --------------------------------------------------------------------------
   6. Afghan flag rule.
   A three-band divider — black, red, green — sitting directly above the
   footer. Decorative only, so it is hidden from assistive technology in the
   markup; here it just needs to be a crisp, evenly-thirded bar.
   -------------------------------------------------------------------------- */
.pp-flag-rule {
  height: 5px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    #000000 0%, #000000 33.333%,
    #d32011 33.333%, #d32011 66.666%,
    #007a36 66.666%, #007a36 100%
  );
}

@media (prefers-contrast: more) {
  .pp-flag-rule { height: 7px; }
}

/* --------------------------------------------------------------------------
   7. Mobile header overflow.
   Logo (167px) + actions (223px) exceeded the 358px available inside a 390px
   viewport, pushing the page to 422px wide and giving EVERY page a horizontal
   scrollbar on a phone. The language switcher is the widest non-essential item
   in that row, so below the nav breakpoint it moves into the mobile drawer,
   and the remaining items are allowed to shrink.
   -------------------------------------------------------------------------- */
.pp-header__inner {
  gap: var(--pp-space-3);
  min-width: 0;
}

.pp-header__actions {
  min-width: 0;
  flex-shrink: 0;
}

.pp-logo { min-width: 0; }

@media (max-width: 900px) {
  /* Hidden, not removed — the drawer carries an equivalent control. */
  .pp-header .pp-locale-form { display: none; }
}

@media (max-width: 420px) {
  /* The strapline is the first thing to go when space is genuinely tight. */
  .pp-logo__tagline, .pp-logo small { display: none; }
  .pp-logo__text, .pp-logo strong { font-size: var(--pp-text-base); }
  .pp-header__inner { gap: var(--pp-space-2); }
}

.pp-mobile-nav__locale {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  padding: var(--pp-space-4) 0;
  border-top: 1px solid var(--pp-line);
}

.pp-mobile-nav__locale .pp-select { width: 100%; min-height: 44px; }

/* Safety net. The overflow above is fixed at source, but a single long word,
   a pasted URL or a future third-party embed should degrade to a clipped edge
   rather than knocking the whole page sideways. `clip` (not `hidden`) keeps
   position: sticky working. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* --------------------------------------------------------------------------
   8. Things that escape their container.
   -------------------------------------------------------------------------- */

/* Wide tables scroll inside their own box instead of stretching the page. */
.pp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Embeds (the contact map) are responsive by default. */
iframe, embed, object, video { max-width: 100%; }

.pp-map, .pp-map iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* The hero art is deliberately larger than its frame for the bleed effect;
   clip it so the excess never becomes page width. */
.pp-hero { overflow: hidden; }
.pp-hero__media { max-width: 100%; }
.pp-hero__media img { max-width: 100%; height: auto; }

/* Long unbroken strings — an email address, a pasted link — wrap instead of
   forcing a horizontal scrollbar. */
.pp-prose, .pp-card, .pp-testimonial__quote, .pp-footer { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   9. Touch targets.
   Anything tappable gets at least 44px of height on a touch screen, which is
   both the WCAG 2.5.5 guidance and simply what a thumb needs.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pp-nav__link,
  .pp-mobile-nav__link,
  .pp-footer__list a,
  .pp-pagination a,
  .pp-pagination button,
  .pp-tabs__tab,
  .pp-accordion__trigger {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .pp-btn { min-height: 44px; }
  .pp-btn--sm { min-height: 40px; }

  .pp-select, .pp-input, .pp-textarea {
    min-height: 44px;
    /* 16px stops iOS Safari zooming in when the field is focused. */
    font-size: 16px;
  }

  .pp-qty__btn { min-width: 44px; min-height: 44px; }

  /* Inline links inside body copy are exempt: padding them to 44px would
     wreck the line rhythm, and they are not primary controls. */
  .pp-prose a, .pp-testimonial a { min-height: 0; display: inline; }
}

/* --------------------------------------------------------------------------
   10. Card tap targets.
   A dish title link was a 20px-tall target on a phone. Rather than padding the
   heading — which would wreck the card rhythm — the title's link is stretched
   over the whole card. The entire card becomes tappable, which is what people
   already expect, and the accessible name stays on the real anchor.
   -------------------------------------------------------------------------- */
.pp-dish-card,
.pp-category-card,
.pp-package-card { position: relative; }

.pp-dish-card__title a::after,
.pp-category-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Transparent, so it changes nothing visually. */
  background: transparent;
  border-radius: inherit;
}

/* Real controls inside the card must stay clickable above that overlay. */
.pp-dish-card .pp-btn,
.pp-dish-card__actions,
.pp-dish-card form,
.pp-dish-card .pp-qty,
.pp-dish-card__badges,
.pp-category-card .pp-btn {
  position: relative;
  z-index: 2;
}

/* Give the whole card the affordance now that all of it is clickable. */
.pp-dish-card:focus-within { outline: 2px solid var(--pp-saffron); outline-offset: 3px; }
.pp-dish-card__title a:focus-visible { outline: none; }

/* Slider dots stay visually small but get a finger-sized hit area.

   NOTE: the hit area is `::after`, NOT `::before`. `::before` is the visible
   dot defined in the slider component; overriding it here inflated every dot
   to a 44px filled circle, which is why the indicators overlapped into a blob
   under the reviews. Never redefine `::before` for this element. */
.pp-slider__dot {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
}

.pp-slider__dot::after {
  content: '';
  position: absolute;
  /* Centres a 44x44 target on the visible dot without moving it. */
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   11. Hero grid blowout.
   `.pp-hero` is a single-cell grid holding the artwork and the copy stacked in
   the same area. Grid items default to `min-width: auto`, so the artwork's
   intrinsic width set the track width — 415px inside a 390px phone, and
   1200px inside an 820px tablet. The copy then inherited that track and its
   buttons ran off the right edge.
   `minmax(0, 1fr)` plus `min-width: 0` lets the track shrink to the viewport,
   which is what every other section already does.
   -------------------------------------------------------------------------- */
.pp-hero {
  grid-template-columns: minmax(0, 1fr);
}

/* min-width alone: adding max-width:100% here would override the content's
   own `max-width: var(--pp-container)` and stop it centring on desktop. */
.pp-hero > * { min-width: 0; }

.pp-hero__content { box-sizing: border-box; }

.pp-hero__inner { min-width: 0; max-width: 100%; }

.pp-hero__actions { flex-wrap: wrap; max-width: 100%; }

.pp-hero__actions .pp-btn { max-width: 100%; }

@media (max-width: 560px) {
  /* Stacked full-width calls to action read better than two cramped pills. */
  .pp-hero__actions { display: grid; gap: var(--pp-space-3); }
  .pp-hero__actions .pp-btn { width: 100%; }
}

/* Release number in the footer: present for support, deliberately quiet. */
.pp-footer__version {
  display: inline-block;
  margin-inline-start: var(--pp-space-2);
  font-size: var(--pp-text-xs);
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

/* ==========================================================================
   FIX BLOCK 12 — full-width section headings and body copy
   --------------------------------------------------------------------------
   Section intros were capped at a reading measure (`62ch` on the head, `68ch`
   on a lone column) which rendered as a ~568px block hugging the left edge of
   a 1200px container, with the rest of the row empty. Headings then wrapped
   onto two lines for no reason.

   Every intro now runs the full container width; the lead paragraph keeps a
   generous cap that only bites on very wide screens, where an unbroken 1200px
   line really is unreadable.
   ========================================================================== */

.pp-section__head {
  max-width: none;
  width: 100%;
}

.pp-section__lead {
  max-width: none;
  margin-inline: 0;
}

/* Centred sections keep their centring — it is the width cap that was wrong,
   not the alignment. */
.pp-section--center .pp-section__head,
.pp-section__head.pp-text-center .pp-section__lead {
  margin-inline: auto;
}

/* A lone column in the optional-split grid (the About block with no photo)
   filled half the row and stopped. Give it the whole width. */
.pp-grid--split-optional > :only-child { max-width: none; }

/* Dark call-to-action sections centred a narrow measure inside a full-bleed
   band, which read as a column floating in black. */
.pp-section--dark .pp-section__head,
.pp-section--dark .pp-section__lead { max-width: none; }

/* Long body paragraphs still deserve a measure — but a per-element one, not a
   wrapper cap that shrinks the heading with it. 90ch is roughly the full
   container at the base font size, so it only engages past ~1400px. */
.pp-section__lead,
.pp-prose > p { max-width: 90ch; }

.pp-text-center .pp-section__lead,
.pp-section--center .pp-section__lead { margin-inline: auto; }

/* ==========================================================================
   FIX BLOCK 13 — the reviews carousel, rebuilt
   --------------------------------------------------------------------------
   What was wrong, in order of how bad it looked:

   1. The dot indicators. A later touch-target rule redefined `::before` —
      which IS the visible dot — into a 44x44 box. The dots inherited the dot
      colour and became overlapping 44px circles. Fixed above by moving the hit
      area to `::after`.
   2. The third card was cut off. Three slides at `flex-basis: 32.5%` plus two
      gaps overflow the track, so the last card ran under the edge. The basis
      is now derived from the gap with calc(), so the row fits exactly.
   3. Two gold vertical bars per card: the global `blockquote` rule adds a 3px
      saffron left border, and the card added a 4px one of its own. The card no
      longer paints an edge and the blockquote is reset inside it.
   4. The decorative quote mark sat at `top: -6px`, half outside the card and
      colliding with the star row. It is now a corner watermark behind the
      text, out of the way of everything.

   The result: equal-height cards, stars top-left, quote in the middle,
   attribution pinned to the bottom on a hairline.
   ========================================================================== */

.pp-slider--quotes .pp-slider__viewport {
  background: transparent;
  border-radius: 0;
  /* Breathing room so the card shadow is not clipped by the scroll container. */
  padding: var(--pp-space-2) 4px var(--pp-space-4);
  margin-inline: -4px;
}

.pp-slider--quotes .pp-slider__track {
  align-items: stretch;
  gap: var(--pp-space-5);
}

.pp-slider--quotes .pp-slider__slide {
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  display: flex;
  scroll-snap-align: start;
  /* One card, minus a peek of the next so the row reads as scrollable. */
  flex: 0 0 88%;
}

@media (min-width: 768px) {
  .pp-slider--quotes .pp-slider__slide {
    flex-basis: calc((100% - var(--pp-space-5)) / 2);
  }
}

@media (min-width: 1100px) {
  .pp-slider--quotes .pp-slider__slide {
    /* Three cards and the two gaps between them — exactly the track width. */
    flex-basis: calc((100% - (2 * var(--pp-space-5))) / 3);
  }
}

/* ---- The card ---------------------------------------------------------- */

.pp-slider--quotes .pp-testimonial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: var(--pp-space-6);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  transition: box-shadow var(--pp-transition), transform var(--pp-transition);
}

@media (hover: hover) {
  .pp-slider--quotes .pp-testimonial:hover {
    box-shadow: var(--pp-shadow-md);
    transform: translateY(-2px);
  }
}

/* Corner watermark, well clear of the stars and the text. */
.pp-slider--quotes .pp-testimonial::before {
  content: "\201D";
  position: absolute;
  z-index: -1;
  top: 0;
  inset-inline-end: var(--pp-space-4);
  inset-inline-start: auto;
  font-family: var(--pp-font-display);
  font-size: 6rem;
  /* The glyph's ink sits in the top third of its em box, so a line-height of
     1 with top:0 lands it fully inside the card — `overflow:hidden` was
     shaving the previous negative offset into a smudge on the border. */
  line-height: 1;
  color: var(--pp-saffron);
  opacity: 0.16;
  pointer-events: none;
}

.pp-slider--quotes .pp-stars {
  margin: 0 0 var(--pp-space-4);
}

/* ---- The quote --------------------------------------------------------- */

.pp-slider--quotes .pp-testimonial__quote {
  flex: 1 1 auto;
  /* Undo the global blockquote treatment: inside a card that already reads as
     a quotation, the accent bar is noise — and it was doubling the card edge. */
  margin: 0 0 var(--pp-space-5);
  padding-inline-start: 0;
  border-inline-start: 0;
  font-family: var(--pp-font-display);
  font-style: italic;
  font-size: var(--pp-text-lg);
  line-height: 1.55;
  color: var(--pp-charcoal-soft);
  /* Long reviews are trimmed to a consistent depth so the row stays tidy.
     Nothing is lost — the full text stays in the DOM for screen readers and
     search engines, it is only visually clamped. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Attribution ------------------------------------------------------- */

.pp-slider--quotes .pp-testimonial__author,
.pp-slider--quotes .pp-testimonial figcaption {
  margin-top: auto;
  padding-top: var(--pp-space-4);
  border-top: 1px solid var(--pp-line);
  font-style: normal;
}

/* ---- Arrows ------------------------------------------------------------ */
/* Quotes are not swiped as instinctively as photos, so the arrows earn their
   place from tablet up. They sit outside the cards where there is room, and
   tuck back inside on narrower desktops rather than hanging off the page. */

@media (min-width: 768px) {
  .pp-slider--quotes .pp-slider__nav { display: grid; top: 50%; }
  .pp-slider--quotes .pp-slider__nav--prev { inset-inline-start: calc(var(--pp-space-4) * -1); }
  .pp-slider--quotes .pp-slider__nav--next { inset-inline-end: calc(var(--pp-space-4) * -1); }
}

@media (min-width: 1360px) {
  .pp-slider--quotes .pp-slider__nav--prev { inset-inline-start: calc(var(--pp-space-10) * -1); }
  .pp-slider--quotes .pp-slider__nav--next { inset-inline-end: calc(var(--pp-space-10) * -1); }
}

/* ---- Dots -------------------------------------------------------------- */

.pp-slider--quotes .pp-slider__dots {
  margin-top: var(--pp-space-5);
  gap: var(--pp-space-1);
}

/* On a dark band the card keeps its light surface, so only the chrome around
   it needs re-tinting. */
.pp-section--dark .pp-slider--quotes .pp-testimonial { background: var(--pp-cream); }

/* --------------------------------------------------------------------------
   Section media.
   An image attached to an editable homepage block. Rendered only when the
   operator has actually set one, so a block with no picture keeps its current
   spacing exactly.
   -------------------------------------------------------------------------- */
.pp-section__media {
  margin: 0 0 var(--pp-space-8);
  overflow: hidden;
  border-radius: var(--pp-radius-lg);
  background: var(--pp-sand);
  box-shadow: var(--pp-shadow-sm);
}

.pp-section__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   FIX BLOCK 14 — right-to-left support (Pashto `ps`, Dari `fa`)
   --------------------------------------------------------------------------
   TranslationService puts `dir="rtl"` on <html> for those two locales, but the
   stylesheet had never been audited for it. The bulk of that audit is NOT in
   this block: every direction-dependent declaration that could be expressed
   logically was rewritten in place above — `padding-left` became
   `padding-inline-start`, `left`/`right` on the slider arrows, the dish-card
   ribbon, the cart badge, the timeline dots and the lightbox became
   `inset-inline-start`/`-end`, `text-align: left|right` became `start|end`,
   and the alert's accent bar became `border-inline-start-width`. Those all
   render identically in LTR and mirror themselves in RTL, which is far better
   than a pile of overrides.

   What is left here is only what a logical property genuinely cannot do:
   background images that are positioned in physical pixels, and glyphs and
   motion that have a direction baked into their shape.

   Nothing below changes a colour, a size or a spacing value.
   ========================================================================== */

/* -- The select chevron ---------------------------------------------------
   `.pp-select` draws its chevron with two gradient layers positioned from the
   right edge. `background-position` knows nothing about writing direction, so
   while the reserved space (`padding-inline-end`) correctly moves to the left
   in RTL, the chevron itself would stay on the right and sit under the text.
   Positions are mirrored to the left edge, keeping the two layers in the same
   left-to-right order so the arrowhead still points down.
   This is the language switcher in the header, and every other <select>. */
[dir="rtl"] .pp-select {
  background-position:
    16px calc(50% + 2px),
    22px calc(50% + 2px);
}

/* -- Carousel, lightbox and pagination arrows -----------------------------
   Checked, and deliberately left with no override. The buttons themselves
   already swap sides, because `--prev` is now pinned to `inset-inline-start`,
   which is the right-hand edge under RTL. Their labels are the literal glyphs
   ‹ and › (U+2039 / U+203A), and those carry the Unicode Bidi_Mirrored
   property: inside an RTL paragraph the browser draws them mirrored on its
   own, so `‹` on the right-hand "previous" button already points right.
   An explicit `scaleX(-1)` here would cancel that out and point every arrow
   the wrong way — verified in Chromium, both with and without the rule.
   Same reasoning for the gallery lightbox and the pagination control. */

/* -- Directional motion ---------------------------------------------------
   A cart line slides out towards the start edge as it is removed. Under RTL
   the start edge is on the right, so the slide has to go the other way. */
[dir="rtl"] .pp-cart-line.is-removing {
  transform: translateX(12px);
}

/* The skeleton shimmer sweeps from the start edge to the end edge. Reversing
   the animation sends it right-to-left to match the reading direction. */
[dir="rtl"] .pp-skeleton::after {
  animation-direction: reverse;
}