/**
 * KM Food — Theme layer
 * Loaded AFTER main.css and mrfood.css, so it overrides their tokens/rules
 * rather than duplicating the whole stylesheet. Keeps the existing layout
 * engine (Bootstrap grid, Swiper, the menu step logic) untouched — this file
 * only restyles colors, type, and a handful of new components.
 */

/* ─── 0. TT Norms Pro — self-hosted, commercial font ─────────────────────
   TT Norms Pro is a paid font (TypeType foundry) — it isn't on Google
   Fonts and can't be linked from a CDN, so it has to be self-hosted here.
   Drop the licensed .woff2 files into assets/fonts/ with these exact
   names and it'll take over automatically (Lato stays as the fallback
   everywhere in the meantime, so nothing breaks if the files aren't
   there yet). */
@font-face {
  font-family: 'TT Norms Pro';
  src: url('../fonts/TTNormsPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms Pro';
  src: url('../fonts/TTNormsPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms Pro';
  src: url('../fonts/TTNormsPro-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms Pro';
  src: url('../fonts/TTNormsPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── 1. Brand tokens ─────────────────────────────────────────────────── */
:root {
  --bazar-blue: #fbeb0f;
  --bazar-black: #111111;
  --bazar-banner-green: #111111;
  --bazar-green: #fbeb0f;
  --bazar-bg-blue: #e4edff;
  --bazar-bg-yellow: #fff7d7;
  --bazar-bg-mint: #caffec;
  --bazar-bg-orange: #ffae63;
}

/* KM Food brand pass: buttons/borders → #fbeb0f, banners → #111111, titles →
   black, Epilogue semi-bold. Re-point the existing token names used
   throughout main.css/mrfood.css so every component built on
   --accent-color / --heading-color automatically re-themes without a full
   rewrite. */
:root,
body.index-page {
  --accent-color: #fbeb0f !important;
  --accent-dark: #e6d600 !important;
  --heading-color: #111111 !important;
  --background-color: #ffffff !important;
}

body.index-page.dark-background,
.dark-background {
  --background-color: #ffffff !important;
  --default-color: #ffffff !important;
  --heading-color: #111111 !important;
}

/* ─── 2. Typography — Lato (body & prices), Epilogue semi-bold (headlines) ─ */
body,
input,
button,
select,
textarea {
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
  font-weight: 400;
}

h1, h2, h3, .section-heading, .intro-title {
  font-family: 'Epilogue', sans-serif;
  font-weight: 600;
  color: var(--bazar-black);
}

.menu-cat-card h4,
.btn-getstarted,
.bd-cta,
button {
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
  font-weight: 500;
}

/* Belt-and-suspenders: nothing on the site should render bold, even if a
   component (or admin-entered content) applies bold/700/800 directly —
   except headings and product titles, which are Epilogue semi-bold. */
* {
  font-weight: 300 !important;
}
body, p, span, div, li, td, th, label, input, textarea, select, a {
  font-weight: 400 !important;
}
h1, h2, h3, h4, h5, h6,
.section-heading, .intro-title, .menu-cat-card h4,
strong, b,
.btn-getstarted, .bd-cta, button,
.sitename, .order-mode-title {
  font-weight: 500 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 600 !important;
  color: #111111;
}

/* Product titles specifically — Epilogue semi-bold, black. */
.menu-item-order h4,
.menu-cat-card h4,
.bd-collection-nav-card h4 {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 600 !important;
  color: #111111 !important;
}

/* ─── 3. Pill CTA buttons ("Commander", "Ajouter au panier", checkout) ─── */
.bd-cta,
.btn-getstarted,
a.btn-getstarted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fbeb0f;
  color: #111111 !important;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
  box-shadow: none;
}

.bd-cta:hover,
.btn-getstarted:hover {
  transform: translateY(-1px);
  box-shadow: none;
  color: #fff !important;
}

.bd-cta:active,
.btn-getstarted:active {
  transform: translateY(0);
  box-shadow: none;
}

/* "Commander" keeps its arrow; other CTAs stay text-only. */
.bd-cta::after {
  content: none;
}
#bd-passer-commande::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s ease;
}
#bd-passer-commande:hover::after {
  transform: translateX(3px);
}

/* Same for "Ajouter au panier" / "Ajouter" buttons — arrow removed. */
#taco-modal-add::after,
#item-modal-add::after,
.bd-reco-add-btn::after {
  content: none;
}

/* Install/download buttons previously used a down arrow (removed — the
   "J'ai compris" button doesn't need one). */
.bd-cta-download::after {
  content: none;
}

.bd-cta.bd-cta-disabled {
  background: #d9dce3;
  color: #8b8f9a !important;
  box-shadow: none;
  pointer-events: none;
}

/* ─── 4. Announcement bar ──────────────────────────────────────────────── */
.announcement-bar {
  background: #111111;
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
}

.announcement-bar .announcement-item {
  opacity: 0.95;
}

@media (min-width: 992px) {
  .announcement-bar {
    padding: 14px 16px;
    font-size: 1.05rem;
  }
}

/* ─── 5. Header — icons left, logo right ───────────────────────────────── */
body.index-page .header {
  background: #ffffff;
}

.bd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.bd-header-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.bd-header-icons a,
.bd-header-icons button {
  background: none;
  border: none;
  color: #111111;
  font-size: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.bd-header-icons a:hover,
.bd-header-icons button:hover {
  background: var(--bazar-bg-blue);
}

.bd-header-icons .cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #111111;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

body.index-page .header .logo .sitename {
  color: #111111;
  font-weight: 800;
  font-size: 1.3rem;
}

/* ─── 6. Search bar ─────────────────────────────────────────────────────── */
.bd-search-wrap {
  padding: 14px 0;
  background: #fff;
}

.bd-store-name {
  text-align: center;
  color: #1a1a1a;
  font-weight: 300;
  font-size: 1.2rem;
  margin: 0 0 10px;
}

.bd-search-input {
  width: 100%;
  border: 2px solid #c7ccd6;
  background: #f7f8fb;
  border-radius: 999px;
  padding: 12px 20px 12px 46px;
  font-size: 16px; /* keeps iOS Safari from auto-zooming on focus */
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
  color: #3a3f4a;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bd-search-input::placeholder {
  color: #6b7280;
}

.bd-search-input:hover,
.bd-search-input:focus {
  outline: none;
  border-color: #fbeb0f;
  background: #fff;
}

.bd-search-field {
  position: relative;
}

.bd-search-field i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

/* ─── 7. Homepage headline ──────────────────────────────────────────────── */
.bd-welcome-headline {
  text-align: center;
  padding: 18px 16px 6px;
}

.bd-welcome-headline h1 {
  color: #111111;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  margin: 0;
}

/* ─── 8. Section background accents ────────────────────────────────────── */
.bd-section-blue   { background: var(--bazar-bg-blue); }
.bd-section-yellow { background: var(--bazar-bg-yellow); }
.bd-section-mint   { background: var(--bazar-bg-mint); }
.bd-section-orange { background: var(--bazar-bg-orange); }

.bd-feature-section {
  border-radius: 24px;
  padding: 28px 24px;
  margin: 18px auto;
}

.bd-feature-section h2 {
  color: #111111;
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.bd-feature-section p {
  color: #4b5266;
  margin-bottom: 14px;
}

/* ─── 9. Featured collections ───────────────────────────────────────────── */
.bd-collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.bd-collection-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(20, 20, 40, 0.06);
  text-decoration: none;
  display: block;
}

.bd-collection-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.bd-collection-card .bd-collection-body {
  padding: 12px 14px;
}

.bd-collection-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 4px;
}

.bd-collection-card .bd-cta-mini {
  color: #111111;
  font-weight: 700;
  font-size: 0.82rem;
}

/* ─── 10. Promo badge ────────────────────────────────────────────────────── */
.bd-promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fbeb0f;
  color: #111111;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}

/* ─── 11. Bottom nav (mobile app-style) ─────────────────────────────────── */
.bd-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: #fff;
  border-top: 1px solid #eef0f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 14px rgba(20, 20, 40, 0.06);
}

.bd-bottom-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.bd-bottom-nav .bd-nav-icon {
  color: #6b7280;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.bd-bottom-nav .bd-nav-icon.active,
.bd-bottom-nav .bd-nav-icon:hover {
  color: #111111;
}

.bd-bottom-nav .bd-nav-icon span {
  font-size: 0.62rem;
}

body.index-page {
  padding-bottom: 78px; /* room for the fixed bottom nav */
}

@media (min-width: 992px) {
  .bd-bottom-nav { display: none; }
  body.index-page { padding-bottom: 0; }
}

/* ─── 12. Footer — background set in section 34 below (black) ──────────── */

body.index-page .footer h4 {
  color: #000 !important;
  font-size: 1.4rem !important;
}

body.index-page .footer p,
body.index-page .footer a {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* ─── 14. Collections grid (2 per row) ─────────────────────────────────── */
.bd-collections-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.bd-collection-nav-card {
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 16px;
  padding: 14px 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bd-collection-nav-card:hover {
  box-shadow: 0 4px 16px rgba(20, 20, 40, 0.08);
  transform: translateY(-1px);
}

.bd-collection-nav-card img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  border-radius: 12px;
  background: #f7f8fb;
}

.bd-collection-nav-card h4 {
  font-size: 1.05rem;
  color: #111111;
  margin: 0;
}

/* ─── 15. Quick category-icon nav strip (shown above collections/products) ─ */
.bd-quicknav {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}

.bd-quicknav::-webkit-scrollbar { display: none; }

@media (min-width: 992px) {
  .bd-quicknav {
    justify-content: center;
  }
}

.bd-quicknav-item {
  flex: 0 0 auto;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 82px;
  text-decoration: none;
}

.bd-quicknav-item img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eef0f5;
}

.bd-quicknav-item span {
  font-size: 0.78rem;
  color: #4b5266;
  line-height: 1.2;
  text-align: center;
}

/* ─── 16. Promo pricing display ─────────────────────────────────────────── */
.bd-price-promo {
  color: #111111;
  font-weight: 800;
}

.bd-price-old {
  color: #9aa0ad;
  text-decoration: line-through;
  font-size: 0.85em;
  font-weight: 500;
}
.bd-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 40, 0.45);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 768px) {
  .bd-popup-backdrop {
    align-items: center;
  }
}

.bd-popup-card {
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
}

@media (min-width: 768px) {
  .bd-popup-card {
    border-radius: 22px;
  }
}

.bd-popup-card h3 {
  color: #111111;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

#bd-popup-title {
  font-family: 'Epilogue', sans-serif;
}

.bd-popup-card p {
  color: #4b5266;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.bd-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.bd-popup-actions .bd-cta {
  flex: 1 1 140px;
  justify-content: center;
}

.bd-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #9aa0ad;
  line-height: 1;
}

/* ─── 17. Related products (product detail) — 2 per row, larger cards ──── */
.bd-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bd-related-card {
  width: 100%;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.bd-related-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
}

/* Product without a photo yet: text-only card, no blank grey square. */
.bd-related-card--noimg {
  justify-content: space-between;
  min-height: 96px;
}

.bd-related-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1c1917;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bd-related-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
}

/* ─── 18. Checkout modal header ──────────────────────────────────────────── */
.bd-checkout-header {
  background: var(--bazar-blue);
}

/* ─── 19. Account panel — order history list ─────────────────────────────── */
.bd-orders-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.bd-order-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eef0f5;
  font-size: 0.85rem;
}

.bd-order-reorder {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
}

.bd-order-status {
  text-transform: capitalize;
  color: #000;
  font-weight: 700;
  font-size: 0.75rem;
}

/* ─── 20. Mobile nav — full-width panel, listing categories ─────────────── */
/* Made universal (not gated to a max-width) so the same off-canvas panel
   works consistently whether opened from the mobile row or the desktop
   "Catégories" trigger — overrides main.css's breakpoint-limited behavior. */
.navmenu ul {
  display: none !important;
  position: fixed !important;
  inset: 60px 0 0 0 !important;
  width: 100% !important;
  max-height: calc(100vh - 60px);
  border-radius: 0 !important;
  z-index: 9998;
  background: #fff;
  overflow-y: auto;
}

body.mobile-nav-active .navmenu ul {
  display: block !important;
}

.navmenu ul li {
  width: 100%;
}

.navmenu a,
.navmenu a:focus {
  padding: 14px 22px !important;
  font-size: 1rem !important;
  display: block;
}

.bd-hidden-nav-toggle {
  display: none !important;
}

/* ─── 21. App install banner — mobile-only, icon/text strip ──────────────── */
.bd-install-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #111111;
  color: #fff;
  padding: 22px 18px;
  position: relative;
}

.bd-install-banner-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
}

.bd-install-banner-text {
  flex: 1 1 auto;
  font-family: 'Epilogue', sans-serif;
  font-weight: 400 !important;
  font-size: 0.98rem;
  line-height: 1.3;
  color: #fff;
  text-align: left;
}

.bd-install-banner-cta {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-install-banner-cta img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.bd-install-banner-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
}

/* Mobile-only, per spec ("Make the app downloadable for iOS and Android only") */
@media (min-width: 992px) {
  .bd-install-banner {
    display: none !important;
  }
}

/* ─── 22. Header logo — wordmark image, proportional sizing ─────────────── */
.bd-logo-img {
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .bd-logo-img {
    height: 36px;
    max-width: 180px;
  }
}

/* ─── 23. Top app icon (replaces the old text headline) ─────────────────── */
.bd-app-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 4px;
  text-align: center;
}

.bd-app-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.bd-welcome-text {
  margin: 0;
  font-size: 1.15rem;
  color: var(--bazar-black);
}

/* ─── 24. Hero slider — directly below the search bar ───────────────────── */
/* The arrows live in this outer wrapper, NOT inside .bd-hero-slider itself —
   Swiper's root element clips its own overflow (needed so off-screen
   slides stay hidden), which was clipping the arrow buttons in half
   whenever they sat right at that edge. The wrapper has no such clipping,
   so the arrows render fully outside the slider's own box. */
.bd-hero-slider-wrap {
  position: relative;
  margin: 10px auto 6px;
  padding: 0 16px;
  max-width: 1100px;
}

.bd-hero-slider {
  overflow: hidden;
}

@media (min-width: 992px) {
  .bd-hero-slider-wrap {
    max-width: 1280px;
    margin: 32px auto 40px;
  }
}

/* Desktop-only prev/next arrows */
.bd-hero-slider-prev,
.bd-hero-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #111111;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background .15s ease, transform .15s ease;
}
.bd-hero-slider-prev {
  left: -22px;
}
.bd-hero-slider-next {
  right: -22px;
}
.bd-hero-slider-prev:hover,
.bd-hero-slider-next:hover {
  background: #fbeb0f;
  color: #111111;
}
.bd-hero-slider-prev.swiper-button-disabled,
.bd-hero-slider-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.bd-hero-slider-prev.swiper-button-disabled:hover,
.bd-hero-slider-next.swiper-button-disabled:hover {
  background: #fff;
  color: #111111;
}

.bd-hero-slider .swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 870/400;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  display: block;
}

.bd-hero-slide-link {
  display: block;
  text-decoration: none;
}

.bd-hero-title-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #eef0f5;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 12px 16px;
  text-decoration: none;
}

.bd-hero-title-card span {
  color: #1a1a1a;
  font-size: 1.25rem;
  font-weight: 500;
}

.bd-hero-title-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-hero-cta-pill {
  flex: 0 0 auto;
  background: #fbeb0f !important;
  color: #111111 !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.bd-hero-title-card i {
  color: #111111;
  font-size: 1.3rem;
}

.bd-hero-slider .swiper-pagination {
  position: relative !important;
  display: block !important;
  margin-top: 8px;
}

.bd-hero-slider .swiper-pagination-bullet {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  background: #d0d4dc !important;
  opacity: 1 !important;
  margin: 0 4px !important;
}

.bd-hero-slider .swiper-pagination-bullet-active {
  background: var(--bazar-blue) !important;
}

/* ─── 25. Delivery/pickup section — simple line icons, not emoji ────────── */
.order-mode-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-mode-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─── 26. Menu section — all white ───────────────────────────────────────── */
body.index-page #menu.section-panel {
  background: #ffffff !important;
}

/* Category cards — real food photos, rounded, filling the card top
   (replaces the old small-icon-in-a-circle treatment). */
#menu-step-categories .menu-cats-swiper .swiper-slide .menu-cat-card .menu-cat-img-wrap {
  width: 100% !important;
  height: auto !important;
  background: #f4f4f4;
  border: none;
  box-shadow: none;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0;
  margin: 0 0 10px;
}

@media (min-width: 992px) {
  #menu-step-categories .menu-cats-swiper .swiper-slide .menu-cat-card h4 {
    font-size: 1.1rem !important;
  }
}

.menu-cat-img-wrap img,
.menu-cat-img {
  width: 100% !important;
  height: auto !important;
  display: block;
  padding: 0;
}

/* Single flat card, not a card-inside-a-card — the outer card is the only
   visual container. */
#menu-step-categories .menu-cat-card {
  background: transparent !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: transform 0.2s ease;
}

#menu-step-categories .menu-cat-card:hover,
#menu-step-categories .menu-cat-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 20, 40, 0.1) !important;
}

/* ─── 27. Desktop header (logo / search / account / cart + categories row) ─ */
.bd-desktop-header {
  gap: 24px;
  padding: 14px 0;
  justify-content: space-between;
}

.bd-desktop-header .logo {
  flex: 0 0 auto;
}

.bd-desktop-search-field {
  flex: 1 1 auto;
  max-width: 480px;
  position: relative;
  margin: 0;
}

.bd-desktop-search-field input {
  width: 100%;
  border: 2px solid #c7ccd6;
  border-radius: 999px;
  padding: 10px 16px 10px 40px;
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
  font-size: 0.9rem;
  color: #3a3f4a;
}

.bd-desktop-search-field input::placeholder {
  color: #6b7280;
}

.bd-desktop-search-field input:hover,
.bd-desktop-search-field input:focus {
  outline: none;
  border-color: #fbeb0f;
}

.bd-desktop-search-field i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.bd-desktop-header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

.bd-desktop-action-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: left;
}

.bd-desktop-action-link i {
  font-size: 1.35rem;
  color: #1a1a1a;
}

.bd-desktop-action-link small {
  display: block;
  color: #6b7280;
  font-size: 0.72rem;
}

.bd-cart-icon-wrap {
  position: relative;
  display: inline-flex;
}

.bd-cart-icon-wrap .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--bazar-green);
  color: #fff;
  font-size: 0.62rem;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.bd-desktop-navrow {
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid #eef0f5;
}

.bd-categories-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-size: 0.88rem;
  color: #1a1a1a;
  padding: 6px 0;
}

.bd-desktop-quicklinks {
  display: flex;
  gap: 20px;
}

.bd-desktop-quicklinks a {
  color: #4b5266;
  text-decoration: none;
  font-size: 0.88rem;
}

.bd-desktop-quicklinks a:hover {
  color: #111111;
}

/* Close button inside the off-canvas category panel */
.bd-navmenu-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 14px 8px !important;
  width: 100%;
}

.bd-navmenu-close-row button {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #4b5266;
  padding: 6px;
}

/* ─── 28. Footer — centered text on mobile ───────────────────────────────── */
@media (max-width: 991.98px) {
  .footer .row > div {
    text-align: center;
  }
  .footer .row > div.d-flex {
    flex-direction: column;
    align-items: center;
  }
  .footer .row > div .icon {
    margin: 0 0 8px !important;
  }
  .footer-social-links {
    justify-content: center;
    display: flex;
  }
}

/* ─── 29. Quick-filter pills row (DoorDash/Walmart-style) ───────────────── */
.bd-pills-row {
  padding: 10px 0 14px;
}

.bd-pills-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 16px;
  scrollbar-width: none;
}

.bd-pills-scroll::-webkit-scrollbar {
  display: none;
}

.bd-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f5f6f8;
  border: 1px solid #eceef2;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.83rem;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bd-pill i {
  color: #111111;
  font-size: 0.95rem;
}

.bd-pill:hover {
  background: #eef2fb;
  border-color: var(--bazar-blue);
  color: #1a1a1a;
}

@media (min-width: 992px) {
  .bd-pills-scroll {
    padding: 2px 0;
    justify-content: center;
  }
}

/* ─── 30. Promotions rail — horizontal-scroll deal cards ────────────────── */
.bd-deals-section {
  background: #ffffff;
}

.bd-deals-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.bd-deal-card {
  flex: 0 0 auto;
  width: 168px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bd-deal-card:hover {
  box-shadow: 0 6px 20px rgba(20, 20, 40, 0.1);
  transform: translateY(-2px);
}

.bd-deal-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #f7f8fb;
}

.bd-deal-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-deal-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #fbeb0f;
  color: #111111;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 999px;
}

.bd-deal-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}

.bd-deal-card-cat {
  font-size: 0.68rem;
  color: #9aa0ad;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bd-deal-card-name {
  font-size: 0.85rem;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}

.bd-deal-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.bd-deal-card-price strong {
  color: #111111;
  font-size: 0.95rem;
}

.bd-deal-card-old {
  color: #9aa0ad;
  text-decoration: line-through;
  font-size: 0.75rem;
}

/* ─── 31. Order-mode cards — tighter, more premium spacing ───────────────── */
.order-mode-card {
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(20, 20, 40, 0.05) !important;
}

/* ─── 32. Larger, clearer sizing throughout (readability for all ages) ──── */
body.index-page {
  font-size: 17px;
}

.bd-search-input,
.bd-desktop-search-field input {
  font-size: 1rem !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

.bd-pill {
  font-size: 0.92rem;
  padding: 11px 18px;
}

.order-mode-title {
  font-size: 1.15rem !important;
}

.order-mode-desc {
  font-size: 0.92rem !important;
}

.bd-collections-nav-grid .bd-collection-nav-card,
.menu-item-order h4 {
  font-size: 1.05rem;
}

.menu-item-order .price {
  font-size: 1.3rem;
}

.bd-bottom-nav .bd-nav-icon {
  font-size: 1.55rem;
}

.bd-bottom-nav .bd-nav-icon span {
  font-size: 0.72rem;
}

.bd-cta,
.btn-getstarted {
  font-size: 1rem;
  padding: 13px 24px;
}

.bd-header-icons a,
.bd-header-icons button {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

/* ─── 33. Header removed on mobile — nothing visible below lg breakpoint ─── */
@media (max-width: 991.98px) {
  #header {
    padding: 0 !important;
    min-height: 0 !important;
    display: none !important;
    position: static !important;
  }
}

/* ─── 34. Footer — white background (mobile), custom green (desktop) ───── */
body.index-page .footer.dark-background {
  background: #ffffff !important;
}

/* True sticky footer (desktop only): tried making <body> a flex column
   here before, but that's exactly what previously broke the hero slider's
   Swiper width measurement (see the note on main.main below) — so instead,
   the actual fix is on <html>, one level further out. <body> keeps its
   normal white/cream background, which fully covers its own box (including
   every internal gap — hero slider margins, section spacing, etc), so
   nothing inside the page is tinted. Only the true empty strip below
   <body>'s bottom edge — on pages shorter than the viewport — can ever
   reveal <html>'s background, which is why this is safe this time. */
@media (min-width: 992px) {
  html.bd-has-footer {
    background-color: #111111;
  }
  body.index-page .footer.dark-background {
    background: #111111 !important;
    border-top: none;
  }
  body.index-page .footer h4 {
    color: #fff !important;
  }
  body.index-page .footer p,
  body.index-page .footer a {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  body.index-page .footer a:hover {
    color: #fff !important;
  }
  /* The footer's own bottom padding (40px, from main.css) reads as an
     oversized trailing gap under the last row of content — trim it down,
     top spacing and mobile stay untouched. */
  body.index-page .footer.site-footer {
    padding-bottom: 16px;
  }
}

/* ─── 35. Search results dropdown ────────────────────────────────────────── */
.bd-search-field {
  position: relative;
}

.bd-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(20, 20, 40, 0.14);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1200;
  padding: 6px 0;
}

.bd-search-group-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9aa0ad;
  padding: 8px 16px 4px;
}

.bd-search-result-cat,
.bd-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 16px;
  text-align: left;
  font-size: 0.92rem;
  color: #1a1a1a;
}

.bd-search-result-cat:hover,
.bd-search-result-item:hover {
  background: #f5f6f8;
}

.bd-search-result-cat img,
.bd-search-result-item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  background: #f7f8fb;
  flex-shrink: 0;
}

.bd-search-result-item span {
  flex: 1 1 auto;
}

.bd-search-result-item strong {
  color: #111111;
  font-size: 0.85rem;
}

.bd-search-empty {
  padding: 16px;
  text-align: center;
  color: #9aa0ad;
  font-size: 0.88rem;
}

/* ─── 36. Pre-footer app download banner ─────────────────────────────────── */
.bd-footer-app-banner {
  background: #ffffff;
  padding: 22px 0;
  border-top: 1px solid #eef0f5;
}

.bd-footer-app-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.bd-footer-app-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.bd-footer-app-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.bd-footer-app-banner-text strong {
  color: #1a1a1a;
  font-size: 1rem;
}

.bd-footer-app-banner-text span {
  color: #4b5266;
  font-size: 0.85rem;
}

@media (min-width: 576px) {
  .bd-footer-app-banner-inner {
    justify-content: center;
  }
}

/* ─── 37. Cookie banner — minimal, single-line (Uber/DoorDash style) ─────── */
/* The bottom nav is now always visible on mobile (not conditional), so the
   cookie banner must always clear it there — not just when a cart bar is
   showing (that old .has-cart-bar coupling no longer matches reality). */
@media (max-width: 991.98px) {
  .cookie-consent-banner {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.cookie-consent-banner {
  padding: 10px 16px !important;
  background: #f7f8fb !important;
  box-shadow: 0 -2px 12px rgba(20, 20, 40, 0.08) !important;
}

.cookie-consent-inner {
  align-items: center !important;
  gap: 10px !important;
}

.cookie-consent-text {
  font-size: 0.78rem;
  margin: 0;
  color: #4b5266;
}

.cookie-consent-text a {
  color: #111111;
  text-decoration: underline;
}

.cookie-btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  border: none;
  white-space: nowrap;
}

.cookie-btn-outline {
  background: transparent;
  border: 1px solid #dfe2e8;
  color: #4b5266;
}

.cookie-btn-solid {
  background: #fbeb0f;
  color: #111111;
}

/* ─── 38. Footer icons — white, not blue, against the black background ──── */
body.index-page .footer .icon {
  color: #b8d870 !important;
}

/* ─── 39. Delivery/pickup info section — yellow background ───────────────── */
#order-modes.order-modes-section {
  background: #fbeb0f !important;
}

/* ─── 40. Prices — the number is bigger and bolder than the currency symbol ─ */
.bd-price-num {
  font-size: 1.4em;
  font-weight: 700 !important;
}

.bd-price-cur {
  font-size: 0.7em;
  font-weight: 400 !important;
}

/* ─── 41. Product images — preserve original proportions, never crop ────── */
#menu-step-items .menu-item-order .menu-img {
  height: auto !important;
  max-height: 220px;
  object-fit: contain !important;
  background: #f7f8fb;
  padding: 8px;
}

.item-modal-img {
  max-height: 320px !important;
  object-fit: contain !important;
  background: #f7f8fb;
  padding: 8px;
  border-radius: 16px;
}

/* ─── 42. Mini category carousel — mobile, first section ────────────────── */
.bd-mini-cat-carousel {
  padding: 8px 0 4px;
}

.bd-mini-cat-scroll {
  padding: 4px 16px 8px;
}

/* ─── 43. Sticky scroll bar — cart total + quick icons, shown on scroll ──── */
.bd-scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: #fff;
  border-bottom: 1px solid #eef0f5;
  box-shadow: 0 2px 10px rgba(20, 20, 40, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

.bd-scroll-bar.bd-scroll-bar-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bd-scroll-bar-total {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bd-scroll-bar-total-label {
  font-size: 0.72rem;
  color: #9aa0ad;
  text-transform: uppercase;
}

.bd-scroll-bar-total strong {
  font-size: 1.6rem;
  font-weight: 700;
  color: #000000;
}

.bd-scroll-bar-icons {
  display: flex;
  align-items: center;
  gap: 22px;
}

.bd-scroll-bar-icon {
  background: none;
  border: none;
  color: #1a1a1a;
  font-size: 1.6rem;
  position: relative;
  display: flex;
  align-items: center;
}

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

/* ─── 44. Cart page — full-screen modal, image + qty stepper per line ───── */
.bd-cart-page-modal .modal-content {
  border-radius: 0;
}

.bd-cart-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eef0f5;
}

.bd-cart-line-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: #f7f8fb;
  border-radius: 16px;
  flex-shrink: 0;
  padding: 4px;
}

.bd-cart-line-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bd-cart-line-name {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.bd-cart-line-price {
  margin-top: 4px;
  font-size: 0.9rem;
}

.bd-cart-price-promo {
  color: #111111;
  font-weight: 700;
}

.bd-cart-price-old {
  color: #9aa0ad;
  text-decoration: line-through;
  font-size: 0.85em;
}

.bd-cart-line-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.bd-cart-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bd-cart-qty-control span {
  min-width: 18px;
  text-align: center;
  font-weight: 500;
}

.bd-cart-qty-minus,
.bd-cart-qty-plus {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #dfe2e8;
  background: #fff;
  font-size: 1rem;
  line-height: 1;
}

.bd-cart-line-total {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1a1a;
}

.bd-cart-line-remove {
  background: none;
  border: none;
  color: #9aa0ad;
  font-size: 1rem;
  padding: 2px;
}

.bd-cart-line-remove:hover {
  color: #d84333;
}

/* ─── 45. Logo-hidden fallback text (admin toggle) ───────────────────────── */
.bd-logo-text {
  font-size: 1.15rem;
  font-weight: 500;
  color: #1a1a1a;
}

/* ─── 46. Open/closed status row (replaces the store-name line) ─────────── */
.bd-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
}

.bd-status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bd-status-badge img {
  width: 44px;
  height: 44px;
}

.bd-status-badge span {
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.25;
}

.bd-status-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bd-status-icons a,
.bd-status-icons button {
  background: none;
  border: none;
  color: #1a1a1a;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
}

/* ─── 47. Cart page — trust badge bar + recommendations ──────────────────── */
.bd-cart-trust-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fbeb0f;
  color: #111111;
  padding: 10px 16px;
  font-size: 0.88rem;
}

.bd-cart-trust-bar span {
  font-weight: 700;
}

.bd-cart-trust-bar i {
  font-size: 1.2rem;
}

#cart-recommendations {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eef0f5;
}

#cart-recommendations h6 {
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.bd-reco-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.bd-reco-card {
  flex: 0 0 auto;
  width: 170px;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}

.bd-reco-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f7f8fb;
}

.bd-reco-card-body {
  padding: 10px 12px 12px;
}

.bd-reco-card-name {
  display: block;
  font-size: 0.92rem;
  color: #1a1a1a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  margin-bottom: 6px;
}

.bd-reco-card-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  display: block;
  margin-bottom: 8px;
}

.bd-reco-add-btn {
  width: 100%;
  background: #fbeb0f;
  color: #111111;
  border: none;
  border-radius: 999px;
  padding: 8px 0;
  font-size: 0.85rem;
}

/* ─── 48. Buttons — fully rounded, no shadow (matches the CTA update above) ─ */
.menu .menu-item .btn-add-item {
  border-radius: 999px !important;
}

.bd-reco-add-btn {
  border-radius: 999px;
}

/* ─── 50. Sticky search bar — below the scroll bar, shown together ───────── */
.bd-scroll-search {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1039;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20, 20, 40, 0.06);
  padding: 10px 16px;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

.bd-scroll-search.bd-scroll-bar-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bd-scroll-search-field {
  position: relative;
}

.bd-scroll-search-input {
  width: 100%;
  border: 1px solid rgba(20, 20, 40, 0.1);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 9px 16px 9px 40px;
  font-size: 16px; /* keeps iOS Safari from auto-zooming on focus */
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
}

.bd-scroll-search-input:focus {
  outline: none;
  background: #fff;
  border-color: #fbeb0f;
}

.bd-scroll-search-field i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

@media (min-width: 992px) {
  .bd-scroll-search {
    display: none;
  }
}


/* ─── 52. Desktop header — status badge in place of the logo ─────────────── */
.bd-desktop-status-badge {
  flex: 0 0 auto;
  margin-right: 16px;
  gap: 10px;
}

.bd-desktop-status-badge img {
  width: 52px;
  height: 52px;
}

.bd-desktop-status-badge span {
  font-size: 1.05rem;
  line-height: 1.25;
}

/* ─── 53. Desktop category carousel — right after the header ────────────── */
.bd-desktop-cat-carousel {
  padding: 18px 0;
  border-bottom: 1px solid #eef0f5;
}

.bd-desktop-cat-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

.bd-desktop-cat-item {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(20, 20, 40, 0.05);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  text-align: center;
}

.bd-desktop-cat-item:hover {
  box-shadow: 0 4px 14px rgba(20, 20, 40, 0.1);
}

.bd-desktop-cat-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.bd-desktop-cat-item span {
  font-size: 0.85rem;
  color: #1a1a1a;
  text-align: center;
}

/* ─── 54. Desktop — "Nos catégories" moved to the very top of <main> ────── */
@media (min-width: 992px) {
  .main {
    display: flex;
    flex-direction: column;
  }
  #menu.section.section-panel {
    order: -1;
  }
}

/* ─── 55. Contact section — phone/email links plain black, not accent blue ─ */
.contact .info-item a[href^="tel:"],
.contact .info-item a[href^="mailto:"] {
  color: #1a1a1a;
}

/* ─── 58. "Promotions" title — plain text, no pill background ──────────── */
.bd-promotions-title {
  display: inline-block;
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
}

/* ─── 61. Every other section title — plain text, no pill background ────── */
.bd-section-title-pill {
    display: inline-block;
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
  }


/* ─── 59. Mobile footer accordion — modern styling, not default Bootstrap ── */
.bd-footer-accordion .accordion-item {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.bd-footer-accordion .accordion-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.bd-footer-accordion .accordion-button {
  background: transparent;
  color: #111111;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 16px 4px;
  box-shadow: none;
}

.bd-footer-accordion .accordion-button::after {
  filter: invert(1) brightness(2);
}

.bd-footer-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: #111111;
  box-shadow: none;
}

.bd-footer-accordion .accordion-body {
  padding: 0 4px 18px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

/* ─── 60. Only the main section titles use Epilogue — everything else Lato */
.section-heading, #menu-heading,
.bd-promotions-title, .bd-section-title-pill {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 600 !important;
}

/* Desktop home page only — "Nos catégories" / "Promotions" / "Contact"
   titles a bit bigger, without touching these same titles elsewhere
   (categories.php, blog.php, promotions.php keep their current size). */
@media (min-width: 992px) {
  body.bd-home-page .bd-promotions-title,
  body.bd-home-page .bd-section-title-pill {
    font-size: 1.7rem !important;
  }
}

/* "Notre menu" heading specifically — bigger than other section titles,
   on both mobile and desktop. */
#menu-heading .bd-section-title-pill {
  font-size: 1.8rem !important;
}
@media (min-width: 992px) {
  #menu-heading .bd-section-title-pill {
    font-size: 2.4rem !important;
  }
}

/* ─── 63. Promotions page — grid of all discounted products ─────────────── */
.bd-promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .bd-promo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .bd-promo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.bd-promo-grid-card {
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  box-shadow: 0 1px 4px rgba(20, 20, 40, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bd-promo-grid-card:hover {
  box-shadow: 0 6px 20px rgba(20, 20, 40, 0.1);
  transform: translateY(-2px);
}

.bd-promo-grid-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #f7f8fb;
}

.bd-promo-grid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.bd-promo-grid-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 14px;
}

.bd-promo-grid-cat {
  font-size: 0.68rem;
  color: #9aa0ad;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bd-promo-grid-name {
  font-size: 0.9rem;
  color: #1a1a1a;
}

.bd-promo-grid-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
}

.bd-promo-grid-price strong {
  color: #111111;
}

/* ─── 64. Buttons — back to Lato ─────────────────────────────────────────── */
.bd-cta,
.btn-getstarted,
a.btn-getstarted,
button,
.btn,
input[type="button"],
input[type="submit"] {
  font-family: 'TT Norms Pro', 'Lato', sans-serif !important;
  font-weight: 500 !important;
}



/* ─── 66. Header — explicitly sticky on desktop ──────────────────────────── */
@media (min-width: 992px) {
  #header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    background: #ffffff;
  }
}

/* ─── 67. categories.php only — plain 3-col grid on desktop, no carousel ── */
@media (min-width: 992px) {
  body.bd-categories-page #menu-step-categories .menu-cats-swiper {
    overflow: visible !important;
    padding: 0 !important;
  }
  body.bd-categories-page #menu-step-categories .menu-cats-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    transform: none !important;
    gap: 20px;
    width: 100% !important;
  }
  body.bd-categories-page #menu-step-categories .menu-cats-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.bd-categories-page #menu-step-categories .menu-cats-swiper .swiper-button-prev,
  body.bd-categories-page #menu-step-categories .menu-cats-swiper .swiper-button-next,
  body.bd-categories-page #menu-step-categories .menu-cats-swiper .swiper-pagination {
    display: none !important;
  }
}

/* ─── 68. Cart — right-side drawer on desktop, not the mobile full-screen ── */
@media (min-width: 992px) {
  .bd-cart-page-modal .modal-dialog {
    position: fixed;
    right: 0;
    top: 0;
    margin: 0;
    height: 100vh;
    max-width: 440px;
    width: 440px;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
  }

  .bd-cart-page-modal.show .modal-dialog {
    transform: translateX(0);
  }

  .bd-cart-page-modal .modal-content {
    height: 100%;
    border-radius: 0;
    border-left: 1px solid #eef0f5;
  }

  .bd-cart-page-modal .modal-body {
    overflow-y: auto;
  }
}

/* ─── 70. Desktop header logo (replaces the "Ouvert actuellement" badge) ── */
.bd-desktop-logo {
  flex: 0 0 auto;
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.bd-desktop-logo img {
  height: 64px;
  width: auto;
  object-fit: contain;
}



/* ─── 72. Desktop — main content fills the viewport, no gap below footer ──
   Deliberately NOT using flexbox/grid on <body> this time — the hero
   slider is a direct child of <body>, and turning body into a flex
   container previously broke Swiper's width measurement for it. This
   approach only sizes <main> (a sibling, not an ancestor of the hero
   slider), so it can't repeat that regression. */
@media (min-width: 992px) {
  main.main {
    min-height: 100vh;
  }
}

/* ─── 73. Mobile footer accordion — borders and text color (the accordion
   itself only renders on mobile, so no desktop equivalent is needed) ───── */
@media (max-width: 991.98px) {
  .bd-footer-accordion .accordion-item {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .bd-footer-accordion .accordion-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .bd-footer-accordion .accordion-button {
    color: #000;
  }

  .bd-footer-accordion .accordion-button::after {
    filter: none;
  }

  .bd-footer-accordion .accordion-button:not(.collapsed) {
    color: #000;
  }

  .bd-footer-accordion .accordion-body {
    color: rgba(0, 0, 0, 0.65);
  }
}

/* ─── 74. Mobile-only favicon, centered above the footer ─────────────────── */
.bd-footer-favicon-wrap {
  text-align: center;
  padding: 24px 0 0;
  background: #ffffff; /* stays white even on pages with a cream body background (e.g. categories.php) */
}

.bd-footer-favicon {
  height: 72px;
  width: 72px;
  object-fit: contain;
  border-radius: 14px;
}


/* ─── iOS "Add to Home Screen" instructions — real screenshots ──────────── */
.bd-popup-card-ios h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 18px;
}

/* Mobile: this popup takes over the whole screen instead of a bottom sheet
   — there's a two-step visual walkthrough inside it that needs the room. */
@media (max-width: 767.98px) {
  .bd-popup-card-ios {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
}

.bd-ios-step-label {
  display: inline-block;
  background: #fbeb0f;
  color: #111111;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 22px;
  border-radius: 999px;
  margin: 14px 0 10px;
}

.bd-ios-step-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
}

/* ─── Blog listing + article pages ────────────────────────────────────────── */
.bd-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .bd-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .bd-blog-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.bd-blog-card {
  display: block;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(20, 20, 40, 0.05);
}

.bd-blog-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}

.bd-blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 16px;
}

.bd-blog-card-date {
  font-size: 0.7rem;
  color: #9aa0ad;
  text-transform: uppercase;
}

.bd-blog-card-title {
  font-family: 'Epilogue', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a1a1a;
}

.bd-blog-card-excerpt {
  font-size: 0.82rem;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bd-blog-article {
  max-width: 720px;
  margin: 0 auto;
}

.bd-blog-article-img {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 16px;
  object-fit: cover;
  max-height: 400px;
}

.bd-blog-article p {
  color: #333;
  line-height: 1.7;
  margin-bottom: 1em;
}

/* ─── 65. Desktop-only edits batch (Sept 2026) ──────────────────────────── */
@media (min-width: 992px) {
  /* Menu (desktop nav dropdown) + footer titles → uppercase */
  .bd-desktop-nav-dropdown a,
  .footer h4 {
    text-transform: uppercase;
    letter-spacing: .04em;
  }
}

/* ─── 66. Editable cart quantity (click to type any number) ────────────── */
.bd-cart-qty-input {
  width: 42px;
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-family: var(--default-font);
  -moz-appearance: textfield;
}
.bd-cart-qty-input::-webkit-outer-spin-button,
.bd-cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bd-cart-qty-input:focus {
  outline: none;
  border-color: #fbeb0f;
  box-shadow: 0 0 0 2px rgba(251, 235, 15, .2);
}

/* ─── 67. Floating WhatsApp contact button ──────────────────────────────── */
.bd-whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 88px; /* clears the mobile bottom nav */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  z-index: 1060;
  transition: transform .15s ease;
}
.bd-whatsapp-float:hover,
.bd-whatsapp-float:focus {
  color: #fff;
  transform: scale(1.07);
}
/* ─── 76. Floating "Promotions" widget (above WhatsApp, mobile + desktop) ─ */
.bd-promo-float {
  position: fixed;
  right: 16px;
  bottom: 152px; /* mobile: stacked above WhatsApp, clears the bottom nav */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  z-index: 1060;
  transition: transform .15s ease;
  overflow: hidden;
}
.bd-promo-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-promo-float:hover {
  transform: scale(1.07);
}
@media (min-width: 992px) {
  .bd-whatsapp-float {
    bottom: 24px;
    width: 66px;
    height: 66px;
    font-size: 2rem;
  }
  .bd-promo-float {
    bottom: 100px;
    width: 66px;
    height: 66px;
  }
}

/* ─── 68. Promo countdown ("timeline") badge — red & bold ──────────────── */
.bd-promo-countdown {
  display: block;
  color: #d21f1f;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .01em;
  margin-top: 4px;
}
.bd-promo-countdown.d-none {
  display: none;
}

/* ─── 69. Desktop "Navigation" trigger (replaces the old link row) ─────── */
.bd-desktop-nav-wrap {
  position: relative;
  flex: 0 0 auto;
}
.bd-desktop-nav-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid #d8dce4;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.bd-desktop-nav-trigger:hover,
.bd-desktop-nav-trigger[aria-expanded="true"] {
  background: #f5f6f8;
  border-color: #fbeb0f;
}
.bd-desktop-nav-trigger i {
  font-size: 1.2rem;
}
.bd-desktop-nav-trigger img {
  width: 22px;
  height: 22px;
}
.bd-desktop-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(20, 20, 40, 0.14);
  padding: 10px 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}
.bd-desktop-nav-dropdown a {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.86rem;
  padding: 10px 20px;
}
.bd-desktop-nav-dropdown a:hover {
  background: #f5f6f8;
  color: #111111;
}

/* ─── 70. Desktop "Ouvert actuellement" status badge (header) ──────────── */
.bd-desktop-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}
.bd-desktop-status-badge img {
  width: 22px;
  height: 22px;
}

/* ─── 71. Desktop: "Promotions" collection shows 4 products per row ────── */
@media (min-width: 992px) {
  .bd-deals-scroll {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .bd-deal-card {
    width: 100%;
  }
}

/* ─── 72. Desktop-only full-width slideshow (above hero) ───────────────── */
.bd-desktop-slideshow {
  position: relative;
  display: block;
  width: 100%;
  background: #fbeb0f;
  overflow: hidden;
}
.bd-desktop-slideshow img {
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 800; /* matches the source image exactly — full width, nothing cropped */
  object-fit: cover;
  display: block;
}
.bd-desktop-slideshow-caption {
  position: absolute;
  left: 64px;
  bottom: 48px;
  background: #fbeb0f;
  padding: 18px 42px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.bd-desktop-slideshow-caption span {
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}
.bd-desktop-slideshow-caption i {
  color: #fff;
  font-size: 1.4rem;
}
.bd-desktop-slideshow-caption:hover span,
.bd-desktop-slideshow-caption:hover i {
  color: #fff;
}

/* Multi-slide variant (admin-managed "Slideshow" section) */
.bd-desktop-slideshow-swiper .swiper-slide {
  position: relative;
}
.bd-desktop-slideshow-swiper .bd-desktop-slideshow-caption {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.bd-desktop-slideshow-cta {
  background: #fff;
  color: #1a1a1a !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.bd-desktop-slideshow-swiper .swiper-pagination {
  bottom: 16px !important;
}
.bd-desktop-slideshow-swiper .swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.6;
}
.bd-desktop-slideshow-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ─── 73. Desktop-only brand logo marquee ───────────────────────────────── */
.bd-brands-section {
  padding: 0 !important; /* override the global `section { padding: 60px 0 }` rule — was creating a visible gap under the slideshow */
  margin-bottom: 64px; /* breathing room before the hero slider below */
  overflow: visible;
}
.bd-brands-track-wrap {
  background: #fff;
  overflow: hidden;
  padding: 30px 0;
}
.bd-brands-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: bd-brands-scroll 32s linear infinite;
}
.bd-brand-logo {
  flex: 0 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
}
.bd-brand-logo img {
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
@keyframes bd-brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── 74. Product cards: no description, uniform size/height ───────────── */
.menu .menu-item.menu-item-order {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  padding: 0.85rem 0.85rem 1rem;
  background: #ffffff;
}
.menu-item-order .menu-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}
.menu-item-order h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}
.menu-item-order .price {
  margin-top: auto;
}
.menu-item-order .btn-add-item {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ─── Card quantity selector, just above the price ──────────────────────── */
.bd-card-qty-control {
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
}
.bd-card-qty-control button {
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  border-radius: 10px;
}
.bd-card-qty-input {
  width: 48px;
  height: 36px;
  font-size: 1.05rem;
}
@media (min-width: 992px) {
  .bd-card-qty-control button {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
  .bd-card-qty-input {
    width: 54px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* ─── 75. Desktop footer extras — link columns / newsletter / app badge ── */
.bd-footer-extra {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.bd-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bd-footer-links li {
  margin-bottom: 8px;
}
.bd-footer-links a {
  text-decoration: none;
  font-size: 0.88rem;
}
.bd-footer-links a:hover {
  text-decoration: underline;
}
.bd-newsletter-form {
  display: flex;
  gap: 0;
  max-width: 280px;
}
.bd-newsletter-form input {
  flex: 1 1 auto;
  border: none;
  border-radius: 999px 0 0 999px;
  padding: 10px 16px;
  font-size: 0.85rem;
  min-width: 0;
}
.bd-newsletter-form button {
  flex: 0 0 auto;
  border: none;
  border-radius: 0 999px 999px 0;
  background: #1a1a1a;
  color: #fff;
  padding: 0 18px;
  cursor: pointer;
}
.bd-newsletter-msg {
  margin-top: 8px;
}
.bd-footer-appbadge-label {
  font-weight: 700;
  margin-bottom: 10px;
}
.bd-footer-appbadge {
  max-width: 220px;
  height: auto;
}

/* ─── 77. Categories + Promotions pages ──────────────────────────────────── */
body.bd-categories-page,
body.bd-promotions-page {
  --background-color: #ffffff !important;
  background-color: #ffffff !important;
}
body.bd-categories-page .header,
body.bd-promotions-page .header {
  background: #ffffff;
}

/* ─── 78. Desktop only: bigger titles once inside a category/collection ── */
@media (min-width: 992px) {
  #menu-collections-title,
  #menu-category-title {
    font-size: 1.6rem !important;
  }
}

/* ─── 79. Desktop-only page background image (static, not scrolling) ───── */
@media (min-width: 992px) {
  body.index-page {
    background-image: url('assets/img/desktop-layout-bg.jpg?v=2');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* ─── 80. Login popup — small favicon above the "Connexion" heading ────── */
.bd-popup-favicon {
  text-align: center;
  margin-bottom: 10px;
}
.bd-popup-favicon img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* ─── 81. Product card borders — removed (no border on collection/category
   product cards, per current brand spec). ───────────────────────────── */

/* ─── KM Food: pickup-only for now — delivery shown but disabled ───────── */
.order-mode-card-disabled,
.checkout-choice-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── KM Food: mobile front page (replaces the old first-visit popup) ──── */
.bd-frontpage-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  flex-direction: column;
  background: #1a1a1a;
  color: #ffffff;
}
body.bd-frontpage-open {
  overflow: hidden;
}
.bd-frontpage-bar {
  background: #567412;
  color: #ffffff;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px 12px;
  flex: 0 0 auto;
}
.bd-frontpage-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100%),
    url('../img/front-page-bg.jpg') center/cover no-repeat;
}
.bd-frontpage-logo {
  max-width: 200px;
  height: auto;
  margin-bottom: 8px;
}
.bd-frontpage-btn {
  width: 100%;
  max-width: 320px;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
}
.bd-frontpage-btn-download {
  background: #fbeb0f;
}
.bd-frontpage-btn-visit {
  background: #fbeb0f;
}
.bd-frontpage-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px 22px;
  background: #1a1a1a;
}
.bd-frontpage-favicon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.bd-frontpage-footer-title {
  font-size: 0.8rem;
  font-weight: 700;
}
.bd-frontpage-footer-sub {
  font-size: 0.72rem;
  opacity: 0.75;
}

/* ─── KM Food: iOS install-steps popup — recolored ──────────────────────── */
.bd-popup-card-ios h3,
#bd-popup-title {
  color: #111111;
}
.bd-ios-step-label {
  background: #fbeb0f;
  color: #111111;
}

/* ─── KM Food: desktop backdrop for very wide screens ────────────────────
   On very large monitors the centered container leaves blank white space
   on both sides. This fills that space with a full-bleed background photo,
   fixed so it doesn't scroll with the page content. */
@media (min-width: 1600px) {
  body {
    background: #1a1a1a url('../img/backgroundlayer.jpg') center center / cover no-repeat fixed;
  }
}

/* ─── KM Food: home page mobile product previews ─────────────────────────
   Sits below the category icon nav on index.php only (mobile). Carousel
   when the category's products have photos, vertical list when they
   don't — no blank placeholder box in that case. */
.bd-home-previews {
  margin-top: 22px;
}
.bd-home-cat-preview {
  margin-bottom: 26px;
}
.bd-home-cat-preview-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0 16px;
}
.bd-home-cat-preview-title a {
  color: inherit;
  text-decoration: none;
}
@media (min-width: 992px) {
  .bd-home-cat-preview-title {
    font-size: 1.9rem;
    text-align: center;
  }
}

/* Carousel variant (products with images) — 1/row on mobile */
.bd-home-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 16px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bd-home-carousel::-webkit-scrollbar {
  display: none;
}
.bd-preview-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.bd-preview-card-img-wrap {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 8px;
}
.bd-preview-card-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.bd-preview-promo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #fbeb0f;
  color: #111111;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
}
.bd-preview-card h5 {
  font-size: 1.2rem;
  margin: 0 0 4px;
  line-height: 1.25;
}
.bd-preview-ingredients {
  color: #8a8f98;
  font-size: 0.85rem;
  margin: 0 0 6px;
}
.bd-preview-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bd-preview-price {
  /* the site-wide rule (span → 400 !important) would otherwise flatten this */
  font-weight: 700 !important;
  color: #111111;
}
.bd-preview-price-promo {
  color: #111111;
}

/* Vertical-list variant (products without images) */
.bd-home-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
.bd-preview-card-noimg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid #fbeb0f;
  border-radius: 16px;
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
}
.bd-preview-card-noimg-text h5 {
  font-size: 1.2rem;
  margin: 0 0 4px;
}
.bd-preview-card-noimg-text p {
  color: #8a8f98;
  font-size: 0.82rem;
  margin: 0 0 8px;
}

/* Round "+" quick-add button — #fbeb0f, shared by both card variants */
.bd-preview-quick-add {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #fbeb0f;
  color: #111111;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.bd-preview-card-img-wrap .bd-preview-quick-add {
  position: absolute;
  bottom: 8px;
  right: 8px;
}
.bd-preview-quick-add-static {
  position: static;
  flex: 0 0 auto;
}

@media (min-width: 992px) {
  .bd-home-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding: 2px 0 8px;
  }
  .bd-preview-card {
    flex: none;
  }
}

/* ─── KM Food: product cards inside a category/collection ─────────────────
   Retires the items carousel entirely (JS no longer inits a Swiper for it)
   in favour of a static grid: 2/row on mobile, 4/row on desktop. Cards get
   the rounded-image + round quick-add button design used on the home page
   previews, plus an ingredients line. Products without an image keep their
   own distinct full-width row (no blank placeholder). */
#menu-step-items .menu-items-swiper {
  overflow: visible !important;
  padding: 0 !important;
}
#menu-step-items .menu-items-swiper .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  transform: none !important;
  width: 100% !important;
}
#menu-step-items .menu-items-swiper .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
#menu-step-items .menu-items-swiper .swiper-slide.bd-noimg-slide {
  grid-column: 1 / -1 !important;
}
#menu-step-items .menu-items-swiper .swiper-button-prev,
#menu-step-items .menu-items-swiper .swiper-button-next,
#menu-step-items .menu-items-swiper .swiper-pagination {
  display: none !important;
}
@media (min-width: 992px) {
  #menu-step-items .menu-items-swiper .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

/* Card visuals — image variant */
#menu-step-items .menu-item-order {
  border-radius: 20px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#menu-step-items .menu-item-order:hover,
#menu-step-items .menu-item-order:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
#menu-step-items .menu-item-order .menu-img-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
#menu-step-items .menu-item-order .menu-img-wrap .menu-img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  margin: 0;
}
#menu-step-items .menu-item-order h4 {
  font-size: 1.02rem;
  margin: 0 0 3px;
  line-height: 1.3;
}
#menu-step-items .menu-item-order .menu-item-ingredients {
  font-size: 0.8rem;
  color: #8a8f98;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#menu-step-items .menu-item-order .price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

/* Round quick-add button — #fbeb0f */
#menu-step-items .bd-card-quick-add {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #fbeb0f;
  color: #111111;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#menu-step-items .menu-img-wrap .bd-card-quick-add {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

/* Card visuals — no-image variant (full-width row, keeps its border since
   there's no photo to give the card visual weight) */
#menu-step-items .menu-item-order-noimg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
#menu-step-items .menu-item-order-noimg .menu-item-noimg-text h4 {
  margin: 0 0 3px;
}
#menu-step-items .menu-item-order-noimg .menu-item-noimg-text .menu-item-ingredients {
  -webkit-line-clamp: 1;
}
#menu-step-items .bd-card-quick-add-static {
  position: static;
  flex: 0 0 auto;
}

/* ─── KM Food: contact section — #fbeb0f instead of the site accent orange ── */
.contact .info-item .icon {
  background-color: #fbeb0f !important;
}
.contact .info-item .social-links a:hover {
  color: #111111 !important;
}

/* ─── KM Food: "+" prefix on "Ajouter au panier" buttons (Commander and the
   product popup's add button use an arrow instead — see below) ─────────── */
#taco-modal-add::before,
.bd-reco-add-btn::before {
  content: '+ ';
  font-weight: 700;
}

/* Product popup "Ajouter au panier" — arrow, like Commander. */
#item-modal-add::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s ease;
}
#item-modal-add:hover::after {
  transform: translateX(3px);
}

/* "Contact" heading — same size as "Notre menu" / home preview titles. */
#contact .bd-section-title-pill {
  font-size: 1.8rem !important;
}
@media (min-width: 992px) {
  #contact .bd-section-title-pill {
    font-size: 2.4rem !important;
  }
}

/* Commander button — 1px narrower vertically than the other .bd-cta buttons */
#bd-passer-commande {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ─── KM Food: desktop-only banner above the hero ─────────────────────────── */
.bd-top-banner {
  position: relative;
  max-width: 1320px;
  margin: 16px auto 0;
  padding: 0 20px;
}
.bd-top-banner img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.bd-top-banner::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 60%;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.bd-top-banner-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  color: #ffffff;
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  z-index: 2;
}

/* ─── KM Food: collection product cards — normal full-width pill button ──── */
#menu-step-items .menu-item-order .btn-add-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  font-size: 0.85rem;
}
/* No-image variant is a horizontal row — button stays auto-width, aligned
   at the end, not stretched full-width like the vertical image cards. */
#menu-step-items .menu-item-order-noimg .btn-add-item {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}


/* ─── KM Food: category cards — photo only, no card chrome ────────────────── */
#menu-step-categories .menu-cat-card .menu-cat-img-wrap {
  margin: 0 !important;
  position: relative;
}

/* ─── KM Food: category card overlay — big title + arrow CTA on the photo ── */
.menu-cat-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 40px 18px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  border-radius: 0 0 16px 16px;
}
.menu-cat-overlay-title {
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff;
  line-height: 1.15;
}
.menu-cat-overlay-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbeb0f;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
@media (min-width: 992px) {
  .menu-cat-overlay-title {
    font-size: 1.7rem;
  }
}

/* ─── KM Food: category grid — final, maximally-explicit override ────────
   Belt-and-suspenders fix: earlier rules for this grid should already
   work, but cards were still rendering narrow inside their column, so
   this pins every box in the chain explicitly rather than relying on
   inherited stretch behavior. Placed last so it's guaranteed to win. */
#menu-step-categories .menu-cats-swiper .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  justify-items: stretch !important;
  align-items: start !important;
  gap: 14px !important;
}
#menu-step-categories .menu-cats-swiper .swiper-slide {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
#menu-step-categories .menu-cat-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
#menu-step-categories .menu-cat-img-wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  aspect-ratio: 2.163 !important;
}
#menu-step-categories .menu-cat-img-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
@media (min-width: 992px) {
  #menu-step-categories .menu-cats-swiper .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─── KM Food: product cards inside a collection — own design, separate
   from the home page cards, matching the reference mockup exactly:
   natural/uncropped image, title + orange price on one row, grey
   ingredients line, full-width green button. No card border/shadow —
   cards are separated by spacing only. 1/row mobile, 3/row desktop. ── */
.bd-collection-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 4px 16px 8px;
}
@media (min-width: 992px) {
  .bd-collection-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    padding: 4px 0 8px;
  }
}

.bd-cc-card {
  display: block;
  cursor: pointer;
}

.bd-cc-img-wrap {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 14px;
}
.bd-cc-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.bd-cc-promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fbeb0f;
  color: #111111;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 11px;
  border-radius: 999px;
}

.bd-cc-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.bd-cc-title {
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #111111;
  margin: 0;
}
.bd-cc-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111111;
  white-space: nowrap;
}
.bd-cc-price-promo {
  color: #111111;
}

.bd-cc-ingredients {
  color: #8a8f98;
  font-size: 0.9rem;
  margin: 4px 0 14px;
}

.bd-cc-add-btn {
  display: block;
  width: 100%;
  background: #fbeb0f;
  color: #111111;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 700;
  font-size: 1rem;
}

/* ─── KM Food: menu.php category grid — rebuilt from scratch (2026-XX) ─────
   Deliberately isolated from the old .menu-cat-card / .menu-cats-swiper
   chain (spread across mrfood.css + this file with many conflicting
   overrides) — fresh classes, one place, no swiper, no legacy media
   queries fighting each other. Plain cutout photo + name, no card frame,
   no gradient — matches the reference mockup exactly. */
.bd-menu-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 8px 0 12px;
}
.bd-menu-page-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  gap: 14px;
}
.bd-menu-page-card-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1520 / 704;
  object-fit: contain;
  background: #f4f4f4;
  border-radius: 16px;
  display: block;
}
/* Wide food photos (uploads/menu-photos/<slug>.jpg, 1520:704): shown whole,
   at their natural ratio, filling the card width. */
.bd-menu-page-card-img--photo {
  object-fit: cover;
  background: none;
}
.bd-menu-page-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.bd-menu-page-card-name {
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #111111;
  text-align: left;
}
/* "Commander" pill beside each category title (the whole card is the link). */
.bd-menu-page-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: #fbeb0f;
  color: #111111 !important;
  font-family: 'TT Norms Pro', 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 500 !important;
  line-height: 1;
  padding: 11px 22px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .bd-menu-page-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* ─── KM Food: dark mode (mobile only) ─────────────────────────────────────
   Universal catch-all: every element goes dark-green (#111111) background + white text/
   border by default, so nothing light gets missed — including image
   containers and transparent-PNG backgrounds. Brand-colored buttons
   (green/orange CTAs, badges, quick-add) are excluded via :not() so
   they're never touched in the first place, keeping their own design.
   html (not just body) is covered too, so there's no light strip in the
   mobile Safari overscroll/bounce area. */
@media (max-width: 991px) {
  html.bd-dark-mode,
  body.bd-dark-mode {
    background-color: #111111 !important;
    color: #ffffff !important;
  }

  body.bd-dark-mode *:not(.bd-cta, .btn-getstarted, .bd-preview-quick-add, .btn-add-item, .cart-badge, .bd-promo-badge, .bd-preview-promo-badge, .bd-cc-promo-badge, .bd-cc-price, .bd-preview-price-promo, .bd-menu-page-cta) {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  /* Icon-only buttons (top status row, close buttons, etc.) — no visible
     background square/circle behind them, just the icon on the page. */
  body.bd-dark-mode .bd-status-icons button,
  body.bd-dark-mode .bd-status-icons a,
  body.bd-dark-mode .bd-nav-icon,
  body.bd-dark-mode .bd-dark-mode-toggle,
  body.bd-dark-mode .btn-close,
  body.bd-dark-mode .bd-preview-quick-add {
    background-color: transparent !important;
  }
  body.bd-dark-mode .bd-preview-quick-add {
    background-color: #fbeb0f !important;
  }

  /* Icon categories (small round icons — home carousel + above products
     inside a collection) — no border in dark mode. */
  body.bd-dark-mode .bd-quicknav-item img {
    border: none !important;
  }

  /* Close ("X") buttons use an SVG background-image, not text color —
     color/background-color above don't touch it, needs an invert. */
  body.bd-dark-mode .btn-close {
    filter: invert(1);
  }

  /* Product card image — no border, regardless of source (focus outline,
     inherited rule, etc.) */
  body.bd-dark-mode .bd-cc-img-wrap,
  body.bd-dark-mode .bd-cc-img-wrap img,
  body.bd-dark-mode .bd-preview-card-img-wrap,
  body.bd-dark-mode .bd-preview-card-img-wrap img {
    border: none !important;
    outline: none !important;
  }

  /* Scroll-triggered sticky bars (search + totals/icons bar) — both
     position:fixed with solid/blurred white backgrounds, which the broad
     catch-all above doesn't fully beat in practice. These are the source
     of the white strip that appears between sections once scrolled. */
  body.bd-dark-mode .bd-scroll-bar {
    background: #111111 !important;
    border-bottom-color: #ffffff !important;
  }
  body.bd-dark-mode .bd-scroll-bar-total-label {
    color: #ffffff !important;
  }
  body.bd-dark-mode .bd-scroll-search {
    background: rgba(14, 36, 15, 0.85) !important;
    border-bottom-color: #ffffff !important;
  }
  body.bd-dark-mode .bd-scroll-search-input {
    background: rgba(14, 36, 15, 0.6) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  body.bd-dark-mode .bd-scroll-search-input:focus {
    background: #111111 !important;
  }
  body.bd-dark-mode .bd-scroll-search-field i {
    color: #ffffff !important;
  }

  /* These three have higher CSS specificity than the general catch-all
     above (an ID selector, and 2-3 chained classes), so they were still
     winning and showing through as white gaps even with !important on
     both sides. Matched with equal-or-higher specificity here instead of
     hoping source order settles it. */
  body.bd-dark-mode.index-page #menu.section-panel {
    background: #111111 !important;
  }
  body.bd-dark-mode.index-page .footer.dark-background {
    background: #111111 !important;
  }
  body.bd-dark-mode.index-page .footer p,
  body.bd-dark-mode.index-page .footer a {
    color: #ffffff !important;
  }
  /* App-install ("Télécharger") bar keeps its brand green in dark mode —
     the catch-all above would otherwise repaint it (and its children). */
  body.bd-dark-mode #bd-install-banner {
    background-color: #111111 !important;
  }
  body.bd-dark-mode #bd-install-banner * {
    background-color: transparent !important;
  }

  /* Product popup: no white separator lines (header/footer rules, the
     dividers between notes / quantity / suggestions, option-group rules)
     and no borders around the "Dans la même catégorie" cards. Form
     controls (radios, notes box, quantity) keep their own borders. */
  body.bd-dark-mode #itemModal .modal-header,
  body.bd-dark-mode #itemModal .modal-footer,
  body.bd-dark-mode #itemModal .border-top,
  body.bd-dark-mode #itemModal .option-group,
  body.bd-dark-mode #itemModal .bd-related-card {
    border-width: 0 !important;
  }

  /* Footer "KM Food" titles: the base rule `body.index-page .footer h4`
     forces black with !important and out-ranks the catch-all, so the
     brand name stayed black on the dark background. Also covers the
     copyright line. */
  body.bd-dark-mode .footer h4,
  body.bd-dark-mode.index-page .footer h4,
  body.bd-dark-mode .footer .sitename,
  body.bd-dark-mode .footer .copyright,
  body.bd-dark-mode .footer .copyright p,
  body.bd-dark-mode .footer .copyright strong {
    color: #ffffff !important;
  }

  /* Icons never get a background box of their own — only text/glyph
     color matters. Without this, every <i> (being inline) gets a tight
     navy rectangle from the catch-all above, most visible on bigger
     icons like the checkout payment-method icons. */
  body.bd-dark-mode i,
  body.bd-dark-mode .bi {
    background-color: transparent !important;
  }

  /* Form placeholder text ("Nom", "Email"...) — a separate pseudo-element,
     not covered by the general color rule above. */
  body.bd-dark-mode ::placeholder {
    color: #ffffff !important;
    opacity: 0.65;
  }
}

/* ─── KM Food: sticky floating "Menu" widget ──────────────────────────────── */
.bd-menu-widget {
  position: fixed;
  right: 16px;
  bottom: 96px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
}
.bd-menu-widget img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 992px) {
  .bd-menu-widget {
    bottom: 24px;
  }
}

/* Product / cart / checkout popup titles — Lato, not the Epilogue
   semi-bold used for section headings. */
.modal-mr .modal-header .modal-title,
body.index-page #checkoutModal .modal-header .modal-title,
body.index-page #cartModal .modal-header .modal-title {
  font-family: 'TT Norms Pro', 'Lato', sans-serif !important;
  font-weight: 700 !important;
}

/* ─── "Indisponible pour le moment" (product switched off in the admin) ──── */
.bd-unavailable-tag {
  display: inline-block;
  align-self: flex-start;
  border: 1px solid #d0d5dd;
  color: #667085;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.85rem;
  line-height: 1.2;
}
.bd-cc-card .bd-unavailable-tag {
  display: block;
  text-align: center;
  padding: 12px 16px;
  margin-top: 8px;
}
.bd-preview-card .bd-unavailable-tag {
  margin-top: 6px;
}
.bd-preview-card-noimg-text .bd-unavailable-tag {
  margin-top: 2px;
}
.bd-unavailable .bd-cc-img-wrap img,
.bd-unavailable .bd-preview-card-img-wrap img,
.bd-related-card.bd-unavailable img {
  opacity: 0.5;
  filter: grayscale(0.8);
}
.bd-related-card.bd-unavailable .bd-related-price {
  font-size: 0.8rem;
  color: #667085;
}
.bd-unavailable-banner {
  background: #fdecea;
  color: #b42318;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-weight: 500;
  text-align: center;
}
#item-modal-add:disabled {
  background: #9ca3af !important;
  cursor: not-allowed;
  transform: none;
}
#item-modal-add:disabled::after {
  display: none !important;
}

/* Products without a photo, inside a category page: list rows like the home
   page, spanning the full grid width (no blank placeholder image). */
.bd-cc-noimg-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 992px) {
  .bd-cc-noimg-list {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }
}
.bd-home-vertical-list--after {
  margin-top: 12px;
}

/* Promotion cards on the home page: bold price too. */
.bd-deal-card-price strong,
.bd-deal-card-price strong .bd-price-num,
.bd-deal-card-price strong .bd-price-cur {
  font-weight: 700 !important;
}


/* ═══ KM Food — brand override: buttons #fbeb0f + black text ═══════════ */
:root { --km-yellow: #fbeb0f; --km-yellow-dark: #e6d600; --km-black: #111111; }
.bd-cta, .btn-getstarted, a.btn-getstarted, .btn-add-item, .bd-reco-add-btn,
.bd-menu-page-cta, .btn-mr, .btn-login,
#bd-passer-commande, #item-modal-add, #taco-modal-add {
  background: var(--km-yellow) !important;
  color: var(--km-black) !important;
  border-color: var(--km-yellow) !important;
}
.bd-cta:hover, .btn-getstarted:hover, .btn-add-item:hover, .bd-reco-add-btn:hover,
.bd-cc-add-btn:hover, .bd-menu-page-cta:hover, .btn-mr:hover, .btn-login:hover,
#bd-passer-commande:hover, #item-modal-add:hover, #taco-modal-add:hover {
  background: var(--km-yellow-dark) !important;
  color: var(--km-black) !important;
}
.bd-cta.bd-cta-disabled { background: #d9dce3 !important; color: #8b8f9a !important; }
.btn-primary {
  --bs-btn-bg: #fbeb0f; --bs-btn-border-color: #fbeb0f; --bs-btn-color: #111111;
  --bs-btn-hover-bg: #e6d600; --bs-btn-hover-border-color: #e6d600; --bs-btn-hover-color: #111111;
  --bs-btn-active-bg: #e6d600; --bs-btn-active-border-color: #e6d600; --bs-btn-active-color: #111111;
  --bs-btn-disabled-bg: #fbeb0f; --bs-btn-disabled-border-color: #fbeb0f; --bs-btn-disabled-color: #111111;
}
.btn-outline-primary { --bs-btn-color: #111111; --bs-btn-border-color: #111111; --bs-btn-hover-bg: #fbeb0f; --bs-btn-hover-border-color: #fbeb0f; --bs-btn-hover-color: #111111; --bs-btn-active-bg: #fbeb0f; --bs-btn-active-color: #111111; }
.announcement-bar { background: var(--km-black); }
.announcement-bar, .announcement-bar * { color: var(--km-yellow) !important; }


/* ═══ KM Food — round 2: black cart badge, black product cards ════════ */
.cart-badge, .bd-header-icons .cart-badge, .bd-cart-icon-wrap .cart-badge, .btn-getstarted .cart-badge {
  background: #111111 !important;
  color: #ffffff !important;
}
/* buttons / badges that sit on product cards */
.bd-cc-add-btn, .bd-preview-quick-add, .bd-card-quick-add, .bd-reco-add-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}
.bd-cc-add-btn:hover, .bd-preview-quick-add:hover, .bd-card-quick-add:hover, .bd-reco-add-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
}
.bd-cc-promo-badge, .bd-preview-promo-badge, .bd-deal-badge {
  background: #111111 !important;
  color: #ffffff !important;
}


/* ═══ KM Food — menu page: full-width 16:9 collection cards ═══════════ */
#menu-step-categories .menu-cats-swiper .swiper-wrapper {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 992px) {
  #menu-step-categories .menu-cats-swiper .swiper-wrapper { grid-template-columns: 1fr !important; }
}
#menu-step-categories .menu-cat-img-wrap {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  border-radius: 16px;
}
#menu-step-categories .menu-cat-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ═══ KM Food — cards adapt to their photo (16:9), full width ═════════ */
.bd-menu-page-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.bd-menu-page-card-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  background: none !important;
}
.bd-collection-card img {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  display: block;
}

/* menu page: 1 card per row on mobile, 3 per row on desktop */
@media (min-width: 992px) {
  .bd-menu-page-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}