/* ============================================================================
   CBDCO — RESPONSIVE LAYER
   Couche dédiée chargée APRÈS main.css/woocommerce/reviews/etc.
   Centralise toutes les règles de responsive, touch-device, a11y mobile.
   Breakpoints : 360 / 480 / 640 / 768 / 900 / 1024 / 1280 / 1440
   ============================================================================ */

/* ====================================================================
   0. BASE — sanity, no-overflow, fluid media, safe areas
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, picture, svg, canvas { max-width: 100%; height: auto; display: block; }
img[width][height], video[width][height] { height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* iOS safe areas (notch / home bar) */
@supports (padding: env(safe-area-inset-bottom)) {
	body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ====================================================================
   1. TYPOGRAPHIE FLUIDE — clamp() pour scaling automatique
   ==================================================================== */
:root {
	--cbdco-fs-h1: clamp(28px, 4.2vw, 35px);
	--cbdco-fs-h2: clamp(22px, 3.2vw, 34px);
	--cbdco-fs-h3: clamp(18px, 2.4vw, 24px);
	--cbdco-fs-h4: clamp(16px, 2vw, 20px);
	--cbdco-fs-body: clamp(14.5px, 1.4vw, 16px);
	--cbdco-fs-small: clamp(12px, 1.1vw, 13.5px);
	--cbdco-pad-section-y: clamp(40px, 6vw, 96px);
	--cbdco-pad-section-x: clamp(16px, 4vw, 48px);
}
/* Typographie fluide : ON N'APPLIQUE QU'AUX TITRES DE PAGE/SECTION,
   pas aux h3/h4 utilitaires (widgets sidebar, cards produit, footers, etc.)
   qui ont des tailles spécifiques bien plus petites. */
.entry-title,
.page-title,
.page-hero h1,
.cbdco-static__hero h1,
.woocommerce-products-header__title,
.product_title,
.cbdco-error-page__title { font-size: var(--cbdco-fs-h1); line-height: 1.15; }
.hp-hero__title, .hero__title { font-size: clamp(28px, 5vw, 56px); line-height: 1.1; }
section.cbdco-section h2,
.cbdco-static__content > h2 { font-size: var(--cbdco-fs-h2); line-height: 1.2; }

/* ====================================================================
   2. TOUCH DEVICES — désactive hover, taille tap, font-size input mobile
   ==================================================================== */

/* Hover effects uniquement sur devices avec vrai survol (souris) */
@media (hover: none) {
	a:hover, button:hover, .btn:hover { transform: none !important; }
	*:hover { transition-duration: 0s !important; }
}

/* Tap targets minimum 44x44px (Apple/Google guidelines) */
@media (max-width: 768px) {
	button, .btn, .button, a.button, input[type="submit"], input[type="button"],
	.cbdco-rev-helpful, .cbdco-rev-filter, .menu-toggle, .header-action,
	.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
		min-height: 44px;
	}

	/* Inputs : 16px minimum sur mobile sinon iOS zoom auto sur focus.
	   On force la valeur via font-size pour ÉVITER ce zoom. */
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="password"], input[type="search"], input[type="url"], input[type="date"],
	textarea, select {
		font-size: 16px !important;
	}
}

/* ====================================================================
   3. TOPBAR + HEADER — sticky propre, mobile compact
   ==================================================================== */
.topbar { padding-left: 16px; padding-right: 16px; }
.topbar__inner { gap: 12px; flex-wrap: wrap; }

@media (max-width: 768px) {
	.topbar__list--desktop, .topbar__sep { display: none !important; }
	.topbar__mobile {
		display: block !important;
		text-align: center;
		width: 100%;
		line-height: 1.35;
	}
	.topbar { font-size: 14px; padding: 7px 14px; min-height: 36px; }
	.topbar__cta { font-size: 12px; padding: 4px 10px; }
}

.site-header__top { padding: 10px 16px; }
.site-header__brand .display { font-size: clamp(18px, 4vw, 26px); }

@media (max-width: 1024px) {
	/* Cache TOUTE la nav (et son padding/border-top hérité de --centered)
	   par défaut sur mobile — sinon on a une bande vide moche sous le header. */
	.main-nav, .main-nav--centered {
		display: none !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; position: relative; z-index: 10000; }
	/* Quand le drawer mobile est ouvert, on cache le hamburger : la croix du
	   drawer (.main-nav__close) suffit pour fermer — sinon le hamburger reste
	   visible sous/à côté du drawer (z-index, position). */
	body.cbdco-nav-open .menu-toggle { display: none !important; }
}
@media (min-width: 1025px) {
	.menu-toggle { display: none !important; }
}

/* Header sticky sur scroll desktop ET mobile */
.site-header.is-sticky { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Bloc "Offres du moment" — réservé au drawer mobile, masqué partout par défaut.
   Les overrides d'affichage (drawer ouvert) sont dans le bloc @media ci-dessous. */
.cbdco-mobile-offers { display: none; }

/* ====================================================================
   4. MOBILE NAV DRAWER — drawer plein écran, accordéon pro
   ==================================================================== */
@media (max-width: 1024px) {
	/* Icône "Mon compte" du header masquée — déplacée dans le foot du drawer mobile. */
	.header-action--account { display: none !important; }

	/* === Drawer — fond solide neutre (charte site) === */
	.main-nav.is-open {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		inset: 0;
		width: 100%; max-width: 100%;
		background: var(--bg-0, #0f0f0f);
		z-index: 9999;
		padding: 0 !important;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
		border: 0 !important;
	}
	/* Head reste fixé en haut */
	.main-nav.is-open .main-nav__head {
		flex: 0 0 auto;
	}
	/* La liste prend l'espace et scrolle */
	.main-nav.is-open > .main-nav__list,
	.main-nav.is-open .cbdco-mobile-offers {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Foot épinglé en bas */
	.main-nav.is-open .main-nav__foot {
		flex: 0 0 auto;
	}

	/* Le titre "Navigation" et le bouton close sont maintenant rendus en HTML
	   réel via .main-nav__head + .main-nav__close (header.php) avec un look
	   matchant le panier (.cart-drawer__head). L'ancien ::before doublonnait. */

	/* ============================================================
	   HARMONISATION DU MENU MOBILE
	   - Hiérarchie respectée : niveau 1 = label de section (uppercase,
	     letter-spacing) ; niveau 2 = item navigable (sentence-case, plus doux)
	   - Paddings horizontaux unifiés : 28px partout (alignement vertical)
	   - Dividers blancs ultra-subtils sur tous les items (cohérence)
	   - États active/expanded utilisent la même palette : bg gold-tinted +
	     liseré gauche gold 3px (inchangé sur les 2 niveaux)
	   ============================================================ */

	/* Conteneur liste niveau 1 */
	.main-nav.is-open .main-nav__list {
		display: block !important;
		max-width: 100% !important;
		padding: 8px 0 5px !important;
		margin: 0 !important;
		font-family: var(--font-display, 'Inter', sans-serif);
	}
	.main-nav.is-open .main-nav__list > li {
		width: 100% !important;
		position: static !important;
		border-bottom: 1px solid rgba(255,255,255,0.05) !important;
		border-image: none !important;
	}
	.main-nav.is-open .main-nav__list > li:last-child { border-bottom: 0 !important; }

	/* === LIEN NIVEAU 1 (sections) — UPPERCASE letter-spaced 14px === */
	.main-nav.is-open .main-nav__list > li > a,
	.main-nav.is-open .main-nav__list > li > a:hover,
	.main-nav.is-open .main-nav__list > .current-menu-item > a {
		display: flex !important;
		align-items: center;
		padding: 16px 28px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.1em !important;
		min-height: 54px;
		color: var(--text, #f5f5f5) !important;
		text-decoration: none;
		background: transparent;
		-webkit-text-fill-color: var(--text, #f5f5f5) !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		transition: background .2s ease, color .2s ease, box-shadow .2s ease;
	}
	.main-nav.is-open .main-nav__list > li > a > .menu-item__title {
		color: inherit !important;
		-webkit-text-fill-color: inherit !important;
		background: transparent !important;
		font-family: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		letter-spacing: inherit !important;
		text-transform: inherit !important;
	}
	.main-nav.is-open .main-nav__list > li > a:active {
		background: rgba(212,168,75,0.06) !important;
		color: var(--gold-soft, #f0d28a) !important;
		-webkit-text-fill-color: var(--gold-soft, #f0d28a) !important;
	}

	/* Chevron — fin blanc sur mobile, rotate fluide à l'ouverture.
	   border-color !important pour battre tout reliquat de règle dorée. */
	.main-nav.is-open .main-nav__list .menu-item-has-children > a::after {
		content: "" !important;
		display: inline-block !important;
		width: 8px; height: 8px;
		margin-left: auto !important;
		border: 0 !important;
		border-right: 1.5px solid #fff !important;
		border-bottom: 1.5px solid #fff !important;
		border-color: #fff !important;
		transform: rotate(45deg) !important;
		transform-origin: 70% 70%;
		transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .2s, border-color .2s;
		background: transparent !important;
		background-image: none !important;
		-webkit-text-fill-color: transparent !important;
		color: transparent !important;
		position: relative;
		top: -2px;
		opacity: 0.85;
	}
	.main-nav.is-open .main-nav__list .menu-item-has-children.is-expanded > a::after {
		transform: rotate(225deg) !important;
		top: 1px;
		opacity: 1;
		border-color: #fff !important;
	}
	/* Les items DANS un sous-menu (niveau 2+) ne doivent PAS avoir le chevron
	   du niveau 1 — seulement celui à l'intérieur de .menu-item__title (level 2). */
	.main-nav.is-open .sub-menu .menu-item-has-children > a::after {
		content: none !important;
		display: none !important;
		border: 0 !important;
		width: 0 !important;
		height: 0 !important;
	}
	/* État ouvert : même langage que :active (cohérence) */
	.main-nav.is-open .main-nav__list .menu-item-has-children.is-expanded > a {
		color: var(--gold-soft, #f0d28a) !important;
		-webkit-text-fill-color: var(--gold-soft, #f0d28a) !important;
		background: linear-gradient(90deg, rgba(212,168,75,0.1), rgba(212,168,75,0.02) 60%, transparent) !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		box-shadow: inset 3px 0 0 var(--gold, #d4a84b);
	}
	.main-nav.is-open .main-nav__list .menu-item-has-children.is-expanded > a > .menu-item__title {
		color: var(--gold-soft, #f0d28a) !important;
		-webkit-text-fill-color: var(--gold-soft, #f0d28a) !important;
	}

	/* === SUB-MENU : accordéon, fermé par défaut === */
	.main-nav.is-open .sub-menu {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		background: rgba(0,0,0,0.18) !important;
		border: 0 !important;
		box-shadow: none !important;
		max-height: 0;
		overflow: hidden;
		padding: 0 !important;
		transition: max-height .35s cubic-bezier(.2,.8,.25,1), padding .25s ease;
	}
	.main-nav.is-open .menu-item-has-children.is-expanded > .sub-menu {
		max-height: 1400px;
		padding: 4px 0 8px !important;
	}
	.main-nav.is-open .sub-menu::before { display: none !important; }
	.main-nav.is-open .sub-menu li {
		display: block !important;
		width: 100% !important;
		border-bottom: 1px solid rgba(255,255,255,0.04);
	}
	.main-nav.is-open .sub-menu li:last-child { border-bottom: 0; }

	/* === LIEN NIVEAU 2 (items navigables) — sentence-case 13.5px === */
	.main-nav.is-open .sub-menu a {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 2px !important;
		padding: 12px 28px !important;
		color: var(--text, #f5f5f5) !important;
		-webkit-text-fill-color: var(--text, #f5f5f5) !important;
		min-height: 50px;
		border-radius: 0 !important;
		text-align: left !important;
		background: transparent !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		transition: background .15s ease, box-shadow .15s ease;
	}
	.main-nav.is-open .sub-menu a::before { content: none !important; display: none !important; }
	/* Même langage active que niveau 1 : bg gold + liseré gauche 3px */
	.main-nav.is-open .sub-menu a:active {
		background: rgba(212,168,75,0.06) !important;
		box-shadow: inset 3px 0 0 var(--gold, #d4a84b);
	}
	.main-nav.is-open .sub-menu .menu-item__title {
		font-family: var(--font-display, 'Inter', sans-serif);
		font-size: 13.5px !important;
		font-weight: 500 !important;
		color: var(--text, #f5f5f5) !important;
		-webkit-text-fill-color: var(--text, #f5f5f5) !important;
		background: transparent !important;
		letter-spacing: 0.01em;
		line-height: 1.3;
		text-transform: none !important;
	}
	/* Chevron du sub-menu (niveau 2) sur mobile : force le blanc, override
	   tout reliquat de la règle desktop avec dégradé doré. */
	.main-nav.is-open .sub-menu .menu-item-has-children > a .menu-item__title::after {
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		background: none !important;
		margin-left: auto !important;
	}
	/* Title niveau 2 prend toute la largeur pour pousser le chevron à droite,
	   aligné verticalement avec le chevron niveau 1 et la croix de fermeture. */
	.main-nav.is-open .sub-menu .menu-item-has-children > a .menu-item__title {
		display: flex !important;
		width: 100% !important;
		align-items: center;
		justify-content: space-between;
	}
	.main-nav.is-open .sub-menu .menu-item-has-children > a {
		width: 100% !important;
	}
	.main-nav.is-open .sub-menu .menu-item__desc {
		display: block !important;
		font-family: var(--font-body, 'Inter', sans-serif);
		font-size: 12px !important;
		font-weight: 400 !important;
		color: var(--text, #f5f5f5) !important;
		-webkit-text-fill-color: var(--text, #f5f5f5) !important;
		letter-spacing: 0 !important;
		line-height: 1.4;
		text-transform: none !important;
		margin-top: 1px;
		opacity: 0.6;
	}

	/* === BLOC "OFFRES DU MOMENT" (drawer mobile uniquement) === */
	/* Visible uniquement quand la nav est en mode drawer (is-open) */
	.cbdco-mobile-offers { display: none; }
	.main-nav.is-open .cbdco-mobile-offers {
		display: block;
		margin-top: 4px;
		padding: 0 0 24px;
		border-top: 0;
	}
	/* Titre du bloc — barre identique au header "Navigation" du drawer (fond + logo). */
	.cbdco-mobile-offers__title {
		display: block;
		margin: 0 0 12px;
		padding: 16px 20px 14px 64px;
		font-family: var(--font-display, 'Inter', sans-serif);
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--text, #f5f5f5);
		background:
			var(--cbdco-mobile-logo) 22px 50% / 30px 30px no-repeat,
			var(--bg-1, #1a1a1a);
	}
	.cbdco-mobile-offers__list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0 20px;
	}
	.cbdco-mobile-offer {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 14px;
		background: linear-gradient(135deg, rgba(212,168,75,0.08), rgba(212,168,75,0.02));
		border: 1px solid rgba(212,168,75,0.18);
		border-radius: 12px;
		text-decoration: none !important;
		color: var(--text, #f5f5f5) !important;
		-webkit-text-fill-color: var(--text, #f5f5f5) !important;
		transition: border-color .2s ease, background .2s ease, transform .15s ease;
		min-height: 72px;
	}
	.cbdco-mobile-offer:active {
		border-color: var(--gold-soft, #f0d28a);
		background: linear-gradient(135deg, rgba(212,168,75,0.16), rgba(212,168,75,0.06));
		transform: scale(0.99);
	}
	.cbdco-mobile-offer__media {
		flex: 0 0 56px;
		width: 56px; height: 56px;
		border-radius: 10px;
		overflow: hidden;
		background: rgba(0,0,0,0.4);
		border: 1px solid rgba(212,168,75,0.18);
	}
	.cbdco-mobile-offer__media img {
		width: 100%; height: 100%; object-fit: cover; display: block;
	}
	.cbdco-mobile-offer__body {
		flex: 1 1 auto;
		min-width: 0;
		display: flex; flex-direction: column; gap: 2px;
	}
	.cbdco-mobile-offer__title {
		font-family: var(--font-display, 'Inter', sans-serif);
		font-size: 14px;
		font-weight: 600;
		color: var(--text, #f5f5f5);
		line-height: 1.25;
		text-transform: none;
		letter-spacing: 0.01em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.cbdco-mobile-offer__sub {
		font-size: 12.5px;
		font-weight: 400;
		color: var(--text, #f5f5f5);
		opacity: 0.65;
		line-height: 1.35;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.cbdco-mobile-offer__chev {
		flex: 0 0 14px;
		color: var(--gold-soft, #f0d28a);
		opacity: 0.7;
	}

	/* Body lock — pas de z-index sur les parents du menu-toggle, sinon ça
	   crée un contexte d'empilement qui piège la croix derrière le drawer
	   (z-index local plafonné par le parent). Le drawer est fixed inset:0
	   donc il couvre déjà naturellement le header en dessous. */
	body.cbdco-nav-open { overflow: hidden; height: 100vh; height: 100dvh; }

	/* Bouton close : maintenant rendu en HTML réel (.main-nav__close) dans
	   le header du drawer mobile. Le menu-toggle reste caché quand le drawer
	   est ouvert (règle dans main.css : body.cbdco-nav-open .menu-toggle). */
}

/* ====================================================================
   5. FOOTER — colonnes proprement empilées
   Padding latéral géré par .site-footer (var --container-px), pas ici.
   ==================================================================== */
@media (max-width: 1024px) {
	.site-footer__inner { gap: 28px; padding: 0; }
	.footer-cta { padding: 36px 20px; }
	.footer-cta__title { font-size: clamp(20px, 4vw, 28px); }
}
@media (max-width: 600px) {
	.site-footer__inner { padding: 0; }
	.footer-cta__form { flex-direction: column; gap: 8px; }
	.footer-cta__form input, .footer-cta__form button { width: 100%; }
	.site-footer__legal { flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
	.site-footer__bottom { flex-direction: column; gap: 8px; text-align: center; padding: 0; }
}

/* ====================================================================
   6. HOMEPAGE — sections aérées, jamais collées au bord
   ==================================================================== */
.hero, .lead-magnet, .value-props, .blog-teasers, .range-grid, .footer-cta {
	padding-left: max(16px, var(--cbdco-pad-section-x, 16px));
	padding-right: max(16px, var(--cbdco-pad-section-x, 16px));
}
@media (max-width: 768px) {
	.hp-hero__title, .hero__title { font-size: clamp(26px, 6vw, 40px); line-height: 1.15; }
	.hp-hero__sub, .hero__sub { font-size: clamp(14px, 3vw, 17px); }
	.hp-hero__ctas, .hero__ctas { flex-direction: column; gap: 10px; align-items: stretch; }
	.hp-hero__ctas .btn, .hero__ctas .btn { width: 100%; justify-content: center; }
}

/* Slider home : flèches plus discrètes en mobile, indicateurs visibles */
@media (max-width: 768px) {
	.swiper-button-next, .swiper-button-prev { width: 32px !important; height: 32px !important; }
	.swiper-pagination-bullet { width: 8px !important; height: 8px !important; }
}

/* ====================================================================
   7. SHOP / ARCHIVES PRODUIT — grille adaptative + sidebar collapsible
   ==================================================================== */
.woocommerce ul.products, ul.products { gap: 16px; }
@media (max-width: 1280px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 360px)  { .woocommerce ul.products, ul.products { grid-template-columns: 1fr; } }

/* Note : font-size du titre produit géré dans main.css (22px) — on n'écrase
   plus ici, pour que la home et les catégories aient la même taille. */
.product__price, .price { font-size: clamp(14px, 1.8vw, 16px); }

/* Sidebar shop : collapsible inline en haut sur mobile/tablette — règles dans
   main.css. L'ancienne implémentation drawer fixed a été retirée car elle
   forçait height: 100vh sur la sidebar, créant un grand vide noir entre
   le bouton "FILTRES" et la grille produits. */

/* ====================================================================
   8. SINGLE PRODUCT — layout 2col → 1col, gallery propre, tabs
   ==================================================================== */
@media (max-width: 1023px) {
	.woocommerce div.product, .product__layout, .single-product__layout {
		display: block;
	}
	.woocommerce div.product .product-gallery,
	.woocommerce div.product div.images,
	.product__gallery { width: 100%; max-width: 100%; margin: 0 0 24px; }
	.woocommerce div.product .summary,
	.product__summary { width: 100%; max-width: 100%; }
}
@media (max-width: 768px) {
	.product__title, .single-product .product_title { font-size: clamp(22px, 5vw, 30px); }
	.woocommerce div.product .quantity { width: 100%; }
	.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; min-height: 50px; font-size: 16px; }
	.woocommerce div.product form.cart { gap: 10px; }
	.product__meta { flex-direction: column; gap: 6px; }

	/* Onglets WC : passage en accordéon visuel */
	.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; border: 0; }
	.woocommerce-tabs ul.tabs li { width: auto; min-width: 0; padding: 0; }
	.woocommerce-tabs ul.tabs li a { padding: 10px 14px; font-size: 13.5px; }
	.woocommerce-tabs .panel { padding: 16px 0 !important; }
}

/* Galerie produit : image principale propre, miniatures swipables */
.product__gallery img, .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 600px) {
	.flex-control-thumbs li, .product__gallery-thumbs li { width: 22% !important; }
}

/* ====================================================================
   9. CART — table → cards sur mobile (woocommerce-cart-form)
   ==================================================================== */
@media (max-width: 768px) {
	.woocommerce-cart .woocommerce-cart-form { overflow-x: visible; }
	.woocommerce table.shop_table.cart, .shop_table_responsive { display: block; border: 0; }
	.woocommerce table.shop_table.cart thead, .shop_table_responsive thead { display: none; }
	.woocommerce table.shop_table.cart tbody, .shop_table_responsive tbody { display: block; }
	.woocommerce table.shop_table.cart tbody tr, .shop_table_responsive tbody tr {
		display: grid; grid-template-columns: 80px 1fr;
		gap: 10px 14px;
		padding: 14px;
		border: 1px solid rgba(212,168,75,0.18);
		border-radius: 10px;
		margin-bottom: 12px;
		background: rgba(28,28,28,0.7);
	}
	.woocommerce table.shop_table.cart tbody tr td, .shop_table_responsive tbody tr td {
		display: block; border: 0; padding: 0; text-align: left;
	}
	.woocommerce table.shop_table.cart .product-thumbnail { grid-row: 1 / span 2; }
	.woocommerce table.shop_table.cart .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
	.woocommerce table.shop_table.cart .product-name { grid-column: 2; font-weight: 600; }
	.woocommerce table.shop_table.cart .product-price,
	.woocommerce table.shop_table.cart .product-quantity,
	.woocommerce table.shop_table.cart .product-subtotal { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
	.woocommerce table.shop_table.cart .product-price::before { content: "Prix : "; color: rgba(245,241,231,0.6); font-size: 12px; }
	.woocommerce table.shop_table.cart .product-subtotal::before { content: "Sous-total : "; color: rgba(245,241,231,0.6); font-size: 12px; font-weight: 700; }
	.woocommerce table.shop_table.cart .product-remove { grid-column: 2; justify-self: end; }
	.woocommerce .quantity .qty { width: 70px !important; min-height: 40px; }

	.cart-collaterals { padding: 0 !important; }
	.cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
	.cart_totals h2 { font-size: 18px; }
}

/* Coupon panier */
@media (max-width: 600px) {
	.woocommerce .coupon { flex-direction: column; gap: 8px; }
	.woocommerce .coupon input, .woocommerce .coupon button { width: 100% !important; }
}

/* ====================================================================
   10. CHECKOUT — 2col → 1col empilé, propre
   ==================================================================== */
@media (max-width: 1024px) {
	.woocommerce-checkout form.checkout, .checkout-shopify, .checkout__layout {
		grid-template-columns: 1fr !important;
		display: grid !important;
		gap: 24px !important;
	}
	.woocommerce-checkout #order_review,
	.checkout-shopify__summary { position: static !important; max-width: 100% !important; width: 100% !important; }
	.woocommerce-checkout #customer_details { width: 100% !important; }
}
@media (max-width: 600px) {
	.woocommerce form .form-row { width: 100% !important; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100% !important; float: none !important; }
	.woocommerce-checkout .form-row label { font-size: 13px; }
	#order_review_heading, .woocommerce-checkout h3 { font-size: 18px; }
}

/* ====================================================================
   11. MY ACCOUNT — sidebar + content en colonne sur mobile
   ==================================================================== */
@media (max-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none !important;
		width: 100% !important;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; }
	.woocommerce-MyAccount-navigation ul {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 6px !important;
		padding: 0 !important;
	}
	.woocommerce-MyAccount-navigation ul li {
		margin: 0 !important;
		border: 1px solid rgba(212,168,75,0.18);
		border-radius: 8px;
		background: rgba(28,28,28,0.6);
	}
	.woocommerce-MyAccount-navigation ul li a {
		display: block !important;
		padding: 10px 12px !important;
		text-align: center;
		font-size: 13px !important;
		min-height: 44px;
		display: flex !important; align-items: center; justify-content: center;
	}
	.woocommerce-MyAccount-navigation ul li.is-active a,
	.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-current a {
		background: linear-gradient(135deg,#c9a961,#a88e4f); color: #1a1308; font-weight: 600;
	}
}

/* Tableau commandes en cards sur mobile (sinon table cassée) */
@media (max-width: 768px) {
	.woocommerce-MyAccount-orders, .woocommerce-orders-table { display: block; border: 0; }
	.woocommerce-MyAccount-orders thead, .woocommerce-orders-table thead { display: none; }
	.woocommerce-MyAccount-orders tbody, .woocommerce-orders-table tbody { display: block; }
	.woocommerce-MyAccount-orders tbody tr, .woocommerce-orders-table tbody tr {
		display: block !important; padding: 14px; margin-bottom: 12px;
		border: 1px solid rgba(212,168,75,0.18); border-radius: 10px;
		background: rgba(28,28,28,0.7);
	}
	.woocommerce-MyAccount-orders tbody tr td, .woocommerce-orders-table tbody tr td {
		display: flex !important; justify-content: space-between; align-items: center;
		padding: 6px 0 !important; border: 0 !important; font-size: 14px;
	}
	.woocommerce-MyAccount-orders tbody tr td::before, .woocommerce-orders-table tbody tr td::before {
		content: attr(data-title) ":";
		color: rgba(245,241,231,0.6); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
	}
	.woocommerce-MyAccount-orders tbody tr td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; padding-top: 10px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; margin-top: 6px; }
	.woocommerce-MyAccount-orders tbody tr td a.button, .woocommerce-orders-table tbody tr td a.button { width: 100%; text-align: center; }
}

/* ====================================================================
   12. LOGIN / REGISTER / LOST PASSWORD — cards centrées
   ==================================================================== */
@media (max-width: 900px) {
	.woocommerce-account:not(.logged-in) .woocommerce { max-width: 480px; margin: 0 auto; padding: 0 16px; }
	.u-columns.col2-set { display: block !important; }
	.u-columns.col2-set .u-column1, .u-columns.col2-set .u-column2 {
		width: 100% !important; float: none !important; margin: 0 0 24px !important;
	}
	form.login, form.register, form.lost_reset_password { padding: 20px !important; border-radius: 12px; }
}
@media (max-width: 600px) {
	form.login input, form.register input, form.lost_reset_password input { width: 100% !important; }
	form.login .button, form.register .button, form.lost_reset_password .button { width: 100% !important; min-height: 48px; }
}

/* ====================================================================
   13. MODALES — full width mobile, scroll interne, bouton fermer accessible
   ==================================================================== */
@media (max-width: 600px) {
	dialog.sp-eta-modal, dialog.cbdco-modal,
	dialog.cbdco-modal--sm, dialog.cbdco-modal--md,
	dialog.cbdco-modal--lg, dialog.cbdco-modal--xl {
		width: calc(100vw - 12px) !important;
		max-width: calc(100vw - 12px) !important;
		max-height: calc(100dvh - 12px) !important;
		max-height: calc(100vh - 12px);
		border-radius: 12px !important;
	}
	.sp-eta-modal__inner, .cbdco-rev-modal__inner { max-height: calc(100dvh - 12px); max-height: calc(100vh - 12px); }
	.sp-eta-modal__head { padding: 14px 16px; }
	.sp-eta-modal__close, .cbdco-modal__close { width: 36px; height: 36px; min-width: 36px; }
}

/* Cart drawer (panier latéral) responsive — compact mobile */
@media (max-width: 600px) {
	.cart-drawer__panel { width: 100vw !important; max-width: 100vw !important; }

	/* Head : padding réduit + croix ovale (pill) au lieu de ronde */
	.cart-drawer__head { padding: 10px 14px !important; }
	.cart-drawer__head h2 { font-size: 14.5px !important; letter-spacing: 0.02em; }
	.cart-drawer__close {
		width: 44px !important;
		height: 30px !important;
		min-width: 44px !important;
		border-radius: 999px !important;
		padding: 0 !important;
	}
	.cart-drawer__close svg { width: 16px; height: 16px; }

	/* Shipping bar : plus compact */
	.cart-drawer__shipping { padding: 10px 14px !important; }
	.cart-drawer__shipping-msg { font-size: 12.5px !important; margin-bottom: 8px; line-height: 1.35; }
	.cart-drawer__shipping-msg b,
	.cart-drawer__shipping-msg .woocommerce-Price-amount {
		padding: 1px 6px !important;
		font-size: 0.95em;
	}
	.cart-drawer__progress { height: 6px; }

	/* Items : plus serrés, image + qty plus petits */
	.cart-drawer__body { padding: 4px 8px !important; }
	.cart-drawer__item {
		grid-template-columns: 60px 1fr auto !important;
		gap: 10px !important;
		padding: 10px 6px !important;
	}
	.cart-drawer__item-img {
		width: 60px !important;
		height: 60px !important;
	}
	.cart-drawer__item-title { font-size: 12.5px !important; line-height: 1.25; margin-bottom: 3px; }
	.cart-drawer__item-meta { font-size: 10px !important; margin-bottom: 5px; }
	.cart-drawer__item-actions { gap: 8px !important; align-items: center !important; }
	/* Pill quantité — minimaliste, sans bordure dorée envahissante */
	.cart-drawer__qty {
		border-radius: 999px !important;
		border: 1px solid rgba(216,183,104,0.35) !important;
		background: transparent !important;
	}
	.cart-drawer__qty button {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		min-height: 20px !important;
		font-size: 12px !important;
		padding: 0 !important;
		line-height: 1 !important;
	}
	.cart-drawer__qty span {
		min-width: 14px !important;
		font-size: 11.5px !important;
		padding: 0 !important;
		line-height: 1 !important;
	}
	/* Croix de suppression — petit cercle PARFAIT, verrouillé en taille via flex et aspect-ratio */
	.cart-drawer__remove {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		max-width: 20px !important;
		min-height: 20px !important;
		max-height: 20px !important;
		flex: 0 0 20px !important;
		aspect-ratio: 1 / 1 !important;
		border-radius: 50% !important;
		border: 1px solid rgba(255,255,255,0.18) !important;
		padding: 0 !important;
		line-height: 0 !important;
		box-sizing: border-box !important;
	}
	.cart-drawer__remove svg {
		width: 10px !important;
		height: 10px !important;
		display: block !important;
	}
	.cart-drawer__item-price {
		font-size: 13px !important;
		min-width: 60px !important;
	}
	.cart-drawer__item-price ins { font-size: 13px !important; }
	.cart-drawer__item-price del { font-size: 10.5px !important; }
	.cart-drawer__item-discount {
		font-size: 9.5px !important;
		padding: 1px 5px !important;
	}

	/* Footer : padding réduit, code promo plus fin */
	.cart-drawer__foot {
		padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
	}
	.cart-drawer__coupon {
		min-height: 34px;
		padding: 1px !important;
		border-radius: 7px !important;
	}
	.cart-drawer__coupon::before {
		font-size: 11px !important;
		left: 8px !important;
	}
	.cart-drawer__coupon-input {
		padding: 6px 8px 6px 26px !important;
		font-size: 11.5px !important;
		min-height: 32px;
	}
	.cart-drawer__coupon-btn {
		padding: 0 10px !important;
		font-size: 10px !important;
	}
	.cart-drawer__coupon-msg {
		margin: 8px 0 5px !important;
		padding: 7px 10px !important;
		font-size: 11.5px !important;
	}
	.cart-drawer__coupons {
		margin-top: 6px !important;
	}
	.cart-drawer__coupon-item {
		padding: 5px 8px !important;
		font-size: 11.5px !important;
	}

	/* Totals + bouton commander : compact */
	.cart-drawer__totals { gap: 4px !important; margin-bottom: 10px !important; }
	.cart-drawer__totals-row { font-size: 12.5px !important; }
	.cart-drawer__totals-row [data-cart-shipping] { font-size: 11.5px !important; }
	.cart-drawer__totals-row [data-cart-shipping].is-free { font-size: 11px !important; }
	.cart-drawer__totals-row--total { padding-top: 6px !important; font-size: 13px !important; }
	.cart-drawer__totals-row--total strong:first-child { font-size: 13px !important; }
	.cart-drawer__totals-row--total strong:last-child,
	.cart-drawer__totals-row--total .woocommerce-Price-amount { font-size: 16px !important; }
	.cart-drawer__foot > .btn {
		padding: 11px 14px !important;
		font-size: 13px !important;
	}
	.cart-drawer__view-cart { font-size: 11px !important; margin-top: 8px !important; }
}

/* ====================================================================
   14. PAGES STATIQUES — sidebar TOC collapse, contenu fluide
   ==================================================================== */
@media (max-width: 1024px) {
	.cbdco-static__layout { grid-template-columns: 1fr !important; gap: 24px; padding: 0 16px; }
	.cbdco-static__toc { position: static !important; max-height: none !important; padding: 14px 16px; border: 1px solid rgba(212,168,75,0.18); border-radius: 10px; background: rgba(28,28,28,0.6); }
	.cbdco-static__toc summary { cursor: pointer; font-weight: 600; color: #c9a961; }
	.cbdco-static__hero { padding: 48px 20px 36px !important; }
	.cbdco-static__hero h1 { font-size: clamp(26px, 6vw, 40px); }
	.cbdco-static__content { padding: 0; max-width: 100%; }
	.cbdco-static__content h2 { font-size: clamp(22px, 4vw, 28px); }
	.cbdco-static__content h3 { font-size: clamp(18px, 3vw, 22px); }
	.cbdco-static__contact-grid { grid-template-columns: 1fr !important; gap: 16px; }
}

/* FAQ accordéons : tap target et texte plus large */
@media (max-width: 600px) {
	.cbdco-faq__q { padding: 14px 16px; min-height: 56px; font-size: 15px; }
	.cbdco-faq__a { padding: 0 16px 16px; font-size: 14.5px; }
}

/* ====================================================================
   15. AVIS — verif breakpoints (déjà bien fait, ajustements safety)
   ==================================================================== */
@media (max-width: 700px) {
	.cbdco-reviews__list { grid-template-columns: 1fr !important; gap: 12px; }
	.cbdco-rev-item { padding: 16px 14px 12px; }
}

/* ====================================================================
   16. FORMULAIRES — labels visibles, inputs larges, validation lisible
   ==================================================================== */
@media (max-width: 768px) {
	form { width: 100%; }
	form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	form textarea, form select {
		width: 100%; max-width: 100%; box-sizing: border-box;
	}
	form label { display: block; margin-bottom: 6px; font-size: 13px; }
	.woocommerce-error, .woocommerce-info, .woocommerce-message {
		padding: 14px 16px !important; font-size: 14px; border-radius: 8px;
	}
	.woocommerce-error li, .woocommerce-info, .woocommerce-message { line-height: 1.5; }
}

/* ====================================================================
   17. PAGE CONFIRMATION COMMANDE
   ==================================================================== */
@media (max-width: 768px) {
	.woocommerce-order { padding: 0 16px; }
	.woocommerce-thankyou-order-received { font-size: clamp(20px, 4vw, 26px); }
	.woocommerce-order-overview { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px !important; font-size: 13px; }
	.woocommerce-order-details table.shop_table { font-size: 13px; }
	.woocommerce-customer-details .woocommerce-columns { display: block !important; }
	.woocommerce-customer-details .woocommerce-column { width: 100% !important; margin-bottom: 16px; }
}
@media (max-width: 480px) {
	.woocommerce-order-overview { grid-template-columns: 1fr; }
}

/* ====================================================================
   18. SEARCH RESULTS / 404
   ==================================================================== */
@media (max-width: 768px) {
	.cbdco-error-page__inner { padding: 40px 20px !important; }
	.cbdco-error-page__title { font-size: clamp(22px, 5vw, 32px); }
	.cbdco-error-page__icon svg { width: 48px; height: 48px; }
}

.searchform__inner, .search-form {
	display: flex; flex-wrap: wrap; gap: 8px;
}
.searchform__inner input[type="search"], .search-form input[type="search"] { flex: 1; min-width: 0; min-height: 44px; }

/* ====================================================================
   19. AGE GATE
   ==================================================================== */
@media (max-width: 600px) {
	.cbdco-agegate__card { padding: 28px 22px !important; max-width: calc(100vw - 24px); border-radius: 14px; }
	.cbdco-agegate__title { font-size: clamp(22px, 5vw, 30px); }
	.cbdco-agegate__btns { flex-direction: column; gap: 10px; }
	.cbdco-agegate__btns button { width: 100%; min-height: 48px; }
}

/* ====================================================================
   20. BLOG (single + archive)
   ==================================================================== */
@media (max-width: 1024px) {
	.blog-grid, .archive-list { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}
@media (max-width: 600px) {
	.blog-grid, .archive-list { grid-template-columns: 1fr !important; }
	article.post .entry-content { padding: 0 16px; }
	article.post h1.entry-title { font-size: clamp(24px, 5vw, 34px); padding: 0 16px; }
	.entry-meta { padding: 0 16px; font-size: 13px; }
	.post-thumbnail img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
}

/* ====================================================================
   21. ADMIN — pages cbdco-* utilisables tablet
   ==================================================================== */
@media (max-width: 900px) {
	.cbdco-admin-tabs, .cbdco-admin__tabs { flex-wrap: wrap; gap: 4px; }
	.cbdco-admin-tabs a, .cbdco-admin__tabs a { font-size: 13px; padding: 8px 12px; min-height: 40px; }
	.cbdco-settings-table th, .cbdco-settings-table td { display: block !important; width: 100% !important; padding: 8px 0 !important; }
	.cbdco-settings-table th { padding-bottom: 4px !important; font-weight: 600; }
	.cbdco-settings-table input[type="text"], .cbdco-settings-table input[type="password"],
	.cbdco-settings-table input[type="email"], .cbdco-settings-table input[type="url"],
	.cbdco-settings-table textarea, .cbdco-settings-table select { width: 100% !important; max-width: 100% !important; }
}

/* ====================================================================
   22. UTILS — anti-overflow, breakable, perf mobile
   ==================================================================== */
.text-break, h1, h2, h3, h4 { overflow-wrap: anywhere; word-break: break-word; }
.no-mobile { /* hidden < 768 */ }
@media (max-width: 768px) {
	.no-mobile { display: none !important; }
	/* Disable lourdes animations sur mobile (perf battery) */
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		/* On garde transitions courtes pour UX (open/close, fade) */
	}
	.has-parallax, .parallax { transform: none !important; background-attachment: scroll !important; }
}

/* GPU acceleration sur éléments animés clés */
.cart-drawer__panel, .main-nav.is-open, dialog.sp-eta-modal, dialog.cbdco-modal,
.cbdco-rev-item, .product__card { will-change: transform; transform: translateZ(0); }

/* ====================================================================
   24. ADAPTATIONS TYPOGRAPHIQUES MOBILE (audit responsive)
   ====================================================================
   Tailles de police adaptées pour les sélecteurs qui n'avaient pas
   d'override mobile et qui débordaient ou paraissaient trop gros sur
   les cartes/cellules réduites en grille 1-2 colonnes.
   ==================================================================== */

/* --- Tablet & mobile (≤768px) --- */
@media (max-width: 768px) {
	/* Prix produit (markup natif WC) — désormais aligné via main.css (17px) */

	/* Homepage — sous-titre hero */
	.hp-hero__sub { font-size: 14px; line-height: 1.55; }

	/* Homepage — titre des sections de carrousels produits */
	.hp-prodrow__title { font-size: 22px; line-height: 1.15; }
	.hp-prodrow__text { font-size: 13.5px; }

	/* Homepage — bandeau conseil/téléphone */
	.hp-advice__title { font-size: clamp(18px, 4.5vw, 22px); }
	.hp-advice__phone { font-size: clamp(18px, 4.5vw, 22px); }
	.hp-advice__sub { font-size: 12px; }

	/* Footer piliers — réduction padding */
	.footer-pillars { padding: 28px 16px; }
	.footer-pillar__title { font-size: 15.5px; }
	.footer-pillar__sub { font-size: 13px; }
}

/* --- Mobile compact (≤480px) --- */
@media (max-width: 480px) {
	/* Prix produit — désormais aligné via main.css (15px) */

	/* Homepage — hero */
	.hp-hero__sub { font-size: 13.5px; }

	/* Homepage — titre carrousels */
	.hp-prodrow__title { font-size: 19px; }
	.hp-prodrow__text { font-size: 13px; }

	/* Homepage — bandeau conseil */
	.hp-advice__title { font-size: 17px; }
	.hp-advice__phone { font-size: 17px; }

	/* FAQ — questions */
	.cbdco-faq__q { font-size: 14.5px; padding: 14px 16px; }
	.cbdco-faq__q::after { font-size: 20px; }
	.cbdco-faq__a { font-size: 13.5px; }

	/* Footer — piliers compactés */
	.footer-pillars { padding: 24px 14px; }
	.footer-pillar__title { font-size: 14.5px; }
	.footer-pillar__sub { font-size: 12.5px; }
	.footer-pillar__icon { width: 36px; height: 36px; }
	.footer-pillar__icon svg { width: 18px; height: 18px; }
}

/* ====================================================================
   ANTI-OVERFLOW MOBILE — fiche produit (et toutes pages WC)
   Force la non-éviction des éléments qui forcent un scroll horizontal.
   ==================================================================== */
@media (max-width: 768px) {
	/* Hard-clip du body au niveau viewport — bloque tout dépassement, peu importe la cause */
	html, body { overflow-x: hidden !important; max-width: 100vw; }

	/* Page produit : tous les enfants de .single-product confinés à 100% */
	.single-product main,
	.single-product #primary,
	.single-product .product__layout,
	.single-product .single-product__layout,
	.single-product .product,
	.single-product .summary,
	.single-product .product-gallery,
	.single-product .woocommerce-product-gallery,
	.single-product .woocommerce-tabs,
	.single-product .related,
	.single-product .upsells {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Tableau caractéristiques : table-layout fixed pour forcer le wrap */
	.single-product table.shop_attributes,
	.single-product table.variations,
	.single-product .woocommerce-tabs table {
		table-layout: fixed;
		width: 100%;
		max-width: 100%;
	}
	.single-product table.shop_attributes th,
	.single-product table.shop_attributes td,
	.single-product table.variations th,
	.single-product table.variations td,
	.single-product .woocommerce-tabs td,
	.single-product .woocommerce-tabs th {
		word-break: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/* Galerie : images et nav strictement contenues */
	.single-product .woocommerce-product-gallery img,
	.single-product .product-gallery img,
	.single-product .product__gallery img {
		max-width: 100%;
		height: auto;
	}
	.single-product .flex-control-thumbs,
	.single-product .product__gallery-thumbs {
		max-width: 100%;
		flex-wrap: wrap;
	}

	/* Onglets WC : pas de débordement scroll horizontal des labels longs */
	.single-product .woocommerce-tabs ul.tabs {
		max-width: 100%;
		overflow-x: hidden;
	}
	.single-product .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
		max-width: 100%;
	}

	/* Long titres / descriptions : forcer le wrap */
	.single-product .product_title,
	.single-product .product__title,
	.single-product .summary p,
	.single-product .summary h1,
	.single-product .summary h2 {
		word-break: break-word;
		overflow-wrap: anywhere;
		max-width: 100%;
	}

	/* Variations : full width sur mobile, jamais inline-block trop large */
	.single-product .variations_form,
	.single-product .variations_form table,
	.single-product .variations_form select {
		max-width: 100%;
		width: 100%;
	}

	/* Toutes les images dans la fiche produit (incluant .summary) */
	.single-product img,
	.single-product video,
	.single-product iframe {
		max-width: 100%;
		height: auto;
	}

	/* Bandeaux livraison/paiement (sp-info-row, sp-eta, sp-pay) */
	.single-product .sp-info-row,
	.single-product .sp-eta,
	.single-product .sp-pay,
	.single-product .sp-pay__list {
		max-width: 100%;
		flex-wrap: wrap;
		min-width: 0;
	}

	/* Avis / reviews dans la fiche produit */
	.single-product .cbdco-reviews,
	.single-product .cbdco-reviews__list,
	.single-product .cbdco-rev-card {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* ====================================================================
   UNIFICATION MOBILE — typo + spacing identique partout
   (catégorie produit, page statique, article, page WP standard)
   ==================================================================== */
@media (max-width: 600px) {
	/* Tous les h1 de page : taille uniforme */
	.page-hero h1,
	.cbdco-static__title,
	.cbdco-article__title,
	.entry-title {
		font-size: 20px !important;
		line-height: 1.2 !important;
		font-weight: 600 !important;
	}

	/* Tous les sous-titres / descriptions / leads */
	.page-hero__descr,
	.page-hero__descr p,
	.cbdco-static__lead,
	.cbdco-article__meta {
		font-size: 12px !important;
		line-height: 1.5 !important;
	}
	/* Les h2/h3 du hero gardent leur taille mais en weight moins gras sur mobile */
	.page-hero .page-hero__descr h2,
	.page-hero .page-hero__descr h3 { font-weight: 500 !important; }

	/* Tous les eyebrows */
	.eyebrow,
	.cbdco-static__eyebrow,
	.cbdco-article__eyebrow {
		font-size: 10.5px !important;
		letter-spacing: 0.1em !important;
	}

	/* Fil d'Ariane + compteur produits cachés sur mobile (déjà dans la nav, ou inutiles). */
	.page-hero .breadcrumb,
	.page-hero .eyebrow { display: none !important; }

	/* Toggle "Voir plus / Voir moins" pour la description longue (CSS-only).
	   Wrap en flex column avec ordre explicite : descr d'abord, label ensuite. */
	.page-hero__descr-wrap {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		position: static !important;
	}
	.page-hero__descr-wrap .page-hero__descr { order: 1 !important; width: 100% !important; }
	.page-hero__descr-wrap .page-hero__descr-more { order: 2 !important; }
	.page-hero__descr-wrap .page-hero__descr {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.page-hero__descr-toggle:checked ~ .page-hero__descr {
		-webkit-line-clamp: unset !important;
		display: block !important;
		overflow: visible !important;
	}
	.page-hero__descr-more {
		display: block !important;
		clear: both !important;
		width: auto !important;
		margin: 37px 0 0 !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
		font-size: 12.5px !important;
		font-weight: 500 !important;
		color: #fff !important;
		text-decoration: none !important;
		cursor: pointer !important;
		user-select: none;
		text-align: left;
	}
	.page-hero__descr-more:hover { color: var(--gold, #d8b768) !important; }
	.page-hero__descr-more::after { content: "Voir plus"; color: #fff !important; }
	.page-hero__descr-toggle:checked ~ .page-hero__descr-more { color: #fff !important; }
	.page-hero__descr-toggle:checked ~ .page-hero__descr-more::after { content: "Voir moins"; color: #fff !important; }
	.cbdco-static__title-wrap,
	.cbdco-article__head {
		padding: 12px 16px 6px !important;
	}

	/* Body text dans les contenus articles/statiques : taille uniforme */
	.cbdco-static__content,
	.cbdco-static__content p,
	.cbdco-static__content li,
	.cbdco-article .entry-article p,
	.cbdco-article .entry-article li,
	body.single-post .entry-article p,
	body.single-post .entry-article li {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}

	/* H2 / H3 dans le contenu : tailles uniformes */
	.cbdco-static__content h2,
	.cbdco-article .entry-article h2,
	body.single-post .entry-article h2 {
		font-size: 17px !important;
		line-height: 1.3 !important;
		margin: 28px 0 8px !important;
	}
	.cbdco-static__content h3,
	.cbdco-article .entry-article h3,
	body.single-post .entry-article h3 {
		font-size: 15px !important;
		line-height: 1.3 !important;
		margin: 20px 0 6px !important;
	}
}

/* Hero catégorie mobile/tablette : hauteur libre, paddings serrés. */
@media (max-width: 760px) {
	.page-hero--has-image {
		min-height: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 18px !important;
	}
	/* Padding vertical resserré du contenu sous le hero — uniquement sur
	   les pages de catégorie produit, pour gagner de l'espace mobile. */
	body.tax-product_cat .page-content { padding: 6px 0 !important; }
}

/* Header — masquer l'icône fidélité + resserrer compte/panier sur mobile,
   aligner menu-toggle et panier sur les bords du container du site */
@media (max-width: 1024px) {
	.header-action--loyalty {
		display: none !important;
	}
	/* Padding latéral du header = 0 ; on laisse les wrappers gauche/droite
	   porter le padding container-px pour aligner pile sur le contenu du site. */
	.site-header__top {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.site-header__actions--left {
		padding-left: var(--container-px, 12px) !important;
	}
	.site-header__actions--right {
		padding-right: var(--container-px, 12px) !important;
	}
	/* Compte + panier vraiment collés */
	.site-header__actions,
	.site-header__actions--right,
	.site-header__actions--left {
		gap: 0 !important;
	}
	/* Boutons d'action plus compacts pour gagner en lisibilité */
	.site-header__actions--right .header-action {
		width: 36px !important;
		height: 36px !important;
	}
	/* Menu-toggle : pas de padding interne supplémentaire pour qu'il colle */
	.menu-toggle {
		padding: 0 !important;
		width: 36px !important;
		height: 36px !important;
	}
}
@media (max-width: 480px) {
	.site-header__actions--right .header-action,
	.menu-toggle {
		width: 32px !important;
		height: 32px !important;
	}
}

/* Panier VIDE sur mobile : l'icône SVG doit avoir la même taille visuelle que
   le hamburger. Le SVG du menu-toggle reste à 32×32 même sous 480px (pas
   d'override), donc on aligne le panier à 32×32 sur toute la zone mobile. */
@media (max-width: 1024px) {
	.header-action--cart:not(.has-items) .header-action__icon-wrap {
		width: 32px;
		height: 32px;
	}
	.header-action--cart:not(.has-items) .header-action__icon {
		width: 32px !important;
		height: 32px !important;
	}
}

/* ====================================================================
   GLOBAL — anti-overflow + box-sizing partout sur mobile
   S'applique à TOUT le site (panier, checkout, compte, archives, home,
   taxonomies, single article, page statique, fiche produit, etc.)
   ==================================================================== */
@media (max-width: 768px) {
	html,
	body {
		overflow-x: hidden !important;
		max-width: 100vw;
	}

	/* Tous les conteneurs de premier niveau ne doivent pas dépasser */
	body main,
	body #primary,
	body .container,
	body .site-content,
	body .content-area,
	body .woocommerce,
	body .woocommerce-page,
	body article,
	body section {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Médias : jamais plus large que leur conteneur */
	body img,
	body video,
	body iframe,
	body embed,
	body object,
	body canvas,
	body svg {
		max-width: 100%;
		height: auto;
	}

	/* Tables : layout fixe pour ne pas casser la mise en page */
	body table {
		table-layout: fixed;
		width: 100%;
		max-width: 100%;
		word-break: break-word;
		overflow-wrap: break-word;
	}
	body table th,
	body table td {
		word-break: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/* Forms et selects : full width */
	body form,
	body select,
	body input[type="text"],
	body input[type="email"],
	body input[type="password"],
	body input[type="tel"],
	body input[type="number"],
	body input[type="search"],
	body textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Pre / code blocks : pas de scroll horizontal cassé */
	body pre,
	body code {
		max-width: 100%;
		overflow-x: auto;
		word-break: break-word;
		white-space: pre-wrap;
	}

	/* Texte long : casser les mots qui dépassent (URLs, etc.) */
	body p,
	body li,
	body h1,
	body h2,
	body h3,
	body h4,
	body h5,
	body h6,
	body span,
	body a {
		overflow-wrap: anywhere;
	}

	/* Conteneurs flex/grid courants : permettre le wrap */
	body .row,
	body .flex,
	body [class*="__row"],
	body [class*="__list"],
	body [class*="__grid"] {
		max-width: 100%;
		min-width: 0;
		flex-wrap: wrap;
	}
}

/* ====================================================================
   GLOBAL — typo body uniforme partout sur mobile
   ==================================================================== */
@media (max-width: 600px) {
	/* Body text par défaut sur mobile : 14px / 1.6 partout */
	body,
	body p,
	body li,
	body td,
	body .container p,
	body .container li {
		font-size: 14px;
		line-height: 1.6;
	}

	/* Tous les H1 de page mobile : taille unique */
	body h1,
	body .page-title,
	body .woocommerce-products-header__title,
	body .archive-title,
	body .category-title {
		font-size: 20px !important;
		line-height: 1.2 !important;
		font-weight: 600 !important;
	}
	/* Exception : empty-products title verrouillé à 22px (valeur stabilisée) */
	body h1.cbdco-empty-products__title {
		font-size: 22px !important;
	}

	/* H2 / H3 / H4 globaux mobile */
	body h2 {
		font-size: 17px !important;
		line-height: 1.3 !important;
	}
	body h3 {
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
	body h4 {
		font-size: 14px !important;
		line-height: 1.35 !important;
	}
}

/* ====================================================================
   MOBILE NAV DRAWER — REFONTE SIMPLE & UX
   Override complet de l'ancien drawer chargé. Vise : barre header sobre
   ("Menu" + X), items sentence-case, pas de bg dégradé doré, pas de
   descriptions, pas de bloc "Offres du moment", dividers ultra fins.
   ==================================================================== */
@media (max-width: 1024px) {
	/* Drawer fond solide propre */
	.main-nav.is-open {
		background: var(--bg-0, #0f0f0f) !important;
	}

	/* Header du drawer mobile : rendu en HTML réel via .main-nav__head dans
	   header.php. L'ancien ::before "Menu" était un doublon visuel. */

	/* Liste niveau 1 — padding compact */
	.main-nav.is-open .main-nav__list {
		padding: 4px 0 !important;
	}

	/* Items niveau 1 — sentence-case, lisibles, pas de uppercase forcée */
	.main-nav.is-open .main-nav__list > li > a,
	.main-nav.is-open .main-nav__list > li > a:hover,
	.main-nav.is-open .main-nav__list > .current-menu-item > a {
		padding: 14px 20px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		min-height: 48px !important;
		color: var(--text, #f5f5f5) !important;
		-webkit-text-fill-color: var(--text, #f5f5f5) !important;
	}
	.main-nav.is-open .main-nav__list > li > a > .menu-item__title {
		font-size: 15px !important;
		font-weight: 500 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}

	/* État déplié — juste la couleur change, pas de bg dégradé ni liseré */
	.main-nav.is-open .main-nav__list .menu-item-has-children.is-expanded > a {
		background: transparent !important;
		box-shadow: none !important;
		color: var(--gold, #d4a84b) !important;
		-webkit-text-fill-color: var(--gold, #d4a84b) !important;
	}
	.main-nav.is-open .main-nav__list .menu-item-has-children.is-expanded > a > .menu-item__title {
		color: var(--gold, #d4a84b) !important;
		-webkit-text-fill-color: var(--gold, #d4a84b) !important;
	}

	/* Dividers ultra-fins pour ne pas alourdir */
	.main-nav.is-open .main-nav__list > li {
		border-bottom: 1px solid rgba(255,255,255,0.04) !important;
	}

	/* Sub-menu — fond très subtil, indenté */
	.main-nav.is-open .sub-menu {
		background: rgba(255,255,255,0.02) !important;
	}
	.main-nav.is-open .menu-item-has-children.is-expanded > .sub-menu {
		padding: 0 !important;
	}
	.main-nav.is-open .sub-menu li {
		border-bottom: 0 !important;
	}
	.main-nav.is-open .sub-menu a {
		padding: 11px 20px 11px 36px !important;
		min-height: 42px !important;
		gap: 0 !important;
	}
	.main-nav.is-open .sub-menu .menu-item__title {
		font-size: 14px !important;
		font-weight: 400 !important;
	}
	/* Descriptions visibles dans les sous-menus mobile (intensité Léger/Fort/etc) */
	.main-nav.is-open .sub-menu .menu-item__desc {
		display: inline-flex !important;
		align-items: center;
		gap: 4px;
		font-family: var(--font-body, 'Inter', sans-serif);
		font-size: 12px !important;
		font-weight: 600 !important;
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		letter-spacing: 0.02em !important;
		line-height: 1.2;
		margin-top: 8px !important;
		text-transform: none !important;
		opacity: 1 !important;
	}
	/* Et plus d'espace vertical entre titre et intensité dans le <a> sub-menu */
	.main-nav.is-open .sub-menu a {
		gap: 6px !important;
		padding-top: 13px !important;
		padding-bottom: 13px !important;
	}

	/* Bloc "Offres du moment" — caché du drawer (clutter) */
	.main-nav.is-open .cbdco-mobile-offers,
	.cbdco-mobile-offers {
		display: none !important;
	}

	/* === FOOT — Mon compte + Recherche épinglés en bas du drawer === */
	.main-nav.is-open .main-nav__foot {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(0,0,0,0.35);
		border-top: 1px solid rgba(255,255,255,0.08);
	}
	.main-nav.is-open .main-nav__foot-link {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		padding: 9px 10px !important;
		min-height: 40px;
		border: 0;
		border-radius: 10px;
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		font-family: var(--font-display, 'Inter', sans-serif);
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.02em;
		text-decoration: none !important;
		text-transform: none !important;
		background: transparent;
		cursor: pointer;
		transition: background .15s ease, color .15s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.main-nav.is-open .main-nav__foot-link svg {
		width: 18px;
		height: 18px;
		stroke: #fff;
		stroke-width: 1.6;
		flex: 0 0 auto;
	}
	.main-nav.is-open .main-nav__foot-link:active {
		background: rgba(212,168,75,0.12);
		color: var(--gold, #d4a84b) !important;
		-webkit-text-fill-color: var(--gold, #d4a84b) !important;
	}
	.main-nav.is-open .main-nav__foot-link:active svg {
		stroke: var(--gold, #d4a84b);
	}
}

/* ====================================================================
   MOBILE — Modale de recherche AJAX (déclenchée depuis le foot du drawer)
   ==================================================================== */
.cbdco-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 99970;
	background: var(--bg-0, #0f0f0f);
	display: none;
	opacity: 0;
	flex-direction: column;
	transition: opacity .25s ease;
}
.cbdco-search-overlay.is-open {
	display: flex;
	opacity: 1;
}
.cbdco-search-modal {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: transparent;
	transform: translateY(20px);
	opacity: 0;
	transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease;
}
.cbdco-search-overlay.is-open .cbdco-search-modal {
	transform: translateY(0);
	opacity: 1;
}
.cbdco-search-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px calc(14px + env(safe-area-inset-top));
	padding-top: calc(14px + env(safe-area-inset-top));
	border-bottom: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.25);
}
.cbdco-search-form {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	min-height: 44px;
}
.cbdco-search-form__icon {
	width: 18px;
	height: 18px;
	stroke: rgba(255,255,255,0.7);
	flex: 0 0 auto;
}
.cbdco-search-form__input {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	outline: none;
	color: #fff;
	font-family: var(--font-display, 'Inter', sans-serif);
	font-size: 15px;
	padding: 0;
	min-width: 0;
}
.cbdco-search-form__input::placeholder {
	color: rgba(255,255,255,0.45);
}
.cbdco-search-close {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	border: 0;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.cbdco-search-close:hover,
.cbdco-search-close:active {
	background: rgba(216,183,104,0.2);
}
.cbdco-search-results {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
}
.cbdco-search-results__hint,
.cbdco-search-results__empty,
.cbdco-search-results__loading {
	padding: 24px 8px;
	text-align: center;
	color: rgba(255,255,255,0.55);
	font-size: 13.5px;
	font-family: var(--font-body, 'Inter', sans-serif);
}
.cbdco-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	text-decoration: none !important;
	color: #fff;
	transition: background .12s ease;
}
.cbdco-search-result:last-child { border-bottom: 0; }
.cbdco-search-result:active {
	background: rgba(212,168,75,0.08);
}
.cbdco-search-result__media {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255,255,255,0.05);
}
.cbdco-search-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cbdco-search-result__body {
	flex: 1 1 auto;
	min-width: 0;
}
.cbdco-search-result__title {
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.01em;
	margin-bottom: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cbdco-search-result__price {
	font-size: 12.5px;
	color: var(--gold-soft, #f0d28a);
	font-weight: 600;
}
.cbdco-search-result__price ins { text-decoration: none; }
.cbdco-search-result__price del { color: rgba(255,255,255,0.4); margin-right: 6px; font-weight: 400; }
.cbdco-search-result__more {
	display: block;
	text-align: center;
	padding: 14px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gold, #d4a84b);
	border-top: 1px solid rgba(255,255,255,0.05);
	text-decoration: none !important;
}
body.cbdco-search-open { overflow: hidden; }
@media (min-width: 1025px) {
	.cbdco-search-overlay { display: none !important; }
}