/*
Theme Name: Complexe Cheikh Ahmadou Bamba
Theme URI: https://github.com/sowcoder-rkdev/complexe-cheikh-ahmadou-bamba
Author: Complexe Cheikh Ahmadou Bamba
Description: Thème WordPress + WooCommerce pour Complexe Cheikh Ahmadou Bamba — épicerie générale en détail, demi-gros et gros : boissons, produits laitiers, épicerie sèche, hygiène et plus de 250 autres références.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 9.0
Text Domain: complexe-cheikh-ahmadou-bamba
Tags: e-commerce, food-and-drink, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ==========================================================================
   0. DESIGN TOKENS
   Valeurs reprises directement de jumia.sn (inspectées en direct sur le
   site live, pas de mémoire) : en-tête et barre de catégories BLANCS
   (pas orange plein — l'orange n'est qu'un accent : bouton de recherche,
   liens, prix promo), fond de page gris clair, pied de page gris moyen,
   badge de réduction VERT (pas rouge), cartes très peu bordées et
   largement arrondies (12px). Contraste texte vérifié AA.
   ========================================================================== */
:root {
  /* Rampe de marque : orange jumia (#f68b1e mesuré sur le bouton de
     recherche du site). --ccab-green-800/900 sert de gris neutre pour le
     pied de page (mesuré #535357) — jamais utilisé pour l'en-tête/la barre
     de catégories, qui sont blancs sur jumia.sn. --ccab-orange-dark est la
     teinte de survol (hover = version plus sombre de la couleur du bouton
     lui-même). Les noms "green-*" restent du système de composants
     d'origine (des dizaines de composants les référencent déjà) mais
     portent la rampe orange. */
  --ccab-green-900: #3d3d40;
  --ccab-green-800: #535357;
  --ccab-green-700: #f68b1e;
  --ccab-green-650: #ff9d3f;
  --ccab-green-600: #ffb066;
  --ccab-green-100: #ffe9d1;
  --ccab-green-50: #fff6ec;
  --ccab-orange-dark: #d9740a;

  --ccab-cream: #f1f1f2;
  --ccab-cream-dark: #e4e4e6;
  --ccab-card: #ffffff;

  --ccab-ink: #313133;
  --ccab-ink-soft: #535357;
  --ccab-ink-faint: #75757a;

  /* Accent ambre — un second ton chaud plus clair pour les CTA
     secondaires, distinct de l'orange principal pour éviter une page
     tout-une-teinte. */
  --ccab-gold: #ffb020;
  --ccab-gold-dark: #e08e00;
  --ccab-gold-ink: #3d2400;

  --ccab-red: #e02020;
  --ccab-red-bg: #fdeaea;
  --ccab-blue: #2c6e8f;

  /* Badge de réduction ("-40%") : vert, pas rouge — couleur exacte mesurée
     sur les badges produit de jumia.sn. */
  --ccab-discount-bg: #009063;
  --ccab-discount-ink: #ffffff;

  /* Badge de rareté ("12 articles en stock") : ambre, mesuré sur les
     mêmes cartes produit. */
  --ccab-stock-bg: #fff2d6;
  --ccab-stock-ink: #ca8a04;

  /* Kept separate from the brand ramp on purpose: recoloring a "message
     sent" success notice to orange would read as a warning, not success. */
  --ccab-success-bg: #e7f6ea;
  --ccab-success-ink: #1e7e34;

  /* Cartes quasi sans bordure (couleur de bordure = couleur de fond de
     page), comme sur jumia.sn. */
  --ccab-border: #e9e9ea;
  --ccab-border-soft: #ededed;

  /* Rayon nettement plus arrondi (12px) pour les cartes produit, comme
     jumia.sn — plus "grille dense au coin pointu" pour les autres
     composants (boutons, bannières). */
  --radius-xl: 10px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-2: 0 14px 34px -10px rgba(0, 0, 0, .22);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .28);

  --font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1280px;
  --header-h: 74px;
}

/* Site owners can override the two brand colors from the Customizer. */
:root {
  --ccab-primary: var(--ccab-color-primary, var(--ccab-green-700));
  --ccab-accent: var(--ccab-color-accent, var(--ccab-gold));
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--ccab-cream);
  color: var(--ccab-ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Sane defaults for struck-through/sale prices everywhere on the site —
   not just inside WooCommerce's own markup — so a product shown through a
   custom card (homepage showcases, flash sale) never falls back to the
   browser's default underlined blue link styling for <del>/<ins>. */
del { opacity: .55; font-weight: 500; text-decoration: line-through; }
ins { text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: var(--ccab-green-700); text-decoration: none; }
a:hover { color: var(--ccab-gold-dark); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5em; color: var(--ccab-green-900); }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ccab-gold); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px;
  overflow: hidden; position: absolute !important; word-wrap: normal !important; margin: -1px; padding: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; background: var(--ccab-green-900); color: #fff;
  padding: 10px 18px; border-radius: 8px; z-index: 999; transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* Full-bleed page, no centered "boxed card with shadow" wrapper — every
   band below (header, nav, footer) already spans full width and centers
   its own content via .ccab-container, exactly like jumia.sn (verified
   live: light-gray page background behind full-width white/gray bands,
   not a floating shadowed card). */
.ccab-shell { min-height: 100vh; }
.ccab-wrap { padding-inline: clamp(16px, 3vw, 28px); }
.ccab-container { max-width: var(--container); margin: 0 auto; padding-inline: clamp(16px, 3vw, 28px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--radius-md); border: 0; cursor: pointer;
  font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ccab-primary); color: #fff; }
.btn-primary:hover { background: var(--ccab-orange-dark); color: #fff; }
.btn-accent { background: var(--ccab-accent); color: var(--ccab-gold-ink); }
.btn-accent:hover { background: var(--ccab-gold-dark); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-outline { background: var(--ccab-cream); border: 1px solid var(--ccab-border); color: var(--ccab-ink); }
.btn-outline:hover { border-color: var(--ccab-primary); color: var(--ccab-primary); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-block { width: 100%; }

.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.badge-promo { background: var(--ccab-discount-bg); color: var(--ccab-discount-ink); }
.badge-frais { background: var(--ccab-green-100); color: var(--ccab-green-700); }
.badge-specialite { background: #fbf1de; color: var(--ccab-gold-dark); }
.badge-stock { background: var(--ccab-stock-bg); color: var(--ccab-stock-ink); text-transform: none; letter-spacing: 0; font-weight: 600; }

.section { padding: clamp(34px, 5vw, 56px) 0 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 0; }
.section-lede { color: var(--ccab-ink-soft); max-width: 60ch; margin: 4px 0 20px; font-size: 15px; }
.link-more { border: 0; background: none; font-weight: 700; font-size: 14px; color: var(--ccab-primary); padding: 0; }

.ccab-offline-banner {
  background: var(--ccab-gold); color: var(--ccab-gold-ink); font-size: 13px; font-weight: 600;
  text-align: center; padding: 8px 16px;
}

/* ==========================================================================
   2. TOP BAR + HEADER
   ========================================================================== */
.ccab-topbar {
  background: var(--ccab-green-900); color: #f2f2f2; font-size: 12.5px;
  padding: 9px 0; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between;
}
.ccab-topbar .ccab-container { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; width: 100%; }
.ccab-topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ccab-primary); display: inline-block; margin-right: 8px; box-shadow: 0 0 0 3px rgba(246,139,30,.25); }
.ccab-topbar-msg { display: flex; align-items: center; }
.ccab-topbar-phones { display: flex; gap: 18px; flex-wrap: wrap; opacity: .92; }
.ccab-topbar-phones a { color: inherit; }
.ccab-topbar-phones a:hover { color: var(--ccab-green-600); }

/* White header (à la jumia.sn) — orange is an accent (logo mark, search
   button, links), never a full-header wash. Verified live against
   jumia.sn: header background is #fff with near-black text, not a
   colored band. */
.ccab-header {
  display: flex; align-items: center; gap: 18px; padding: 14px clamp(16px,3vw,28px);
  flex-wrap: wrap; position: sticky; top: 0; z-index: 40;
  background: var(--ccab-card); border-bottom: 1px solid var(--ccab-border);
}
.ccab-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ccab-brand-mark { flex-shrink: 0; }
.ccab-brand-mark { width: 48px; height: 48px; border-radius: 14px; background: var(--ccab-primary); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 15px; display: grid; place-items: center; letter-spacing: -.6px; overflow: hidden; }
.ccab-brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ccab-brand > span:last-child { min-width: 0; }
.ccab-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 18.5px; letter-spacing: -.4px; line-height: 1.15; color: var(--ccab-ink); }
.ccab-brand-tag { font-size: 11px; color: var(--ccab-ink-faint); letter-spacing: .1em; text-transform: uppercase; }

/* Search bar: light-gray field + a distinct orange PILL submit button —
   jumia.sn's search button is fully rounded (border-radius ~= its own
   height), not the sharp/soft radius used elsewhere on the page. */
.ccab-search { flex: 1 1 240px; display: flex; align-items: stretch; gap: 0; background: var(--ccab-cream); border: 1px solid var(--ccab-border); border-radius: 999px; padding-left: 16px; height: 48px; min-width: 0; }
.ccab-search svg { flex-shrink: 0; color: var(--ccab-ink-faint); align-self: center; }
.ccab-search input { flex: 1; border: 0; background: transparent; outline: none; height: 46px; min-width: 40px; color: var(--ccab-ink); padding-left: 10px; }
.ccab-search-submit { flex-shrink: 0; border: 0; border-radius: 999px; background: var(--ccab-primary); color: #fff; font-weight: 700; font-size: 13.5px; padding: 0 22px; margin: 4px; cursor: pointer; white-space: nowrap; }
.ccab-search-submit:hover { background: var(--ccab-orange-dark); }

.ccab-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ccab-bulk-note { display: none; }
@media (min-width: 860px) {
  .ccab-bulk-note { display: inline-flex; align-items: center; height: 48px; padding: 0 14px; border-radius: var(--radius-md); border: 1px dashed var(--ccab-border); background: var(--ccab-cream); font-weight: 600; font-size: 13px; color: var(--ccab-ink-soft); white-space: nowrap; }
}
.ccab-lang-switch { display: flex; border: 1px solid var(--ccab-border); border-radius: var(--radius-md); overflow: hidden; height: 48px; flex-shrink: 0; }
.ccab-lang-switch a { display: flex; align-items: center; padding: 0 13px; font-weight: 800; font-size: 12.5px; letter-spacing: .03em; color: var(--ccab-ink-soft); }
.ccab-lang-switch a.is-active { background: var(--ccab-primary); color: #fff; }
.ccab-lang-switch a:hover { background: var(--ccab-cream); }
.ccab-lang-switch a.is-active:hover { background: var(--ccab-primary); color: #fff; }

/* Plain icon+text link (no filled pill) — matches jumia.sn's cart link,
   which sits directly on the white header with no background of its own. */
.ccab-cart-btn { height: 48px; padding: 0 6px; border: 0; background: none; color: var(--ccab-ink); font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ccab-cart-btn:hover { color: var(--ccab-primary); }
.ccab-cart-count { background: var(--ccab-primary); color: #fff; border-radius: 20px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: 800; padding: 0 6px; }

.ccab-nav-toggle { display: none; height: 44px; width: 44px; border-radius: var(--radius-md); border: 1px solid var(--ccab-border); background: var(--ccab-card); color: var(--ccab-ink); align-items: center; justify-content: center; }
@media (max-width: 780px) { .ccab-nav-toggle { display: inline-flex; } }

/* White category strip under the header, with a bottom border for
   separation — jumia.sn's cat-bar is white too, not a dark band. */
.ccab-nav-wrap { position: relative; display: flex; align-items: stretch; background: var(--ccab-card); border-bottom: 1px solid var(--ccab-border); }
.ccab-nav { display: flex; flex: 1; min-width: 0; gap: 2px; padding: 0 clamp(16px,3vw,28px); overflow-x: auto; scrollbar-width: none; }
.ccab-nav::-webkit-scrollbar { display: none; }
.ccab-nav a { height: 44px; padding: 0 15px; display: inline-flex; align-items: center; font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--ccab-ink-soft); }
.ccab-nav a:hover { color: var(--ccab-primary); }
.ccab-nav a.is-active { color: var(--ccab-primary); box-shadow: inset 0 -2px var(--ccab-primary); }

/* "Toutes les catégories" dropdown — outline style (not a solid-orange
   pill) to sit correctly on the now-white bar. */
.ccab-cat-menu-toggle { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; margin: 8px 0 8px 16px; background: var(--ccab-card); color: var(--ccab-primary); border: 1px solid var(--ccab-primary); border-radius: var(--radius-md); font-family: inherit; font-weight: 700; font-size: 13.5px; white-space: nowrap; cursor: pointer; height: 28px; }
.ccab-cat-menu-toggle:hover { background: var(--ccab-green-50); }
.ccab-cat-menu-caret { transition: transform .15s ease; flex-shrink: 0; }
.ccab-cat-menu-toggle[aria-expanded="true"] .ccab-cat-menu-caret { transform: rotate(180deg); }
.ccab-cat-menu-panel { position: absolute; top: 100%; left: 0; z-index: 50; background: var(--ccab-card); border: 1px solid var(--ccab-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-2); min-width: 260px; max-height: 70vh; overflow-y: auto; padding: 8px; flex-direction: column; }
/* `display: flex` only when NOT [hidden] — the class selector above would
   otherwise outrank the browser's default `[hidden]{display:none}` and the
   panel (toggled via the `hidden` DOM property in main.js) would always
   render open regardless of its JS state. Pre-existing bug, caught testing
   live in a browser. */
.ccab-cat-menu-panel:not([hidden]) { display: flex; }
.ccab-cat-menu-panel a { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ccab-ink); font-size: 13.5px; font-weight: 600; }
.ccab-cat-menu-panel a:hover { background: var(--ccab-green-50); color: var(--ccab-primary); }

@media (max-width: 780px) {
  .ccab-nav { display: none; flex-direction: column; }
  .ccab-nav.is-open { display: flex; }
  .ccab-nav a { width: 100%; }
  .ccab-cat-menu-toggle span.ccab-cat-label { display: none; }
}

/* ==========================================================================
   3. HERO / PROMO ROTATOR
   ========================================================================== */
.ccab-hero-strip { max-width: var(--container); margin: 0 auto; padding: 18px clamp(16px,3vw,28px) 0; }
.ccab-promo-rotator {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(135deg, var(--ccab-primary), var(--ccab-green-800));
  color: #fff; min-height: 128px;
}
.ccab-promo-rotator::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px);
}
.ccab-promo-slide {
  position: relative; display: none; align-items: center; gap: 20px; padding: 22px 26px; flex-wrap: wrap;
}
.ccab-promo-slide.is-active { display: flex; }
.ccab-promo-copy { flex: 1 1 260px; min-width: 0; }
.ccab-promo-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; font-weight: 700; }
.ccab-promo-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.8vw, 28px); letter-spacing: -.7px; line-height: 1.15; margin: 0; }
.ccab-promo-text { font-size: 14.5px; opacity: .92; margin-top: 6px; }
.ccab-promo-actions { position: relative; display: flex; align-items: center; gap: 14px; }
.ccab-promo-dots { display: flex; gap: 7px; }
.ccab-promo-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: width .2s, background .2s; }
.ccab-promo-dots button.is-active { width: 22px; background: #fff; }

/* ==========================================================================
   3B. HOME: FLASH SALE
   ========================================================================== */
.ccab-flash-sale { background: linear-gradient(120deg, var(--ccab-red), var(--ccab-green-700)); border-radius: var(--radius-xl); padding: 20px clamp(16px, 3vw, 26px); color: #fff; }
.ccab-flash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ccab-flash-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2.4vw, 22px); }
.ccab-flash-countdown { display: flex; gap: 6px; }
.ccab-flash-unit { background: rgba(0,0,0,.22); border-radius: var(--radius-sm); padding: 6px 9px; text-align: center; min-width: 44px; }
.ccab-flash-unit b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.1; }
.ccab-flash-unit small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.ccab-flash-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ccab-flash-card { flex: 0 0 150px; background: #fff; color: var(--ccab-ink); border-radius: var(--radius-md); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.ccab-flash-media { height: 110px; border-radius: var(--radius-sm); overflow: hidden; background: var(--ccab-green-50); margin-bottom: 4px; }
.ccab-flash-media img { width: 100%; height: 100%; object-fit: cover; }
.ccab-flash-card strong { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccab-flash-price { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; }
.ccab-flash-price del { opacity: .5; font-weight: 500; font-size: 11px; margin-right: 4px; }
.ccab-flash-price ins { text-decoration: none; }
.ccab-flash-unit-label { font-size: 11px; color: var(--ccab-ink-faint); }

/* ==========================================================================
   4. HOME: HERO CARD GRID
   ========================================================================== */
.ccab-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.ccab-hero-card { border-radius: var(--radius-xl); overflow: hidden; min-height: 420px; display: flex; flex-direction: column; background: var(--ccab-green-800); }
.ccab-hero-media { height: 200px; flex-shrink: 0; background: linear-gradient(160deg, var(--ccab-green-650), var(--ccab-green-900)); position: relative; overflow: hidden; }
.ccab-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ccab-hero-body { flex: 1; padding: clamp(24px, 3.4vw, 38px); background: var(--ccab-green-800); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.ccab-hero-eyebrow { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-bottom: 12px; font-weight: 700; }
.ccab-hero-body h1 { color: #fff; font-size: clamp(28px, 4.4vw, 44px); max-width: 16ch; margin-bottom: 14px; text-wrap: pretty; }
.ccab-hero-body p { font-size: 16px; opacity: .92; max-width: 46ch; line-height: 1.6; }
.ccab-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

.ccab-side-stack { display: grid; gap: 16px; grid-auto-rows: min-content; }
.ccab-panel { border-radius: var(--radius-xl); border: 1px solid var(--ccab-border-soft); padding: 24px; background: #fff; }
.ccab-panel-flat { border-radius: var(--radius-xl); background: var(--ccab-cream-dark); padding: 24px; }
.ccab-arrival { display: flex; gap: 18px; align-items: center; }
.ccab-arrival-thumb { width: 92px; height: 92px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: var(--ccab-green-100); }
.ccab-arrival-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ccab-arrival-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ccab-gold-dark); font-weight: 800; margin-bottom: 6px; }
.ccab-arrival h3 { font-size: 18px; margin-bottom: 4px; }
.ccab-arrival p { margin: 0; font-size: 13.5px; color: var(--ccab-ink-soft); }

.ccab-steps { display: grid; gap: 12px; }
.ccab-step { display: flex; gap: 12px; align-items: baseline; }
.ccab-step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--ccab-green-100); color: var(--ccab-green-700); font-size: 12px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.ccab-step p { font-size: 14px; line-height: 1.55; color: var(--ccab-ink-soft); margin: 0; }
.ccab-pay-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ccab-pay-chip { background: #fff; color: var(--ccab-ink); border: 1px solid var(--ccab-border); border-radius: var(--radius-sm); padding: 8px 13px; font-size: 13px; font-weight: 700; }

/* ==========================================================================
   5. RAYONS (CATEGORIES) GRID
   ========================================================================== */
.ccab-rayons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 14px; }
.ccab-rayon-card { border: 1px solid var(--ccab-border); border-radius: 16px; padding: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; display: block; background: #fff; }
.ccab-rayon-card:hover { border-color: var(--ccab-primary); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.ccab-rayon-thumb { height: 110px; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: var(--ccab-green-50); display: grid; place-items: center; color: var(--ccab-green-600); }
.ccab-rayon-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ccab-rayon-card:hover .ccab-rayon-thumb img { transform: scale(1.08); }
.ccab-rayon-thumb svg { transition: transform .3s ease; }
.ccab-rayon-card:hover .ccab-rayon-thumb svg { transform: scale(1.1); }
.ccab-rayon-card strong { display: block; font-weight: 800; font-size: 14.5px; color: var(--ccab-ink); }
.ccab-rayon-card span { font-size: 12.5px; color: var(--ccab-ink-faint); margin-top: 3px; display: block; }

/* ==========================================================================
   6. OFFER BANNER CARDS
   ========================================================================== */
.ccab-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.ccab-offer-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 210px; display: flex; background: var(--ccab-green-800); color: #fff; }
.ccab-offer-card.is-warm { background: var(--ccab-gold-dark); }
.ccab-offer-media { position: absolute; inset: 0; opacity: .5; }
.ccab-offer-media img { width: 100%; height: 100%; object-fit: cover; }
.ccab-offer-body { position: relative; padding: 26px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(to right, rgba(30,30,32,.92), rgba(30,30,32,.35)); width: 100%; }
.is-warm .ccab-offer-body { background: linear-gradient(to right, rgba(74,52,16,.92), rgba(74,52,16,.32)); }
.ccab-offer-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .88; margin-bottom: 8px; font-weight: 700; }
.ccab-offer-body h3 { color: #fff; font-size: 23px; max-width: 20ch; margin-bottom: 6px; }
.ccab-offer-body p { opacity: .92; font-size: 14.5px; margin-bottom: 16px; }

/* ==========================================================================
   7. FRESH-OF-THE-DAY CARDS
   ========================================================================== */
.ccab-fresh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.ccab-fresh-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 250px; display: block; background: var(--ccab-green-800); }
.ccab-fresh-media { position: absolute; inset: 0; overflow: hidden; }
.ccab-fresh-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ccab-fresh-card:hover .ccab-fresh-media img { transform: scale(1.06); }
.ccab-fresh-caption { position: absolute; inset: auto 0 0; padding: 18px; background: linear-gradient(to top, rgba(26,26,28,.92), transparent); color: #fff; }
.ccab-fresh-caption strong { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; display: block; }
.ccab-fresh-caption span { font-size: 13px; opacity: .9; }

/* ==========================================================================
   8. PRODUCT CARDS / GRID (catalogue)
   ========================================================================== */
/* Sidebar + grid, à la place de la rangée de 31 chips qui poussait le
   catalogue plusieurs écrans plus bas. La sidebar passe au-dessus de la
   grille sur petit écran (voir media query plus bas). */
.ccab-shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
.ccab-shop-sidebar { position: sticky; top: calc(var(--header-h) + 16px); background: var(--ccab-card); border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); padding: 22px 20px; }
.ccab-shop-sidebar h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ccab-ink-faint); margin: 0 0 16px; }
.ccab-shop-cat-list { display: flex; flex-direction: column; }
.ccab-shop-cat-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 4px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ccab-ink-soft); border-bottom: 1px solid var(--ccab-border-soft); }
.ccab-shop-cat-list a:last-child { border-bottom: 0; }
.ccab-shop-cat-list a:hover { color: var(--ccab-primary); }
.ccab-shop-cat-list a.is-active { color: var(--ccab-primary); font-weight: 800; }
.ccab-shop-cat-list a span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ccab-shop-cat-list a span svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--ccab-ink-faint); }
.ccab-shop-cat-list a:hover span svg, .ccab-shop-cat-list a.is-active span svg { color: var(--ccab-primary); }
.ccab-shop-cat-list a em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ccab-ink-faint); flex-shrink: 0; }
.ccab-shop-cat-list a.is-active em { color: var(--ccab-primary); }

/* Page title as its own animated band, right above the toolbar/grid
   ("avant le contenu") instead of a plain inline heading. Plays once on
   load — not scroll-triggered like [data-reveal], since this sits above
   the fold and would already be in view by the time a scroll observer
   could fire. */
.ccab-shop-hero {
  background: linear-gradient(120deg, var(--ccab-green-50), var(--ccab-card));
  border: 1px solid var(--ccab-border); border-radius: var(--radius-lg);
  padding: 26px 28px; margin-bottom: 26px; overflow: hidden;
}
.ccab-shop-hero h1 {
  position: relative; display: inline-block; font-size: clamp(22px, 3vw, 30px); margin: 0; padding-bottom: 12px;
  animation: ccab-title-in .6s cubic-bezier(.2,.7,.3,1) both;
}
.ccab-shop-hero h1::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px; background: var(--ccab-primary); border-radius: 3px;
  animation: ccab-title-underline .6s .25s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes ccab-title-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ccab-title-underline { from { width: 0; opacity: 0; } to { width: 56px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ccab-shop-hero h1, .ccab-shop-hero h1::after { animation: none; }
}

.ccab-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-bottom: 22px; }

/* Brief dim while a rayon/pagination/sort change is being fetched via
   initShopAjaxNav() in main.js — the node this sits on gets replaced
   wholesale on success, so there's nothing to clean up on the happy path. */
.ccab-shop-wrap.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* Native <select> replaced with the theme's own look (border, radius,
   custom chevron) — it was rendering as a bare unstyled browser control,
   the only element on the page that didn't match the design system. */
.woocommerce-ordering { flex-shrink: 0; }
.woocommerce-ordering select {
  appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 36px 0 14px; border: 1px solid var(--ccab-border); border-radius: var(--radius-md);
  background: var(--ccab-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23535357' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 13.5px; font-weight: 600; color: var(--ccab-ink); cursor: pointer;
}
.woocommerce-ordering select:hover { border-color: var(--ccab-primary); }
.woocommerce-ordering select:focus-visible { outline: 2px solid var(--ccab-primary); outline-offset: 1px; }

/* Breadcrumb ("Accueil / Shop") — was plain unstyled body text sitting
   directly above the page title with no visual distinction. */
.woocommerce-breadcrumb { display: block; font-size: 12.5px; color: var(--ccab-ink-faint); margin: 0 0 10px; }
.woocommerce-breadcrumb a { color: var(--ccab-ink-faint); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--ccab-primary); }

/* Pagination — no rule existed at all before (nothing to catch it once
   the catalogue grows past one page of published products). */
.woocommerce-pagination { margin-top: 28px; }
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination .page-numbers li { display: contents; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px;
  border: 1px solid var(--ccab-border); border-radius: var(--radius-md); font-size: 13.5px; font-weight: 700; color: var(--ccab-ink-soft);
}
.woocommerce-pagination .page-numbers a:hover { border-color: var(--ccab-primary); color: var(--ccab-primary); }
.woocommerce-pagination .page-numbers span.current { background: var(--ccab-primary); border-color: var(--ccab-primary); color: #fff; }

@media (max-width: 860px) {
  /* min-width:0 is load-bearing here: a 1fr grid track otherwise still
     grows to fit its content's min-content size — the nowrap pill row
     below — which blew this out to ~3850px and made the whole page
     scroll horizontally instead of just this row. */
  .ccab-shop-layout { grid-template-columns: minmax(0, 1fr); }
  .ccab-shop-sidebar { position: static; min-width: 0; }
  .ccab-shop-cat-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: thin; padding-bottom: 4px; min-width: 0; }
  .ccab-shop-cat-list a { flex-shrink: 0; border: 1px solid var(--ccab-border); border-radius: 999px; padding: 8px 14px; }
  .ccab-shop-cat-list a.is-active { background: var(--ccab-primary); color: #fff; }
  .ccab-shop-cat-list a.is-active em { color: #fff; }
  .ccab-shop-cat-list a em { display: none; }
}

.ccab-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.ccab-product-card { position: relative; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; }
.ccab-product-card:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.ccab-product-media { position: relative; height: 160px; background: var(--ccab-green-50); overflow: hidden; }
.ccab-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ccab-product-card:hover .ccab-product-media img { transform: scale(1.06); }
.ccab-product-badge { position: absolute; top: 10px; left: 10px; }
.ccab-product-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ccab-product-cat { font-size: 11.5px; color: var(--ccab-ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.ccab-product-body h3 { font-size: 15.5px; margin: 0; }
.ccab-product-body h3 a { color: var(--ccab-ink); }
.ccab-product-unit { font-size: 12.5px; color: var(--ccab-ink-faint); }
.ccab-product-price-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.ccab-product-price { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ccab-ink); }
.ccab-product-price small { font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--ccab-ink-faint); }
.ccab-gros-note { font-size: 11px; color: var(--ccab-gold-dark); font-weight: 700; margin-top: 2px; }
.ccab-price-tbd { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ccab-ink-faint); font-style: italic; }
.ccab-add-btn { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--ccab-green-100); color: var(--ccab-orange-dark); display: grid; place-items: center; flex-shrink: 0; transition: background .15s, color .15s; }
.ccab-add-btn:hover { background: var(--ccab-primary); color: #fff; }

.ccab-empty { padding: 60px 20px; text-align: center; color: var(--ccab-ink-soft); }

/* ==========================================================================
   9. SINGLE PRODUCT
   ========================================================================== */
.ccab-product-single { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); padding: 28px 0 8px; }
@media (max-width: 860px) { .ccab-product-single { grid-template-columns: 1fr; } }
.ccab-product-gallery { border-radius: var(--radius-xl); overflow: hidden; background: var(--ccab-green-50); min-height: 320px; }
.ccab-product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.ccab-product-info .ccab-product-cat { margin-bottom: 8px; }
.ccab-product-info h1 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 6px; }
.ccab-product-info .ccab-product-unit { font-size: 14px; margin-bottom: 16px; display: block; }
.ccab-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ccab-price-block .ccab-product-price { font-size: 30px; }
.ccab-tier-table { width: 100%; border-collapse: collapse; margin: 18px 0; border: 1px solid var(--ccab-border); border-radius: var(--radius-md); overflow: hidden; }
.ccab-tier-table th, .ccab-tier-table td { padding: 10px 14px; font-size: 13.5px; text-align: left; border-bottom: 1px solid var(--ccab-border-soft); }
.ccab-tier-table th { background: var(--ccab-cream-dark); font-family: var(--font-display); font-weight: 700; }
.ccab-tier-table tr:last-child td { border-bottom: 0; }
.ccab-product-desc { color: var(--ccab-ink-soft); line-height: 1.65; margin: 14px 0 22px; }
.ccab-product-info form.cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ccab-related { margin-top: 46px; }

/* ==========================================================================
   10. GROS / DEMI-GROS PAGE
   ========================================================================== */
.ccab-gros-hero { border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--ccab-green-800), var(--ccab-green-900)); color: #fff; padding: clamp(28px, 4vw, 44px); margin-bottom: 30px; }
.ccab-gros-hero h1 { color: #fff; font-size: clamp(24px, 3.6vw, 34px); }
.ccab-gros-hero p { opacity: .9; max-width: 60ch; font-size: 15.5px; }
.ccab-table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
/* A quiet hint that there's more to the right — this table's columns
   don't fit a phone screen and the container scrolls horizontally on its
   own (see the max-width:640px on .ccab-price-table below), independent
   of the page itself, which never scrolls sideways. */
.ccab-table-scroll::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, rgba(18, 40, 31, .08));
  pointer-events: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.ccab-price-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ccab-price-table th, .ccab-price-table td { padding: 13px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--ccab-border-soft); }
.ccab-price-table thead th { background: var(--ccab-green-900); color: #fff; font-family: var(--font-display); position: sticky; top: 0; }
.ccab-price-table tbody tr:nth-child(even) { background: var(--ccab-cream); }
.ccab-price-table tbody tr:hover { background: var(--ccab-green-50); }
.ccab-price-table td.price { font-weight: 800; color: var(--ccab-ink); font-family: var(--font-display); }

/* ==========================================================================
   11. CONTACT / LIVRAISON PAGE
   ========================================================================== */
.ccab-promises-grid { border-radius: var(--radius-xl); background: var(--ccab-cream-dark); padding: clamp(24px, 3.4vw, 36px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.ccab-promise h3 { font-size: 17px; margin-bottom: 8px; }
.ccab-promise p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ccab-ink-soft); }
.ccab-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; margin: 30px 0; }
.ccab-contact-card h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--ccab-ink-faint); margin-bottom: 10px; }
.ccab-contact-card p, .ccab-contact-card a { display: block; font-size: 15.5px; color: var(--ccab-ink); margin-bottom: 4px; }
.ccab-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ccab-border); height: 320px; }
.ccab-map iframe { width: 100%; height: 100%; border: 0; }
.ccab-contact-form { display: grid; gap: 14px; max-width: 640px; }
.ccab-contact-form label { font-weight: 700; font-size: 13.5px; display: block; margin-bottom: 6px; }
.ccab-contact-form input, .ccab-contact-form textarea { width: 100%; border: 1px solid var(--ccab-border); border-radius: 10px; padding: 12px 14px; background: #fff; }
.ccab-form-notice { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.ccab-form-notice.success { background: var(--ccab-success-bg); color: var(--ccab-success-ink); }
.ccab-form-notice.error { background: var(--ccab-red-bg); color: var(--ccab-red); }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.ccab-footer { background: var(--ccab-green-900); color: #f0f0f0; }
.ccab-newsletter { padding: 32px clamp(16px,3vw,28px); border-bottom: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; align-items: center; }
.ccab-newsletter h2 { color: #fff; font-size: clamp(19px, 2.6vw, 25px); margin-bottom: 4px; }
.ccab-newsletter p { opacity: .75; font-size: 14.5px; margin: 0; }
.ccab-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ccab-newsletter-form input { flex: 1 1 200px; height: 50px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fdfdfb; padding: 0 16px; outline: none; min-width: 0; }
.ccab-newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.ccab-newsletter-msg { font-size: 13px; margin-top: 8px; opacity: .85; }

.ccab-footer-cols { padding: 34px clamp(16px,3vw,28px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 30px; }
.ccab-footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ccab-footer-brand .ccab-brand-mark { width: 42px; height: 42px; font-size: 12.5px; }
.ccab-footer-brand strong { font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: -.4px; color: #fff; }
.ccab-footer p.about { font-size: 14.5px; line-height: 1.65; opacity: .72; max-width: 34ch; margin: 0 0 14px; }
.ccab-footer-social { display: flex; gap: 8px; }
.ccab-footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; opacity: .85; }
.ccab-footer-social a:hover { background: var(--ccab-primary); opacity: 1; }
.ccab-footer h4 { color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ccab-footer-col { font-size: 14.5px; line-height: 1.9; opacity: .8; }
/* Wrapping pill tags rather than one rayon per line — a plain <br>-per-item
   list turned this single column into the tallest thing in the footer by
   far (especially on mobile, where every footer column stacks full-width
   and the empty Téléphone/Boutique columns next to it made the imbalance
   even more obvious). */
.ccab-footer-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ccab-footer-tags a { display: inline-flex; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; line-height: 1.3; opacity: .85; }
.ccab-footer-tags a:hover { opacity: 1; border-color: var(--ccab-primary); }
.ccab-footer-more { display: inline-block; margin-top: 10px; font-weight: 700; opacity: 1 !important; color: var(--ccab-primary) !important; }
.ccab-footer-more:hover { color: var(--ccab-gold) !important; }
.ccab-footer-col a, .ccab-footer-bottom a { color: inherit; }
.ccab-footer-col a:hover, .ccab-footer-bottom a:hover { color: var(--ccab-gold); opacity: 1; }
.ccab-footer-bottom { padding: 16px clamp(16px,3vw,28px) 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: space-between; font-size: 12.5px; opacity: .6; }

/* ==========================================================================
   13. FLOATING WHATSAPP + FAQ CHAT
   ========================================================================== */
.ccab-fab-stack { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ccab-fab-row { display: flex; gap: 12px; align-items: center; }
.ccab-help-btn { height: 54px; padding: 0 18px; border-radius: 28px; border: 0; background: var(--ccab-primary); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-3); display: flex; align-items: center; gap: 9px; }
.ccab-help-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: #79d69a; }
.ccab-wa-btn { width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-3); }
.ccab-wa-btn svg { width: 28px; height: 28px; }

.ccab-chat-panel { position: fixed; right: 18px; bottom: 90px; width: min(340px, calc(100vw - 36px)); max-height: 60vh; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); z-index: 46; display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--ccab-border); }
.ccab-chat-panel.is-open { display: flex; }
.ccab-chat-head { background: var(--ccab-primary); color: #fff; padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.ccab-chat-head button { background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; }
.ccab-chat-body { padding: 14px; display: grid; gap: 10px; overflow-y: auto; flex: 1; background: var(--ccab-cream); }
.ccab-chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; font-size: 13.5px; line-height: 1.5; background: #fff; border: 1px solid var(--ccab-border); justify-self: start; }
.ccab-chat-msg.me { background: var(--ccab-primary); color: #fff; border: 0; border-radius: 14px 14px 4px 14px; justify-self: end; }
.ccab-chat-quick { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--ccab-border-soft); background: #fff; }
.ccab-chat-quick button { border: 1px solid var(--ccab-border); background: var(--ccab-cream); border-radius: 10px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.ccab-chat-quick button:hover { border-color: var(--ccab-primary); color: var(--ccab-primary); }

/* ==========================================================================
   14. WOOCOMMERCE RESKIN
   ========================================================================== */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 22px; list-style: none; }
/* WooCommerce's own core CSS still puts a `content:" "; display:table`
   clearfix on ::before/::after (needed for its old float-based grid) —
   inside a CSS grid container that generates a real, empty, invisible
   grid item that claims the very first cell, leaving a blank slot before
   the first product. Not our clearfix to keep once the layout is Grid. */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
/* width/float reset: WooCommerce's own woocommerce-layout.css sizes grid
   items with a float+percentage-width layout (~22% per card) meant for a
   plain block/float grid. Since ul.products above is a CSS grid instead,
   that leftover percentage width shrank every card to ~22% of its grid
   track instead of filling it — pre-existing bug, caught testing live. */
.woocommerce ul.products li.product { display: flex; flex-direction: column; width: 100% !important; float: none !important; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; padding: 0 !important; margin: 0 !important; transition: box-shadow .15s, transform .15s; }
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product img { border-radius: 0; height: 160px; object-fit: cover; width: 100%; transition: transform .3s ease; }
.woocommerce ul.products li.product:hover img { transform: scale(1.06); }
/* .ccab-product-cat/-unit/-excerpt carry no padding of their own (they're
   also used inside .ccab-product-body, which already pads its children) —
   give them the same 16px horizontal gutter as the title here, or they sit
   flush against the card edge instead of lining up under it. */
.woocommerce ul.products li.product .ccab-product-cat { padding: 12px 16px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 2px 16px 0; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ccab-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce ul.products li.product .ccab-product-unit { padding: 0 16px; }
.woocommerce ul.products li.product .ccab-product-excerpt { padding: 4px 16px 0; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ccab-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce ul.products li.product .price { margin-top: auto; padding: 8px 16px 16px; font-family: var(--font-display); font-weight: 800; color: var(--ccab-ink); font-size: 16px; }
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 500; font-size: 13px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin: 0 16px 16px; width: calc(100% - 32px); border-radius: var(--radius-sm); background: var(--ccab-green-100); color: var(--ccab-orange-dark); font-weight: 700; padding: 10px; text-align: center; }
.woocommerce ul.products li.product .button:hover { background: var(--ccab-primary); color: #fff; }
.woocommerce span.onsale { background: var(--ccab-discount-bg); color: var(--ccab-discount-ink); border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 800; text-transform: uppercase; min-height: 0; min-width: 0; padding: 4px 8px; line-height: 1.6; top: 10px; left: 10px; right: auto; }

.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border: 1px solid var(--ccab-border); border-radius: 10px; padding: 8px 14px; }
.woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ccab-primary); color: #fff; border-color: var(--ccab-primary); }

.woocommerce div.product .woocommerce-tabs { margin-top: 40px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--ccab-border); padding-left: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border: 0; background: none; padding: 0 18px 12px 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { font-weight: 800; color: var(--ccab-primary); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: inherit; }

.woocommerce table.cart, .woocommerce-cart table.cart, .woocommerce table.shop_table { border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); overflow: hidden; border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { background: var(--ccab-cream-dark); font-family: var(--font-display); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--ccab-border-soft); }

/* Cart / order-review tables have 4-6 columns (thumbnail, name, price,
   quantity, subtotal, remove) that simply cannot fit a phone screen as a
   real table — WooCommerce's own cart template already tags every <td>
   with data-title="…" for exactly this situation, so below 700px each
   row becomes its own card with the column label shown inline instead
   of in a header row. */
@media (max-width: 700px) {
  .woocommerce table.cart, .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) {
    border: 0; border-radius: 0;
  }
  .woocommerce table.cart thead, .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) thead {
    display: none;
  }
  .woocommerce table.cart tr, .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) tr {
    display: block; border: 1px solid var(--ccab-border); border-radius: var(--radius-md); margin-bottom: 12px; padding: 6px 0;
  }
  .woocommerce table.cart td, .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100% !important; text-align: right; border-bottom: 1px solid var(--ccab-border-soft);
  }
  .woocommerce table.cart tr > td:last-child, .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) tr > td:last-child {
    border-bottom: 0;
  }
  .woocommerce table.cart td::before, .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) td::before {
    content: attr(data-title); font-weight: 700; font-size: 13px; color: var(--ccab-ink-soft); text-align: left; flex-shrink: 0;
  }
  .woocommerce table.cart td.product-thumbnail, .woocommerce table.cart td.product-remove {
    justify-content: flex-end;
  }
  /* !important: WooCommerce's real cart table carries both "cart" AND
     "shop_table" classes at once, so this exception and the general
     data-title label rule above can both match the same cell — and the
     label rule's :not() exclusions each add their argument's specificity
     (per spec), making it more specific than a plain ".product-remove"
     selector would be. !important sidesteps that race deliberately. */
  .woocommerce table.cart td.product-thumbnail::before, .woocommerce table.cart td.product-remove::before,
  .woocommerce table.shop_table:not(.ccab-tier-table):not(.ccab-price-table) td:empty::before { content: none !important; }
  .woocommerce table.cart td.product-thumbnail img { margin-left: auto; max-width: 64px; }
  .woocommerce table.cart td.actions { display: block; text-align: left; }
  .woocommerce table.cart td.actions::before { content: none !important; }
}
.woocommerce #payment { background: var(--ccab-cream-dark) !important; border-radius: var(--radius-lg); }
.woocommerce #payment div.payment_box { background: var(--ccab-green-50) !important; }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--ccab-green-50) !important; }
/* !important throughout: WooCommerce's own core CSS wraps its button
   selectors in :where(body:not(...)) for a couple of edge cases, but
   still combines them with a plain (non-:where) ".woocommerce button.
   button.alt"-style tail whose specificity ties ours — a tie WC's own
   stylesheet was winning (loads after ours), e.g. the single-product
   "Ajouter au panier" button rendering in WooCommerce's stock purple
   instead of the brand accent. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--ccab-primary) !important; color: #fff !important; border-radius: var(--radius-sm); font-weight: 700; border: 0; padding: 12px 22px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--ccab-orange-dark) !important; color: #fff !important; }
.woocommerce a.button.alt, .woocommerce #place_order { background: var(--ccab-accent) !important; color: var(--ccab-gold-ink) !important; }
.woocommerce a.button.alt:hover, .woocommerce #place_order:hover { background: var(--ccab-gold-dark) !important; color: #fff !important; }
.woocommerce .quantity .qty { border: 1px solid var(--ccab-border); border-radius: var(--radius-sm); height: 44px; width: 64px; text-align: center; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { border-top-color: var(--ccab-primary) !important; border-radius: var(--radius-sm); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--ccab-primary) !important; }
.select2-container .select2-selection--single { height: 46px !important; border-radius: var(--radius-sm) !important; border-color: var(--ccab-border) !important; padding: 6px 0; }
.woocommerce-checkout #order_review { background: var(--ccab-cream-dark); border-radius: var(--radius-lg); padding: 22px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: 1px solid var(--ccab-border); border-radius: 10px; padding: 12px 14px; }

/* ==========================================================================
   14B. MY ACCOUNT (customer dashboard)
   Styled entirely via CSS against WooCommerce's own stable class names —
   no myaccount/*.php template overrides, so a WooCommerce update can't
   silently break this the way it could a copied-and-forked template.
   Sidebar nav uses float + a BFC on the content pane (not CSS grid on the
   shared .woocommerce parent) specifically because that same parent, when
   the visitor is logged out, wraps only the login/register form with no
   nav at all — a grid-with-columns there would squeeze that single child
   into a narrow first column instead of leaving it full width.
   ========================================================================== */
.woocommerce-account .woocommerce { padding: 30px 0 60px; }
.woocommerce-account .woocommerce::after { content: ''; display: table; clear: both; }

.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 230px; margin-right: 24px; }
.woocommerce-account .woocommerce-MyAccount-content { overflow: hidden; background: #fff; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); padding: 26px clamp(18px, 3vw, 32px); }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 19px; margin-bottom: 14px; }
@media (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; margin: 0 0 20px; }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ccab-border-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 13px 18px; font-weight: 600; font-size: 14px; color: var(--ccab-ink-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--ccab-green-50); color: var(--ccab-primary); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ccab-primary); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ccab-red); }

/* Order status pills — color-coded by the same status classes WooCommerce
   already outputs, no extra markup needed. */
.woocommerce-account mark.order-status { background: var(--ccab-cream-dark); color: var(--ccab-ink-soft); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; display: inline-block; }
.woocommerce-account mark.order-status.status-completed, .woocommerce-account mark.order-status.status-processing { background: var(--ccab-success-bg); color: var(--ccab-success-ink); }
.woocommerce-account mark.order-status.status-on-hold, .woocommerce-account mark.order-status.status-pending { background: var(--ccab-green-100); color: var(--ccab-orange-dark); }
.woocommerce-account mark.order-status.status-cancelled, .woocommerce-account mark.order-status.status-failed, .woocommerce-account mark.order-status.status-refunded { background: var(--ccab-red-bg); color: var(--ccab-red); }

/* Orders table: already gets the mobile stacked-card treatment for free
   (see the .woocommerce table.shop_table:not(...) rules above — the
   orders table also carries the "shop_table" class), this just polishes
   the desktop table view to match the rest of the site. */
.woocommerce-account table.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-account table.woocommerce-orders-table thead th { background: var(--ccab-cream-dark); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; padding: 12px 14px; text-align: left; }
.woocommerce-account table.woocommerce-orders-table tbody td { padding: 14px; border-bottom: 1px solid var(--ccab-border-soft); font-size: 14px; }
.woocommerce-account table.woocommerce-orders-table tbody tr:hover { background: var(--ccab-green-50); }
.woocommerce-account table.woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }

/* Addresses (two cards: billing/shipping). */
.woocommerce-account .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: 20px; }
.woocommerce-account .woocommerce-Address { flex: 1 1 280px; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); padding: 20px; }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.woocommerce-account .woocommerce-Address-title h3 { font-size: 15px; margin: 0; }
.woocommerce-account address { font-style: normal; line-height: 1.7; color: var(--ccab-ink-soft); }

/* Account details / address edit forms. */
.woocommerce-account .woocommerce-EditAccountForm label, .woocommerce-account .woocommerce-address-fields label { font-weight: 600; font-size: 13px; color: var(--ccab-ink-soft); margin-bottom: 4px; display: block; }
.woocommerce-account .woocommerce-EditAccountForm .form-row, .woocommerce-account .woocommerce-address-fields .form-row { margin-bottom: 16px; }
.woocommerce-account .woocommerce-EditAccountForm fieldset { border: 1px solid var(--ccab-border); border-radius: var(--radius-md); padding: 16px; margin-top: 10px; }
.woocommerce-account .woocommerce-EditAccountForm legend { font-weight: 700; padding: 0 8px; }

/* Logged-out view: login + register side by side, replacing the bare
   two-column table layout WooCommerce falls back to without theme CSS. */
.woocommerce-account #customer_login { display: flex; flex-wrap: wrap; gap: 24px; max-width: 900px; margin: 10px auto 60px; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { flex: 1 1 320px; background: #fff; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); padding: 26px; }
.woocommerce-account .u-column1 h2, .woocommerce-account .u-column2 h2 { font-size: 19px; margin-bottom: 16px; }
.woocommerce-account .woocommerce-form-login .form-row label, .woocommerce-account .woocommerce-form-register .form-row label { font-weight: 600; font-size: 13px; color: var(--ccab-ink-soft); margin-bottom: 4px; display: block; }
.woocommerce-account .woocommerce-form-login .form-row input, .woocommerce-account .woocommerce-form-register .form-row input { width: 100%; }
.woocommerce-account .woocommerce-form-login-toggle, .woocommerce-account .lost_password { font-size: 13px; }

/* Single order view (/mon-compte/voir-commande/…) — same nav+content
   shell as the rest of My Account, so it inherits the sidebar/card
   styling above automatically; this just covers its own inner tables. */
.woocommerce-account .woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0 0 20px; }
.woocommerce-account .woocommerce-order-overview li { background: var(--ccab-cream-dark); border-radius: var(--radius-md); padding: 12px 16px; font-size: 13px; flex: 1 1 160px; }
.woocommerce-account .woocommerce-order-overview li strong { display: block; font-family: var(--font-display); font-size: 15px; margin-top: 2px; }
.woocommerce-account table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.woocommerce-account table.woocommerce-table--order-details th, .woocommerce-account table.woocommerce-table--order-details td { padding: 12px 14px; border-bottom: 1px solid var(--ccab-border-soft); text-align: left; font-size: 14px; }
.woocommerce-account table.woocommerce-table--order-details tfoot th { font-weight: 700; }
.woocommerce-account .woocommerce-customer-details { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.woocommerce-account .woocommerce-customer-details address, .woocommerce-account .woocommerce-customer-details > div { flex: 1 1 260px; border: 1px solid var(--ccab-border); border-radius: var(--radius-md); padding: 16px; }

/* Order confirmation ("thank you") banner at the end of checkout. */
.woocommerce-thankyou-order-received { background: var(--ccab-success-bg); color: var(--ccab-success-ink); border-radius: var(--radius-lg); padding: 18px 22px; font-weight: 600; margin-bottom: 20px; display: block; }

/* Dashboard quick-links (inc/woocommerce.php, woocommerce_account_dashboard). */
.ccab-account-quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin: 20px 0 4px; }
.ccab-account-quicklink { display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px 14px; border: 1px solid var(--ccab-border); border-radius: var(--radius-lg); font-weight: 700; font-size: 13.5px; color: var(--ccab-ink); background: var(--ccab-cream); }
.ccab-account-quicklink:hover { border-color: var(--ccab-primary); color: var(--ccab-primary); }

/* ==========================================================================
   15. GENERIC PAGE / SINGLE / COMMENTS
   ========================================================================== */
.ccab-page-hero { padding: 34px 0 10px; }
.ccab-page-hero h1 {
  position: relative; display: inline-block; font-size: clamp(26px, 3.6vw, 36px); padding-bottom: 12px;
  animation: ccab-title-in .6s cubic-bezier(.2,.7,.3,1) both;
}
.ccab-page-hero h1::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px; background: var(--ccab-primary); border-radius: 3px;
  animation: ccab-title-underline .6s .25s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .ccab-page-hero h1, .ccab-page-hero h1::after { animation: none; }
}
.entry-content { line-height: 1.7; }
.entry-content img { border-radius: var(--radius-md); }
/* The base reset (section 1) sets ul{list-style:none} for UI components
   like the nav and footer columns — restore normal bulleted/numbered
   lists inside actual page and post content, where they mean something. */
.entry-content ul { list-style: disc; margin: 0 0 1.2em 1.4em; padding: 0; }
.entry-content ol { list-style: decimal; margin: 0 0 1.2em 1.4em; padding: 0; }
.entry-content li { margin-bottom: .4em; }
.entry-content li > ul, .entry-content li > ol { margin-top: .4em; margin-bottom: 0; }

/* ==========================================================================
   16. SCROLL REVEAL
   Applied by assets/js/main.js to top-level section blocks; if JS never
   runs the .ccab-reveal rule below still renders content at full opacity
   (no [data-reveal] attribute is added without JS), so nothing is ever
   hidden without a script to reveal it.
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
/* !important: observed live (mobile viewport, "Nos rayons" section)
   staying stuck at opacity:0 — is-visible was added by the
   IntersectionObserver callback and .matches() confirmed the element
   matched this exact selector, yet the un-!important rule still lost to
   the bare [data-reveal] rule above for reasons that didn't reproduce in
   an isolated test element. Content that can permanently vanish is a far
   worse failure than losing the fade-in, so force the win rather than
   leave the mechanism fragile. */
[data-reveal].is-visible { opacity: 1 !important; transform: none !important; }
/* Third-line defense: past the point content has clearly had time to
   reveal (10s of any transition duration), stop taking opacity's word
   for it and remove the hidden state outright. */
[data-reveal] { animation: ccab-reveal-fallback 0s 4s forwards; }
@keyframes ccab-reveal-fallback { to { opacity: 1; transform: none; } }

/* ==========================================================================
   17. MOBILE STICKY CART BAR
   ========================================================================== */
.ccab-mobile-cart-bar { display: none; }
@media (max-width: 640px) {
  .ccab-mobile-cart-bar.has-items {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ccab-green-900); color: #fff; box-shadow: var(--shadow-3);
  }
  .ccab-mobile-cart-bar strong { font-family: var(--font-display); font-size: 14.5px; }
  .ccab-mobile-cart-bar a { height: 40px; padding: 0 18px; border-radius: 10px; background: var(--ccab-accent); color: var(--ccab-gold-ink); font-weight: 700; display: inline-flex; align-items: center; }
  /* Leave room so the sticky bar never covers the FAB stack behind it. */
  .ccab-mobile-cart-bar.has-items ~ .ccab-fab-stack { bottom: 84px; }
}

/* ==========================================================================
   18. RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 640px) {
  .ccab-topbar-msg span:last-child { display: none; }
  .ccab-header { gap: 10px; }
  .ccab-search { order: 3; flex-basis: 100%; }
  .ccab-cart-count { min-width: 20px; }
}

/* A handful of buttons carry long labels ("Demander un devis WhatsApp",
   "Ouvrir un compte via WhatsApp") that are wider than very narrow phones
   (~320px) even alone on their own line. Letting them wrap onto two lines
   there is far better than a horizontally-scrolling page. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; height: auto; min-height: 48px; padding-block: 10px; }
}