/*
Theme Name: Scaffold Child
Theme URI: https://github.com/RamyElKaiii/chicshop-template
Template: scaffold
Author: Ramy Kai
Author URI: https://github.com/RamyElKaiii
Description: Child theme of Scaffold. Make ALL customizations here (CSS overrides, template tweaks, functions) so updates to the parent theme never overwrite your work. Currently carries the Chic Shop brand system (palette, type, conversion + a11y layer).
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scaffold-child
*/

/* ==========================================================================
   CHIC SHOP — BRAND SYSTEM
   Palette + type per Brand Guidelines (Figma "Social Media — July 2025").
   Proportion rule: ~70% blue family / 20% white / 10% yellow.
   Yellow is the pop, never a large fill.
   ========================================================================== */

/* --- Brinova: display face, self-hosted. Regular only (no bold shipped), so
   headings must stay weight 400 or the browser fakes a bold and it smears.
   Verified: full French accent coverage (É È Ê À Ç Ô Û Î Œ « » °).
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Brinova";
	src: url("assets/fonts/brinova-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2018-201A,
		U+201C-201E, U+2039-203A, U+20AC, U+2122;
}

:root {
	/* --- Brand palette (canonical hex, do not sample from the logo art) --- */
	--cs-royal:     #17469E;  /* primary blue — headlines, header, primary surfaces */
	--cs-navy:      #0C2656;  /* body text, dark bands, depth */
	--cs-yellow:    #FFF200;  /* accent pop — CTAs, price flags, marker device */
	--cs-steel:     #5475AF;  /* quiet support tone only, never a headline */
	--cs-offwhite:  #F7F9FD;  /* canvas / section background */

	/* --- Remap the parent theme's tokens onto the brand --------------------
	   The parent ships a generic blue (#2b50c8) + cyan + cream. Every one of
	   those is off-brand, so they get overridden rather than left to leak. */
	--color-bg: #ffffff;
	--color-text: var(--cs-navy);
	--color-muted: #5b6b8a;               /* steel-derived, AA on white */

	--color-accent: var(--cs-royal);
	--color-accent-dark: var(--cs-navy);
	--color-accent-contrast: #ffffff;

	/* Parent used cyan for the search button — off-brand, becomes steel. */
	--color-cyan: var(--cs-steel);
	--color-cyan-dark: #3f5c92;

	/* Parent used cream for hero headlines — becomes the brand yellow. */
	--color-cream: var(--cs-yellow);

	/* Sale/price flags: the brand's own device is a yellow flag, not red.
	   Navy on yellow clears 14:1 contrast, far better than white-on-red. */
	--color-sale: var(--cs-yellow);
	--color-sale-text: var(--cs-navy);

	--color-primary: var(--cs-navy);
	--color-primary-contrast: #ffffff;
	--color-border: #dbe3f0;

	--color-topbar-bg: var(--cs-navy);
	--color-topbar-text: #ffffff;
	--color-subnav-bg: var(--cs-offwhite);
	--color-subnav-text: var(--cs-navy);

	/* --- Type ------------------------------------------------------------- */
	--font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Fira Sans", system-ui, sans-serif;      /* UI-level headings */
	--font-display: "Brinova", "Fira Sans", Impact, sans-serif; /* big statements only */

	--radius: 10px;
}

/* ==========================================================================
   TYPOGRAPHY
   Brinova is a display face. Scoping it to h1/h2 + section titles only.
   Product names, UI labels and buttons stay Fira Sans — setting product
   names in an all-caps display face wrecks scannability, and French
   accents are materially harder to read in caps at small sizes.
   ========================================================================== */
body {
	font-family: var(--font-body);
	color: var(--cs-navy);
	-webkit-font-smoothing: antialiased;
}

h1, h2,
.section-title,
.hero__title,
.section-heading {
	font-family: var(--font-display);
	font-weight: 400;          /* Brinova ships Regular only — never synthesize */
	text-transform: uppercase;
	color: var(--cs-royal);
	letter-spacing: .015em;
	line-height: 1.12;
}

h3, h4, h5, h6 {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--cs-navy);
	letter-spacing: 0;
	text-transform: none;
}

/* Product titles must stay readable sentence-case body type. */
/* Higher specificity than the h1/h2 display rule above, so no !important. */
.cs-home .product-card__title,
.woocommerce .product-card__title,
.woocommerce .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
body .woocommerce-loop-product__title,
body .product_title {
	font-family: var(--font-body);
	text-transform: none;
	font-weight: 500;
	color: var(--cs-navy);
	letter-spacing: 0;
}

/* ==========================================================================
   CTAs — yellow is the action colour (brand: "CTAs, price flags").
   Navy-on-yellow is the highest-contrast pair the palette allows.
   ========================================================================== */
.button--primary,
.btn--primary,
.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wc-block-components-checkout-place-order-button {
	background: var(--cs-yellow);
	color: var(--cs-navy);
	border: 2px solid var(--cs-yellow);
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: .01em;
	border-radius: var(--radius);
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.button--primary:hover,
.btn--primary:hover,
.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: #ffe600;
	border-color: var(--cs-navy);
	color: var(--cs-navy);
}

/* Secondary = royal blue outline, so the yellow primary always wins the eye. */
.button--secondary,
.btn--secondary {
	background: transparent;
	color: var(--cs-royal);
	border: 2px solid var(--cs-royal);
	font-weight: 600;
	border-radius: var(--radius);
}
.button--secondary:hover,
.btn--secondary:hover { background: var(--cs-royal); color: #fff; }

/* Price + sale flags */
.price, .woocommerce-Price-amount { color: var(--cs-navy); font-weight: 700; }
.onsale, .badge--sale, .product-card__badge {
	background: var(--cs-yellow) !important;
	color: var(--cs-navy) !important;
	font-weight: 700;
	border-radius: 4px;
}

/* ==========================================================================
   ACCESSIBILITY
   The parent theme ships no visible focus style — keyboard users are lost.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--cs-yellow);
	outline-offset: 2px;
	border-radius: 3px;
}
/* On yellow surfaces the yellow ring would vanish — flip to royal. */
.promo-bar a:focus-visible,
[style*="FFF200"] a:focus-visible { outline-color: var(--cs-royal); }

.skip-link {
	position: absolute; left: -9999px;
	background: var(--cs-navy); color: #fff;
	padding: .75rem 1.25rem; z-index: 10000; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   RESPONSIVE / MOBILE
   DRC traffic is overwhelmingly mobile, so touch ergonomics are not optional.
   ========================================================================== */
@media (max-width: 900px) {
	/* WCAG 2.5.5 target size — the parent's nav//icon hits are ~28px. */
	.site-header a,
	.site-header button,
	.nav-toggle,
	.product-card a.button,
	.woocommerce a.button,
	.woocommerce button.button {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	h1, .hero__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
	h2, .section-title { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
}

/* Never let a wide table/grid force the whole page to scroll sideways. */
body { overflow-x: hidden; }
.table-scroll, .woocommerce table.shop_table_responsive { overflow-x: auto; }

/* Reserve image space to stop layout shift (CLS) on slow Kinshasa connections. */
.product-card__media img,
.cat-tile img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   TRUST LAYER — delivery / payment / returns reassurance strip.
   ========================================================================== */
.cs-trustbar {
	background: var(--cs-offwhite);
	border-block: 1px solid var(--color-border);
	padding: 1rem 0;
}
.cs-trustbar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem 1.5rem;
}
.cs-trustbar__item {
	display: flex; align-items: center; gap: .7rem;
	font-size: .9rem; color: var(--cs-navy); line-height: 1.3;
}
.cs-trustbar__item strong { display: block; font-weight: 700; }
.cs-trustbar__icon {
	flex: 0 0 38px; height: 38px; display: grid; place-items: center;
	background: var(--cs-royal); color: #fff; border-radius: 50%;
}

/* ==========================================================================
   MOBILE NAV DRAWER
   Hidden on desktop; the only way to reach categories on a phone.
   ========================================================================== */
.cs-navtoggle { display: none; }
.cs-drawer { display: none; }

@media (max-width: 900px) {
	.cs-navtoggle {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		position: fixed;
		left: .75rem;
		bottom: .75rem;
		z-index: 9998;
		min-height: 48px;
		padding: 0 1.1rem;
		border: 0;
		border-radius: 999px;
		background: var(--cs-royal);
		color: #fff;
		font: 700 .95rem/1 var(--font-body);
		box-shadow: 0 6px 20px rgba(12, 38, 86, .35);
		cursor: pointer;
	}
	.cs-navtoggle__bars,
	.cs-navtoggle__bars::before,
	.cs-navtoggle__bars::after {
		content: "";
		display: block;
		width: 18px; height: 2px;
		background: #fff; border-radius: 2px;
	}
	.cs-navtoggle__bars { position: relative; }
	.cs-navtoggle__bars::before { position: absolute; top: -6px; }
	.cs-navtoggle__bars::after  { position: absolute; top: 6px; }

	.cs-drawer { display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
	.cs-drawer__overlay {
		position: absolute; inset: 0;
		background: rgba(12, 38, 86, .55);
		opacity: 0; transition: opacity .22s ease;
	}
	.cs-drawer__panel {
		position: absolute; inset-block: 0; left: 0;
		width: min(86vw, 360px);
		background: #fff;
		transform: translateX(-100%);
		transition: transform .24s ease;
		display: flex; flex-direction: column;
		overflow-y: auto; overscroll-behavior: contain;
	}
	.cs-drawer.is-open { pointer-events: auto; }
	.cs-drawer.is-open .cs-drawer__overlay { opacity: 1; }
	.cs-drawer.is-open .cs-drawer__panel { transform: translateX(0); }

	.cs-drawer__head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 1rem 1.1rem;
		background: var(--cs-royal); color: #fff;
		position: sticky; top: 0; z-index: 2;
	}
	.cs-drawer__title {
		font-family: var(--font-display);
		text-transform: uppercase;
		font-size: 1.15rem; letter-spacing: .02em;
	}
	.cs-drawer__close {
		background: none; border: 0; color: #fff;
		font-size: 2rem; line-height: 1;
		min-width: 44px; min-height: 44px; cursor: pointer;
	}

	.cs-drawer__menu { list-style: none; margin: 0; padding: .25rem 0; }
	.cs-drawer__menu li { position: relative; border-bottom: 1px solid var(--color-border); }
	.cs-drawer__menu a {
		display: block;
		padding: .9rem 3.25rem .9rem 1.1rem;
		color: var(--cs-navy);
		text-decoration: none;
		font-weight: 500;
		min-height: 44px;
	}
	.cs-drawer__menu > li > a { font-weight: 600; }
	.cs-drawer__expand {
		position: absolute; top: 0; right: 0;
		width: 52px; min-height: 48px;
		background: none; border: 0; border-left: 1px solid var(--color-border);
		color: var(--cs-royal); font-size: 1.4rem; line-height: 1; cursor: pointer;
	}
	/* Sub-levels collapsed until expanded. */
	.cs-drawer__menu .sub-menu { display: none; list-style: none; margin: 0; padding: 0; background: var(--cs-offwhite); }
	.cs-drawer__menu li.is-expanded > .sub-menu { display: block; }
	.cs-drawer__menu .sub-menu a { padding-left: 2rem; font-weight: 400; font-size: .93rem; }

	.cs-drawer__foot { margin-top: auto; padding: 1rem 1.1rem 2rem; display: grid; gap: .65rem; }
	.cs-drawer__foot a { color: var(--cs-royal); font-weight: 600; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   HORIZONTAL OVERFLOW CONTAINMENT
   The Elementor-built header row (logo + search + actions) and the secondary
   nav do not wrap, so on a 390px viewport the cart, search field and nav all
   run off the right edge. Force them to wrap and keep media inside the box.
   ========================================================================== */
@media (max-width: 900px) {
	html, body { max-width: 100%; overflow-x: hidden; }

	/* The header is an Elementor Theme Builder block, so the real targets are
	   its own classes — not the theme's .site-header container. */
	/* Measured: #menu-secondary-menu is 565px inside a 375px viewport and drags
	   its whole Elementor ancestor chain (column -> widget-wrap -> widget ->
	   widget-container) out to 585px. max-width:100% cannot fix this because
	   every ancestor is auto-sized by that same content, so 100% resolves
	   against an already-oversized box. Viewport units break the loop. */
	.elementor-column,
	.elementor-widget-wrap,
	.elementor-widget,
	.elementor-widget-container,
	.elementor-section,
	.elementor-container,
	.header-search,
	.search-form {
		max-width: 100vw !important;
		min-width: 0 !important;
	}
	.header-search { flex: 1 1 100%; min-width: 0; }
	.search-form { display: flex; width: 100%; min-width: 0; }
	.search-field {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		flex: 1 1 auto;
	}
	.search-submit { flex: 0 0 auto; }

	/* Secondary utility bar: scroll it rather than let it break the page box. */
	.scaffold-tb-subnav,
	.subnav-menu {
		display: flex;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex-wrap: nowrap;
	}
	/* width:100% (not auto) so it fills the box instead of defining it. */
	.subnav-menu { width: 100%; gap: 1.1rem; padding-inline: 1rem; }
	.subnav-menu > li { flex: 0 0 auto; white-space: nowrap; }
	.scaffold-tb-subnav::-webkit-scrollbar,
	.subnav-menu::-webkit-scrollbar { display: none; }

	/* Elementor lays hero/text out with inline widths that ignore the viewport. */
	.promo-banner, .promo-banner__body,
	.promo-banner__title, .promo-banner__subtitle { max-width: 100%; }

	/* Nothing may exceed the viewport box. */
	img, video, iframe, table, pre { max-width: 100%; height: auto; }
	.elementor-section, .elementor-container, .elementor-widget-wrap { max-width: 100%; }

	/* Keep the floating nav button clear of the last section. */
	.site-footer { padding-bottom: 5rem; }
}

/* ==========================================================================
   HEADER COLLISION GUARD (desktop)
   The Elementor header lays logo / nav / search / actions out in sibling
   widget containers that are display:block, so nothing stops the nav from
   running underneath the search field once the labels get long. Measured:
   the "Décoration" link sat at x=606-714 while the search box started at 629.
   Constrain the nav and let it ellipsise rather than overlap.
   ========================================================================== */
@media (min-width: 901px) {
	.header-search { max-width: 420px; margin-inline: auto; }

	/* Never let a nav row bleed into a sibling widget. */
	.scaffold-tb-header .elementor-widget-container { min-width: 0; }
	.scaffold-tb-header ul[id^="menu-"] {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1.25rem;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}
	.scaffold-tb-header ul[id^="menu-"] > li > a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 15rem;
	}
}

/* ==========================================================================
   TOUCH TARGETS (measured, not guessed)
   Audited at 375px: .search-submit 42px, .shop-view-toggle__btn 38px,
   .wishlist-btn 38px, .quick-view-btn 41px, .mini-cart__close 30x28.
   All below the WCAG 2.5.5 44px minimum, which matters more here than usual
   because this store is used almost entirely on phones.
   ========================================================================== */
@media (max-width: 900px) {
	.search-submit,
	.shop-view-toggle__btn,
	.wishlist-btn,
	.quick-view-btn,
	.mini-cart__close,
	.product-card__action,
	.woocommerce .button,
	.woocommerce button.button,
	.woocommerce a.button {
		min-height: 44px;
		min-width: 44px;
	}
	/* Icon-only controls: keep the glyph centred once the box grows. */
	body .search-submit,
	body .shop-view-toggle__btn,
	body .wishlist-btn,
	body .mini-cart__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   HEADER — three rows, so search and department nav can never collide.
   Everything on blue must be white; the parent left cart totals in navy on
   royal blue, which was effectively unreadable.
   ========================================================================== */
.cs-header { position: relative; z-index: 500; }
.cs-header .container { width: min(100% - 2rem, var(--container-max, 1280px)); margin-inline: auto; }

/* Row 1 — utility */
.cs-util { background: var(--cs-navy); color: #fff; font-size: .82rem; }
.cs-util__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.cs-util__msg { margin: 0; color: #fff; }
.cs-util__links { display: flex; gap: 1.25rem; }
.cs-util__links a { color: #dbe6ff; text-decoration: none; }
.cs-util__links a:hover { color: var(--cs-yellow); }

/* Row 2 — main */
.cs-main { background: var(--cs-royal); color: #fff; }
.cs-main__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 78px; padding-block: .6rem; }

.cs-logo { flex: 0 0 auto; display: flex; align-items: center; }
/* Brand rule: the lockup is blue+gold, so on a blue bar it sits on a white plate. */
.cs-logo .custom-logo-link {
	display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 10px; padding: .3rem .55rem; line-height: 0;
}
.cs-logo img, .cs-logo .custom-logo { height: 46px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.cs-logo__text { color: #fff; font-family: var(--font-display); font-size: 1.6rem; text-decoration: none; text-transform: uppercase; }

.cs-deliver { display: none; align-items: center; gap: .45rem; color: #fff; flex: 0 0 auto; }
.cs-deliver svg { width: 20px; height: 20px; }
.cs-deliver__txt { display: flex; flex-direction: column; line-height: 1.15; }
.cs-deliver__txt small { font-size: .7rem; color: #c6d6f5; }
.cs-deliver__txt strong { font-size: .88rem; }

/* Search — the primary way people navigate a 12,000 SKU catalogue. */
.cs-search { flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0;
	background: #fff; border-radius: 8px; overflow: hidden; height: 46px;
	border: 2px solid transparent; transition: border-color .15s ease; }
.cs-search:focus-within { border-color: var(--cs-yellow); }
.cs-search__scope {
	flex: 0 0 auto; max-width: 170px; border: 0; background: #eef2fa;
	color: var(--cs-navy); font: 500 .85rem var(--font-body);
	padding: 0 .7rem; cursor: pointer;
}
.cs-search__input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0 .9rem;
	font: 400 .95rem var(--font-body); color: var(--cs-navy); }
.cs-search__input:focus { outline: none; }
.cs-search__btn { flex: 0 0 auto; width: 56px; border: 0; cursor: pointer;
	background: var(--cs-yellow); color: var(--cs-navy);
	display: inline-flex; align-items: center; justify-content: center; }
.cs-search__btn:hover { background: #ffe600; }
.cs-search__btn svg { width: 21px; height: 21px; }

/* Actions — aligned on a shared baseline, all white. */
.cs-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.cs-action {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .45rem .6rem; border-radius: 8px;
	color: #fff; text-decoration: none; line-height: 1.15;
	border: 1px solid transparent; min-height: 48px;
}
.cs-action:hover { border-color: rgba(255,255,255,.5); }
.cs-action__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cs-action__icon svg { width: 23px; height: 23px; color: #fff; }
.cs-action__txt { display: none; flex-direction: column; }
.cs-action__txt small { font-size: .68rem; color: #c6d6f5; white-space: nowrap; }
.cs-action__txt strong { font-size: .85rem; color: #fff; white-space: nowrap; }
.cs-action__txt--tight { justify-content: center; }

/* Count badge — yellow on navy reads at any size. */
.cs-badge {
	position: absolute; top: -6px; right: -9px;
	min-width: 18px; height: 18px; padding: 0 4px;
	background: var(--cs-yellow); color: var(--cs-navy);
	border-radius: 999px; font: 700 .68rem/18px var(--font-body);
	text-align: center;
}
.cs-badge[hidden] { display: none; }

/* Row 3 — departments */
.cs-rayons { background: #123a86; color: #fff; position: relative; }
.cs-rayons__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 46px; }
.cs-rayons__trigger {
	display: inline-flex; align-items: center; gap: .5rem;
	background: none; border: 0; cursor: pointer; color: #fff;
	font: 700 .9rem var(--font-body); padding: .5rem .1rem; min-height: 44px;
}
.cs-rayons__trigger svg { width: 19px; height: 19px; }
.cs-rayons__trigger:hover { color: var(--cs-yellow); }
.cs-rayons__nav { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cs-rayons__nav ul { display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.cs-rayons__nav li { flex: 0 0 auto; }
.cs-rayons__nav a { color: #e3ecff; text-decoration: none; font-size: .87rem; white-space: nowrap; }
.cs-rayons__nav a:hover { color: var(--cs-yellow); }
.cs-rayons__promo { display: inline-flex; align-items: center; gap: .45rem; color: var(--cs-yellow);
	font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.cs-rayons__promo svg { width: 18px; height: 18px; }

/* Mega panel */
.cs-mega { position: absolute; inset-inline: 0; top: 100%; background: #fff;
	box-shadow: 0 18px 40px rgba(12,38,86,.22); border-top: 3px solid var(--cs-yellow);
	padding: 1.75rem 0 2rem; }
.cs-mega[hidden] { display: none; }
.cs-mega__grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.cs-mega__head { display: flex; align-items: flex-start; gap: .65rem; text-decoration: none;
	padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 2px solid var(--cs-offwhite); }
.cs-mega__icon { flex: 0 0 34px; height: 34px; border-radius: 8px; background: var(--cs-offwhite);
	color: var(--cs-royal); display: inline-flex; align-items: center; justify-content: center; }
.cs-mega__icon svg { width: 18px; height: 18px; }
.cs-mega__head strong { display: block; color: var(--cs-royal); font-size: .95rem; line-height: 1.2; }
.cs-mega__head small { color: var(--color-muted); font-size: .74rem; }
.cs-mega__head:hover strong { text-decoration: underline; }
.cs-mega__list { list-style: none; margin: 0; padding: 0; }
.cs-mega__list a { display: block; padding: .28rem 0; color: var(--cs-navy);
	text-decoration: none; font-size: .86rem; }
.cs-mega__list a:hover { color: var(--cs-royal); text-decoration: underline; }

@media (min-width: 1100px) {
	.cs-deliver { display: flex; }
	.cs-action__txt { display: flex; }
}

/* ==========================================================================
   MOBILE HEADER + APP-LIKE BOTTOM TAB BAR
   Target feel: a native shopping app. Thumb-reachable primary actions,
   one-hand search, no hunting.
   ========================================================================== */
.cs-burger { display: none; }

@media (max-width: 900px) {
	.cs-util__links { display: none; }
	.cs-util__inner { justify-content: center; }
	.cs-util { font-size: .75rem; }

	.cs-main__inner { flex-wrap: wrap; gap: .6rem .75rem; min-height: 0; padding: .6rem 0 .7rem; }
	.cs-burger {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
		order: 1; flex: 0 0 auto;
	}
	.cs-burger__bars, .cs-burger__bars::before, .cs-burger__bars::after {
		content: ""; display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
	}
	.cs-burger__bars { position: relative; }
	.cs-burger__bars::before { position: absolute; top: -6px; }
	.cs-burger__bars::after { position: absolute; top: 6px; }

	.cs-logo { order: 2; flex: 1 1 auto; }
	.cs-logo img, .cs-logo .custom-logo { height: 36px; max-width: 120px; }
	.cs-deliver { display: none; }
	.cs-actions { order: 3; flex: 0 0 auto; gap: .1rem; }
	body .cs-header .cs-action__txt { display: none; }
	.cs-action { padding: .4rem; min-width: 44px; justify-content: center; }

	.cs-search { order: 4; flex: 1 1 100%; height: 44px; }
	.cs-search__scope { display: none; }        /* scope lives in the drawer on mobile */

	/* The department row scrolls horizontally like an app chip rail. */
	.cs-rayons__inner { min-height: 44px; gap: .75rem; }
	.cs-rayons__trigger span { display: none; }
	.cs-rayons__trigger { min-width: 44px; justify-content: center; }
	.cs-rayons__promo { display: none; }
	.cs-rayons__nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.cs-rayons__nav::-webkit-scrollbar { display: none; }
	.cs-rayons__nav ul { gap: .5rem; }
	.cs-rayons__nav a {
		display: inline-flex; align-items: center; min-height: 32px;
		padding: 0 .75rem; border-radius: 999px;
		background: rgba(255,255,255,.14); color: #fff; font-size: .82rem;
	}
	.cs-rayons__nav a:hover { background: var(--cs-yellow); color: var(--cs-navy); }

	/* Mega is drawer-only on mobile. */
	body .cs-header .cs-mega { display: none; }

	/* --- bottom tab bar --- */
	.cs-tabbar {
		position: fixed; inset-inline: 0; bottom: 0; z-index: 9990;
		display: grid; grid-template-columns: repeat(5, 1fr);
		background: #fff; border-top: 1px solid var(--color-border);
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -4px 18px rgba(12,38,86,.10);
	}
	.cs-tab {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; min-height: 56px; text-decoration: none;
		color: var(--cs-navy); font-size: .68rem; font-weight: 600;
		background: none; border: 0; cursor: pointer; position: relative;
	}
	.cs-tab svg { width: 22px; height: 22px; }
	.cs-tab.is-active { color: var(--cs-royal); }
	.cs-tab.is-active::before {
		content: ""; position: absolute; top: 0; left: 22%; right: 22%;
		height: 3px; border-radius: 0 0 3px 3px; background: var(--cs-yellow);
	}
	.cs-tab .cs-badge { top: 4px; right: 22%; }

	/* Keep content clear of the bar. */
	body { padding-bottom: 60px; }
	.site-footer { padding-bottom: 1rem; }

	/* The old floating button is replaced by the tab bar. */
	body .cs-navtoggle { display: none; }
}

/* Drawer department icons (mobile) */
.cs-drawer__ico { display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; margin-right: .6rem; border-radius: 7px;
	background: var(--cs-offwhite); color: var(--cs-royal); flex: 0 0 30px; }
.cs-drawer__ico svg { width: 16px; height: 16px; }
.cs-drawer__menu > li > a { display: flex; align-items: center; }

/* Trust bar icons are SVG (no emoji anywhere on this site). */
.cs-trustbar__icon svg { width: 18px; height: 18px; }

/* ==========================================================================
   HEADER FIXES (from visual QA)
   ========================================================================== */

/* Logo: SVG lockup on the brand-approved white holding shape. */
.cs-logo__link {
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 10px; padding: .45rem .7rem; line-height: 0;
	text-decoration: none;
}
.cs-logo__link img { height: 40px; width: auto; max-width: 165px; display: block; object-fit: contain; }
.cs-logo .custom-logo-link { padding: 0; background: none; }

/* The global price colour was turning the header cart total navy on royal
   blue — unreadable. Header totals are always white. */
/* Beats the global navy price colour by specificity, not by !important. */
.cs-header .cs-action .woocommerce-Price-amount,
.cs-header .cs-action .amount,
.cs-header .cs-action__txt strong,
.cs-header .cs-action__txt strong span,
.cs-header .cs-action__txt strong bdi { color: #fff; }
.cs-action--cart .cs-action__txt { min-width: 3.6rem; }

/* Keep the cart badge clear of the total. */
.cs-action--cart .cs-action__icon { margin-right: .15rem; }

/* Department bar: no mid-word truncation, no wrapping trigger. */
.cs-rayons__trigger span { white-space: nowrap; }
.cs-rayons__nav { overflow-x: auto; scrollbar-width: none; }
.cs-rayons__nav::-webkit-scrollbar { display: none; }
.cs-rayons__nav ul { flex-wrap: nowrap; }
.cs-rayons__nav a { display: inline-block; }

/* At tighter desktop widths drop the least-critical items rather than clip. */
@media (max-width: 1240px) {
	.cs-rayons__promo { display: none; }
}
@media (max-width: 1100px) {
	.cs-search__scope { max-width: 120px; }
}

/* ==========================================================================
   QA PASS — shop / product / cart / checkout (every rule below maps to a
   measured defect; see the measurement in the comment).
   ========================================================================== */

/* Mobile chrome leaked onto desktop: .cs-tabbar only had styles inside the
   max-900 media query, so at 1440px it rendered as an unstyled 33px-tall link
   row at the bottom of every page. Hide it outside the mobile range only —
   an unscoped display:none here would also beat the earlier max-900 rule
   (same specificity, later in the file) and kill the tab bar on phones. */
@media (min-width: 901px) {
	.cs-tabbar { display: none; }
}

/* Department bar: at 1440px the 7th item ("Hygiène & Beauté") ended at
   x=1180 while its clipping container ended at x=1165 — cut mid-word.
   Drop it below 1470px instead of clipping (1380px rule already existed). */
@media (max-width: 1470px) {
	.cs-rayons__nav li:nth-child(n+7) { display: none; }
}

/* Primary CTAs (add-to-cart, proceed-to-checkout, place order) rendered
   ROYAL BLUE with a stray yellow border: the parent's main.css forces
   `background: var(--color-accent) !important` on all .alt buttons, which
   beat the child's yellow rule. Brand rule: yellow is the action colour and
   navy-on-yellow is the highest-contrast pair the palette allows (14:1).
   Same specificity + !important, loaded after the parent, so these win. */
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--cs-yellow) !important;
	color: var(--cs-navy) !important;
	border-color: var(--cs-yellow);
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: #ffe600 !important;
	color: var(--cs-navy) !important;
	border-color: var(--cs-navy);
	box-shadow: 0 8px 22px rgba(12, 38, 86, .18);
}

/* Product grid: parent collapses to ONE column below 400px, giving 327px-wide,
   527px-tall cards — 12 products was ~6,600px of scrolling at 375px (the most
   common DRC viewport). Two-up stays comfortably readable at ~160px/card. */
@media (max-width: 400px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: .75rem;
	}
}

/* Pagination links measured 24x32px at 375px — below the 44px minimum. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Cart line-remove "×" measured 26x26px. Keep the small visual circle but
   give it a 44px hit area. */
.woocommerce table.shop_table a.remove {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Shop sort <select> measured 41px tall at 375px. */
.woocommerce .woocommerce-ordering select.orderby { min-height: 44px; }

/* Department chip rail: chips are 32px tall (visual choice — a taller pill
   reads as a button, not a rail). Extend the tap area to 44px with an
   invisible overlay instead of growing the pill. */
@media (max-width: 900px) {
	.cs-rayons__nav a { position: relative; }
	.cs-rayons__nav a::before {
		content: "";
		position: absolute;
		inset: -6px 0;
	}
}

/* Checkout order-review table: a responsive rule flattens the table to
   display:block, which jammed label and value together with zero gap
   ("Sous-total45.00 $", measured 0px between cells at 375px). Lay each row
   out as label-left / amount-right instead. */
.woocommerce-checkout-review-order-table tr {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}
.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child {
	text-align: right;
	margin-left: auto;
}

/* Mobile logo size: the desktop "HEADER FIXES" rule (.cs-logo__link img,
   40px/165px) ties on specificity with the max-900 36px rule and wins on
   file order, which inflates the logo plate to 129px. Measured at a 360px
   layout (common DRC Android width): burger 44 + logo 129 + actions 135 +
   gaps 24 = 332px against a 328px container, wrapping the header onto four
   rows. Scope a heavier selector to mobile so the row adds up to <=328px. */
@media (max-width: 900px) {
	.cs-logo .cs-logo__link { padding: .35rem .55rem; }
	.cs-logo .cs-logo__link img { height: 36px; max-width: 110px; }
}

/* Cart coupon: WooCommerce's smallscreen stylesheet forces input and button
   to width:48% (selector .woocommerce-page table.cart …, which out-ranks a
   4-class selector without the table/td elements). The 48% button wrapped
   "Appliquer le code promo" onto two cramped lines at 375px. Same
   specificity + later load order wins; stack both full-width. */
@media (max-width: 900px) {
	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce-cart table.cart td.actions .coupon .button {
		width: 100%;
		float: none;
		margin: 0 0 .5rem;
	}
}

/* ==========================================================================
   HOME — mass-retail merchandising layout
   White canvas, image-first, price as the loudest element on a card, mixed
   promo tiles, rails everywhere. Sections are separated by whitespace rather
   than colour blocks, so the products carry the page.
   ========================================================================== */
.cs-home { background: #fff; }
.cs-home .container { width: min(100% - 2rem, 1460px); margin-inline: auto; }

.cs-sec { padding: 1.25rem 0 .5rem; }
.cs-sec--tight { padding-block: 1.5rem 2.5rem; }
.cs-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.cs-sec__title {
	font-family: var(--font-body);      /* UI-level heading, not display type */
	text-transform: none; letter-spacing: -.01em;
	font-size: 1.28rem; font-weight: 700; color: var(--cs-navy); margin: 0; line-height: 1.2;
}
.cs-sec__note { margin: .15rem 0 0; font-size: .84rem; color: var(--color-muted); }
.cs-sec__all { font-size: .87rem; font-weight: 600; color: var(--cs-navy);
	text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cs-sec__all:hover { color: var(--cs-royal); }

/* ---------------------------------------------------------------- hero */
.cs-hero { padding-top: 1rem; }
.cs-hero__panel {
	position: relative; overflow: hidden; border-radius: 16px;
	background: linear-gradient(100deg, var(--cs-royal) 0%, #1b52b8 55%, var(--cs-yellow) 55.1%, var(--cs-yellow) 100%);
	min-height: 210px; display: flex; align-items: center; padding: 1.75rem 2rem;
}
.cs-hero__copy { position: relative; z-index: 2; max-width: 30ch; }
.cs-hero__kicker { margin: 0 0 .3rem; color: #dbe6ff; font-size: .82rem; font-weight: 600; }
.cs-hero__title { margin: 0 0 1rem; color: #fff; font-family: var(--font-body);
	text-transform: none; letter-spacing: -.02em; font-size: clamp(1.5rem, 3.2vw, 2.3rem);
	font-weight: 700; line-height: 1.15; }
.cs-hero__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.4rem;
	background: #fff; color: var(--cs-navy); border-radius: 999px;
	font-weight: 700; font-size: .92rem; text-decoration: none; }
.cs-hero__cta:hover { background: var(--cs-navy); color: #fff; }
.cs-hero__blob { position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
	width: 46%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff8a8, var(--cs-yellow)); }

/* ------------------------------------------------------------ product card */
.cs-rail {
	list-style: none; margin: 0; padding: .25rem .2rem 1rem; display: grid;
	grid-auto-flow: column; grid-auto-columns: minmax(178px, 1fr);
	gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
.cs-rail::-webkit-scrollbar { height: 6px; }
.cs-rail::-webkit-scrollbar-thumb { background: #d3dcec; border-radius: 999px; }

.cs-pc {
	position: relative; scroll-snap-align: start;
	background: #fff; border-radius: 12px; padding: .5rem .5rem .75rem;
	display: flex; flex-direction: column;
	transition: box-shadow .15s ease;
}
.cs-pc:hover { box-shadow: 0 0 0 1px #e3e9f4, 0 10px 28px rgba(12,38,86,.13); }
.cs-pc__fav {
	position: absolute; top: .65rem; right: .65rem; z-index: 2;
	width: 32px; height: 32px; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--cs-navy);
	display: inline-flex; align-items: center; justify-content: center;
}
.cs-pc__fav svg { width: 17px; height: 17px; }
.cs-pc__fav:hover { background: var(--cs-yellow); }
.cs-pc__media { display: block; border-radius: 8px; overflow: hidden; background: #f5f7fb; }
.cs-pc__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.cs-pc__body { display: flex; flex-direction: column; gap: .18rem; padding: .6rem .25rem 0; flex: 1 1 auto; }

/* Price leads — it is the decision driver in this format. */
.cs-pc__price { margin: 0; line-height: 1.15; }
.cs-pc__price .woocommerce-Price-amount { font-size: 1.12rem; font-weight: 700; color: var(--cs-navy); }
.cs-pc__price del { font-size: .8rem; color: var(--color-muted); font-weight: 400; margin-left: .3rem; }

.cs-pc__title {
	font-size: .84rem; line-height: 1.32; color: #33415c; text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.2em;
}
.cs-pc__title:hover { text-decoration: underline; }
.cs-pc__add {
	margin-top: .55rem; align-self: flex-start;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 0 1.1rem;
	border: 1px solid var(--cs-navy); border-radius: 999px;
	background: #fff; color: var(--cs-navy);
	font-size: .85rem; font-weight: 700; text-decoration: none;
}
.cs-pc__add:hover { background: var(--cs-navy); color: #fff; }
.cs-pc__add--alt { border-color: var(--color-border); color: var(--color-muted); }

/* ---------------------------------------------------------------- mosaic */
.cs-mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.cs-mo {
	position: relative; overflow: hidden; border-radius: 14px;
	min-height: 230px; padding: 1.3rem 1.4rem; display: flex; align-items: flex-start;
	text-decoration: none;
}
.cs-mo--wide { grid-column: span 2; }
.cs-mo__txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .25rem; max-width: 22ch; }
.cs-mo__title { font-size: 1.32rem; font-weight: 700; line-height: 1.16; letter-spacing: -.01em; }
.cs-mo__sub { font-size: .87rem; line-height: 1.4; }
.cs-mo__cta { margin-top: .8rem; align-self: flex-start; display: inline-flex; align-items: center;
	min-height: 38px; padding: 0 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.cs-mo__img {
	position: absolute; right: -8%; bottom: -12%; width: 58%; max-width: 250px;
	aspect-ratio: 1; object-fit: cover; border-radius: 50%;
	opacity: .95; pointer-events: none;
}
.cs-mo--navy  { background: var(--cs-navy); color: #fff; }
.cs-mo--navy .cs-mo__sub { color: #cddcf7; }
.cs-mo--navy .cs-mo__cta { background: #fff; color: var(--cs-navy); }
.cs-mo--blue  { background: var(--cs-royal); color: #fff; }
.cs-mo--blue .cs-mo__sub { color: #d5e2fb; }
.cs-mo--blue .cs-mo__cta { background: var(--cs-yellow); color: var(--cs-navy); }
.cs-mo--yellow { background: var(--cs-yellow); color: var(--cs-navy); }
.cs-mo--yellow .cs-mo__cta { background: var(--cs-navy); color: #fff; }
.cs-mo--light { background: #eaf0fb; color: var(--cs-navy); }
.cs-mo--light .cs-mo__cta { background: var(--cs-navy); color: #fff; }

/* --------------------------------------------------------------- circles */
.cs-circles { list-style: none; margin: 0; padding: .25rem 0 1rem; display: grid;
	grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr);
	gap: .8rem; overflow-x: auto; scrollbar-width: thin; }
.cs-circles::-webkit-scrollbar { height: 6px; }
.cs-circles::-webkit-scrollbar-thumb { background: #d3dcec; border-radius: 999px; }
.cs-circle a { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; }
.cs-circle__img {
	width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
	background: #eef2fa; display: inline-flex; align-items: center; justify-content: center;
	color: var(--cs-royal); transition: box-shadow .15s ease;
}
.cs-circle__img img { width: 100%; height: 100%; object-fit: cover; }
.cs-circle__img svg { width: 30px; height: 30px; }
.cs-circle a:hover .cs-circle__img { box-shadow: 0 0 0 3px var(--cs-yellow); }
.cs-circle__label { font-size: .8rem; font-weight: 600; color: var(--cs-navy); text-align: center; line-height: 1.25; }

/* ----------------------------------------------------------------- split */
.cs-split { display: grid; gap: 1rem; grid-template-columns: 1fr 2fr; align-items: stretch; }
.cs-split__panel {
	display: flex; flex-direction: column; justify-content: center; gap: .3rem;
	background: linear-gradient(140deg, var(--cs-royal), var(--cs-navy));
	border-radius: 14px; padding: 1.7rem; color: #fff; text-decoration: none; min-height: 250px;
}
.cs-split__title { font-size: 1.4rem; font-weight: 700; line-height: 1.18; }
.cs-split__sub { font-size: .9rem; color: #d5e2fb; }
.cs-split__cta { margin-top: .9rem; align-self: flex-start; background: var(--cs-yellow);
	color: var(--cs-navy); border-radius: 999px; padding: .6rem 1.2rem; font-weight: 700; font-size: .86rem; }
.cs-split__rail { list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(3, 1fr); gap: .9rem; }

/* -------------------------------------------------------------- services */
.cs-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem;
	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.cs-svc a { display: flex; align-items: flex-start; gap: .7rem; padding: .95rem 1.1rem;
	border: 1px solid var(--color-border); border-radius: 12px; text-decoration: none; background: #fff; }
.cs-svc svg { width: 21px; height: 21px; color: var(--cs-royal); flex: 0 0 21px; margin-top: .1rem; }
.cs-svc strong { display: block; color: var(--cs-navy); font-size: .89rem; }
.cs-svc span { color: var(--color-muted); font-size: .81rem; line-height: 1.4; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
	.cs-mosaic { grid-template-columns: repeat(2, 1fr); }
	.cs-split { grid-template-columns: 1fr; }
	.cs-split__rail { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.cs-hero__panel { min-height: 168px; padding: 1.25rem 1.3rem;
		background: linear-gradient(120deg, var(--cs-royal), #1b52b8 70%, #2b62c9); }
	.cs-hero__blob { display: none; }
	.cs-sec__title { font-size: 1.1rem; }
	.cs-rail { grid-auto-columns: minmax(150px, 1fr); gap: .7rem; }
	.cs-mosaic { grid-template-columns: 1fr; }
	.cs-mo--wide { grid-column: span 1; }
	.cs-mo { min-height: 178px; }
	.cs-mo__img { width: 46%; }
	.cs-split__rail { grid-template-columns: repeat(2, 1fr); }
	.cs-circle__img { width: 76px; height: 76px; }
}

/* Rails with only a few items stretched cards to 399px (measured). Cap the
   track column so a 3-item rail still reads as a rail, not three posters. */
.cs-rail { grid-auto-columns: minmax(178px, 220px); justify-content: start; }
.cs-split__rail { grid-template-columns: repeat(3, minmax(0, 230px)); }
@media (max-width: 720px) {
	.cs-rail { grid-auto-columns: minmax(150px, 170px); }
	.cs-split__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards were ragged because titles run 1-2 lines: pin the title block and push
   the add control to the bottom so every "Ajouter" sits on one baseline. */
.cs-pc { min-height: 100%; }
.cs-pc__body { justify-content: flex-start; }
.cs-pc__title { min-height: 2.25em; }
.cs-pc__add { margin-top: auto; }
.cs-rail > .cs-pc, .cs-split__rail > .cs-pc { height: 100%; }

/* ==========================================================================
   HERO — real photography
   The image is shot with its subject weighted right, so the headline sits in
   actual negative space. A left-to-right scrim keeps the text legible without
   washing out the product cluster on the right.
   ========================================================================== */
.cs-hero__panel {
	position: relative; overflow: hidden; border-radius: 16px;
	background: var(--cs-royal);        /* fallback before the image paints */
	min-height: 300px; display: flex; align-items: center;
	padding: 2rem 2.4rem;
}
.cs-hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: right center; z-index: 0;
}
.cs-hero__panel::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg,
		rgba(12,38,86,.90) 0%,
		rgba(19,58,132,.72) 34%,
		rgba(23,70,158,.20) 56%,
		rgba(23,70,158,0) 72%);
}
.cs-hero__copy { position: relative; z-index: 2; max-width: 34ch; }
.cs-hero__sub { margin: 0 0 1.15rem; color: #e2ebfc; font-size: .95rem; line-height: 1.5; max-width: 32ch; }
.cs-hero__title { text-shadow: 0 1px 12px rgba(12,38,86,.35); }

/* Mosaic tiles that carry a full-bleed banner photo.
   Two classes on purpose: on the Elementor-built homepage, Elementor's
   `.elementor img { height: auto }` (0,1,1) beat a lone `.cs-mo__bg` (0,1,0),
   so narrow tiles drew the photo at its natural height and left a bare strip
   underneath (measured on "Fêtes & déco"). Banner subjects sit on the right,
   and narrow tiles only show about three quarters of the width, so anchor right.
   This also covers any tile image the shop owner sets in the Elementor widget. */
.cs-mo .cs-mo__bg {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: right center; z-index: 0;
}
.cs-mo:has(.cs-mo__bg)::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(12,38,86,.88) 0%, rgba(12,38,86,.62) 45%, rgba(12,38,86,.12) 78%);
}
.cs-mo--yellow:has(.cs-mo__bg)::after {
	background: linear-gradient(90deg, rgba(255,242,0,.94) 0%, rgba(255,242,0,.75) 46%, rgba(255,242,0,.05) 80%);
}
.cs-mo--blue:has(.cs-mo__bg)::after {
	background: linear-gradient(90deg, rgba(23,70,158,.90) 0%, rgba(23,70,158,.66) 45%, rgba(23,70,158,.08) 80%);
}
/* Light tiles keep navy text, so they need a light wash, not the navy one. */
.cs-mo--light:has(.cs-mo__bg)::after {
	background: linear-gradient(90deg, rgba(234,240,251,.96) 0%, rgba(234,240,251,.80) 46%, rgba(234,240,251,.05) 80%);
}
.cs-mo:has(.cs-mo__bg) .cs-mo__txt { position: relative; z-index: 2; }
.cs-mo--navy:has(.cs-mo__bg) .cs-mo__title,
.cs-mo--navy:has(.cs-mo__bg) .cs-mo__sub { color: #fff; }

@media (max-width: 900px) {
	.cs-hero__panel { min-height: 230px; padding: 1.4rem 1.5rem; }
	.cs-hero__img { object-position: 72% center; }
	.cs-hero__panel::after {
		background: linear-gradient(90deg, rgba(12,38,86,.94) 0%, rgba(12,38,86,.80) 52%, rgba(23,70,158,.30) 100%);
	}
	.cs-hero__sub { display: none; }
}

/* ==========================================================================
   VARIABLE PRODUCT CONTROLS
   Measured at 360px: the variation <select> rendered 17px tall — the single
   most important control on a variable product and effectively untappable.
   WooCommerce's zoom image also sat at 1024px inside a 360px viewport.
   ========================================================================== */
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { display: block; width: 100%; padding: 0; }
.woocommerce div.product form.cart .variations label { font-weight: 600; color: var(--cs-navy); margin-bottom: .3rem; display: block; }
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart select {
	width: 100%;
	min-height: 48px;
	padding: 0 2.25rem 0 .85rem;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: #fff;
	font: 500 .95rem var(--font-body);
	color: var(--cs-navy);
	/* Native arrow is inconsistent once height is forced — draw our own. */
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2656' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 18px;
}
.woocommerce div.product form.cart .variations select:focus-visible { outline: 3px solid var(--cs-yellow); outline-offset: 1px; }
.woocommerce div.product form.cart .reset_variations {
	display: inline-flex; align-items: center; min-height: 44px;
	font-size: .86rem; color: var(--cs-royal); font-weight: 600;
}
.woocommerce div.product .woocommerce-variation-price { margin: .5rem 0 .75rem; }
.woocommerce div.product .woocommerce-variation-price .woocommerce-Price-amount { font-size: 1.4rem; font-weight: 700; color: var(--cs-navy); }

/* ==========================================================================
   PRODUCT GALLERY — stable frame, working zoom
   Client report (Sep 2026): "images move randomly / stutter" on product
   pages. Measured: the old rule below capped img.zoomImg at max-width:100%
   !important, but zoom.js sets the layer's inline width AND height to the
   photo's natural size (1024x1024 here). Width was clamped to 592px while
   height stayed 1024px, so the zoom layer rendered squashed and slid only
   vertically under the cursor (top -7px … -424px, left always 0). That is the
   "random movement". zoom.js already sets overflow:hidden on its container,
   so the cap was never needed to prevent overflow — it is removed.
   Second cause: flexslider smoothHeight animated the viewport height between
   photos of different sizes (the client's originals are mixed ratios), so the
   page jumped on every thumbnail click. Every slide now shares one square
   frame (object-fit: contain, white ground) and the carousel is switched to a
   fade with a fixed height (see chicshop_gallery_carousel_options).
   ========================================================================== */
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image > a { display: block; height: 100%; }
.woocommerce div.product .woocommerce-product-gallery__image img.wp-post-image,
.woocommerce div.product .woocommerce-product-gallery__image > a > img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 0;
}
/* Zoom layer: zoom.js owns its inline size and position — never override. */
.woocommerce div.product img.zoomImg { border-radius: 0; }
/* Thumbnails: same square frame so the strip never jitters either. */
/* clear: both — the slides are floats (float:left; margin-right:-100%, set
   by flexslider), so without it the thumbnail strip floated up BEHIND the
   main photo: measured at the exact same y as the image. The thumbnails were
   invisible, and the active one's border showed as a small arc in the photo's
   top-left corner. */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs { clear: both; position: relative; z-index: 1; padding-top: .6rem; }
.woocommerce div.product .flex-control-thumbs { margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.woocommerce div.product .flex-control-thumbs li { width: calc((100% - 1.5rem) / 4); margin: 0; float: none; }
.woocommerce div.product .flex-control-thumbs li img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff;
	border: 2px solid var(--color-border); border-radius: 8px; opacity: 1; cursor: pointer;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active { border-color: var(--cs-royal); }
.woocommerce div.product .flex-control-thumbs li img:hover { border-color: var(--cs-steel); }
@media (max-width: 900px) {
	/* Zoom is a desktop affordance; on touch it only fights the swipe. */
	.woocommerce div.product img.zoomImg { display: none !important; }
	.woocommerce div.product div.images { overflow: hidden; }
	.cs-search__btn { min-height: 44px; height: auto; }
}

/* Quantity stepper: the parent renders 30x30 +/- buttons. Under the 44px
   minimum, and quantity is a control people genuinely fumble on a phone. */
@media (max-width: 900px) {
	.qty-stepper { display: inline-flex; align-items: stretch; }
	.qty-stepper button { min-width: 44px; min-height: 44px; font-size: 1.15rem; }
	.qty-stepper input { min-height: 44px; text-align: center; }
}

/* Subcategory chip rail on department pages. */
.cs-subcats { margin: 0 0 1.25rem; }
.cs-subcats ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cs-subcat {
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: 40px; padding: 0 .95rem;
	border: 1px solid var(--color-border); border-radius: 999px;
	background: #fff; color: var(--cs-navy);
	font-size: .86rem; font-weight: 600; text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.cs-subcat span { font-weight: 400; font-size: .78rem; color: var(--color-muted); }
.cs-subcat:hover { border-color: var(--cs-royal); color: var(--cs-royal); }
.cs-subcat.is-current { background: var(--cs-navy); border-color: var(--cs-navy); color: #fff; }
.cs-subcat.is-current span { color: #b9c9e8; }
@media (max-width: 900px) {
	.cs-subcats ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
	.cs-subcats ul::-webkit-scrollbar { display: none; }
	.cs-subcat { flex: 0 0 auto; min-height: 44px; }
}

/* ==========================================================================
   LIST VIEW
   Two problems. First the parent sets `ul.products { display: grid !important }`
   and then `.products--list { display: block }` without !important, so the
   toggle could never take effect. Second, the real row markup is
   li.product > a.woocommerce-loop-product__link (thumb, title, price stacked)
   + a sibling button — so making only the <li> a flex row left the anchor
   stacking its contents and centring them.
   Both levels are laid out here.
   ========================================================================== */
.woocommerce ul.products.products--list,
.woocommerce-page ul.products.products--list {
	display: block !important;
	grid-template-columns: none !important;
}

.woocommerce ul.products.products--list li.product {
	display: grid !important;
	/* display:contents on the anchor drops thumb, title and price straight onto
	   this grid, so each needs explicit placement or the price lands in the
	   action column on top of the button. */
	grid-template-columns: 168px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: .3rem 1.5rem;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 .85rem !important;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	text-align: left !important;
	background: #fff;
	transition: box-shadow .15s ease;
}
.woocommerce ul.products.products--list li.product:hover {
	box-shadow: 0 6px 20px rgba(12, 38, 86, .10);
}

/* The link is the first two columns: media, then the text stack. */
.woocommerce ul.products.products--list li.product > a.woocommerce-loop-product__link {
	display: contents;                 /* let its children land on the li grid */
}
.woocommerce ul.products.products--list li.product .loop-thumb {
	grid-column: 1; grid-row: 1 / 3;
	position: relative;
	width: 168px; margin: 0;
	border-radius: 8px; overflow: hidden; background: var(--cs-offwhite);
}
.woocommerce ul.products.products--list li.product .loop-thumb img {
	width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; margin: 0;
}
.woocommerce ul.products.products--list li.product .woocommerce-loop-product__title {
	grid-column: 2; grid-row: 1; align-self: end;
	font-size: 1.05rem; font-weight: 600; margin: 0; padding: 0; text-align: left;
}
.woocommerce ul.products.products--list li.product .price {
	grid-column: 2; grid-row: 2; align-self: start;
	margin: 0; text-align: left; font-size: 1.05rem;
}

/* Actions live in the third column as a tidy right rail: add-to-cart on top,
   quick view under it. The quick-view button previously had no placement at
   all, so grid auto-placement dropped it bottom-left under the thumbnail —
   measured orphaned at the far left of every row on /boutique/ list view. */
.woocommerce ul.products.products--list li.product .button,
.woocommerce ul.products.products--list li.product .added_to_cart {
	grid-column: 3; grid-row: 1; justify-self: end; align-self: end;
	width: auto !important; margin: 0 !important; white-space: nowrap;
}
.woocommerce ul.products.products--list li.product .quick-view-btn {
	grid-column: 3; grid-row: 2; justify-self: end; align-self: start;
	width: auto; margin: 0; white-space: nowrap;
}

@media (max-width: 700px) {
	.woocommerce ul.products.products--list li.product {
		grid-template-columns: 108px minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		gap: .3rem 1rem;
	}
	.woocommerce ul.products.products--list li.product .loop-thumb { grid-column: 1; grid-row: 1 / 3; width: 108px; }
	.woocommerce ul.products.products--list li.product .woocommerce-loop-product__title { grid-column: 2; grid-row: 1; }
	.woocommerce ul.products.products--list li.product .price { grid-column: 2; grid-row: 2; }
	/* grid-row must be explicit: with only a column set, auto-placement put
	   this full-width button back on row 1, painting it OVER the title and
	   thumbnail of every row (measured at 375px). */
	.woocommerce ul.products.products--list li.product .button,
	.woocommerce ul.products.products--list li.product .added_to_cart {
		grid-column: 1 / -1; grid-row: 3; justify-self: stretch; align-self: auto;
		text-align: center;
	}
	/* List view on a phone is for fast scanning; a second full-width button
	   per row doubles the row height for an action the product page already
	   offers. Grid view keeps its quick-view button. */
	.woocommerce ul.products.products--list li.product .quick-view-btn { display: none; }
}

/* Quick view cart row. After an AJAX add, WooCommerce appends a
   "Voir le panier" (.added_to_cart) link beside the add-to-cart button. The
   <p class="qv__cart"> had no layout, so the button and link overlapped — the
   link sat tucked under the button's rounded right edge. Lay them out as a
   wrapping flex row with real spacing. */
.qv__cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
	margin: 0 0 1rem;
}
.qv__cart .added_to_cart {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

/* ==========================================================================
   CATALOGUE FILTERS
   Sidebar on desktop, off-canvas on mobile. Sized for a 12,000-SKU catalogue:
   facet lists scroll rather than growing the page.
   ========================================================================== */
.cs-shop { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 2rem; align-items: start; }
.cs-shop__main { min-width: 0; }

.cs-filters { position: sticky; top: 1rem; background: #fff;
	border: 1px solid var(--color-border); border-radius: 12px; padding: 1.1rem 1.15rem; }
.cs-filters__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.cs-filters__title { font-weight: 700; color: var(--cs-navy); font-size: 1rem; flex: 1 1 auto; }
.cs-filters__clear { font-size: .8rem; color: var(--cs-royal); font-weight: 600; text-decoration: underline; }
.cs-filters__close { display: none; background: none; border: 0; font-size: 1.9rem; line-height: 1;
	color: var(--cs-navy); min-width: 44px; min-height: 44px; cursor: pointer; }

.cs-facet { padding: .85rem 0; border-top: 1px solid var(--color-border); }
.cs-facet:first-of-type { border-top: 0; padding-top: 0; }
.cs-facet__title { font-size: .82rem; font-weight: 700; color: var(--cs-navy);
	text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .55rem; font-family: var(--font-body); }
.cs-facet__range { display: flex; align-items: center; gap: .4rem; }
.cs-facet__range input { width: 100%; min-width: 0; min-height: 42px; padding: 0 .45rem;
	border: 1px solid var(--color-border); border-radius: 8px; font: 500 .88rem var(--font-body); color: var(--cs-navy);
	font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
/* Franc prices run to 7 digits; the browser's spin arrows ate the room and
   cut 1 408 073 to "140807" in a sidebar-width box. Typing is the real input. */
.cs-facet__range input::-webkit-inner-spin-button,
.cs-facet__range input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cs-facet__cur { color: var(--color-muted); font-size: .85rem; }
/* Long facet lists must not push the page height at catalogue scale. */
.cs-facet { max-height: 320px; overflow-y: auto; }

.cs-check { display: flex; align-items: center; gap: .55rem; min-height: 36px; cursor: pointer; }
.cs-check input { width: 18px; height: 18px; accent-color: var(--cs-royal); flex: 0 0 18px; }
.cs-check span { font-size: .87rem; color: var(--cs-navy); }
.cs-check em { font-style: normal; color: var(--color-muted); font-size: .78rem; }

.cs-filters__apply {
	width: 100%; min-height: 46px; margin-top: 1rem; cursor: pointer;
	background: var(--cs-yellow); color: var(--cs-navy);
	border: 2px solid var(--cs-yellow); border-radius: 999px;
	font: 700 .9rem var(--font-body);
}
.cs-filters__apply:hover { background: #ffe600; border-color: var(--cs-navy); }

.cs-filterbar { display: none; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.cs-filterbar__toggle {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 44px; padding: 0 1.1rem; cursor: pointer;
	border: 1px solid var(--cs-navy); border-radius: 999px;
	background: #fff; color: var(--cs-navy); font: 700 .88rem var(--font-body);
}
.cs-filterbar__toggle svg { width: 18px; height: 18px; }
.cs-filterbar__clear { font-size: .85rem; font-weight: 600; color: var(--cs-royal); text-decoration: underline; }

@media (max-width: 900px) {
	.cs-shop { grid-template-columns: 1fr; gap: 0; }
	.cs-filterbar { display: flex; }
	.cs-filters {
		position: fixed; inset: 0 auto 0 0; z-index: 9995;
		width: min(88vw, 340px); border-radius: 0; border: 0;
		overflow-y: auto; transform: translateX(-100%);
		transition: transform .24s ease; box-shadow: 0 0 40px rgba(12,38,86,.3);
		padding-bottom: 5rem;
	}
	.cs-filters.is-open { transform: translateX(0); }
	.cs-filters__close { display: inline-flex; align-items: center; justify-content: center; }
	.cs-facet { max-height: none; }
	.cs-filters__apply { position: sticky; bottom: .5rem; }
}

.cs-filters__backdrop {
	position: fixed; inset: 0; z-index: 9994;
	background: rgba(12,38,86,.55);
}

/* ==========================================================================
   RAIL SCROLLING — no visible track
   A raw horizontal scrollbar under every rail reads like a broken container.
   Retail rails signal "more to the right" with a fade edge and arrow controls,
   not a scrollbar. Keyboard and touch scrolling are untouched.
   ========================================================================== */
.cs-rail {
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* legacy Edge */
	padding-bottom: .35rem;
}
.cs-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Fade the right edge so it's obvious the rail continues. */
.cs-sec .container { position: relative; }
.cs-rail-wrap { position: relative; }
.cs-rail-wrap::after {
	content: ""; position: absolute; top: 0; bottom: .35rem; right: 0; width: 56px;
	background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
	pointer-events: none; opacity: 1; transition: opacity .2s ease;
}
.cs-rail-wrap.is-end::after { opacity: 0; }

/* Arrow controls, injected by JS (hidden for touch-only pointers). */
.cs-rail-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 40px; height: 40px; border-radius: 50%;
	background: #fff; border: 1px solid var(--color-border);
	box-shadow: 0 4px 14px rgba(12,38,86,.16);
	display: none; align-items: center; justify-content: center;
	cursor: pointer; color: var(--cs-navy);
}
.cs-rail-nav svg { width: 18px; height: 18px; }
.cs-rail-nav:hover { border-color: var(--cs-royal); color: var(--cs-royal); }
.cs-rail-nav--prev { left: -14px; }
.cs-rail-nav--next { right: -14px; }
body .cs-rail-wrap .cs-rail-nav[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
	.cs-rail-wrap:hover .cs-rail-nav { display: inline-flex; }
}

/* ==========================================================================
   DELIVERY PANEL — was a bare blue rectangle sitting beside product cards
   Give it the same card language as its neighbours: matching height, an icon,
   and type that reads as a promo rather than an empty block of colour.
   ========================================================================== */
.cs-split__panel {
	position: relative; overflow: hidden;
	border-radius: 12px;
	padding: 1.6rem 1.5rem;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255,242,0,.22), rgba(255,242,0,0) 60%),
		linear-gradient(150deg, var(--cs-royal) 0%, var(--cs-navy) 90%);
	justify-content: flex-end;
}
.cs-split__panel::before {
	content: ""; position: absolute; right: -30px; bottom: -30px;
	width: 150px; height: 150px; border-radius: 50%;
	background: rgba(255,255,255,.06);
}
.cs-split__icon {
	position: relative; z-index: 1;
	width: 42px; height: 42px; border-radius: 10px; margin-bottom: auto;
	background: var(--cs-yellow); color: var(--cs-navy);
	display: inline-flex; align-items: center; justify-content: center;
}
.cs-split__icon svg { width: 22px; height: 22px; }
.cs-split__title { position: relative; z-index: 1; font-size: 1.28rem; line-height: 1.2; margin-top: 1rem; }
.cs-split__sub { position: relative; z-index: 1; }
.cs-split__cta { position: relative; z-index: 1; }

/* ==========================================================================
   QA PASS 2 — catalogue, account, mini-cart, empty states
   Every rule maps to a measured defect (measurement in the comment).
   ========================================================================== */

/* Grid cards: buttons sat at different heights across a row (measured ~15px
   drift between 1-line and 2-line titles) because the parent pins .price with
   margin-top:auto, but price lives INSIDE the product anchor — the li's flex
   column only sees the anchor as one block, so short cards pooled their spare
   space at the bottom. Making the anchor a flex column of its own lets the
   price actually pin, so "Ajouter au panier" and "Aperçu rapide" share one
   baseline on every row. Scoped :not(.products--list) so the list view's
   display:contents anchor is untouched regardless of rule order. */
.woocommerce ul.products:not(.products--list) li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.woocommerce ul.products:not(.products--list) li.product > a.woocommerce-loop-product__link .price {
	margin-top: auto;
}

/* Pagination: the current page rendered as a grey box (parent default) that
   reads as "disabled", not "you are here". Brand it. */
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--cs-royal);
	color: #fff;
	font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--cs-offwhite);
	color: var(--cs-royal);
}

/* Account forms: the login/register submits are the ONLY primary action on
   their screens, yet rendered royal blue while every other primary CTA on the
   site (add-to-cart, checkout, place order) is yellow. Align them. */
.woocommerce button.woocommerce-form-login__submit,
.woocommerce button.woocommerce-form-register__submit,
.woocommerce-ResetPassword button.woocommerce-Button {
	background: var(--cs-yellow) !important;
	color: var(--cs-navy) !important;
	border: 2px solid var(--cs-yellow);
}
.woocommerce button.woocommerce-form-login__submit:hover,
.woocommerce button.woocommerce-form-register__submit:hover,
.woocommerce-ResetPassword button.woocommerce-Button:hover {
	background: #ffe600 !important;
	border-color: var(--cs-navy);
	color: var(--cs-navy) !important;
}

/* Mini-cart "Commander" is the checkout CTA — yellow like every checkout CTA.
   ("Voir le panier" stays royal so the primary wins the eye.) */
.mini-cart .buttons a.checkout,
.widget_shopping_cart .buttons a.checkout {
	background: var(--cs-yellow) !important;
	color: var(--cs-navy) !important;
}
.mini-cart .buttons a.checkout:hover,
.widget_shopping_cart .buttons a.checkout:hover {
	background: #ffe600 !important;
	color: var(--cs-navy) !important;
}

/* Mini-cart line remove: measured 22x22px at 375px (the cart-table rule did
   not reach the widget markup). Same treatment: visual stays small, hit area
   grows to 44px. */
.mini-cart a.remove,
.widget_shopping_cart a.remove {
	position: relative;
}
.mini-cart a.remove::after,
.widget_shopping_cart a.remove::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* Product gallery zoom/lightbox trigger: measured 36x36px. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Filter checkbox rows: the 18px box is inside a clickable label, but the
   label itself measured 36px tall — under the 44px minimum on the surface
   phones use most. */
@media (max-width: 900px) {
	.cs-check { min-height: 44px; }
}

/* Product tabs: WooCommerce repeats the active tab's name as an h2 inside the
   panel ("Description" tab followed by a big "DESCRIPTION" heading — measured
   9px apart). The tab already labels the panel. */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-of-type {
	display: none;
}

/* No-results help block (rendered under the WooCommerce notice). */
.cs-noresults { margin-top: 1.25rem; }
.cs-noresults__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cs-noresults__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 0 1.4rem;
	background: var(--cs-yellow); color: var(--cs-navy);
	border-radius: 999px; font-weight: 700; font-size: .92rem; text-decoration: none;
}
.cs-noresults__cta:hover { background: #ffe600; }
.cs-noresults__clear {
	color: var(--cs-royal); font-weight: 600; text-decoration: underline;
	min-height: 44px; display: inline-flex; align-items: center;
}
.cs-noresults__hint { margin: 1.5rem 0 .6rem; color: var(--color-muted); font-size: .9rem; }
.cs-noresults__depts {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: .6rem;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.cs-noresults__depts a {
	display: flex; align-items: center; gap: .6rem;
	min-height: 48px; padding: 0 .9rem;
	border: 1px solid var(--color-border); border-radius: 10px;
	background: #fff; color: var(--cs-navy);
	font-weight: 600; font-size: .88rem; text-decoration: none;
	transition: border-color .15s ease;
}
.cs-noresults__depts a:hover { border-color: var(--cs-royal); color: var(--cs-royal); }
.cs-noresults__depts svg { width: 18px; height: 18px; color: var(--cs-royal); flex: 0 0 18px; }

/* ==========================================================================
   DEPARTMENT BAR ON MOBILE
   Was a bare grid icon butted straight against the chip rail with no
   separation, so it read as a stray glyph rather than a control.
   ========================================================================== */
@media (max-width: 900px) {
	.cs-rayons__inner { gap: 0; padding-inline: 0; }
	.cs-rayons__trigger {
		flex: 0 0 auto;
		margin-inline: .75rem .6rem;
		border-radius: 8px;
		background: rgba(255, 255, 255, .12);
		min-width: 40px; min-height: 40px;
	}
	.cs-rayons__trigger:active { background: rgba(255, 255, 255, .22); }
	/* A hairline so the control reads as separate from the rail. */
	.cs-rayons__nav {
		border-left: 1px solid rgba(255, 255, 255, .18);
		padding-left: .7rem;
	}
	.cs-rayons__nav ul { gap: .45rem; padding-right: .9rem; }
	.cs-rayons__nav a { font-size: .8rem; padding: 0 .8rem; }
	/* Fade the right edge so it is obvious the chips continue. */
	.cs-rayons { position: relative; }
	.cs-rayons::after {
		content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 34px;
		background: linear-gradient(90deg, rgba(18, 58, 134, 0), #123a86 80%);
		pointer-events: none;
	}
}

/* ---------------------------------------------------------------------------
   Product spec table
   ---------------------------------------------------------------------------
   Dimensions and weight imported from the client's spec sheet, written into
   the description between <!-- chicshop:specs --> markers. Two columns, label
   left. Rows can hold several lines (a set lists a size per piece), so the
   cells are top-aligned rather than centred.
--------------------------------------------------------------------------- */
.chicshop-specs {
	width: 100%;
	max-width: 34rem;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: .95rem;
}

.chicshop-specs th,
.chicshop-specs td {
	padding: .7rem .9rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(12, 38, 86, .12);
	line-height: 1.55;
}

.chicshop-specs th {
	width: 9rem;
	font-weight: 600;
	color: var(--cs-royal);
	background: var(--cs-offwhite);
	white-space: nowrap;
}

.chicshop-specs tr:last-child th,
.chicshop-specs tr:last-child td { border-bottom: 0; }

@media (max-width: 480px) {
	/* Stack: a 9rem label column leaves too little room for a multi-line size. */
	.chicshop-specs,
	.chicshop-specs tbody,
	.chicshop-specs tr,
	.chicshop-specs th,
	.chicshop-specs td { display: block; width: auto; }
	.chicshop-specs th { border-bottom: 0; padding-bottom: .25rem; }
	.chicshop-specs td { padding-top: 0; }
}

/* ==========================================================================
   CLIENT FEEDBACK ROUND (Sep 2026)
   Sign-up profile pills · account gate on the cart ·
   campaign pages · endless product loop · homepage v2 sections.
   ========================================================================== */

/* ---------------------------------------------------- sign-up profile */
.cs-profile { margin: .5rem 0 1rem; padding: 1rem 1.1rem 1.1rem; background: var(--cs-offwhite); border-radius: 12px; }
.cs-profile__lead { margin: 0 0 .4rem; font-size: .9rem; color: var(--color-muted); }
.cs-profile .form-row { margin-bottom: .75rem; }
.cs-profile label, .cs-profile .form-row > label { font-weight: 600; color: var(--cs-navy); font-size: .92rem; }
.cs-pills .woocommerce-input-wrapper { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.cs-pills input.input-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs-pills label.radio {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem;
	border: 1.5px solid var(--color-border); border-radius: 999px; background: #fff;
	font-weight: 600; font-size: .88rem; color: var(--cs-navy); cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.cs-pills label.radio:hover { border-color: var(--cs-royal); }
.cs-pills label.radio .required, .cs-pills label.radio .optional { display: none; }
.cs-pills input.input-radio:checked + label.radio { background: var(--cs-navy); border-color: var(--cs-navy); color: #fff; }
.cs-pills input.input-radio:focus-visible + label.radio { outline: 3px solid var(--cs-yellow); outline-offset: 1px; }
.cs-profile select { width: 100%; min-height: 46px; border: 1.5px solid var(--color-border); border-radius: 8px; padding: 0 .8rem; background: #fff; font: 500 .92rem var(--font-body); color: var(--cs-navy); }
.woocommerce-checkout .cs-profile { margin-top: .75rem; }

/* ------------------------------------------------ account gate (cart) */
.cs-account-gate {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem;
	margin: 0 0 1.25rem; padding: 1rem 1.25rem;
	background: var(--cs-offwhite); border: 1px solid var(--color-border); border-radius: 12px;
}
.cs-account-gate__txt { display: flex; flex-direction: column; gap: .15rem; max-width: 46ch; }
.cs-account-gate__txt strong { color: var(--cs-navy); font-size: 1rem; }
.cs-account-gate__txt span { color: var(--color-muted); font-size: .88rem; line-height: 1.4; }
.cs-account-gate__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cs-account-gate__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem;
	border-radius: 999px; border: 1.5px solid var(--cs-navy); background: #fff; color: var(--cs-navy);
	font-weight: 700; font-size: .9rem; text-decoration: none;
}
.cs-account-gate__btn:hover { background: var(--cs-navy); color: #fff; }
.cs-account-gate__btn--primary { background: var(--cs-yellow); border-color: var(--cs-yellow); }
.cs-account-gate__btn--primary:hover { background: #ffe600; color: var(--cs-navy); border-color: var(--cs-navy); }

/* Checkout: city is fixed to Kinshasa, show it as such. */
.woocommerce-checkout input[readonly] { background: var(--cs-offwhite); color: var(--color-muted); }

/* ------------------------------------------------------ campaign card */
/* One wide banner on the left spanning two rows, tiles stacked on the right.
   With three campaigns (the common case) nothing is left dangling on its own row. */
.cs-camp-grid { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(210px, auto); grid-auto-flow: dense; }
.cs-camp-grid--tiles { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
.cs-camp {
	position: relative; overflow: hidden; border-radius: 14px; min-height: 240px;
	display: flex; align-items: flex-end; padding: 1.4rem; text-decoration: none;
	transition: box-shadow .18s ease, transform .18s ease;
}
.cs-camp:hover { box-shadow: 0 14px 34px rgba(12,38,86,.18); transform: translateY(-2px); }
.cs-camp--wide { grid-row: span 2; min-height: 320px; }
.cs-camp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-camp.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,38,86,0) 30%, rgba(12,38,86,.86) 100%); }
.cs-camp__txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .25rem; max-width: 30ch; }
.cs-camp__badge { align-self: flex-start; padding: .2rem .6rem; border-radius: 6px; background: var(--cs-yellow); color: var(--cs-navy); font-weight: 700; font-size: .78rem; margin-bottom: .3rem; }
.cs-camp__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.cs-camp__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.55rem; line-height: 1.05; letter-spacing: .01em; }
.cs-camp--wide .cs-camp__title { font-size: 2.1rem; }
.cs-camp__sub { font-size: .88rem; line-height: 1.4; }
.cs-camp__cta { margin-top: .7rem; align-self: flex-start; display: inline-flex; align-items: center; min-height: 38px; padding: 0 1.05rem; border-radius: 999px; font-weight: 700; font-size: .84rem; }
.cs-camp--royal  { background: var(--cs-royal); color: #fff; }
.cs-camp--navy   { background: var(--cs-navy); color: #fff; }
.cs-camp--yellow { background: var(--cs-yellow); color: var(--cs-navy); }
.cs-camp--light  { background: #eaf0fb; color: var(--cs-navy); }
.cs-camp.has-img { color: #fff; }
.cs-camp--royal .cs-camp__cta, .cs-camp--navy .cs-camp__cta, .cs-camp.has-img .cs-camp__cta { background: var(--cs-yellow); color: var(--cs-navy); }
.cs-camp--yellow:not(.has-img) .cs-camp__cta, .cs-camp--light:not(.has-img) .cs-camp__cta { background: var(--cs-navy); color: #fff; }
.cs-camp--yellow:not(.has-img) .cs-camp__badge { background: var(--cs-navy); color: #fff; }

/* ------------------------------------------------------ campaign page */
.cs-camp-hero { padding-top: 1rem; }
.cs-camp-hero__panel {
	position: relative; overflow: hidden; border-radius: 16px; min-height: 300px;
	display: flex; align-items: center; padding: 2rem 2.25rem;
}
.cs-camp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.cs-camp-hero.has-img .cs-camp-hero__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,38,86,.92) 0%, rgba(12,38,86,.72) 42%, rgba(12,38,86,.05) 78%); }
.cs-camp-hero__copy { position: relative; z-index: 2; max-width: 36ch; }
.cs-camp-hero--royal .cs-camp-hero__panel { background: var(--cs-royal); color: #fff; }
.cs-camp-hero--navy .cs-camp-hero__panel { background: var(--cs-navy); color: #fff; }
.cs-camp-hero--yellow .cs-camp-hero__panel { background: var(--cs-yellow); color: var(--cs-navy); }
.cs-camp-hero--light .cs-camp-hero__panel { background: #eaf0fb; color: var(--cs-navy); }
.cs-camp-hero.has-img .cs-camp-hero__panel { color: #fff; }
.cs-camp-hero__badge { display: inline-block; padding: .25rem .65rem; border-radius: 6px; background: var(--cs-yellow); color: var(--cs-navy); font-weight: 700; font-size: .82rem; margin-bottom: .6rem; }
.cs-camp-hero--yellow:not(.has-img) .cs-camp-hero__badge { background: var(--cs-navy); color: #fff; }
.cs-camp-hero__kicker { margin: 0 0 .3rem; font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.cs-camp-hero__title { margin: 0 0 .6rem; color: inherit; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; }
.cs-camp-hero__sub { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.45; max-width: 44ch; }
.cs-camp-hero__meta { margin: 0 0 1.1rem; font-size: .86rem; opacity: .85; }
.cs-camp-hero__cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.4rem; border-radius: 999px; background: var(--cs-yellow); color: var(--cs-navy); font-weight: 700; text-decoration: none; }
.cs-camp-hero--yellow:not(.has-img) .cs-camp-hero__cta { background: var(--cs-navy); color: #fff; }
.cs-camp-hero__cta:hover { filter: brightness(1.04); }
.cs-camp-intro { max-width: 70ch; padding: 1.25rem 0 0; color: var(--cs-navy); }
.cs-camp-wrap { padding-top: 1.25rem; }
.cs-camp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cs-camp-sort select { min-height: 44px; border: 1.5px solid var(--color-border); border-radius: 8px; padding: 0 2rem 0 .8rem; background: #fff; font: 500 .9rem var(--font-body); color: var(--cs-navy); }
.cs-camp-others { padding-top: 1.5rem; }
.cs-camp-archive { padding: 1.5rem 0 2.5rem; }
.cs-camp-archive__head { margin-bottom: 1.25rem; }
.cs-camp-archive__title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .35rem; }
.cs-camp-archive__sub { margin: 0; color: var(--color-muted); max-width: 60ch; }

/* ------------------------------------------------- endless product loop */
.cs-infinite nav.woocommerce-pagination { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Landed on /page/N/: the loop only goes forward, so the pager is the way back. */
.cs-infinite.cs-infinite--deep nav.woocommerce-pagination { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.cs-more { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.5rem 0 1rem; text-align: center; }
.cs-more__count { margin: 0; font-size: .88rem; color: var(--color-muted); }
.cs-more__bar { width: min(100%, 260px); height: 4px; border-radius: 999px; background: #e6ebf5; overflow: hidden; }
.cs-more__bar span { display: block; height: 100%; width: 0; background: var(--cs-royal); transition: width .3s ease; }
.cs-more__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.6rem;
	border: 1.5px solid var(--cs-navy); border-radius: 999px; background: #fff; color: var(--cs-navy);
	font: 700 .92rem var(--font-body); cursor: pointer;
}
.cs-more__btn:hover { background: var(--cs-navy); color: #fff; }
.cs-more__btn[disabled] { opacity: .6; cursor: progress; }
.cs-more__btn[hidden] { display: none; }
.cs-more.is-error .cs-more__btn { border-color: #c0392b; color: #c0392b; }
.cs-more__top { display: none; font-size: .86rem; color: var(--cs-royal); font-weight: 600; min-height: 44px; align-items: center; }
.cs-more.is-done .cs-more__top { display: inline-flex; }
.cs-more.is-done .cs-more__bar span { background: #1a7f37; }

/* ------------------------------------------------------- homepage v2 */
/* Hero: copy left, composition right; the image is a named slot with a fixed
   ratio so the real photography is a file swap. */
.cs-hero2 { padding-top: 1rem; }
.cs-hero2__panel {
	position: relative; overflow: hidden; border-radius: 18px; background: var(--cs-royal); color: #fff;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 420px;
}
.cs-hero2__copy { position: relative; z-index: 2; padding: 2.4rem 2.4rem 2.2rem; display: flex; flex-direction: column; justify-content: center; }
.cs-hero2__kicker { margin: 0 0 .6rem; display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--cs-yellow); letter-spacing: .04em; text-transform: uppercase; }
.cs-hero2__kicker svg { width: 16px; height: 16px; }
.cs-hero2__title { margin: 0 0 .8rem; color: #fff; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: .98; letter-spacing: .01em; }
.cs-hero2__title em { font-style: normal; color: var(--cs-yellow); }
.cs-hero2__sub { margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.5; color: #dbe6ff; max-width: 40ch; }
.cs-hero2__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cs-hero2__cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; }
.cs-hero2__cta--primary { background: var(--cs-yellow); color: var(--cs-navy); }
.cs-hero2__cta--primary:hover { background: #ffe600; }
.cs-hero2__cta--ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.cs-hero2__cta--ghost:hover { background: rgba(255,255,255,.12); }
.cs-hero2__media { position: relative; min-height: 260px; }
.cs-hero2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cs-hero2__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--cs-royal) 0%, rgba(23,70,158,0) 22%); pointer-events: none; }

/* Promise strip: the three reasons to buy here, right under the hero. */
.cs-promises { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(3, 1fr); }
.cs-promises li { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.cs-promises svg { width: 22px; height: 22px; color: var(--cs-royal); flex: 0 0 22px; }
.cs-promises strong { display: block; font-size: .9rem; color: var(--cs-navy); }
.cs-promises span { font-size: .8rem; color: var(--color-muted); }
.cs-promises a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .7rem; width: 100%; }

/* Department tiles: the primary navigation of the page. */
.cs-depts { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cs-dept { position: relative; }
/* One bordered box per rayon: the link (image + name) and, on desktop, its first
   subcategories. Measured before: the subs sat outside the box and bled into the
   next row. */
.cs-dept__box { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.cs-dept__box:hover { border-color: var(--cs-royal); box-shadow: 0 8px 22px rgba(12,38,86,.10); }
.cs-dept__link { display: flex; flex-direction: column; text-decoration: none; }
.cs-dept__media { aspect-ratio: 4 / 3; background: var(--cs-offwhite); display: flex; align-items: center; justify-content: center; color: var(--cs-royal); overflow: hidden; }
.cs-dept__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cs-dept__link:hover .cs-dept__media img { transform: scale(1.05); }
.cs-dept__media svg { width: 34px; height: 34px; }
.cs-dept__body { padding: .65rem .8rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.cs-dept__name { font-weight: 700; font-size: .92rem; color: var(--cs-navy); line-height: 1.2; }
.cs-dept__count { font-size: .76rem; color: var(--color-muted); }
.cs-dept__subs { list-style: none; margin: auto 0 0; padding: 0 .8rem .75rem; display: none; flex-direction: column; gap: .2rem; border-top: 1px solid var(--cs-offwhite); padding-top: .55rem; }
.cs-dept__subs a { font-size: .78rem; color: var(--cs-royal); text-decoration: none; display: inline-block; min-height: 24px; }
.cs-dept__subs a:hover { text-decoration: underline; }
@media (min-width: 1000px) { .cs-dept__subs { display: flex; } }

/* Recently viewed (client-side). */
.cs-recent[hidden] { display: none; }

/* Responsive for the new sections. */
@media (max-width: 1000px) {
	.cs-camp-grid { grid-template-columns: 1fr 1fr; }
	.cs-camp-grid--tiles { grid-template-columns: repeat(2, 1fr); }
	.cs-hero2__panel { grid-template-columns: 1fr; min-height: 0; }
	.cs-hero2__media { order: -1; min-height: 220px; }
	.cs-hero2__media::before { background: linear-gradient(0deg, var(--cs-royal) 0%, rgba(23,70,158,0) 30%); }
	.cs-hero2__copy { padding: 1.4rem 1.5rem 1.7rem; }
	.cs-promises { grid-template-columns: 1fr; gap: .5rem; }
	.cs-promises li { padding: .65rem .9rem; }
}
@media (max-width: 720px) {
	.cs-camp-grid, .cs-camp-grid--tiles { grid-template-columns: 1fr; }
	.cs-camp--wide { grid-row: span 1; min-height: 240px; }
	.cs-camp { min-height: 200px; padding: 1.1rem; }
	.cs-camp__title, .cs-camp--wide .cs-camp__title { font-size: 1.5rem; }
	.cs-camp-hero__panel { min-height: 240px; padding: 1.4rem 1.3rem; }
	.cs-camp-hero.has-img .cs-camp-hero__panel::after { background: linear-gradient(0deg, rgba(12,38,86,.94) 0%, rgba(12,38,86,.78) 55%, rgba(12,38,86,.25) 100%); }
	.cs-depts { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
	.cs-dept__body { padding: .5rem .55rem .6rem; }
	.cs-dept__name { font-size: .8rem; }
	.cs-dept__count { display: none; }
	.cs-hero2__title { font-size: 1.9rem; }
	.cs-hero2__sub { font-size: .92rem; }
	.cs-account-gate__btn { flex: 1 1 100%; }
}

/* Campaign breadcrumb uses WooCommerce's markup; separators are ours. */
.cs-crumb__sep { margin: 0 .45em; color: var(--color-muted); }

/* ==========================================================================
   DELIVERY RATES TABLE — [chicshop_delivery_rates] on the Livraison page.
   Figures are read live from WooCommerce → Shipping (inc/chicshop-delivery.php).
   ========================================================================== */
.cs-rates-wrap { overflow-x: auto; margin: 1rem 0 1.25rem; border: 1px solid var(--color-border); border-radius: 12px; }
.cs-rates { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.cs-rates th, .cs-rates td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.cs-rates thead th { background: var(--cs-navy); color: #fff; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-rates tbody tr:last-child th, .cs-rates tbody tr:last-child td { border-bottom: 0; }
.cs-rates tbody th { color: var(--cs-navy); font-weight: 700; white-space: nowrap; }
.cs-rates__fee { font-weight: 700; color: var(--cs-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-rates__tier { display: block; font-weight: 400; font-size: .82rem; color: var(--color-muted); white-space: normal; }
.cs-rates__communes { color: var(--color-muted); }

/* ==========================================================================
   CLIENT FEEDBACK ROUND 3 (Sep 2026)
   Free-delivery meter · products per row · zoom · gift cards, store credit,
   wedding lists.
   ========================================================================== */

/* ------------------------------------------------- delivery (public page) */
.cs-rates__free { font-weight: 600; color: var(--cs-navy); white-space: nowrap; }
.cs-rates { min-width: 0; }
@media (max-width: 640px) {
	/* Four columns do not fit a phone: each zone becomes a small card. */
	.cs-rates-wrap { border: 0; overflow: visible; }
	.cs-rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cs-rates, .cs-rates tbody, .cs-rates tr, .cs-rates th, .cs-rates td { display: block; width: auto; }
	.cs-rates tr { border: 1px solid var(--color-border); border-radius: 12px; padding: .8rem .95rem; margin-bottom: .7rem; }
	.cs-rates th, .cs-rates td { border: 0; padding: .15rem 0; }
	.cs-rates tbody th { font-size: 1rem; margin-bottom: .2rem; }
	.cs-rates td::before { content: attr(data-label); }
	.cs-rates td:nth-of-type(2), .cs-rates td:nth-of-type(3) { display: inline-block; margin-top: .35rem; }
	.cs-rates td:nth-of-type(2) { margin-right: 1rem; }
	.cs-rates td:nth-of-type(2)::before { content: "Délai : "; color: var(--color-muted); font-weight: 400; }
	.cs-rates td.cs-rates__free::before { content: "Livraison offerte : "; color: var(--color-muted); font-weight: 400; }
}

/* ------------------------------------------- free-delivery meter (inside) */
.cs-freeship { margin: 0 0 1rem; padding: .7rem .85rem .8rem; border-radius: 10px; background: var(--cs-offwhite); border: 1px solid var(--color-border); }
.cs-freeship__msg { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.4; color: var(--cs-navy); font-weight: 500; }
.cs-freeship__bar { height: 6px; border-radius: 999px; background: #dfe6f3; overflow: hidden; }
.cs-freeship__bar span { display: block; height: 100%; border-radius: inherit; background: var(--cs-royal); transition: width .35s ease; }
.cs-freeship.is-reached { background: #eef8f1; border-color: #bfe3c9; }
.cs-freeship.is-reached .cs-freeship__bar span { background: #1a7f37; }
.cs-freeship--mini { margin: 0 1.25rem .9rem; }
.cs-freeship-row td { padding: .6rem 0 0 !important; border: 0 !important; }
.cs-freeship-row .cs-freeship { margin-bottom: .2rem; }

/* ------------------------------------------------------ products per row */
.cs-density { display: inline-flex; align-items: center; gap: .45rem; }
.cs-density__label { font-size: .82rem; color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.cs-density__set { display: none; gap: .25rem; padding: .2rem; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.cs-density__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
	min-width: 44px; min-height: 36px; padding: 0 .45rem; border: 0; border-radius: 7px;
	background: none; color: var(--color-muted); font: 600 .82rem var(--font-body); cursor: pointer;
}
.cs-density__btn:hover { color: var(--cs-royal); background: var(--cs-offwhite); }
.cs-density__btn[aria-pressed="true"] { background: var(--cs-royal); color: #fff; }
/* N thin bars: a picture of the grid it produces. */
.cs-density__glyph {
	width: 16px; height: 12px; display: inline-block;
	background: repeating-linear-gradient(90deg, currentColor 0 calc((100% - (var(--n) - 1) * 2px) / var(--n)), transparent 0 calc((100% - (var(--n) - 1) * 2px) / var(--n) + 2px));
	border-radius: 1px; opacity: .9;
}
@media (max-width: 599px) { .cs-density__set--s { display: inline-flex; } }
@media (min-width: 600px) and (max-width: 999px) { .cs-density__set--m { display: inline-flex; } }
@media (min-width: 1000px) { .cs-density__set--l { display: inline-flex; } }
/* In list view the column count does not apply. */
.products-toolbar:has(~ ul.products--list) .cs-density, body:has(ul.products--list) .cs-density { opacity: .45; }

/* The grid itself. Scoped to catalogue views so related products on a product
   page keep their own layout. Beats the parent's !important by specificity. */
@media (max-width: 599px) {
	html[data-cs-cols-s="1"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: 1fr !important; }
	html[data-cs-cols-s="2"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .45rem; }
}
@media (min-width: 600px) and (max-width: 999px) {
	html[data-cs-cols-m="2"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html[data-cs-cols-m="3"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	html[data-cs-cols-m="4"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .8rem; }
}
@media (min-width: 1000px) {
	html[data-cs-cols-l="3"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	html[data-cs-cols-l="4"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	html[data-cs-cols-l="5"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 1rem; }
	html[data-cs-cols-l="6"] .cs-catalogue ul.products:not(.products--list) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: .75rem; }
}
/* Dense grids: tighter cards so a title, a price and a button still fit. */
@media (min-width: 1000px) {
	html[data-cs-cols-l="5"] .cs-catalogue ul.products:not(.products--list) li.product,
	html[data-cs-cols-l="6"] .cs-catalogue ul.products:not(.products--list) li.product { padding: .55rem; }
	html[data-cs-cols-l="5"] .cs-catalogue ul.products:not(.products--list) li.product .woocommerce-loop-product__title,
	html[data-cs-cols-l="6"] .cs-catalogue ul.products:not(.products--list) li.product .woocommerce-loop-product__title { font-size: .84rem; }
	html[data-cs-cols-l="5"] .cs-catalogue ul.products:not(.products--list) li.product .button,
	html[data-cs-cols-l="6"] .cs-catalogue ul.products:not(.products--list) li.product .button { font-size: .8rem; padding-inline: .5rem; min-height: 38px; }
	html[data-cs-cols-l="6"] .cs-catalogue ul.products:not(.products--list) li.product .quick-view-btn { display: none; }
}
@media (max-width: 599px) {
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) li.product { padding: .4rem; }
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) li.product .woocommerce-loop-product__title { font-size: .74rem; line-height: 1.25; }
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) li.product .price { font-size: .8rem; }
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) li.product .button { font-size: 0; min-height: 36px; padding: 0; }
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) li.product .button::after { content: "+"; font-size: 1.2rem; line-height: 1; }
	html[data-cs-cols-s="3"] .cs-catalogue ul.products:not(.products--list) li.product .quick-view-btn { display: none; }
}
/* Toolbar on a phone: result count on its own line, controls under it. */
@media (max-width: 599px) {
	.products-toolbar { flex-wrap: wrap; row-gap: .6rem; }
	.products-toolbar .cs-density { order: 3; }
	.products-toolbar .cs-density__label { display: none; }
}

/* ------------------------------------------------------------------ zoom */
.cs-zoomable .woocommerce-product-gallery__image { cursor: zoom-in; }
/* WooCommerce draws its trigger as a 36px circle with a CSS magnifier and
   text-indent:-9999px, under .woocommerce div.product div.images …; this
   selector outranks it so the labelled button actually shows. */
/* The gallery holds the photo AND the thumbnails, so "bottom" would land
   under the thumbnails. The photo is a square as wide as the gallery, so the
   button is placed from the top by one gallery-width (container units). */
.woocommerce div.product .woocommerce-product-gallery { container-type: inline-size; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.cs-zoom-btn,
.woocommerce div.product .woocommerce-product-gallery__trigger.cs-zoom-btn {
	text-indent: 0; font-size: .85rem; overflow: visible; line-height: 1;
	top: calc(100cqw - 44px - .75rem); bottom: auto; right: .75rem; left: auto;
	width: auto; height: auto; min-height: 44px; padding: 0 .95rem 0 .75rem;
	display: inline-flex; align-items: center; gap: .4rem;
	border-radius: 999px; background: rgba(255,255,255,.94); color: var(--cs-navy);
	box-shadow: 0 4px 16px rgba(12,38,86,.18); border: 1px solid var(--color-border);
	font: 600 .85rem var(--font-body); text-decoration: none; text-indent: 0; z-index: 9;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.cs-zoom-btn::before,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.cs-zoom-btn::after,
.woocommerce div.product .woocommerce-product-gallery__trigger.cs-zoom-btn::before,
.woocommerce div.product .woocommerce-product-gallery__trigger.cs-zoom-btn::after { display: none; content: none; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.cs-zoom-btn span { display: inline; }
.woocommerce div.product .woocommerce-product-gallery__trigger.cs-zoom-btn svg { width: 18px; height: 18px; }
.woocommerce div.product .woocommerce-product-gallery__trigger.cs-zoom-btn:hover { background: var(--cs-yellow); border-color: var(--cs-yellow); }
/* The viewer: brand ground, and controls large enough for a thumb. */
.pswp__bg { background: var(--cs-navy); }
/* Above the phone tab bar (z-index 9990) and the sticky header. */
.pswp { z-index: 100000; }
.pswp__button { min-width: 44px; min-height: 44px; }

/* Homepage section gutters. The coded homepage sized its containers under
   .cs-home, but the live homepage is the Elementor version, which has no
   .cs-home wrapper: measured at 390px and 1024px every section container was
   full-bleed with 0px padding (headings and cards touching the screen edge).
   Same max width as the rest of the site, with a 1rem gutter at every size. */
.cs-sec > .container,
.cs-hero2 > .container,
.cs-camp-hero > .container {
	width: 100%;
	max-width: var(--container-max, 1280px);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}
/* Below the max width, keep the content off the screen edge. Above it the
   container is already inset and lines up with the header. */
@media (max-width: 1320px) {
	.cs-sec > .container,
	.cs-hero2 > .container,
	.cs-camp-hero > .container { padding-inline: 1rem; }
}

/* The closed slide-out cart sat just off-screen with its box-shadow still
   painting a grey band down the right edge of every page (visible in
   screenshots at 390 and 1440). Hidden when closed; this also takes its
   links out of the keyboard tab order until it opens. */
.mini-cart { visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.mini-cart.is-open { visibility: visible; transition: transform .3s ease, visibility 0s; }

/* Phone toolbar, measured at 390px: result count, grid/list toggle, sort and
   "par ligne" each took a row (~200px before the first product). Now:
   count / [toggle + per-row] / sort. */
@media (max-width: 599px) {
	.products-toolbar .woocommerce-result-count { flex: 1 1 100%; order: 1; font-size: .85rem; }
	.products-toolbar .shop-view-toggle { order: 2; }
	.products-toolbar .cs-density { order: 3; margin-left: auto; }
	.products-toolbar .woocommerce-ordering { order: 4; flex: 1 1 100%; margin: 0; }
	.products-toolbar .woocommerce-ordering select { width: 100%; }
}

/* Off-canvas panels (filters, category drawer) painted their shadow onto the
   screen edge while closed — a grey band down the left of the shop at 390px.
   The shadow now exists only while a panel is open. */
@media (max-width: 900px) {
	.cs-filters { box-shadow: none; }
	.cs-filters.is-open { box-shadow: 0 0 40px rgba(12,38,86,.3); }
	.cs-filters:not(.is-open) { visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
	.cs-filters.is-open { visibility: visible; transition: transform .24s ease, visibility 0s; }
}
.cs-drawer:not(.is-open) .cs-drawer__panel { box-shadow: none; }

/* Password strength meter ("Forte", "Moyen"…) is inserted when the field
   CHANGES — for a pasted or autofilled password that is on blur, i.e. the
   instant the customer taps the next field. Measured at 390px: everything
   below jumped 32px mid-tap and the tap on "Vous êtes" landed on empty space.
   Its line is now reserved, so the meter appears without moving anything. */
.woocommerce form .form-row:has(#reg_password),
.woocommerce form .form-row:has(#account_password),
.woocommerce form .form-row:has(#password_1) { position: relative; padding-bottom: 2.35rem; }
.woocommerce form .form-row:has(#reg_password) .woocommerce-password-strength,
.woocommerce form .form-row:has(#account_password) .woocommerce-password-strength,
.woocommerce form .form-row:has(#password_1) .woocommerce-password-strength {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .35rem .7rem; font-size: .8rem; border-radius: 8px;
}

abbr.required[title] { text-decoration: none; border: 0; cursor: default; }
/* WooCommerce's phone cart table prefixes every cell with its label and a
   colon (td::before). The free-delivery row spans both columns and has no
   label, which left a stray ":" in front of it. */
.cs-freeship-row td::before { content: none !important; display: none !important; }
.cs-freeship-row td { text-align: left !important; }