@charset "UTF-8";

/* =============================================================================
   Babuka - Restaurant & Fast Food HTML Template
   Main stylesheet (design system + components)
   Author : ThemeDevo
   Version: 1.0.0
   -----------------------------------------------------------------------------
   TABLE OF CONTENTS
   -----------------------------------------------------------------------------
   01. Design tokens
   02. Base & typography
   03. Accessibility helpers
   04. Layout primitives
   05. Decorative elements
   06. Buttons
   07. Section headings & eyebrows
   08. Badges, ratings, pills
   09. Form controls
   10. Header, navigation & mobile menu
   11. Hero sections (three variants)
   12. Marquee strip
   13. Cards - category, dish, feature, chef, blog, testimonial, product
   14. Menu list (dotted leader)
   15. Counters & statistics
   16. Timeline
   17. Accordion & FAQ
   18. Filter tabs
   19. Page hero, breadcrumb & pagination
   20. Gallery & lightbox
   21. Shop, cart, wishlist & checkout
   22. Blog article, sidebar & comments
   23. Reservation, contact & map
   24. Newsletter & call to action
   25. 404 page
   26. Footer
   27. Utilities - preloader, back to top, toast, offcanvas cart
   28. Swiper overrides
   29. Animation utilities & reduced motion
   ========================================================================== */

/* =============================================================================
   01. DESIGN TOKENS
   -----------------------------------------------------------------------------
   Change the values below to re-skin the whole template. Every component in
   this file consumes these custom properties - no hard coded colours.
   ========================================================================== */
:root {
  /* -- Brand palette ------------------------------------------------------ */
  --bb-paprika: #d9552f;          /* primary  - warm paprika red      */
  --bb-paprika-dark: #b8401f;
  --bb-paprika-soft: #fbeae3;
  --bb-basil: #123a2e;            /* secondary - deep basil green     */
  --bb-basil-dark: #0b2620;
  --bb-basil-soft: #e3ede9;
  --bb-saffron: #f2b138;          /* accent   - saffron gold          */
  --bb-saffron-dark: #d99819;
  --bb-saffron-soft: #fdf2da;

  /* -- Neutrals ----------------------------------------------------------- */
  --bb-ink: #1a1512;              /* headings / darkest text          */
  --bb-body: #5f5750;             /* paragraph text                   */
  --bb-muted: #8c827a;            /* meta text                        */
  --bb-line: #e8e0d4;             /* hairline borders                 */
  --bb-line-strong: #d8cdbd;
  --bb-cream: #fbf6ee;            /* page tint                        */
  --bb-cream-deep: #f3e9da;
  --bb-white: #ffffff;

  /* -- Status ------------------------------------------------------------- */
  --bb-success: #2f8f5b;
  --bb-danger: #d0342c;
  --bb-warning: #e0a10d;
  --bb-info: #2f6f8f;

  /* -- Typography --------------------------------------------------------- */
  --bb-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --bb-font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bb-font-script: "Caveat", "Segoe Script", cursive;

  --bb-fs-display: clamp(3rem, 1.4rem + 6.4vw, 6.25rem);
  --bb-fs-h1: clamp(2.375rem, 1.5rem + 3.4vw, 4.25rem);
  --bb-fs-h2: clamp(1.9rem, 1.35rem + 2.2vw, 3.15rem);
  --bb-fs-h3: clamp(1.5rem, 1.25rem + 1.05vw, 2.125rem);
  --bb-fs-h4: clamp(1.3rem, 1.18rem + 0.5vw, 1.625rem);
  --bb-fs-h5: 1.25rem;
  --bb-fs-h6: 1.0625rem;
  --bb-fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --bb-fs-base: 1rem;
  --bb-fs-sm: 0.9375rem;
  --bb-fs-xs: 0.8125rem;

  --bb-lh-tight: 1.06;
  --bb-lh-heading: 1.14;
  --bb-lh-body: 1.75;

  /* -- Spacing scale (4px base) ------------------------------------------- */
  --bb-space-1: 0.25rem;
  --bb-space-2: 0.5rem;
  --bb-space-3: 0.75rem;
  --bb-space-4: 1rem;
  --bb-space-5: 1.25rem;
  --bb-space-6: 1.5rem;
  --bb-space-7: 2rem;
  --bb-space-8: 2.5rem;
  --bb-space-9: 3.5rem;
  --bb-space-10: 4.5rem;
  --bb-space-11: 6rem;
  --bb-space-12: 8rem;

  /* Vertical rhythm of a full width section */
  --bb-section-y: clamp(3.75rem, 2.4rem + 5.2vw, 7.5rem);
  --bb-section-y-sm: clamp(2.75rem, 2rem + 3vw, 5rem);

  /* -- Radii -------------------------------------------------------------- */
  --bb-radius-xs: 8px;
  --bb-radius-sm: 12px;
  --bb-radius-md: 18px;
  --bb-radius-lg: 26px;
  --bb-radius-xl: 36px;
  --bb-radius-pill: 999px;
  /* Babuka signature arch used on chef cards and hero imagery */
  --bb-radius-arch: 999px 999px var(--bb-radius-md) var(--bb-radius-md);

  /* -- Elevation ---------------------------------------------------------- */
  --bb-shadow-xs: 0 2px 6px rgba(26, 21, 18, 0.05);
  --bb-shadow-sm: 0 8px 20px -10px rgba(26, 21, 18, 0.18);
  --bb-shadow-md: 0 18px 40px -22px rgba(26, 21, 18, 0.32);
  --bb-shadow-lg: 0 34px 70px -34px rgba(26, 21, 18, 0.42);
  --bb-shadow-ring: 0 0 0 1px var(--bb-line);
  --bb-shadow-brand: 0 18px 34px -18px rgba(217, 85, 47, 0.55);

  /* -- Motion ------------------------------------------------------------- */
  --bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-dur-fast: 0.2s;
  --bb-dur: 0.35s;
  --bb-dur-slow: 0.6s;

  /* -- Layout ------------------------------------------------------------- */
  --bb-header-h: 88px;
  --bb-container-pad: clamp(1rem, 0.5rem + 1.6vw, 2rem);

  /* -- Bootstrap bridge --------------------------------------------------- */
  --bs-body-font-family: var(--bb-font-body);
  --bs-body-color: var(--bb-body);
  --bs-body-bg: var(--bb-white);
  --bs-link-color: var(--bb-paprika);
  --bs-link-hover-color: var(--bb-paprika-dark);
  --bs-border-color: var(--bb-line);
  --bs-primary: var(--bb-paprika);
  --bs-primary-rgb: 217, 85, 47;
  --bs-secondary: var(--bb-basil);
  --bs-secondary-rgb: 18, 58, 46;
}

/* Dark surface context - used by the premium dining homepage, the cinematic
   hero, the footer and the 404 page. Any component placed inside inherits the
   inverted palette without needing modifier classes.
   .bb-footer is listed here rather than carrying .bb-dark in the markup of
   every page: without these tokens any component dropped into the footer
   resolves the LIGHT palette, which is why the opening-hours day labels were
   painting near-black (--bb-ink) onto the near-black footer and disappearing. */
.bb-dark,
.bb-footer {
  --bb-ink: #ffffff;
  --bb-body: #c2b8ad;
  --bb-muted: #9b9088;
  --bb-line: rgba(255, 255, 255, 0.12);
  --bb-line-strong: rgba(255, 255, 255, 0.22);
  --bb-white: #14100e;
  --bb-cream: #1c1714;
  --bb-cream-deep: #241d19;
  --bb-shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--bb-body);
  background-color: #14100e;
}

/* =============================================================================
   02. BASE & TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bb-header-h) + 16px);
  /* Belt-and-suspenders alongside body's overflow-x: hidden below. Bootstrap's
     .row negative-margin gutters (g-4/g-5 etc.) legitimately bleed a few
     pixels past the container on every section that uses them; relying on
     body alone to clip that via viewport propagation is not reliable in
     every engine, and this template caused a real, draggable horizontal
     scroll without this rule on html too. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-base);
  line-height: var(--bb-lh-body);
  color: var(--bb-body);
  background-color: var(--bb-white);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.bb-h1, .bb-h2, .bb-h3, .bb-h4, .bb-h5, .bb-h6 {
  margin: 0 0 var(--bb-space-4);
  font-family: var(--bb-font-display);
  font-weight: 600;
  line-height: var(--bb-lh-heading);
  color: var(--bb-ink);
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

h1, .bb-h1 { font-size: var(--bb-fs-h1); line-height: var(--bb-lh-tight); }
h2, .bb-h2 { font-size: var(--bb-fs-h2); }
h3, .bb-h3 { font-size: var(--bb-fs-h3); }
h4, .bb-h4 { font-size: var(--bb-fs-h4); }
h5, .bb-h5 { font-size: var(--bb-fs-h5); }
h6, .bb-h6 { font-size: var(--bb-fs-h6); }

/* Emphasised words inside a heading get the Fraunces italic + brand colour.
   <h2>Dishes guests <em>come back</em> for</h2> */
h1 em, h2 em, h3 em, h4 em,
.bb-h1 em, .bb-h2 em, .bb-h3 em {
  font-style: italic;
  color: var(--bb-paprika);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

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

.bb-display {
  font-size: var(--bb-fs-display);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.bb-lead {
  font-size: var(--bb-fs-lead);
  line-height: 1.72;
  color: var(--bb-body);
}

a {
  color: var(--bb-paprika);
  text-decoration: none;
  transition: color var(--bb-dur-fast) var(--bb-ease-soft);
}
a:hover { color: var(--bb-paprika-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--bb-space-4); padding-left: 1.15rem; }
li + li { margin-top: 0.35rem; }

hr {
  border: 0;
  border-top: 1px solid var(--bb-line);
  margin: var(--bb-space-7) 0;
  opacity: 1;
}

strong, b { font-weight: 700; color: var(--bb-ink); }
small { font-size: var(--bb-fs-xs); }

::selection { background: var(--bb-paprika); color: #fff; }

/* Custom scrollbar for supporting browsers */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--bb-line-strong) transparent; scrollbar-width: thin; }
}

/* =============================================================================
   03. ACCESSIBILITY HELPERS
   ========================================================================== */
.bb-visually-hidden,
.bb-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link - first focusable element on every page */
.bb-skip-link {
  position: absolute;
  top: -100px;
  left: var(--bb-space-4);
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--bb-basil);
  color: #fff;
  border-radius: 0 0 var(--bb-radius-sm) var(--bb-radius-sm);
  font-weight: 600;
  transition: top var(--bb-dur) var(--bb-ease);
}
.bb-skip-link:focus { top: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--bb-saffron);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove the default outline only where a custom :focus-visible ring exists */
:focus:not(:focus-visible) { outline: none; }

/* =============================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container,
.container-fluid,
.container-lg,
.container-xl { padding-inline: var(--bb-container-pad); }

@media (min-width: 1400px) {
  .container, .container-xxl, .container-xl, .container-lg { max-width: 1296px; }
  .bb-container-wide { max-width: 1560px; margin-inline: auto; padding-inline: var(--bb-container-pad); }
}

.bb-section { padding-block: var(--bb-section-y); position: relative; }
.bb-section--sm { padding-block: var(--bb-section-y-sm); }
.bb-section--flush-top { padding-top: 0; }
.bb-section--flush-bottom { padding-bottom: 0; }

.bb-bg-cream { background-color: var(--bb-cream); }
.bb-bg-cream-deep { background-color: var(--bb-cream-deep); }
.bb-bg-basil { background-color: var(--bb-basil); }
.bb-bg-ink { background-color: #14100e; }
.bb-bg-paprika { background-color: var(--bb-paprika); }

/* Full bleed media band */
.bb-media-band { position: relative; overflow: hidden; }

/* Even column stacks used across the template */
.bb-stack { display: grid; gap: var(--bb-space-6); }
.bb-stack--sm { gap: var(--bb-space-3); }
.bb-stack--lg { gap: var(--bb-space-8); }

.bb-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-space-4);
}

/* Aspect ratio media wrapper - prevents layout shift while images load */
.bb-ratio { position: relative; overflow: hidden; background: var(--bb-cream-deep); }
.bb-ratio > img,
.bb-ratio > iframe,
.bb-ratio > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bb-ratio--1x1 { aspect-ratio: 1 / 1; }
.bb-ratio--4x3 { aspect-ratio: 4 / 3; }
.bb-ratio--3x2 { aspect-ratio: 3 / 2; }
.bb-ratio--16x9 { aspect-ratio: 16 / 9; }
.bb-ratio--3x4 { aspect-ratio: 3 / 4; }
.bb-ratio--4x5 { aspect-ratio: 4 / 5; }
.bb-ratio--2x3 { aspect-ratio: 2 / 3; }

/* =============================================================================
   05. DECORATIVE ELEMENTS
   -----------------------------------------------------------------------------
   Soft blurred blobs, dotted grids and thin rules that carry the Babuka
   visual identity. All decorative nodes are aria-hidden in the markup.
   ========================================================================== */
.bb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.bb-blob--paprika { background: rgba(217, 85, 47, 0.35); }
.bb-blob--saffron { background: rgba(242, 177, 56, 0.4); }
.bb-blob--basil { background: rgba(18, 58, 46, 0.22); }

.bb-dots {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--bb-line-strong) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.7;
}

/* Thin decorative divider with a centre glyph */
.bb-divider {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  color: var(--bb-saffron);
}
.bb-divider::before,
.bb-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--bb-line-strong), transparent);
}

/* Rotating circular badge used on hero compositions */
.bb-seal {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bb-basil);
  color: #fff;
  box-shadow: var(--bb-shadow-md);
}
.bb-seal__text {
  position: absolute;
  inset: 0;
  animation: bb-spin 18s linear infinite;
}
.bb-seal__icon { font-size: 1.9rem; color: var(--bb-saffron); }

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

/* Subtle paper grain overlay for dark sections */
.bb-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================================
   06. BUTTONS
   ========================================================================== */
.bb-btn {
  --bb-btn-bg: var(--bb-paprika);
  --bb-btn-color: #fff;
  --bb-btn-border: var(--bb-paprika);
  --bb-btn-bg-hover: var(--bb-basil);
  --bb-btn-border-hover: var(--bb-basil);
  --bb-btn-color-hover: #fff;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border: 1.5px solid var(--bb-btn-border);
  border-radius: var(--bb-radius-pill);
  background-color: var(--bb-btn-bg);
  color: var(--bb-btn-color);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--bb-dur) var(--bb-ease),
              border-color var(--bb-dur) var(--bb-ease),
              color var(--bb-dur) var(--bb-ease),
              transform var(--bb-dur) var(--bb-ease),
              box-shadow var(--bb-dur) var(--bb-ease);
}

.bb-btn:hover,
.bb-btn:focus-visible {
  background-color: var(--bb-btn-bg-hover);
  border-color: var(--bb-btn-border-hover);
  color: var(--bb-btn-color-hover);
  transform: translateY(-2px);
  box-shadow: var(--bb-shadow-md);
}
.bb-btn:active { transform: translateY(0); }

.bb-btn i, .bb-btn svg {
  font-size: 1.05em;
  transition: transform var(--bb-dur) var(--bb-ease);
}
.bb-btn:hover i.bi-arrow-right,
.bb-btn:hover i.bi-arrow-up-right { transform: translateX(3px); }

/* -- Variants ------------------------------------------------------------ */
.bb-btn--secondary {
  --bb-btn-bg: var(--bb-basil);
  --bb-btn-border: var(--bb-basil);
  --bb-btn-bg-hover: var(--bb-paprika);
  --bb-btn-border-hover: var(--bb-paprika);
}
.bb-btn--saffron {
  --bb-btn-bg: var(--bb-saffron);
  --bb-btn-border: var(--bb-saffron);
  --bb-btn-color: var(--bb-basil);
  --bb-btn-bg-hover: var(--bb-basil);
  --bb-btn-border-hover: var(--bb-basil);
  --bb-btn-color-hover: #fff;
}
.bb-btn--outline {
  --bb-btn-bg: transparent;
  --bb-btn-color: var(--bb-ink);
  --bb-btn-border: var(--bb-line-strong);
  --bb-btn-bg-hover: var(--bb-ink);
  --bb-btn-border-hover: var(--bb-ink);
}
.bb-btn--outline-brand {
  --bb-btn-bg: transparent;
  --bb-btn-color: var(--bb-paprika);
  --bb-btn-border: var(--bb-paprika);
  --bb-btn-bg-hover: var(--bb-paprika);
  --bb-btn-border-hover: var(--bb-paprika);
}
.bb-btn--light {
  --bb-btn-bg: #fff;
  --bb-btn-color: var(--bb-basil);
  --bb-btn-border: #fff;
  --bb-btn-bg-hover: var(--bb-saffron);
  --bb-btn-border-hover: var(--bb-saffron);
  --bb-btn-color-hover: var(--bb-basil);
}
.bb-btn--ghost {
  --bb-btn-bg: transparent;
  --bb-btn-color: var(--bb-ink);
  --bb-btn-border: transparent;
  --bb-btn-bg-hover: var(--bb-cream-deep);
  --bb-btn-border-hover: var(--bb-cream-deep);
  --bb-btn-color-hover: var(--bb-ink);
}
.bb-btn--ghost:hover { box-shadow: none; }

/* -- Sizes --------------------------------------------------------------- */
.bb-btn--sm { padding: 0.65rem 1.2rem; font-size: var(--bb-fs-xs); }
.bb-btn--lg { padding: 1.15rem 2.3rem; font-size: 1rem; }
.bb-btn--block { display: flex; width: 100%; }

/* Icon only circular button */
.bb-btn-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--bb-line);
  background: var(--bb-white);
  color: var(--bb-ink);
  cursor: pointer;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-btn-icon:hover,
.bb-btn-icon:focus-visible {
  background: var(--bb-paprika);
  border-color: var(--bb-paprika);
  color: #fff;
  transform: translateY(-2px);
}
.bb-btn-icon--sm { width: 38px; height: 38px; font-size: 0.9rem; }

/* Text link with animated underline */
.bb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: var(--bb-fs-sm);
  color: var(--bb-ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--bb-paprika), var(--bb-paprika));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-link:hover,
.bb-link:focus-visible { color: var(--bb-paprika); background-size: 100% 2px; }
.bb-link i { transition: transform var(--bb-dur) var(--bb-ease); }
.bb-link:hover i { transform: translateX(4px); }

/* Circular play button with pulsing ring */
.bb-play {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--bb-paprika);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: var(--bb-shadow-md);
  transition: transform var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  animation: bb-pulse 2.6s ease-out infinite;
}
.bb-play:hover { transform: scale(1.06); background: var(--bb-paprika); color: #fff; }

/* -- Watch control ------------------------------------------------------- */
/* The disc and its label as one control, rather than a bare circle floating
   beside unrelated text. The whole unit is the hit target, so the label is
   clickable too and the button reads as a single object at a glance. */
.bb-watch {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-4);
  margin-top: var(--bb-space-8);
  padding: 0.5rem 1.6rem 0.5rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bb-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background var(--bb-dur) var(--bb-ease), border-color var(--bb-dur) var(--bb-ease);
}
.bb-watch:hover,
.bb-watch:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
}
.bb-watch__play {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bb-paprika);
  color: #fff;
  font-size: 1.25rem;
  transition: background var(--bb-dur) var(--bb-ease);
}
.bb-watch:hover .bb-watch__play { background: var(--bb-paprika-dark); }
/* Ring pulses outward from the disc. Suppressed under reduced motion by the
   global rule in section 20. */
.bb-watch__play::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(217, 85, 47, 0.5);
  border-radius: 50%;
  animation: bb-pulse 2.6s ease-out infinite;
}
.bb-watch__label { display: block; }
.bb-watch__title {
  display: block;
  font-family: var(--bb-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}
.bb-watch__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--bb-fs-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* -- Film player overlay -------------------------------------------------- */
.bb-video {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  padding: var(--bb-space-6);
  background: rgba(10, 8, 7, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-dur) var(--bb-ease), visibility var(--bb-dur) var(--bb-ease);
}
.bb-video.is-open { opacity: 1; visibility: visible; }
.bb-video__frame {
  width: min(1040px, 100%);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  box-shadow: var(--bb-shadow-lg);
  background: #000;
}
.bb-video__frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.bb-video__close {
  position: absolute;
  top: var(--bb-space-6);
  right: var(--bb-space-6);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background var(--bb-dur) var(--bb-ease);
}
.bb-video__close:hover { background: var(--bb-paprika); }

@keyframes bb-pulse {
  0%   { transform: scale(0.9); opacity: 0.9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* =============================================================================
   07. SECTION HEADINGS & EYEBROWS
   ========================================================================== */
.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-script);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--bb-paprika);
}
.bb-eyebrow i { font-size: 1rem; color: var(--bb-saffron); }
.bb-eyebrow--basil { color: var(--bb-basil); }
.bb-eyebrow--light { color: var(--bb-saffron); }

/* Uppercase tracking label - the quieter alternative to the script eyebrow */
.bb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--bb-space-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--bb-paprika);
}

.bb-section-head { margin-bottom: var(--bb-space-8); max-width: 46rem; }
.bb-section-head--center { margin-inline: auto; text-align: center; }
.bb-section-head--center .bb-kicker::before { display: none; }
.bb-section-head__title { margin-bottom: var(--bb-space-4); }
.bb-section-head__text { font-size: var(--bb-fs-lead); margin-bottom: 0; }

/* Head with a trailing action on the same row */
.bb-section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bb-space-6);
  margin-bottom: var(--bb-space-8);
}
.bb-section-head-row .bb-section-head { margin-bottom: 0; }

/* =============================================================================
   08. BADGES, RATINGS, PILLS
   ========================================================================== */
.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--bb-radius-pill);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--bb-paprika);
  color: #fff;
}
.bb-badge--sale { background: var(--bb-paprika); }
.bb-badge--new { background: var(--bb-basil); }
.bb-badge--hot { background: var(--bb-saffron); color: var(--bb-basil); }
.bb-badge--out { background: var(--bb-muted); }
.bb-badge--soft { background: var(--bb-paprika-soft); color: var(--bb-paprika-dark); }
.bb-badge--soft-basil { background: var(--bb-basil-soft); color: var(--bb-basil); }

/* Rating stars */
.bb-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--bb-saffron);
  font-size: 0.85rem;
  line-height: 1;
}
.bb-rating__count {
  margin-left: 0.45rem;
  font-size: var(--bb-fs-xs);
  color: var(--bb-muted);
  font-weight: 600;
}
.bb-rating i.is-empty { color: var(--bb-line-strong); }

/* Small info pill (spice level, prep time, diet) */
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--bb-radius-pill);
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
  font-size: var(--bb-fs-xs);
  font-weight: 600;
  color: var(--bb-body);
}
.bb-pill i { color: var(--bb-paprika); }

/* Price block */
.bb-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--bb-font-display);
  font-weight: 600;
  color: var(--bb-ink);
}
.bb-price__now { font-size: 1.25rem; }
.bb-price__old {
  font-size: 0.95rem;
  color: var(--bb-muted);
  text-decoration: line-through;
  font-weight: 500;
}

/* =============================================================================
   09. FORM CONTROLS
   ========================================================================== */
.bb-field { margin-bottom: var(--bb-space-5); }

.bb-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--bb-fs-sm);
  font-weight: 700;
  color: var(--bb-ink);
}
.bb-label .bb-required { color: var(--bb-paprika); }

.bb-input,
.bb-select,
.bb-textarea {
  width: 100%;
  padding: 0.95rem 1.15rem;
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-sm);
  line-height: 1.5;
  color: var(--bb-ink);
  background-color: var(--bb-white);
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  transition: border-color var(--bb-dur-fast) var(--bb-ease-soft),
              box-shadow var(--bb-dur-fast) var(--bb-ease-soft),
              background-color var(--bb-dur-fast) var(--bb-ease-soft);
  appearance: none;
}
.bb-textarea { min-height: 148px; resize: vertical; }

.bb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235f5750' stroke-width='2' d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.15rem center;
  padding-right: 2.75rem;
}

.bb-input::placeholder,
.bb-textarea::placeholder { color: var(--bb-muted); opacity: 1; }

.bb-input:focus,
.bb-select:focus,
.bb-textarea:focus {
  outline: none;
  border-color: var(--bb-paprika);
  box-shadow: 0 0 0 4px rgba(217, 85, 47, 0.12);
}

/* Validation states driven by main.js */
.bb-input.is-invalid,
.bb-select.is-invalid,
.bb-textarea.is-invalid { border-color: var(--bb-danger); }
.bb-input.is-valid,
.bb-select.is-valid,
.bb-textarea.is-valid { border-color: var(--bb-success); }

.bb-error {
  display: none;
  margin-top: 0.45rem;
  font-size: var(--bb-fs-xs);
  font-weight: 600;
  color: var(--bb-danger);
}
.is-invalid ~ .bb-error { display: block; }

.bb-help { margin-top: 0.45rem; font-size: var(--bb-fs-xs); color: var(--bb-muted); }

/* Input with a leading icon */
.bb-input-group { position: relative; }
.bb-input-group > i {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  color: var(--bb-muted);
  pointer-events: none;
}
.bb-input-group .bb-input,
.bb-input-group .bb-select { padding-left: 2.9rem; }

/* Checkbox & radio */
.bb-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--bb-fs-sm);
  cursor: pointer;
}
.bb-check input[type="checkbox"],
.bb-check input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--bb-paprika);
  cursor: pointer;
}

/* Inline newsletter / coupon form */
.bb-inline-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.bb-inline-form .bb-input { flex: 1 1 220px; }
.bb-widget .bb-inline-form .bb-input { flex: 1 1 120px; }

/* Rounded pill input used by the newsletter band */
.bb-inline-form--pill .bb-input { border-radius: var(--bb-radius-pill); padding-inline: 1.4rem; }

/* Quantity stepper */
.bb-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-pill);
  overflow: hidden;
  background: var(--bb-white);
}
.bb-qty button {
  width: 42px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--bb-ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--bb-dur-fast) var(--bb-ease-soft), color var(--bb-dur-fast) var(--bb-ease-soft);
}
.bb-qty button:hover { background: var(--bb-paprika); color: #fff; }
.bb-qty input {
  width: 48px;
  height: 46px;
  border: 0;
  text-align: center;
  font-weight: 700;
  color: var(--bb-ink);
  background: transparent;
  font-family: var(--bb-font-body);
  -moz-appearance: textfield;
  appearance: textfield;
}
.bb-qty input::-webkit-outer-spin-button,
.bb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Success / info alerts shown after a demo form submit */
.bb-alert {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--bb-radius-sm);
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  background: var(--bb-basil-soft);
  color: var(--bb-basil);
  border: 1px solid rgba(18, 58, 46, 0.15);
}
.bb-alert.is-visible { display: flex; }
.bb-alert i { font-size: 1.15rem; }

/* Button loading state */
.bb-btn.is-loading { pointer-events: none; opacity: 0.75; }
.bb-btn.is-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bb-spin 0.7s linear infinite;
}

/* =============================================================================
   10. HEADER, NAVIGATION & MOBILE MENU
   ========================================================================== */
.bb-topbar {
  background: var(--bb-basil);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--bb-fs-xs);
  padding-block: 0.6rem;
}
.bb-topbar a { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.bb-topbar a:hover { color: var(--bb-saffron); }
.bb-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-5);
  flex-wrap: wrap;
}
.bb-topbar__list {
  display: flex;
  align-items: center;
  gap: var(--bb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-topbar__list li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.bb-topbar__list i { color: var(--bb-saffron); }

.bb-header {
  position: relative;
  z-index: 1030;
  background: var(--bb-white);
  border-bottom: 1px solid var(--bb-line);
}
.bb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bb-space-6);
  min-height: var(--bb-header-h);
}

/* Sticky behaviour toggled by main.js */
.bb-header--sticky { position: sticky; top: 0; }
.bb-header.is-stuck {
  box-shadow: var(--bb-shadow-sm);
  border-bottom-color: transparent;
}

/* Transparent header laid over a dark hero */
.bb-header--overlay {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.bb-header--overlay .bb-nav__link,
.bb-header--overlay .bb-header__action { color: #fff; }
.bb-header--overlay .bb-header__action { border-color: rgba(255, 255, 255, 0.25); background: transparent; }
.bb-header--overlay .bb-logo__text { color: #fff; }
.bb-header--overlay.is-stuck {
  position: fixed;
  background: var(--bb-white);
  border-bottom-color: var(--bb-line);
  animation: bb-slide-down 0.45s var(--bb-ease) both;
}
.bb-header--overlay.is-stuck .bb-nav__link,
.bb-header--overlay.is-stuck .bb-header__action { color: var(--bb-ink); }
.bb-header--overlay.is-stuck .bb-header__action { border-color: var(--bb-line); background: var(--bb-white); }
.bb-header--overlay.is-stuck .bb-logo__text { color: var(--bb-ink); }

@keyframes bb-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* -- Logo ---------------------------------------------------------------- */
.bb-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.bb-logo__mark { width: 42px; height: 42px; }
.bb-logo__text {
  font-family: var(--bb-font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--bb-ink);
}
.bb-logo__text span { color: var(--bb-paprika); }
.bb-logo:hover .bb-logo__text { color: var(--bb-paprika); }

/* -- Primary navigation -------------------------------------------------- */
.bb-nav { margin-inline: auto; }
.bb-nav__list {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-nav__list li { margin: 0; position: relative; }

.bb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  font-size: var(--bb-fs-sm);
  font-weight: 700;
  color: var(--bb-ink);
  border-radius: var(--bb-radius-xs);
  transition: color var(--bb-dur-fast) var(--bb-ease-soft);
}
.bb-nav__link i { font-size: 0.7rem; transition: transform var(--bb-dur-fast) var(--bb-ease-soft); }
.bb-nav__link:hover,
.bb-nav__item.is-open > .bb-nav__link,
.bb-nav__link.is-active { color: var(--bb-paprika); }
.bb-nav__item.is-open > .bb-nav__link i { transform: rotate(180deg); }

/* Active page marker */
.bb-nav__link.is-active { position: relative; }
.bb-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--bb-paprika);
}

/* Dropdown panel */
.bb-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 232px;
  padding: 0.6rem;
  margin: 0;
  list-style: none;
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-md);
  box-shadow: var(--bb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--bb-dur) var(--bb-ease),
              transform var(--bb-dur) var(--bb-ease),
              visibility var(--bb-dur) var(--bb-ease);
  z-index: 20;
}
.bb-nav__item.is-open > .bb-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bb-dropdown li { margin: 0; }
.bb-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--bb-radius-xs);
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  color: var(--bb-body);
  transition: background var(--bb-dur-fast) var(--bb-ease-soft), color var(--bb-dur-fast) var(--bb-ease-soft);
}
.bb-dropdown a:hover,
.bb-dropdown a:focus-visible,
.bb-dropdown a.is-active { background: var(--bb-cream); color: var(--bb-paprika); }

/* Mega menu */
.bb-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(880px, calc(100vw - 3rem));
  padding: var(--bb-space-6);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-dur) var(--bb-ease),
              transform var(--bb-dur) var(--bb-ease),
              visibility var(--bb-dur) var(--bb-ease);
  z-index: 20;
}
.bb-nav__item.is-open > .bb-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.bb-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr;
  gap: var(--bb-space-6);
}
.bb-mega__title {
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-mega__list { margin: 0; padding: 0; list-style: none; }
.bb-mega__list li { margin: 0; }
.bb-mega__list a {
  display: block;
  padding: 0.45rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: var(--bb-radius-xs);
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  color: var(--bb-body);
  transition: background var(--bb-dur-fast) var(--bb-ease-soft), color var(--bb-dur-fast) var(--bb-ease-soft);
}
.bb-mega__list a:hover,
.bb-mega__list a.is-active { background: var(--bb-cream); color: var(--bb-paprika); }
.bb-mega__promo {
  position: relative;
  padding: var(--bb-space-6);
  border-radius: var(--bb-radius-md);
  background: var(--bb-basil);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 210px;
}
.bb-mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.bb-mega__promo > * { position: relative; }
/* h3 is what the markup actually uses on every page, so an h4-only rule never
   matched: the heading fell through to the global heading style, painting
   --bb-ink (near black) at full h3 size - unreadable on the photo and tall
   enough to overflow the card. Both tags are matched so it cannot silently
   break again if the level is changed for document outline reasons. */
.bb-mega__promo h3,
.bb-mega__promo h4 { color: #fff; font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.4rem; }
.bb-mega__promo p { color: rgba(255, 255, 255, 0.8); font-size: var(--bb-fs-xs); margin-bottom: var(--bb-space-4); }

/* -- Header actions ------------------------------------------------------ */
.bb-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  margin-left: auto;
}
.bb-header__action {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bb-line);
  background: var(--bb-white);
  color: var(--bb-ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-header__action:hover,
.bb-header__action:focus-visible {
  background: var(--bb-paprika);
  border-color: var(--bb-paprika);
  color: #fff;
}
.bb-header__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-saffron);
  color: var(--bb-basil);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

/* Burger toggle */
.bb-burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--bb-line);
  border-radius: 50%;
  background: var(--bb-white);
  color: var(--bb-ink);
  font-size: 1.15rem;
  cursor: pointer;
  place-items: center;
}

/* -- Mobile off-canvas menu --------------------------------------------- */
.bb-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1080;
  width: min(390px, 88vw);
  height: 100dvh;
  padding: var(--bb-space-6);
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-lg);
  transform: translateX(100%);
  /* Hidden rather than merely translated: a visible off screen panel would
     extend the scrollable width of the page on small viewports. */
  visibility: hidden;
  transition: transform var(--bb-dur-slow) var(--bb-ease),
              visibility var(--bb-dur-slow) var(--bb-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-6);
}
.bb-mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.bb-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
}
.bb-mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.bb-mobile-menu__list li { margin: 0; border-bottom: 1px solid var(--bb-line); }
.bb-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  border: 0;
  background: none;
  font-family: var(--bb-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--bb-ink);
  text-align: left;
  cursor: pointer;
}
.bb-mobile-menu__link i { transition: transform var(--bb-dur) var(--bb-ease); color: var(--bb-muted); }
.bb-mobile-menu__link[aria-expanded="true"] { color: var(--bb-paprika); }
.bb-mobile-menu__link[aria-expanded="true"] i { transform: rotate(180deg); }
.bb-mobile-menu__sub {
  margin: 0;
  padding: 0 0 0.5rem 0.9rem;
  list-style: none;
  display: none;
}
.bb-mobile-menu__sub.is-open { display: block; }
.bb-mobile-menu__sub li { border: 0; }
.bb-mobile-menu__sub a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  color: var(--bb-body);
}
.bb-mobile-menu__sub a:hover,
.bb-mobile-menu__sub a.is-active { color: var(--bb-paprika); }

.bb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgba(20, 16, 14, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-dur) var(--bb-ease), visibility var(--bb-dur) var(--bb-ease);
}
.bb-backdrop.is-open { opacity: 1; visibility: visible; }

body.bb-no-scroll { overflow: hidden; }

/* -- Search overlay ------------------------------------------------------ */
.bb-search {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  padding: var(--bb-space-6);
  background: rgba(20, 16, 14, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-dur) var(--bb-ease), visibility var(--bb-dur) var(--bb-ease);
}
.bb-search.is-open { opacity: 1; visibility: visible; }
.bb-search__inner { width: min(680px, 100%); text-align: center; }
.bb-search__title { color: #fff; margin-bottom: var(--bb-space-6); }
.bb-search__field { display: flex; gap: 0.6rem; }
.bb-search__field .bb-input {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.1rem;
  padding-block: 1.1rem;
}
.bb-search__field .bb-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.bb-search__close {
  position: absolute;
  top: var(--bb-space-6);
  right: var(--bb-space-6);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-search__close:hover { background: var(--bb-paprika); border-color: var(--bb-paprika); }

/* =============================================================================
   11. HERO SECTIONS
   -----------------------------------------------------------------------------
   Three distinct compositions, one per homepage:
   .bb-hero--classic  : split editorial layout with an arched dish image
   .bb-hero--express  : energetic offer led layout on a saffron field
   .bb-hero--cinema   : full bleed dark image with centred serif statement
   ========================================================================== */
.bb-hero { position: relative; overflow: hidden; }

/* -- 11.1 Classic -------------------------------------------------------- */
.bb-hero--classic {
  background: var(--bb-cream);
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
}
.bb-hero--classic .bb-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  position: relative;
  z-index: 1;
}
.bb-hero__title { margin-bottom: var(--bb-space-5); }
.bb-hero__text { max-width: 34rem; margin-bottom: var(--bb-space-7); }
.bb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bb-space-4); align-items: center; }

.bb-hero__proof {
  display: flex;
  align-items: center;
  gap: var(--bb-space-5);
  margin-top: var(--bb-space-8);
  padding-top: var(--bb-space-6);
  border-top: 1px solid var(--bb-line-strong);
  flex-wrap: wrap;
}
.bb-avatars { display: flex; }
.bb-avatars img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--bb-cream);
  object-fit: cover;
}
.bb-avatars img + img { margin-left: -10px; }

.bb-hero__media { position: relative; }
.bb-hero__media-main {
  border-radius: var(--bb-radius-arch);
  overflow: hidden;
  box-shadow: var(--bb-shadow-lg);
}
.bb-hero__media-sub {
  position: absolute;
  left: -8%;
  bottom: 8%;
  width: 44%;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  border: 8px solid var(--bb-cream);
  box-shadow: var(--bb-shadow-md);
}
.bb-hero__seal { position: absolute; top: 4%; right: -4%; }

/* Floating stat chip on hero imagery */
.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-md);
}
.bb-chip__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bb-paprika-soft);
  color: var(--bb-paprika);
  font-size: 1.1rem;
}
.bb-chip__value { display: block; font-family: var(--bb-font-display); font-weight: 700; color: var(--bb-ink); line-height: 1.1; }
.bb-chip__label { display: block; font-size: var(--bb-fs-xs); color: var(--bb-muted); line-height: 1.2; }
.bb-chip--float { position: absolute; z-index: 2; }

/* -- 11.2 Express (fast food) ------------------------------------------- */
.bb-hero--express {
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(242, 177, 56, 0.55) 0%, rgba(242, 177, 56, 0) 60%),
    linear-gradient(160deg, #fff8ea 0%, #fdefd6 100%);
  padding-block: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);
}
.bb-hero--express .bb-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  position: relative;
  z-index: 1;
}
.bb-offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem 0.55rem 0.6rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-sm);
  font-size: var(--bb-fs-xs);
  font-weight: 700;
  color: var(--bb-ink);
  margin-bottom: var(--bb-space-5);
}
.bb-offer-tag span {
  display: inline-grid;
  place-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-paprika);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bb-hero--express .bb-hero__media { position: relative; display: grid; place-items: center; }
.bb-hero__disc {
  position: absolute;
  width: min(94%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bb-paprika);
  box-shadow: var(--bb-shadow-lg);
}
.bb-hero__disc::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
.bb-hero--express .bb-hero__plate {
  position: relative;
  width: min(88%, 480px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--bb-shadow-lg);
}

/* Countdown block for limited offers */
.bb-countdown { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bb-countdown__unit {
  min-width: 74px;
  padding: 0.75rem 0.5rem;
  border-radius: var(--bb-radius-sm);
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-sm);
  text-align: center;
}
.bb-countdown__num {
  display: block;
  font-family: var(--bb-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bb-ink);
}
.bb-countdown__label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-muted);
  font-weight: 700;
}

/* -- 11.3 Cinematic (premium dining) ------------------------------------ */
.bb-hero--cinema {
  min-height: min(100svh, 900px);
  display: grid;
  align-items: center;
  color: #fff;
  background: #14100e;
}
.bb-hero--cinema .bb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bb-hero--cinema .bb-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.bb-hero--cinema .bb-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 14, 0.75) 0%, rgba(20, 16, 14, 0.35) 45%, rgba(20, 16, 14, 0.92) 100%);
}
.bb-hero--cinema .bb-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: calc(var(--bb-header-h) + 4rem) var(--bb-space-10);
}
.bb-hero--cinema h1 { color: #fff; }
.bb-hero--cinema .bb-hero__text { color: rgba(255, 255, 255, 0.78); margin-inline: auto; }
.bb-hero--cinema .bb-hero__actions { justify-content: center; }

.bb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bb-space-7);
  margin-top: var(--bb-space-9);
  padding-top: var(--bb-space-7);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.bb-hero__meta-item { text-align: center; }
.bb-hero__meta-value {
  display: block;
  font-family: var(--bb-font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--bb-saffron);
  line-height: 1.1;
}
.bb-hero__meta-label {
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

/* Scroll cue */
.bb-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.bb-scroll-cue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--bb-saffron), transparent);
  animation: bb-cue 2s ease-in-out infinite;
}
@keyframes bb-cue {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* =============================================================================
   12. MARQUEE STRIP
   ========================================================================== */
.bb-marquee {
  --bb-marquee-duration: 32s;
  overflow: hidden;
  padding-block: 1.1rem;
  background: var(--bb-basil);
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.bb-marquee--paprika { background: var(--bb-paprika); }
.bb-marquee--cream { background: var(--bb-cream-deep); color: var(--bb-ink); }
.bb-marquee__track {
  display: flex;
  width: max-content;
  animation: bb-marquee var(--bb-marquee-duration) linear infinite;
}
.bb-marquee:hover .bb-marquee__track { animation-play-state: paused; }
.bb-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--bb-space-7);
  padding-right: var(--bb-space-7);
}
.bb-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--bb-font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 600;
  white-space: nowrap;
}
.bb-marquee__item i { color: var(--bb-saffron); font-size: 0.8em; }
@keyframes bb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =============================================================================
   13. CARDS
   ========================================================================== */

/* -- 13.1 Category card -------------------------------------------------- */
/* Photo carries the signature arch already used on the hero and chef
   portraits (see --bb-radius-arch), so the menu categories read as part of
   the same visual system instead of the generic circle-thumbnail-in-a-box
   card every food template ships with. */
.bb-category-card {
  position: relative;
  display: block;
  text-align: center;
}
.bb-category-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--bb-space-4);
  border-radius: var(--bb-radius-arch);
  overflow: hidden;
  background: var(--bb-cream-deep);
  box-shadow: var(--bb-shadow-sm);
  transition: box-shadow var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}
.bb-category-card:hover .bb-category-card__media,
.bb-category-card:focus-visible .bb-category-card__media {
  transform: translateY(-6px);
  box-shadow: var(--bb-shadow-md);
}
.bb-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-dur-slow) var(--bb-ease);
}
.bb-category-card:hover .bb-category-card__media img { transform: scale(1.08); }
/* Sits bottom-right, not top: the arch's top corners round off at 999px,
   and a badge inset from the top edge gets visually clipped by that curve
   before it clears the corner. The bottom corners use --bb-radius-md, a
   much gentler curve the badge safely inset. */
.bb-category-card__tally {
  position: absolute;
  bottom: var(--bb-space-3);
  right: var(--bb-space-3);
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.4rem;
  border-radius: 50%;
  background: var(--bb-white);
  color: var(--bb-paprika);
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--bb-shadow-sm);
}
.bb-category-card__title {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 1.0625rem;
  font-family: var(--bb-font-body);
  font-weight: 800;
  color: var(--bb-ink);
  transition: color var(--bb-dur) var(--bb-ease);
}
.bb-category-card:hover .bb-category-card__title { color: var(--bb-paprika); }
.bb-category-card__count { display: block; font-size: var(--bb-fs-xs); color: var(--bb-muted); }

/* -- 13.2 Dish card ------------------------------------------------------ */
/* The card reads as a kitchen docket: photo, the written detail, then a
   tear-off stub carrying the price and the action. Same dashed tear-line
   language as the About section's .bb-docket, so the product cards and the
   editorial sections speak with one voice.
   Padding lives on the inner elements rather than the card, so the photo can
   run edge to edge — an inset photo floating inside a padded box is the
   single strongest "stock template" tell. */
.bb-dish-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--bb-white);
  border-radius: var(--bb-radius-lg);
  /* Cards sit on white sections as well as cream ones, so the resting shadow
     has to be strong enough to read white-on-white — shadow-xs (5% opacity)
     is invisible there and leaves the badges floating with no card under. */
  box-shadow: var(--bb-shadow-sm);
  transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-dish-card:hover { transform: translateY(-6px); box-shadow: var(--bb-shadow-md); }
.bb-dish-card__media {
  position: relative;
  overflow: hidden;
}
.bb-dish-card__media img { transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-dish-card:hover .bb-dish-card__media img { transform: scale(1.07); }
.bb-dish-card__badges { position: absolute; top: 12px; right: 12px; display: flex; gap: 0.4rem; z-index: 2; }
.bb-dish-card__fav {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bb-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--bb-shadow-sm);
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-dish-card__fav:hover,
.bb-dish-card__fav.is-active { background: var(--bb-paprika); color: #fff; }
/* Body copy is inset from the card edge; the photo above and the stub below
   are not. */
.bb-dish-card > .bb-rating { padding: var(--bb-space-5) var(--bb-space-5) 0; }
.bb-dish-card__title {
  font-size: 1.25rem;
  margin: var(--bb-space-3) 0 0.4rem;
  padding-inline: var(--bb-space-5);
}
.bb-dish-card__title a { color: inherit; }
.bb-dish-card__title a:hover { color: var(--bb-paprika); }
.bb-dish-card__text {
  font-size: var(--bb-fs-sm);
  margin-bottom: var(--bb-space-5);
  padding-inline: var(--bb-space-5);
}
/* The tear-off stub. Price over a full-width button, always — never price and
   button side by side. A sale item carries both a current and a struck-through
   old price, and that wider row wraps in a narrow column while its neighbours
   do not, which leaves the tear-lines landing at different heights across a
   row of cards. Fixing the layout keeps every stub the same height, whether or
   not the dish is on offer, and matches how the stub already behaves on
   mobile. */
.bb-dish-card__foot {
  margin-top: auto;
  padding: var(--bb-space-4);
  /* cream-deep, not cream: these cards also sit on bb-bg-cream sections
     (chef-details), where a --bb-cream stub would be the exact colour of the
     section behind it and the card would lose its bottom edge. */
  background: var(--bb-cream-deep);
  border-top: 1px dashed var(--bb-line-strong);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bb-space-3);
}
.bb-dish-card__foot .bb-btn { width: 100%; }

/* -- 13.3 Feature card (why choose us) ----------------------------------- */
.bb-feature-card {
  height: 100%;
  padding: var(--bb-space-7);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
}
.bb-feature-card:hover { transform: translateY(-6px); box-shadow: var(--bb-shadow-md); }
.bb-feature-card__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: var(--bb-space-5);
  border-radius: var(--bb-radius-md);
  background: var(--bb-paprika-soft);
  color: var(--bb-paprika);
  font-size: 1.7rem;
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-feature-card:hover .bb-feature-card__icon { background: var(--bb-paprika); color: #fff; }
.bb-feature-card__title { font-size: 1.3rem; margin-bottom: 0.6rem; }
.bb-feature-card__text { font-size: var(--bb-fs-sm); margin: 0; }
.bb-feature-card--flat { background: transparent; border: 0; padding: 0; }
.bb-feature-card--flat:hover { transform: none; box-shadow: none; }

/* -- 13.3b Order ticket badge (About section signature) ----------------- */
/* A clipped kitchen order ticket standing in for the usual floating stat
   pill: a stub (icon) torn from a body (handwritten value + label), pinned
   to the photo like a docket on a rail. */
.bb-ticket {
  display: flex;
  align-items: stretch;
  background: var(--bb-white);
  border-radius: var(--bb-radius-xs);
  box-shadow: var(--bb-shadow-md);
}
/* Positioned instance floated over the About photo. Offsets live in this
   class (not an inline style) so the mobile rules in responsive.css can
   tighten them — an inline style can't be overridden by a media query.
   max-width keeps the ticket's box from ever exceeding the photo's width,
   wrapping the label instead, so it can't push the page into horizontal
   scroll on narrow viewports. */
.bb-ticket--about {
  position: absolute;
  left: var(--bb-space-5);
  top: var(--bb-space-6);
  max-width: calc(100% - 2.5rem);
  transform: rotate(-4deg);
}
.bb-ticket__pin {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bb-basil);
  box-shadow: 0 2px 4px rgba(26, 21, 18, 0.3);
  transform: translateX(-50%);
}
.bb-ticket__stub {
  display: grid;
  place-items: center;
  width: 54px;
  flex: none;
  border-right: 2px dashed var(--bb-line-strong);
  color: var(--bb-paprika);
  font-size: 1.35rem;
}
.bb-ticket__body { padding: var(--bb-space-3) var(--bb-space-5) var(--bb-space-3) var(--bb-space-4); }
.bb-ticket__value { display: block; font-family: var(--bb-font-script); font-size: 1.85rem; line-height: 1; color: var(--bb-ink); }
.bb-ticket__label { display: block; font-size: var(--bb-fs-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--bb-muted); }

/* -- 13.3c Docket list (About section facts, replaces boxed feature grid) */
/* Reads like a kitchen order docket: dashed tear-lines between line items
   instead of separate boxed cards. */
.bb-docket { border-top: 1px dashed var(--bb-line-strong); }
.bb-docket__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-4);
  padding: var(--bb-space-5) 0;
  border-bottom: 1px dashed var(--bb-line-strong);
}
.bb-docket__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bb-paprika-soft);
  color: var(--bb-paprika);
  font-size: 1.2rem;
}
.bb-docket__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.bb-docket__text { font-size: var(--bb-fs-sm); color: var(--bb-body); margin: 0; }

/* -- Express media strip -------------------------------------------------- */
/* Both photos are given one shared row height rather than their own aspect
   ratios, so the strip ends on a straight line instead of one image hanging
   below the other. */
.bb-express-media {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--bb-space-4);
}
.bb-express-media > * {
  height: clamp(220px, 26vw, 380px);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  background: var(--bb-cream-deep);
}
.bb-express-media img { width: 100%; height: 100%; object-fit: cover; }

/* -- Journey rail --------------------------------------------------------- */
/* The three stages are a genuine sequence ending in a measured outcome, so
   they are laid on a track rather than dropped into a card grid. The track
   warms from neutral to paprika along its length: the colour is carrying the
   passage from order placed to food out the door, not decorating the row. */
.bb-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Pinned to the start so every disc sits at the same height on the track.
     Left to the default, stops with fewer lines of copy settle at a different
     offset and their discs drift off the line. */
  align-items: start;
  gap: var(--bb-space-6);
  margin: var(--bb-space-10) 0 0;
  padding: 0;
  list-style: none;
}
/* Sits behind the discs, spanning only between the first and last of them
   (each disc is centred in a quarter-width column, so 12.5% in from each end). */
.bb-journey::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--bb-line-strong), var(--bb-paprika));
}
/* margin reset is load bearing: the base stylesheet gives every list item a
   `li + li` top margin, which would push each stop after the first down a few
   pixels and drop its disc off the track. */
.bb-journey__stop { position: relative; margin: 0; text-align: center; }
.bb-journey__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto var(--bb-space-5);
  border-radius: 50%;
  border: 2px solid var(--bb-line-strong);
  /* The ring is painted in the section's own background so the track appears
     to pass behind each disc. */
  background: var(--bb-white);
  box-shadow: 0 0 0 7px var(--bb-cream);
  font-family: var(--bb-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bb-ink);
}
.bb-journey__dot--end {
  flex-direction: column;
  border-color: var(--bb-paprika);
  background: var(--bb-paprika);
  color: #fff;
  box-shadow: 0 0 0 7px var(--bb-cream), var(--bb-shadow-brand);
}
.bb-journey__dot--end small { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bb-journey__title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.bb-journey__text { font-size: var(--bb-fs-sm); margin: 0; }

/* Numbered step card */
.bb-step-card { position: relative; padding-top: var(--bb-space-6); }
.bb-step-card__num {
  font-family: var(--bb-font-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bb-line-strong);
  transition: color var(--bb-dur) var(--bb-ease);
}
.bb-step-card:hover .bb-step-card__num { color: var(--bb-paprika); }

/* -- 13.4 Chef card ------------------------------------------------------ */
.bb-chef-card { position: relative; text-align: center; }
.bb-chef-card__media {
  position: relative;
  border-radius: var(--bb-radius-arch);
  overflow: hidden;
  background: var(--bb-cream-deep);
  margin-bottom: var(--bb-space-5);
}
.bb-chef-card__media img { transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-chef-card:hover .bb-chef-card__media img { transform: scale(1.06); }
.bb-chef-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18, 58, 46, 0.82) 100%);
  opacity: 0;
  transition: opacity var(--bb-dur) var(--bb-ease);
}
.bb-chef-card:hover .bb-chef-card__media::after { opacity: 1; }
.bb-chef-card__social {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 14px);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}
.bb-chef-card:hover .bb-chef-card__social,
.bb-chef-card:focus-within .bb-chef-card__social { opacity: 1; transform: translate(-50%, 0); }
.bb-chef-card__name { font-size: 1.35rem; margin-bottom: 0.2rem; }
.bb-chef-card__name a { color: inherit; }
.bb-chef-card__name a:hover { color: var(--bb-paprika); }
.bb-chef-card__role {
  font-size: var(--bb-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-paprika);
}

/* Social icon list */
.bb-socials { display: inline-flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bb-socials li { margin: 0; }
.bb-socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bb-white);
  color: var(--bb-ink);
  font-size: 0.95rem;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-socials a:hover,
.bb-socials a:focus-visible { background: var(--bb-paprika); color: #fff; transform: translateY(-3px); }
.bb-socials--outline a { background: transparent; border: 1.5px solid var(--bb-line); }
.bb-socials--outline a:hover { border-color: var(--bb-paprika); }
.bb-socials--ghost a { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* -- 13.5 Blog card ------------------------------------------------------ */
.bb-blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-blog-card:hover { transform: translateY(-6px); box-shadow: var(--bb-shadow-md); }
.bb-blog-card__media { position: relative; overflow: hidden; }
.bb-blog-card__media img { transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-blog-card:hover .bb-blog-card__media img { transform: scale(1.06); }
.bb-blog-card__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 0.4rem 0.85rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-white);
  color: var(--bb-paprika);
  font-size: var(--bb-fs-xs);
  font-weight: 800;
}
.bb-blog-card__body { padding: var(--bb-space-6); display: flex; flex-direction: column; flex: 1; }
.bb-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-4);
  margin-bottom: var(--bb-space-3);
  font-size: var(--bb-fs-xs);
  color: var(--bb-muted);
  font-weight: 600;
}
.bb-blog-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.bb-blog-card__meta i { color: var(--bb-paprika); }
.bb-blog-card__title { font-size: 1.3rem; margin-bottom: 0.65rem; }
.bb-blog-card__title a { color: inherit; }
.bb-blog-card__title a:hover { color: var(--bb-paprika); }
.bb-blog-card__text { font-size: var(--bb-fs-sm); margin-bottom: var(--bb-space-5); }
.bb-blog-card__foot { margin-top: auto; }

/* Horizontal blog card used by blog-list.html */
.bb-blog-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--bb-space-7);
  align-items: center;
  padding-bottom: var(--bb-space-8);
  margin-bottom: var(--bb-space-8);
  border-bottom: 1px solid var(--bb-line);
}
.bb-blog-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bb-blog-row__media { border-radius: var(--bb-radius-lg); overflow: hidden; }
.bb-blog-row__media img { transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-blog-row:hover .bb-blog-row__media img { transform: scale(1.05); }

/* Featured post - large overlay card */
.bb-post-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  padding: var(--bb-space-8);
  border-radius: var(--bb-radius-xl);
  overflow: hidden;
  color: #fff;
  background: var(--bb-basil);
}
.bb-post-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--bb-ease); }
.bb-post-feature:hover img { transform: scale(1.05); }
.bb-post-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 14, 0.1) 30%, rgba(20, 16, 14, 0.9) 100%);
}
.bb-post-feature__body { position: relative; z-index: 2; max-width: 42rem; }
.bb-post-feature__body h2, .bb-post-feature__body h3 { color: #fff; }
.bb-post-feature__body a { color: #fff; }
.bb-post-feature__body a:hover { color: var(--bb-saffron); }

/* -- 13.6 Testimonial card ---------------------------------------------- */
.bb-testimonial {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--bb-space-7);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-testimonial:hover { transform: translateY(-6px); box-shadow: var(--bb-shadow-md); }
.bb-testimonial__quote {
  font-family: var(--bb-font-display);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--bb-ink);
  margin-bottom: var(--bb-space-6);
}
.bb-testimonial__mark { font-size: 2rem; color: var(--bb-saffron); line-height: 1; margin-bottom: var(--bb-space-4); }
.bb-testimonial__person { margin-top: auto; display: flex; align-items: center; gap: var(--bb-space-3); }
.bb-testimonial__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bb-testimonial__name { font-family: var(--bb-font-body); font-weight: 800; color: var(--bb-ink); margin: 0; font-size: var(--bb-fs-sm); }
.bb-testimonial__role { font-size: var(--bb-fs-xs); color: var(--bb-muted); }

/* Large featured testimonial */
.bb-testimonial-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--bb-radius-xl);
  background: var(--bb-cream);
}
.bb-testimonial-feature__media { border-radius: var(--bb-radius-lg); overflow: hidden; }
.bb-testimonial-feature__quote {
  font-family: var(--bb-font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.55;
  color: var(--bb-ink);
  margin-bottom: var(--bb-space-6);
}

/* -- 13.7 Product card (shop) ------------------------------------------- */
.bb-product-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--bb-space-4);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease), border-color var(--bb-dur) var(--bb-ease);
}
.bb-product-card:hover { transform: translateY(-6px); box-shadow: var(--bb-shadow-md); border-color: transparent; }
.bb-product-card__media {
  position: relative;
  border-radius: var(--bb-radius-md);
  overflow: hidden;
  background: var(--bb-cream-deep);
  margin-bottom: var(--bb-space-4);
}
.bb-product-card__media img { transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-product-card:hover .bb-product-card__media img { transform: scale(1.07); }
/* An absolutely positioned child resolves against the card's PADDING box, so
   the card's own padding has to be added into these offsets. Without it the
   markers sit up in the white padding above and beside the photo instead of
   on it. */
.bb-product-card__badges {
  position: absolute;
  top: calc(var(--bb-space-4) + 12px);
  left: calc(var(--bb-space-4) + 12px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.bb-product-card__tools {
  position: absolute;
  top: calc(var(--bb-space-4) + 12px);
  right: calc(var(--bb-space-4) + 12px);
  z-index: 3;
  display: grid;
  gap: 0.45rem;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}
.bb-product-card:hover .bb-product-card__tools,
.bb-product-card:focus-within .bb-product-card__tools { opacity: 1; transform: translateX(0); }
.bb-product-card__tool {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--bb-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--bb-shadow-xs);
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-product-card__tool:hover,
.bb-product-card__tool.is-active { background: var(--bb-paprika); color: #fff; }
.bb-product-card__cat { font-size: var(--bb-fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-muted); }
.bb-product-card__title { font-size: 1.15rem; margin: 0.35rem 0 0.5rem; }
.bb-product-card__title a { color: inherit; }
.bb-product-card__title a:hover { color: var(--bb-paprika); }
.bb-product-card__foot {
  margin-top: auto;
  padding-top: var(--bb-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3);
}
/* Out of stock treatment */
.bb-product-card.is-out .bb-product-card__media img { filter: grayscale(1); opacity: 0.7; }

/* -- Ranked variant (best sellers chart) ---------------------------------- */
/* This grid is a real chart - the copy says it is re-ranked every Monday - so
   the position is information, not decoration, and it earns the prime corner
   of the photo. Squared rather than pill shaped: every other marker in the
   template is a pill, so the chart positions stay distinguishable at a glance
   from the offer badges sitting beside them. */
.bb-product-card__rank {
  position: absolute;
  top: calc(var(--bb-space-4) + 12px);
  left: calc(var(--bb-space-4) + 12px);
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 0.45rem;
  border-radius: var(--bb-radius-xs);
  background: var(--bb-basil);
  color: var(--bb-saffron);
  font-family: var(--bb-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--bb-shadow-sm);
}
/* Offer badges shift along the same row so they sit beside the chart position
   instead of underneath it. */
.bb-product-card--rank .bb-product-card__badges {
  left: calc(var(--bb-space-4) + 12px + 42px + 0.5rem);
  flex-direction: row;
  align-items: center;
}

/* Offer / combo card */
.bb-combo-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: center;
  gap: var(--bb-space-6);
  padding: var(--bb-space-7);
  border-radius: var(--bb-radius-xl);
  background: var(--bb-basil);
  color: #fff;
  overflow: hidden;
}
.bb-combo-card--saffron { background: var(--bb-saffron); color: var(--bb-basil); }
.bb-combo-card--saffron h3 { color: var(--bb-basil); }
.bb-combo-card--paprika { background: var(--bb-paprika); }
.bb-combo-card h3 { color: #fff; }
.bb-combo-card__media { border-radius: var(--bb-radius-lg); overflow: hidden; }
.bb-combo-card__discount {
  font-family: var(--bb-font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
}

/* =============================================================================
   14. MENU LIST (dotted leader)
   ========================================================================== */
.bb-menu-list { display: grid; gap: var(--bb-space-6); }
.bb-menu-item {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: var(--bb-space-4);
}
.bb-menu-item__media {
  width: 82px;
  height: 82px;
  border-radius: var(--bb-radius-md);
  overflow: hidden;
  background: var(--bb-cream-deep);
}
.bb-menu-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-menu-item:hover .bb-menu-item__media img { transform: scale(1.08); }
.bb-menu-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.bb-menu-item__name {
  font-family: var(--bb-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bb-ink);
  margin: 0;
}
.bb-menu-item__name a { color: inherit; }
.bb-menu-item__name a:hover { color: var(--bb-paprika); }
.bb-menu-item__leader {
  flex: 1;
  height: 1px;
  min-width: 20px;
  background-image: linear-gradient(90deg, var(--bb-line-strong) 40%, transparent 40%);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}
.bb-menu-item__desc { font-size: var(--bb-fs-sm); margin: 0; color: var(--bb-muted); }
.bb-menu-item__price {
  font-family: var(--bb-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bb-paprika);
  white-space: nowrap;
}

/* =============================================================================
   15. COUNTERS & STATISTICS
   ========================================================================== */
.bb-stat { text-align: center; }
.bb-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  font-family: var(--bb-font-display);
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bb-ink);
  margin-bottom: 0.4rem;
}
.bb-stat__suffix { color: var(--bb-paprika); }
.bb-stat__label {
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  color: var(--bb-muted);
}
.bb-stat--left { text-align: left; }
.bb-stat--left .bb-stat__value { justify-content: flex-start; }

.bb-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-space-6);
  padding: var(--bb-space-8);
  border-radius: var(--bb-radius-xl);
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-lg);
}
.bb-stat-strip .bb-stat + .bb-stat { border-left: 1px solid var(--bb-line); }

/* -- Skill / proficiency bars (chef details) ------------------------------ */
.bb-skill + .bb-skill { margin-top: var(--bb-space-5); }
.bb-skill__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3);
  margin-bottom: 0.5rem;
  font-size: var(--bb-fs-sm);
  font-weight: 700;
  color: var(--bb-ink);
}
.bb-skill__track {
  height: 8px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-cream-deep);
  overflow: hidden;
}
.bb-skill__bar {
  height: 100%;
  border-radius: var(--bb-radius-pill);
  background: linear-gradient(90deg, var(--bb-paprika), var(--bb-saffron));
}

/* =============================================================================
   16. TIMELINE
   ========================================================================== */
.bb-timeline { position: relative; }
.bb-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--bb-line-strong) 8%, var(--bb-line-strong) 92%, transparent);
}
.bb-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
  gap: var(--bb-space-4);
}
.bb-timeline__item + .bb-timeline__item { margin-top: var(--bb-space-8); }
.bb-timeline__marker {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bb-white);
  border: 2px solid var(--bb-line);
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bb-paprika);
  box-shadow: 0 0 0 8px var(--bb-cream);
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease), border-color var(--bb-dur) var(--bb-ease);
}
.bb-timeline__item:hover .bb-timeline__marker { background: var(--bb-paprika); border-color: var(--bb-paprika); color: #fff; }
.bb-timeline__panel {
  padding: var(--bb-space-6);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-shadow-xs);
}
.bb-timeline__panel h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.bb-timeline__panel p { font-size: var(--bb-fs-sm); margin-bottom: 0; }
.bb-timeline__media { border-radius: var(--bb-radius-lg); overflow: hidden; }
.bb-timeline__item--flip .bb-timeline__panel { order: 3; }

/* =============================================================================
   17. ACCORDION & FAQ
   ========================================================================== */
.bb-accordion { display: grid; gap: var(--bb-space-4); }
.bb-accordion__item {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-md);
  background: var(--bb-white);
  overflow: hidden;
  transition: border-color var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-accordion__item.is-open { border-color: transparent; box-shadow: var(--bb-shadow-md); }
.bb-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  width: 100%;
  padding: 1.25rem 1.5rem;
  border: 0;
  background: transparent;
  font-family: var(--bb-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bb-ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--bb-dur-fast) var(--bb-ease-soft);
}
.bb-accordion__trigger:hover { color: var(--bb-paprika); }
.bb-accordion__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bb-cream);
  color: var(--bb-paprika);
  font-size: 0.85rem;
  transition: transform var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-accordion__item.is-open .bb-accordion__icon {
  transform: rotate(45deg);
  background: var(--bb-paprika);
  color: #fff;
}
.bb-accordion__panel {
  height: 0;
  overflow: hidden;
  transition: height var(--bb-dur) var(--bb-ease);
}
.bb-accordion__body {
  padding: 0 1.5rem 1.5rem;
  font-size: var(--bb-fs-sm);
  color: var(--bb-body);
}

/* =============================================================================
   18. FILTER TABS
   ========================================================================== */
.bb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: var(--bb-space-8);
}
.bb-filter {
  padding: 0.7rem 1.35rem;
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-white);
  font-size: var(--bb-fs-sm);
  font-weight: 700;
  color: var(--bb-ink);
  cursor: pointer;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-filter:hover { border-color: var(--bb-paprika); color: var(--bb-paprika); }
.bb-filter.is-active {
  background: var(--bb-paprika);
  border-color: var(--bb-paprika);
  color: #fff;
}
.bb-filters--left { justify-content: flex-start; }

/* Scrollable category rail for the fast food homepage */
.bb-rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
.bb-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* =============================================================================
   19. PAGE HERO, BREADCRUMB & PAGINATION
   ========================================================================== */
.bb-page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  background: var(--bb-basil);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.bb-page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.bb-page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.bb-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 32, 0.75), rgba(11, 38, 32, 0.92));
}
.bb-page-hero__inner { position: relative; z-index: 2; }
.bb-page-hero__title { color: #fff; margin-bottom: var(--bb-space-4); }
.bb-page-hero__text { color: rgba(255, 255, 255, 0.75); max-width: 40rem; margin-inline: auto; }

.bb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bb-fs-sm);
  font-weight: 600;
}
.bb-breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.6); }
.bb-breadcrumb li + li::before { content: "\f285"; font-family: "bootstrap-icons"; font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); }
.bb-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.bb-breadcrumb a:hover { color: var(--bb-saffron); }
.bb-breadcrumb [aria-current="page"] { color: var(--bb-saffron); }

/* Light breadcrumb variant on cream backgrounds */
.bb-breadcrumb--light li { color: var(--bb-muted); }
.bb-breadcrumb--light a { color: var(--bb-ink); }
.bb-breadcrumb--light li + li::before { color: var(--bb-line-strong); }
.bb-breadcrumb--light [aria-current="page"] { color: var(--bb-paprika); }

.bb-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: var(--bb-space-9) 0 0;
  padding: 0;
  list-style: none;
}
.bb-pagination li { margin: 0; }
.bb-pagination a,
.bb-pagination span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 0.75rem;
  border-radius: var(--bb-radius-pill);
  border: 1.5px solid var(--bb-line);
  background: var(--bb-white);
  font-weight: 700;
  font-size: var(--bb-fs-sm);
  color: var(--bb-ink);
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-pagination a:hover { border-color: var(--bb-paprika); color: var(--bb-paprika); }
.bb-pagination .is-active a,
.bb-pagination .is-active span {
  background: var(--bb-paprika);
  border-color: var(--bb-paprika);
  color: #fff;
}
.bb-pagination .is-disabled span { opacity: 0.45; }

/* =============================================================================
   20. GALLERY & LIGHTBOX
   ========================================================================== */
.bb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-space-4);
}
/* Each tile is a <button>, so the user-agent border, padding, font and centred
   text all have to be cleared — otherwise every photo sits inside a grey
   button frame. */
.bb-gallery-item {
  position: relative;
  display: block;
  /* A <button> shrink-to-fits its auto width even at display:block, and every
     child here is absolutely positioned - so with nothing in flow the tile
     collapsed to zero width, and an aspect-ratio applied to zero gave zero
     height. Inside .bb-gallery-grid the tiles are grid items and get stretched,
     which hid the problem; dropped into a plain column they vanished. */
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--bb-radius-md);
  overflow: hidden;
  background: var(--bb-cream-deep);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
}
.bb-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bb-dur-slow) var(--bb-ease); }
.bb-gallery-item:hover img { transform: scale(1.07); }
.bb-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 58, 46, 0) 40%, rgba(18, 58, 46, 0.85) 100%);
  opacity: 0;
  transition: opacity var(--bb-dur) var(--bb-ease);
}
.bb-gallery-item:hover::after,
.bb-gallery-item:focus-visible::after { opacity: 1; }
.bb-gallery-item__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--bb-space-5);
  color: #fff;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}
.bb-gallery-item:hover .bb-gallery-item__meta,
.bb-gallery-item:focus-visible .bb-gallery-item__meta { opacity: 1; transform: translateY(0); }
.bb-gallery-item__title { display: block; font-family: var(--bb-font-display); font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0 0 0.15rem; }
.bb-gallery-item__cat { display: block; margin-bottom: 0.25rem; font-size: var(--bb-fs-xs); color: var(--bb-saffron); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.bb-gallery-item__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--bb-ink);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}
.bb-gallery-item:hover .bb-gallery-item__zoom { opacity: 1; transform: scale(1); }

/* -- Mosaic gallery ------------------------------------------------------- */
/* Six tiles, one of them a double-width feature: 4 cells + 5 singles fills a
   3x3 grid exactly, so it tiles with no holes. Tile heights come from the grid
   rows here, which is why the markup carries .bb-ratio for the positioning
   context but NOT a ratio modifier - an aspect-ratio would fight the row
   sizing and collapse the layout. */
.bb-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 230px);
  gap: var(--bb-space-4);
}
.bb-gallery-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
.bb-gallery-mosaic .bb-gallery-item { height: 100%; }

/* No row/column spans here on purpose. Every tile carries its own
   aspect-ratio, and a grid span sizes an item from the grid rows instead —
   the two fight, which left tiles misaligned with holes in the grid. A
   uniform grid also survives a buyer adding or removing photos, where a
   masonry layout only tiles cleanly at particular item counts. */

/* Hidden by the filter script */
.bb-gallery-item.is-hidden { display: none; }

/* -- Lightbox ------------------------------------------------------------ */
.bb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 11, 9, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-dur) var(--bb-ease), visibility var(--bb-dur) var(--bb-ease);
}
.bb-lightbox.is-open { opacity: 1; visibility: visible; }
.bb-lightbox__figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.bb-lightbox__img {
  max-height: 76vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--bb-radius-md);
  box-shadow: var(--bb-shadow-lg);
}
.bb-lightbox__caption { margin-top: var(--bb-space-4); color: rgba(255, 255, 255, 0.8); font-size: var(--bb-fs-sm); }
.bb-lightbox__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-lightbox__btn:hover { background: var(--bb-paprika); border-color: var(--bb-paprika); }
.bb-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.bb-lightbox__prev { left: clamp(0.75rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.bb-lightbox__next { right: clamp(0.75rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.bb-lightbox__counter {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--bb-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* =============================================================================
   21. SHOP, CART, WISHLIST & CHECKOUT
   ========================================================================== */
.bb-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding: var(--bb-space-4) var(--bb-space-5);
  margin-bottom: var(--bb-space-7);
  border-radius: var(--bb-radius-md);
  background: var(--bb-cream);
}
.bb-shop-toolbar__count { font-size: var(--bb-fs-sm); font-weight: 600; margin: 0; }
.bb-shop-toolbar .bb-select { width: auto; min-width: 210px; }

/* Sidebar widgets */
.bb-widget {
  padding: var(--bb-space-6);
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
}
.bb-widget + .bb-widget { margin-top: var(--bb-space-6); }
.bb-widget__title {
  font-size: 1.15rem;
  margin-bottom: var(--bb-space-5);
  padding-bottom: var(--bb-space-4);
  border-bottom: 1px solid var(--bb-line);
}
.bb-widget__list { margin: 0; padding: 0; list-style: none; }
.bb-widget__list li { margin: 0; }
.bb-widget__list li + li { margin-top: 0.6rem; }
.bb-widget__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  color: var(--bb-body);
}
.bb-widget__list a:hover { color: var(--bb-paprika); }
.bb-widget__list span { font-size: var(--bb-fs-xs); color: var(--bb-muted); }

/* Small product row in sidebar widgets */
.bb-mini-product { display: flex; gap: var(--bb-space-3); align-items: center; }
.bb-mini-product img { width: 72px; height: 72px; border-radius: var(--bb-radius-sm); object-fit: cover; flex: 0 0 auto; }
.bb-mini-product__title { font-size: var(--bb-fs-sm); font-weight: 700; margin: 0 0 0.15rem; font-family: var(--bb-font-body); }
.bb-mini-product__title a { color: var(--bb-ink); }
.bb-mini-product__title a:hover { color: var(--bb-paprika); }

/* Tag cloud */
.bb-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bb-tag {
  display: inline-flex;
  padding: 0.45rem 0.9rem;
  border-radius: var(--bb-radius-pill);
  border: 1px solid var(--bb-line);
  font-size: var(--bb-fs-xs);
  font-weight: 700;
  color: var(--bb-body);
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-tag:hover { background: var(--bb-paprika); border-color: var(--bb-paprika); color: #fff; }

/* -- Product detail gallery --------------------------------------------- */
.bb-product-gallery__main {
  position: relative;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  background: var(--bb-cream-deep);
  margin-bottom: var(--bb-space-4);
}
.bb-product-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bb-space-3); }
.bb-product-thumb {
  border: 2px solid transparent;
  border-radius: var(--bb-radius-sm);
  overflow: hidden;
  background: var(--bb-cream-deep);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--bb-dur) var(--bb-ease);
}
.bb-product-thumb.is-active,
.bb-product-thumb:hover { border-color: var(--bb-paprika); }

.bb-product-meta {
  display: grid;
  gap: 0.5rem;
  padding: var(--bb-space-5) 0;
  margin: var(--bb-space-5) 0;
  border-block: 1px solid var(--bb-line);
  font-size: var(--bb-fs-sm);
}
.bb-product-meta__row { display: flex; gap: 0.6rem; }
.bb-product-meta__label { font-weight: 700; color: var(--bb-ink); min-width: 118px; }

/* Nutrition table */
.bb-nutrition { width: 100%; border-collapse: collapse; font-size: var(--bb-fs-sm); }
.bb-nutrition caption { caption-side: top; text-align: left; font-weight: 700; color: var(--bb-ink); padding-bottom: 0.75rem; }
.bb-nutrition th,
.bb-nutrition td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--bb-line); text-align: left; }
.bb-nutrition thead th { background: var(--bb-cream); font-weight: 800; color: var(--bb-ink); }
.bb-nutrition tbody th { font-weight: 600; color: var(--bb-body); }
.bb-nutrition td { font-weight: 700; color: var(--bb-ink); }

/* Detail tab bar */
.bb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--bb-line);
  margin-bottom: var(--bb-space-7);
}
.bb-tab {
  padding: 0.9rem 1.35rem;
  border: 0;
  background: none;
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-sm);
  font-weight: 800;
  color: var(--bb-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--bb-dur) var(--bb-ease), border-color var(--bb-dur) var(--bb-ease);
}
.bb-tab:hover { color: var(--bb-ink); }
.bb-tab.is-active { color: var(--bb-paprika); border-bottom-color: var(--bb-paprika); }
.bb-tab-panel { display: none; }
.bb-tab-panel.is-active { display: block; animation: bb-fade-in 0.4s var(--bb-ease) both; }

@keyframes bb-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reviews */
.bb-review { display: flex; gap: var(--bb-space-4); padding-block: var(--bb-space-6); border-bottom: 1px solid var(--bb-line); }
.bb-review:last-of-type { border-bottom: 0; }
.bb-review__avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bb-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.bb-review__name { font-family: var(--bb-font-body); font-size: 1rem; font-weight: 800; margin: 0; color: var(--bb-ink); }
.bb-review__date { font-size: var(--bb-fs-xs); color: var(--bb-muted); }

/* -- Cart table ---------------------------------------------------------- */
.bb-table-wrap { overflow-x: auto; border-radius: var(--bb-radius-lg); border: 1px solid var(--bb-line); }
.bb-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--bb-white); }
.bb-table th,
.bb-table td { padding: var(--bb-space-5); text-align: left; vertical-align: middle; }
.bb-table thead th {
  background: var(--bb-cream);
  font-size: var(--bb-fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-ink);
  white-space: nowrap;
}
.bb-table tbody tr + tr { border-top: 1px solid var(--bb-line); }
.bb-table__product { display: flex; align-items: center; gap: var(--bb-space-4); min-width: 260px; }
.bb-table__product img { width: 84px; height: 84px; border-radius: var(--bb-radius-sm); object-fit: cover; flex: 0 0 auto; }
.bb-table__name { font-family: var(--bb-font-display); font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.2rem; }
.bb-table__name a { color: var(--bb-ink); }
.bb-table__name a:hover { color: var(--bb-paprika); }
.bb-table__remove {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--bb-line);
  background: transparent;
  color: var(--bb-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-table__remove:hover { background: var(--bb-danger); border-color: var(--bb-danger); color: #fff; }

.bb-cart-actions .bb-inline-form .bb-input { flex: 1 1 170px; }

.bb-cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin-top: var(--bb-space-6);
}

/* Order summary panel */
.bb-summary {
  padding: var(--bb-space-7);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-cream);
  position: sticky;
  top: calc(var(--bb-header-h) + 20px);
}
.bb-summary__title { font-size: 1.35rem; margin-bottom: var(--bb-space-5); }
.bb-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding-block: 0.7rem;
  font-size: var(--bb-fs-sm);
  border-bottom: 1px dashed var(--bb-line-strong);
}
.bb-summary__row span:last-child { font-weight: 700; color: var(--bb-ink); }
.bb-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding-top: var(--bb-space-5);
  margin-top: var(--bb-space-3);
  font-family: var(--bb-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bb-ink);
}

/* Order item list on checkout */
.bb-order-list { margin: 0; padding: 0; list-style: none; }
.bb-order-list li {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  padding-block: var(--bb-space-3);
  border-bottom: 1px dashed var(--bb-line-strong);
  margin: 0;
}
.bb-order-list img { width: 56px; height: 56px; border-radius: var(--bb-radius-xs); object-fit: cover; }
.bb-order-list__name { display: block; font-size: var(--bb-fs-sm); font-weight: 700; color: var(--bb-ink); }
.bb-order-list__qty { display: block; font-size: var(--bb-fs-xs); color: var(--bb-muted); }
.bb-order-list__price { margin-left: auto; font-weight: 700; color: var(--bb-ink); }

/* Payment method selector */
.bb-payment { display: grid; gap: var(--bb-space-3); }
.bb-payment__option {
  display: block;
  padding: var(--bb-space-5);
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-md);
  cursor: pointer;
  transition: border-color var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
}
.bb-payment__option:hover { border-color: var(--bb-line-strong); }
.bb-payment__option:has(input:checked) { border-color: var(--bb-paprika); background: var(--bb-paprika-soft); }
.bb-payment__head { display: flex; align-items: center; gap: 0.7rem; font-weight: 800; color: var(--bb-ink); font-size: var(--bb-fs-sm); }
.bb-payment__head input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--bb-paprika); }
.bb-payment__head i { color: var(--bb-paprika); font-size: 1.2rem; }
.bb-payment__text { display: block; margin: 0.5rem 0 0 1.9rem; font-size: var(--bb-fs-xs); color: var(--bb-muted); }

/* Checkout progress */
.bb-steps { display: flex; flex-wrap: wrap; gap: var(--bb-space-5); margin-bottom: var(--bb-space-8); }
.bb-steps__item { display: flex; align-items: center; gap: 0.7rem; font-size: var(--bb-fs-sm); font-weight: 700; color: var(--bb-muted); }
.bb-steps__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--bb-line);
  font-size: var(--bb-fs-xs);
}
.bb-steps__item.is-active { color: var(--bb-ink); }
.bb-steps__item.is-active .bb-steps__num { background: var(--bb-paprika); border-color: var(--bb-paprika); color: #fff; }
.bb-steps__item.is-done .bb-steps__num { background: var(--bb-basil); border-color: var(--bb-basil); color: #fff; }

/* Empty states (cart / wishlist) */
.bb-empty {
  text-align: center;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--bb-space-5);
  border: 1px dashed var(--bb-line-strong);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-cream);
}
.bb-empty__icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--bb-space-5);
  border-radius: 50%;
  background: var(--bb-white);
  color: var(--bb-paprika);
  font-size: 2.4rem;
  box-shadow: var(--bb-shadow-sm);
}
.bb-empty__title { font-size: 1.6rem; margin-bottom: 0.6rem; }
.bb-empty__text { max-width: 32rem; margin: 0 auto var(--bb-space-6); }

/* Stock status */
.bb-stock { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--bb-fs-xs); font-weight: 800; }
.bb-stock--in { color: var(--bb-success); }
.bb-stock--low { color: var(--bb-warning); }
.bb-stock--out { color: var(--bb-danger); }

/* =============================================================================
   22. BLOG ARTICLE, SIDEBAR & COMMENTS
   ========================================================================== */
.bb-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-5);
  margin-bottom: var(--bb-space-6);
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  color: var(--bb-muted);
}
.bb-article__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.bb-article__meta i { color: var(--bb-paprika); }
.bb-article__cover { border-radius: var(--bb-radius-lg); overflow: hidden; margin-bottom: var(--bb-space-8); }

.bb-prose { font-size: 1.0625rem; line-height: 1.85; }
.bb-prose > * + * { margin-top: var(--bb-space-5); }
.bb-prose h2 { font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem); margin-top: var(--bb-space-8); }
.bb-prose h3 { font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem); margin-top: var(--bb-space-7); }
.bb-prose img { border-radius: var(--bb-radius-md); }
.bb-prose figure { margin: var(--bb-space-7) 0; }
.bb-prose figcaption {
  margin-top: 0.75rem;
  font-size: var(--bb-fs-xs);
  color: var(--bb-muted);
  text-align: center;
}
.bb-prose ul, .bb-prose ol { padding-left: 1.35rem; }
.bb-prose li::marker { color: var(--bb-paprika); }

.bb-quote {
  position: relative;
  margin: var(--bb-space-8) 0;
  padding: var(--bb-space-8);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-cream);
  border-left: 4px solid var(--bb-paprika);
}
.bb-quote p {
  font-family: var(--bb-font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.6;
  color: var(--bb-ink);
  margin-bottom: var(--bb-space-4);
}
.bb-quote cite {
  font-style: normal;
  font-size: var(--bb-fs-sm);
  font-weight: 800;
  color: var(--bb-paprika);
}

.bb-article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-5);
  padding-block: var(--bb-space-6);
  margin-top: var(--bb-space-8);
  border-block: 1px solid var(--bb-line);
}
.bb-share { display: flex; align-items: center; gap: 0.6rem; }
.bb-share__label { font-size: var(--bb-fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-muted); }

/* Prev / next post navigation */
.bb-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bb-space-5);
  margin-top: var(--bb-space-8);
}
.bb-post-nav__item {
  display: flex;
  align-items: center;
  gap: var(--bb-space-4);
  padding: var(--bb-space-5);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-md);
  transition: border-color var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
}
.bb-post-nav__item:hover { background: var(--bb-cream); border-color: transparent; }
.bb-post-nav__item--next { text-align: right; flex-direction: row-reverse; }
.bb-post-nav__label { font-size: var(--bb-fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-paprika); }
.bb-post-nav__title { font-family: var(--bb-font-display); font-size: 1.0625rem; font-weight: 600; color: var(--bb-ink); margin: 0.2rem 0 0; }

/* Author box */
.bb-author-box {
  display: flex;
  gap: var(--bb-space-6);
  align-items: center;
  padding: var(--bb-space-7);
  margin-top: var(--bb-space-8);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-cream);
}
.bb-author-box img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bb-author-box__name { font-size: 1.3rem; margin-bottom: 0.25rem; }
.bb-author-box__role { font-size: var(--bb-fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-paprika); margin-bottom: 0.75rem; }

/* Comments */
.bb-comments { margin-top: var(--bb-space-9); }
.bb-comment { display: flex; gap: var(--bb-space-4); padding-block: var(--bb-space-6); border-bottom: 1px solid var(--bb-line); }
.bb-comment--reply { margin-left: clamp(1.5rem, 5vw, 4.5rem); }
.bb-comment__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bb-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.bb-comment__name { font-family: var(--bb-font-body); font-size: 1rem; font-weight: 800; margin: 0; color: var(--bb-ink); }
.bb-comment__date { font-size: var(--bb-fs-xs); color: var(--bb-muted); }
.bb-comment__reply { font-size: var(--bb-fs-xs); font-weight: 800; color: var(--bb-paprika); margin-left: auto; }

/* =============================================================================
   23. RESERVATION, CONTACT & MAP
   ========================================================================== */
.bb-reserve-card {
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  border-radius: var(--bb-radius-xl);
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-lg);
}
.bb-reserve-card--dark {
  background: var(--bb-basil);
  color: rgba(255, 255, 255, 0.78);
}
.bb-reserve-card--dark h2,
.bb-reserve-card--dark h3,
.bb-reserve-card--dark .bb-label { color: #fff; }
.bb-reserve-card--dark .bb-input,
.bb-reserve-card--dark .bb-select,
.bb-reserve-card--dark .bb-textarea {
  /* background-color, never the `background` shorthand: the shorthand resets
     background-repeat to `repeat` and background-position to `0% 0%`, which
     tiled the select's chevron arrow across the whole field and buried the
     chosen value behind a zigzag. */
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.bb-reserve-card--dark .bb-input::placeholder,
.bb-reserve-card--dark .bb-textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.bb-reserve-card--dark .bb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
}

.bb-info-card {
  display: flex;
  gap: var(--bb-space-4);
  padding: var(--bb-space-6);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  height: 100%;
  transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-info-card:hover { transform: translateY(-5px); box-shadow: var(--bb-shadow-md); }
.bb-info-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--bb-radius-md);
  background: var(--bb-paprika-soft);
  color: var(--bb-paprika);
  font-size: 1.4rem;
}
.bb-info-card__title { font-size: 1.1rem; margin-bottom: 0.35rem; }
.bb-info-card__text { font-size: var(--bb-fs-sm); margin: 0; }
.bb-info-card__text a { color: var(--bb-body); }
.bb-info-card__text a:hover { color: var(--bb-paprika); }

/* Opening hours list */
.bb-hours { margin: 0; padding: 0; list-style: none; }
.bb-hours li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding-block: 0.7rem;
  border-bottom: 1px dashed var(--bb-line-strong);
  font-size: var(--bb-fs-sm);
  margin: 0;
}
.bb-hours li:last-child { border-bottom: 0; }
.bb-hours__day { font-weight: 700; color: var(--bb-ink); }
.bb-hours li.is-closed .bb-hours__time { color: var(--bb-danger); font-weight: 700; }

/* Map frame */
.bb-map {
  position: relative;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  background: var(--bb-cream-deep);
  min-height: 380px;
}
.bb-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(0.2) contrast(1.05); }
.bb-map__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--bb-space-6);
  background:
    repeating-linear-gradient(45deg, var(--bb-cream) 0 12px, var(--bb-cream-deep) 12px 24px);
}
.bb-map__pin {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto var(--bb-space-4);
  border-radius: 50%;
  background: var(--bb-paprika);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: var(--bb-shadow-md);
}

/* =============================================================================
   24. NEWSLETTER & CALL TO ACTION
   ========================================================================== */
.bb-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-radius-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  background: var(--bb-basil);
  color: rgba(255, 255, 255, 0.8);
}
.bb-cta h2, .bb-cta h3 { color: #fff; }
.bb-cta__bg { position: absolute; inset: 0; z-index: 0; }
.bb-cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.bb-cta__inner { position: relative; z-index: 2; }
.bb-cta--paprika { background: var(--bb-paprika); }
/* Paprika is a far lighter ground than the default basil, so the photo opacity
   that reads fine there blows out here - the flame highlights land straight
   behind the copy. The picture is dropped back and given a scrim weighted
   toward the text side of the panel. */
.bb-cta--paprika .bb-cta__bg img { opacity: 0.13; }
.bb-cta--paprika .bb-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(138, 44, 18, 0.86) 0%, rgba(138, 44, 18, 0.5) 60%, rgba(138, 44, 18, 0.3) 100%);
}
/* The global heading rule paints <em> paprika, which is invisible on a paprika
   panel - the emphasised words simply vanished. */
.bb-cta--paprika h2 em,
.bb-cta--paprika h3 em { color: var(--bb-saffron); }

.bb-cta--saffron { background: var(--bb-saffron); color: rgba(18, 58, 46, 0.85); }
.bb-cta--saffron h2, .bb-cta--saffron h3 { color: var(--bb-basil); }
/* Same trap on the saffron panel: paprika on saffron is far too low contrast. */
.bb-cta--saffron h2 em,
.bb-cta--saffron h3 em { color: var(--bb-basil); }

.bb-newsletter {
  padding-block: var(--bb-section-y-sm);
  background: var(--bb-cream-deep);
}
.bb-newsletter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--bb-space-8);
}

/* =============================================================================
   25. 404 PAGE
   ========================================================================== */
.bb-404 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: var(--bb-space-10);
  text-align: center;
  overflow: hidden;
}
.bb-404__number {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  font-family: var(--bb-font-display);
  font-size: clamp(6rem, 3rem + 18vw, 15rem);
  font-weight: 700;
  line-height: 0.85;
  color: var(--bb-ink);
  letter-spacing: -0.04em;
}
.bb-404__plate {
  width: clamp(5rem, 2.4rem + 15vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--bb-shadow-lg), 0 0 0 10px var(--bb-white), 0 0 0 12px var(--bb-line);
  animation: bb-float 6s ease-in-out infinite;
}
@keyframes bb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}
.bb-404__title { margin-top: var(--bb-space-6); }
.bb-404__text { max-width: 34rem; margin-inline: auto; }

/* =============================================================================
   26. FOOTER
   ========================================================================== */
.bb-footer {
  position: relative;
  background: #14100e;
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
}
.bb-footer a { color: rgba(255, 255, 255, 0.62); }
.bb-footer a:hover { color: var(--bb-saffron); }
.bb-footer__main { padding-block: var(--bb-section-y-sm); position: relative; z-index: 2; }
.bb-footer__title {
  font-family: var(--bb-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--bb-space-5);
}
.bb-footer__list { margin: 0; padding: 0; list-style: none; }
.bb-footer__list li { margin: 0; }
.bb-footer__list li + li { margin-top: 0.7rem; }
.bb-footer__list a { font-size: var(--bb-fs-sm); display: inline-flex; align-items: center; gap: 0.5rem; }
.bb-footer__list a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--bb-saffron);
  transition: width var(--bb-dur) var(--bb-ease);
}
.bb-footer__list a:hover::before { width: 14px; }
.bb-footer__about { font-size: var(--bb-fs-sm); margin-bottom: var(--bb-space-6); max-width: 24rem; }
.bb-footer .bb-logo__text { color: #fff; }
.bb-footer__contact { margin: 0; padding: 0; list-style: none; font-size: var(--bb-fs-sm); }
/* align-items matters here: left to the flex default the icon box stretches to
   the full height of a wrapping address, so the glyph no longer sits level
   with the first line of its text. */
.bb-footer__contact li { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; }
.bb-footer__contact li + li { margin-top: 0.85rem; }
.bb-footer__contact i { flex: none; color: var(--bb-saffron); line-height: 1.55; }
.bb-footer__bottom {
  position: relative;
  z-index: 2;
  padding-block: var(--bb-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--bb-fs-xs);
}
.bb-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
}
.bb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--bb-space-4); margin: 0; padding: 0; list-style: none; }
.bb-footer__legal li { margin: 0; }
.bb-payments { display: flex; gap: 0.5rem; align-items: center; }
.bb-payments span {
  padding: 0.35rem 0.7rem;
  border-radius: var(--bb-radius-xs);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

/* =============================================================================
   27. UTILITIES - preloader, back to top, toast, cart drawer
   ========================================================================== */
.bb-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--bb-cream);
  transition: opacity 0.5s var(--bb-ease), visibility 0.5s var(--bb-ease);
}
.bb-preloader.is-done { opacity: 0; visibility: hidden; }
.bb-preloader__mark {
  display: grid;
  place-items: center;
  gap: var(--bb-space-4);
  text-align: center;
}
.bb-preloader__ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--bb-line-strong);
  border-top-color: var(--bb-paprika);
  animation: bb-spin 0.9s linear infinite;
}
.bb-preloader__text {
  font-family: var(--bb-font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--bb-fs-xs);
  color: var(--bb-muted);
}

.bb-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 1040;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bb-paprika);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  box-shadow: var(--bb-shadow-brand);
  transition: opacity var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease), visibility var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
}
.bb-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bb-to-top:hover { background: var(--bb-basil); }

/* Toast notifications for add-to-cart / wishlist feedback */
.bb-toasts {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: calc(clamp(1rem, 2vw, 1.75rem) + 66px);
  z-index: 1060;
  display: grid;
  gap: 0.6rem;
  width: min(330px, calc(100vw - 2rem));
  pointer-events: none;
}
.bb-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--bb-radius-sm);
  background: var(--bb-basil);
  color: #fff;
  font-size: var(--bb-fs-sm);
  font-weight: 600;
  box-shadow: var(--bb-shadow-lg);
  animation: bb-toast-in 0.4s var(--bb-ease) both;
}
.bb-toast i { color: var(--bb-saffron); font-size: 1.1rem; }
.bb-toast.is-leaving { animation: bb-toast-out 0.35s var(--bb-ease) forwards; }
@keyframes bb-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bb-toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

/* Mini cart drawer */
.bb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1080;
  width: min(400px, 90vw);
  height: 100dvh;
  background: var(--bb-white);
  box-shadow: var(--bb-shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--bb-dur-slow) var(--bb-ease),
              visibility var(--bb-dur-slow) var(--bb-ease);
  display: flex;
  flex-direction: column;
}
.bb-drawer.is-open { transform: translateX(0); visibility: visible; }
.bb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding: var(--bb-space-6);
  border-bottom: 1px solid var(--bb-line);
}
.bb-drawer__title { margin: 0; font-size: 1.2rem; }
.bb-drawer__body { flex: 1; overflow-y: auto; padding: var(--bb-space-6); }
.bb-drawer__foot { padding: var(--bb-space-6); border-top: 1px solid var(--bb-line); background: var(--bb-cream); }
.bb-drawer__item { display: flex; gap: var(--bb-space-3); align-items: center; padding-block: var(--bb-space-4); border-bottom: 1px dashed var(--bb-line-strong); }
.bb-drawer__item img { width: 66px; height: 66px; border-radius: var(--bb-radius-sm); object-fit: cover; }

/* Quick view modal shell (Bootstrap modal restyled) */
.bb-modal .modal-content {
  border: 0;
  border-radius: var(--bb-radius-xl);
  overflow: hidden;
}
.bb-modal .modal-body { padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); }
.bb-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--bb-cream);
  color: var(--bb-ink);
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-modal__close:hover { background: var(--bb-paprika); color: #fff; }

/* Tooltip helper (data-bb-tip) */
[data-bb-tip] { position: relative; }
[data-bb-tip]::after {
  content: attr(data-bb-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.4rem 0.7rem;
  border-radius: var(--bb-radius-xs);
  background: var(--bb-ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--bb-dur-fast) var(--bb-ease-soft), transform var(--bb-dur-fast) var(--bb-ease-soft), visibility var(--bb-dur-fast);
  z-index: 30;
}
[data-bb-tip]:hover::after,
[data-bb-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* =============================================================================
   28. SWIPER OVERRIDES
   ========================================================================== */
.bb-swiper { overflow: visible; }
.bb-swiper .swiper-wrapper { align-items: stretch; }
.bb-swiper .swiper-slide { height: auto; display: flex; }
.bb-swiper .swiper-slide > * { width: 100%; }
/* The rule above assumes one card per slide, which is true everywhere except a
   pull-quote slider: those slides hold a rating, a quote and an attribution,
   and as three flex items they laid out side by side, squeezing the quote into
   a third of the slide. */
.bb-swiper--quote .swiper-slide { flex-direction: column; align-items: center; }
.bb-swiper--quote .swiper-slide > * { width: auto; max-width: 100%; }
/* Needs to out-specify the `> *` rule directly above, which sets max-width. */
.bb-swiper--quote .swiper-slide > blockquote { max-width: 44rem; }
.bb-swiper-nav { display: flex; gap: 0.6rem; }
.bb-swiper-nav__btn {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--bb-line);
  background: var(--bb-white);
  color: var(--bb-ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all var(--bb-dur) var(--bb-ease);
}
.bb-swiper-nav__btn:hover:not(.swiper-button-disabled) { background: var(--bb-paprika); border-color: var(--bb-paprika); color: #fff; }
.bb-swiper-nav__btn.swiper-button-disabled { opacity: 0.4; cursor: default; }

.bb-swiper .swiper-pagination { position: static; margin-top: var(--bb-space-6); }
.bb-swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--bb-line-strong);
  opacity: 1;
  transition: width var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
}
.bb-swiper .swiper-pagination-bullet-active { width: 30px; border-radius: 6px; background: var(--bb-paprika); }

/* Hide overflowing slides when the swiper sits inside a padded container */
.bb-swiper-mask { overflow: hidden; padding-bottom: 4px; }

/* =============================================================================
   29. ANIMATION UTILITIES & REDUCED MOTION
   -----------------------------------------------------------------------------
   Elements carrying data-bb-anim are hidden by this rule and revealed by GSAP.
   The .bb-anim-ready class is added to <html> by main.js only when GSAP is
   available and the visitor has not requested reduced motion, so content is
   never trapped invisible.
   ========================================================================== */
.bb-anim-ready [data-bb-anim] { opacity: 0; will-change: transform, opacity; }
.bb-anim-ready [data-bb-anim="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); }

@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;
    scroll-behavior: auto !important;
  }
  [data-bb-anim] { opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .bb-marquee__track { animation: none; }
}