/**
 * Bazar d'Alep — 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.
 */

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

/* Djerba brand pass: buttons/borders → #eb5700, banners → #318034, 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: #eb5700 !important;
  --accent-dark: #c74800 !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: '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: '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 with arrow ───────────────────────────────────── */
.bd-cta,
.btn-getstarted,
a.btn-getstarted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eb5700;
  color: #fff !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;
}

.bd-cta::after {
  content: '→';
  display: inline-block;
  transition: transform 0.15s ease;
}

.bd-cta:hover::after {
  transform: translateX(3px);
}

/* Same arrow treatment for "Ajouter au panier" / "Ajouter" buttons only —
   scoped by ID since .btn-getstarted is shared with other checkout buttons
   ("Finaliser ma commande", "Payer en ligne", "Continuer") that weren't
   part of this request. */
#taco-modal-add::after,
#item-modal-add::after,
.bd-reco-add-btn::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s ease;
}

#taco-modal-add:hover::after,
#item-modal-add:hover::after,
.bd-reco-add-btn:hover::after {
  transform: translateX(3px);
}

/* 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: #318034;
  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: var(--bazar-blue);
  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: #4caf50;
  color: #fff;
  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: var(--bazar-blue);
  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: '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: #4caf50;
  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: var(--bazar-blue);
  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: var(--bazar-blue);
  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: var(--bazar-blue);
  margin: 0 0 4px;
}

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

/* ─── 10. Promo badge ────────────────────────────────────────────────────── */
.bd-promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #eb5700;
  color: #fff;
  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: var(--bazar-blue);
}

.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: var(--bazar-blue);
  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; }

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

.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: #eb5700;
  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: var(--bazar-blue);
  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 carousel (product detail) ────────────────────── */
.bd-related-card {
  flex: 0 0 auto;
  width: 100px;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

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

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

.bd-related-price {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bazar-blue);
}

/* ─── 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: #eb5700;
  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: #1a1a1a;
  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: #85af27;
  color: #fff;
}
.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: #1a1a1a;
}

.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: #eb5700 !important;
  color: #fff !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: #eb5700;
  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, bigger icons in white circles ───────── */
body.index-page #menu.section-panel {
  background: #ffffff !important;
}

/* Category cards — bigger icons, white circular background */
#menu-step-categories .menu-cats-swiper .swiper-slide .menu-cat-card .menu-cat-img-wrap {
  width: 130px !important;
  height: 130px !important;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 4px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  #menu-step-categories .menu-cats-swiper .swiper-slide .menu-cat-card .menu-cat-img-wrap {
    width: 128px !important;
    height: 128px !important;
  }
  #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 {
  object-fit: contain !important;
  padding: 4px;
}

/* Single flat card, not a card-inside-a-card — the outer card is the only
   visual container; the icon sits directly on its white background. */
.menu-cat-card {
  background: #ffffff !important;
  border: 1px solid #eef0f5 !important;
  box-shadow: 0 1px 4px rgba(20, 20, 40, 0.05) !important;
}

.menu-cat-card:hover,
.menu-cat-card:focus-visible {
  box-shadow: 0 4px 14px rgba(20, 20, 40, 0.09) !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: '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: #85af27;
}

.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: var(--bazar-blue);
}

/* 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: var(--bazar-blue);
  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: #eb5700;
  color: #fff;
  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: #eb5700;
  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: #318034;
  }
  body.index-page .footer.dark-background {
    background: #318034 !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: var(--bazar-blue);
  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: #eb5700;
  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: #eb5700;
  color: #fff;
}

/* ─── 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: #85af27 !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;
}

/* ─── 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: 10px;
  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: #eb5700;
  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: #85af27;
  color: #fff;
  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: 130px;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}

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

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

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

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

.bd-reco-add-btn {
  width: 100%;
  background: #eb5700;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 0;
  font-size: 0.75rem;
}

/* ─── 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: 'Lato', sans-serif;
}

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

.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 — pill badge ───────────────────────────────── */
.bd-promotions-title {
  display: inline-block;
  background: #eb5700;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  padding: 10px 32px;
  border-radius: 999px;
}

/* ─── 61. Every other section title — same pill concept, green ──────────── */
.bd-section-title-pill {
    display: inline-block;
    background: #85af27;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    padding: 10px 32px;
    border-radius: 999px;
  }


/* ─── 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: #85af27;
  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: #85af27;
  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;
    padding: 14px 40px;
  }
}

/* ─── 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: #eb5700;
}

/* ─── 64. Buttons — back to Lato ─────────────────────────────────────────── */
.bd-cta,
.btn-getstarted,
a.btn-getstarted,
button,
.btn,
input[type="button"],
input[type="submit"] {
  font-family: '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 4-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(4, 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: #85af27;
  color: #fff;
  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: #85af27;
  box-shadow: 0 0 0 2px rgba(133, 175, 39, .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: #85af27;
}
.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: #85af27;
}

/* ─── 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: #85af27;
  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: #85af27;
  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: 2px solid #eb5700 !important;
  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 — warm cream background ────────── */
body.bd-categories-page,
body.bd-promotions-page {
  --background-color: #faf3e4 !important;
  background-color: #faf3e4 !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 — collections/categories only, not the
   standalone Promotions page (which uses its own .bd-deal-card, a
   different component entirely, so no extra scoping is needed here) ── */
.menu .menu-item.menu-item-order {
  border: 2px solid #85af27;
}

/* ─── Djerba: 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;
}

/* ─── Djerba: 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: #318034;
  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: #85af27;
}
.bd-frontpage-btn-visit {
  background: #eb5700;
}
.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;
}

/* ─── Djerba: iOS install-steps popup — recolored ──────────────────────── */
.bd-popup-card-ios h3,
#bd-popup-title {
  color: #318034;
}
.bd-ios-step-label {
  color: #eb5700;
}

/* ─── Djerba: 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;
  }
}

/* ─── Djerba: 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.25rem;
  margin: 0 0 12px;
  padding: 0 16px;
}

/* Carousel variant (products with images) */
.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 46%;
  scroll-snap-align: start;
  border: 2px solid #eb5700;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
}
.bd-preview-card-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 8px;
}
.bd-preview-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bd-preview-promo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #eb5700;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
}
.bd-preview-card h5 {
  font-size: 0.92rem;
  margin: 0 0 4px;
  line-height: 1.25;
}
.bd-preview-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bd-preview-price {
  font-weight: 700;
  color: #111111;
}
.bd-preview-price-promo {
  color: #eb5700;
}

/* 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 #eb5700;
  border-radius: 16px;
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
}
.bd-preview-card-noimg-text h5 {
  font-size: 1rem;
  margin: 0 0 4px;
}
.bd-preview-card-noimg-text p {
  color: #8a8f98;
  font-size: 0.82rem;
  margin: 0 0 8px;
}

/* Round "+" quick-add button — #4caf50, shared by both card variants */
.bd-preview-quick-add {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #4caf50;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  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-previews { display: none; }
}

/* ─── Djerba: 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: 2px solid #eb5700;
  border-radius: 18px;
  padding: 10px;
  background: #fff;
}
#menu-step-items .menu-item-order .menu-img-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
}
#menu-step-items .menu-item-order .menu-img-wrap .menu-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0;
}
#menu-step-items .menu-item-order h4 {
  font-size: 0.95rem;
  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 — #4caf50 */
#menu-step-items .bd-card-quick-add {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #4caf50;
  color: #fff;
  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) */
#menu-step-items .menu-item-order-noimg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}
#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;
}