/* ============================================================================
   CK Facets — pages catégories : filtres verticaux, bandeau catégorie,
   cartes produits modernisées, description en bas.
   Chargé uniquement sur les pages catégories. Palette : navy/cyan Coach Kin.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Panneau de filtres
   ---------------------------------------------------------------------------- */
#ckfacets { font-size: 14px; color: #1c2b45; }
#ckfacets.ckf-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

#ckfacets .ckf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#ckfacets .ckf-count { margin: 0; font-size: 15px; }
#ckfacets .ckf-reset {
	border: 1px solid #1c2b45; background: #fff; color: #1c2b45;
	border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
#ckfacets .ckf-reset:hover { background: #1c2b45; color: #fff; }

#ckfacets .ckf-block { border-top: 1px solid #e6ebf2; padding: 12px 0; }
#ckfacets .ckf-title, #ckfacets .ckf-title-static {
	display: flex; width: 100%; align-items: center; justify-content: space-between;
	background: none; border: 0; padding: 4px 0; cursor: pointer;
	font-size: 15px; font-weight: 800; color: #14213d; text-align: left; margin: 0;
}
#ckfacets .ckf-title-static { cursor: default; }
#ckfacets .ckf-title::after {
	content: ""; width: 9px; height: 9px; flex: 0 0 auto;
	border-right: 2px solid #14213d; border-bottom: 2px solid #14213d;
	transform: rotate(45deg); transition: transform .2s; margin-right: 3px;
}
#ckfacets .ckf-title[aria-expanded="false"]::after { transform: rotate(-45deg); }
#ckfacets .ckf-body { padding-top: 10px; }

#ckfacets .ckf-list { margin: 0; padding: 0; list-style: none; }
#ckfacets .ckf-list li { padding: 3px 0; }
#ckfacets .ckf-list label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 400; margin: 0; }
#ckfacets .ckf-list input[type="checkbox"] {
	width: 17px; height: 17px; margin: 0; accent-color: #1a5ea4; flex: 0 0 auto;
	appearance: auto; -webkit-appearance: checkbox; opacity: 1; position: static;
}
#ckfacets .ckf-list label > span:first-of-type { flex: 1 1 auto; }
#ckfacets .ckf-nb { color: #8593a9; font-size: 12px; }
#ckfacets .ckf-scroll { max-height: 264px; overflow-y: auto; padding-right: 6px; }

/* Garde-fou uniform.js (listes à cocher uniquement) : si le thème enveloppe
   nos cases malgré la restauration JS, on neutralise son habillage. */
#ckfacets .ckf-list:not(.ckf-pills) div.checker,
#ckfacets .ckf-list:not(.ckf-pills) div.checker span {
	background: none !important; border: 0 !important; width: auto !important;
	height: auto !important; padding: 0 !important; margin: 0 !important;
	display: inline-flex !important; position: static !important;
}
#ckfacets .ckf-list:not(.ckf-pills) div.checker input {
	position: static !important; opacity: 1 !important;
	width: 17px !important; height: 17px !important; margin: 0 !important;
}
/* Dans les pilules : AUCUNE case visible (ni native, ni uniform), et AUCUN
   élément cliquable superposé — seul le <label> bascule l'input (une fois).
   Sans pointer-events:none, le clic touchait l'input ET le handler uniform :
   double bascule → il fallait « insister » pour décocher. */
#ckfacets .ckf-pill div.checker,
#ckfacets .ckf-pill div.checker span,
#ckfacets .ckf-pill input {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important;
	opacity: 0 !important; margin: 0 !important; border: 0 !important;
	background: none !important; z-index: 1;
	pointer-events: none !important;
}
#ckfacets .ckf-pill, #ckfacets .ckf-pill span { cursor: pointer; }

#ckfacets .ckf-search {
	width: 100%; border: 1px solid #d6deea; border-radius: 999px;
	padding: 8px 14px; margin-bottom: 10px; font-size: 13px; background: #f6f8fb;
}

/* Pilules (tailles, côté) : l'input est caché DANS la pilule (pas de bulle) */
#ckfacets .ckf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#ckfacets .ckf-pills li { padding: 0; }
#ckfacets .ckf-pill { position: relative; display: inline-block; margin: 0; }
#ckfacets .ckf-pill input {
	position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
	opacity: 0 !important; margin: 0 !important; cursor: pointer;
}
#ckfacets .ckf-pill span {
	display: inline-block; padding: 7px 14px; border: 1px solid #d6deea; border-radius: 999px;
	font-size: 13px; font-weight: 600; color: #1c2b45; background: #fff;
	cursor: pointer; transition: all .15s;
}
/* État coché : classe posée par le JS (fiable même si uniform déplace l'input) */
#ckfacets .ckf-pill.on span,
#ckfacets .ckf-pill:has(input:checked) span { background: #14213d; border-color: #14213d; color: #fff; }
#ckfacets .ckf-pill input:focus-visible + span { outline: 2px solid #1a5ea4; outline-offset: 2px; }

/* Prix */
#ckfacets .ckf-price { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#ckfacets .ckf-price label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
#ckfacets .ckf-price input {
	width: 76px; border: 1px solid #d6deea; border-radius: 8px; padding: 7px 8px; font-size: 14px;
}

/* Navigation catégories */
#ckfacets .ckf-parent { display: inline-block; font-weight: 700; color: #1a5ea4; margin-bottom: 8px; text-decoration: none; }
#ckfacets .ckf-parent:hover { text-decoration: underline; }
#ckfacets .ckf-subcats { margin: 0; padding: 0; list-style: none; }
#ckfacets .ckf-subcats li { padding: 3px 0; }
#ckfacets .ckf-subcats a { color: #1c2b45; text-decoration: none; display: flex; justify-content: space-between; gap: 8px; }
#ckfacets .ckf-subcats a:hover { color: #1a5ea4; }

/* Pagination AJAX */
.ckf-pager { display: flex; gap: 6px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }
.ckf-pager button {
	min-width: 38px; height: 38px; border: 1px solid #d6deea; background: #fff;
	border-radius: 10px; font-weight: 700; color: #1c2b45; cursor: pointer;
}
.ckf-pager button.on, .ckf-pager button:hover { background: #14213d; border-color: #14213d; color: #fff; }
.ckf-empty { padding: 30px 0; text-align: center; color: #5a6a85; }

/* Fil d'Ariane : styles dans css/autoload/ck-footer.css (toutes pages) */

/* ----------------------------------------------------------------------------
   2. Bandeau catégorie : dégradé clair + image en fondu arrondi à droite.
      Même gabarit avec ou sans image (pas de blanc, pas de CLS).
   ---------------------------------------------------------------------------- */
.ck-cat-hero {
	position: relative; overflow: hidden; border-radius: 16px;
	min-height: 190px; display: flex; align-items: center;
	background: linear-gradient(115deg, #eef3fa 0%, #e3ebf6 55%, #d8e4f3 100%);
	margin-bottom: 20px;
}
.ck-cat-hero-img {
	position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
	background-size: cover; background-position: center;
	border-radius: 0 16px 16px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
	mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}
.ck-cat-hero-inner { position: relative; z-index: 1; width: 100%; padding: 26px 8px; }
.ck-cat-hero h1 {
	/* Police et taille FIGÉES : identiques sur toutes les pages qui portent le
	   bandeau (des CSS propres à certaines pages — ex. module French Days sur
	   prices-drop — surchargeaient l'override Open Sans global des titres). */
	font-family: "Open Sans", "OpenSans-fallback", Arial, sans-serif !important;
	margin: 0; color: #1a5ea4 !important; font-size: clamp(24px, 3.4vw, 40px) !important;
	font-weight: 600 !important; letter-spacing: -0.01em; max-width: 55%;
	line-height: 1.2; text-align: left !important; text-transform: none !important;
}
.ck-cat-hero--noimg h1 { max-width: none; }
@media (max-width: 767px) {
	.ck-cat-hero { min-height: 120px; border-radius: 12px; }
	.ck-cat-hero-img { width: 70%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); }
	/* H1 calé à gauche du bandeau */
	.ck-cat-hero-inner { padding: 18px 14px; margin: 0; }
	.ck-cat-hero h1 { max-width: 72%; font-size: 22px !important; text-align: left !important; }
}

/* ----------------------------------------------------------------------------
   3. Cartes produits : DÉPLACÉES dans themes/coachkin/css/autoload/ck-cards.css
      (chargé sur tout le site — une seule source de vérité).
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   4. Description de catégorie en fin de page
   ---------------------------------------------------------------------------- */
.ck-cat-desc {
	margin: 38px 0 10px; padding: 26px 30px 28px;
	background: linear-gradient(180deg, #f7f9fc 0%, #eef3fa 100%);
	border: 1px solid #e2e9f3; border-radius: 16px;
	color: #3d4c63; font-size: 14px; line-height: 1.75;
}
.ck-cat-desc-title {
	margin: 0 0 6px; padding-bottom: 12px; font-size: 21px; font-weight: 800;
	color: #14213d; position: relative;
}
.ck-cat-desc-title span { font-weight: 600; color: #1a5ea4; }
.ck-cat-desc-title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 44px; height: 3px; border-radius: 2px; background: #1a5ea4;
}
.ck-cat-desc-body { padding-top: 12px; }
.ck-cat-desc-body h2, .ck-cat-desc-body h3 { color: #14213d; font-size: 16px; margin: 16px 0 6px; }
.ck-cat-desc-body a { color: #1a5ea4; }
/* Texte long : deux colonnes éditoriales sur grand écran */
@media (min-width: 992px) {
	.ck-cat-desc-body { column-count: 2; column-gap: 42px; }
	.ck-cat-desc-body h2, .ck-cat-desc-body h3 { break-after: avoid; }
}

/* ----------------------------------------------------------------------------
   4 bis. Grille : TOUJOURS 3 cartes par rangée sur desktop, natif comme AJAX.
   (Le rendu AJAX n'a pas connaissance de la colonne gauche : le template
   basculait en 1/4 — on fige la largeur ici, pour les deux rendus.)
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.products.grid .ajax_block_product { width: 33.3333% !important; }
	/* EXCEPTION : catégories sport (carrousel) et Sélection de l'accueil
	   (homefeatured) — ces grilles restent en 4 colonnes (1/4), comme voulu.
	   (Le CSS charge désormais aussi sur l'accueil pour les boutons mobiles.) */
	#spz-content .products.grid .ajax_block_product,
	#spz-content .spz-selection .ajax_block_product,
	#sports_panels .ajax_block_product,
	#homefeatured.products.grid .ajax_block_product { width: 25% !important; }
}
@media (min-width: 480px) and (max-width: 991px) {
	.products.grid .ajax_block_product { width: 50% !important; }
}

/* ----------------------------------------------------------------------------
   5. Tri — barre desktop au-dessus du listing
   ---------------------------------------------------------------------------- */
.ckf-sortbar {
	display: flex; justify-content: flex-end; align-items: center; gap: 8px;
	margin: 0 0 14px; font-size: 14px; color: #1c2b45;
}
.ckf-sortbar label { margin: 0; font-weight: 700; }
.ckf-sortbar select {
	border: 1px solid #d6deea; border-radius: 10px; background: #fff;
	padding: 8px 12px; font-size: 14px; color: #1c2b45; cursor: pointer;
}

/* Boutons/tiroirs mobiles : inexistants sur desktop */
#ckf-mobilebar, #ckf-backdrop, #ckf-sortsheet, #ckf-done { display: none; }

/* ----------------------------------------------------------------------------
   6. Mobile : filtres et tri masqués, deux boutons fixes en bas d'écran
      ouvrant des tiroirs (l'utilisateur arrive directement sur les produits)
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.ckf-sortbar { display: none; }

	/* Barre fixe : deux boutons rectangulaires */
	#ckf-mobilebar {
		display: flex; gap: 1px; position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 9990; box-shadow: 0 -4px 18px rgba(13, 31, 63, .18);
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: #14213d;
	}
	#ckf-mobilebar button {
		flex: 1 1 50%; border: 0; background: #14213d; color: #fff;
		font-size: 15px; font-weight: 800; letter-spacing: .03em;
		padding: 15px 0; cursor: pointer;
	}
	#ckf-mobilebar button:active { background: #1a5ea4; }
	/* le contenu ne finit pas caché sous la barre (catégories, promotions,
	   pages mc, accueil quand un panneau sport est ouvert — classe JS) */
	body#category #footer-page,
	body#prices-drop #footer-page,
	body.ckf-hasbar #footer-page { padding-bottom: 64px; }

	/* Badge flottant « produit offert » : masqué sur mobile — il recouvrait
	   les boutons Filtrer/Trier (ce CSS ne charge que sur les listings,
	   le badge reste visible sur l'accueil et les fiches produits) */
	#bf-floating-badge, .bf-floating { display: none !important; }

	/* Voile */
	body.ckf-filter-open #ckf-backdrop,
	body.ckf-sort-open #ckf-backdrop {
		display: block; position: fixed; inset: 0; z-index: 9991;
		background: rgba(10, 18, 38, .55);
	}

	/* Panneau FILTRES : masqué par défaut, tiroir plein écran depuis le bas */
	#ckfacets { display: none; }
	body.ckf-filter-open #ckfacets {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 8vh;
		z-index: 9992; background: #fff; border-radius: 18px 18px 0 0;
		padding: 18px 16px 84px; overflow-y: auto;
		box-shadow: 0 -10px 40px rgba(10, 18, 38, .35);
	}
	body.ckf-filter-open #ckf-done {
		display: block; position: fixed; left: 12px; right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0)); z-index: 9993;
		background: #c24a00; color: #fff; border: 0; border-radius: 999px;
		padding: 14px 0; font-size: 15px; font-weight: 800; letter-spacing: .03em;
	}

	/* Feuille TRI : petit panneau depuis le bas */
	body.ckf-sort-open #ckf-sortsheet {
		display: block; position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 9992; background: #fff; border-radius: 18px 18px 0 0;
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
		box-shadow: 0 -10px 40px rgba(10, 18, 38, .35);
	}
	#ckf-sortsheet .ckf-sheet-title { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #14213d; }
	#ckf-sortsheet button {
		display: block; width: 100%; text-align: left; background: #fff;
		border: 0; border-top: 1px solid #eef2f7; padding: 13px 4px;
		font-size: 15px; color: #1c2b45; cursor: pointer;
	}
	#ckf-sortsheet button.on { color: #1a5ea4; font-weight: 800; }
	#ckf-sortsheet button.on::after { content: " \2713"; }

	/* ── Pages mc & catégories sport : les barres de filtres injectées dans
	   #spz-content — .mc-bar (pages /mc/ : pilules + tri) et .spz-fbar
	   (Sélection sport : puces par type) — restent dans le DOM (leurs clics
	   AJAX continuent de fonctionner) mais sont masquées, puis AFFICHÉES EN
	   TIROIR selon le bouton pressé ──────────────────────────────────────── */
	.mc-bar, .spz-fbar { display: none !important; }
	/* Filtrer → tiroir plein écran avec les pilules */
	body.ckf-filter-open #spz-content .mc-bar,
	body.ckf-filter-open #spz-content .spz-fbar {
		display: block !important; position: fixed; left: 0; right: 0; bottom: 0; top: 14vh;
		z-index: 9992; background: #fff; border-radius: 18px 18px 0 0;
		padding: 18px 16px 84px; overflow-y: auto; margin: 0;
		box-shadow: 0 -10px 40px rgba(10, 18, 38, .35);
	}
	body.ckf-filter-open #spz-content .mc-bar .mc-sort,
	body.ckf-filter-open #spz-content .spz-fbar .spz-sort { display: none; }
	body.ckf-filter-open #spz-content .mc-ftag,
	body.ckf-filter-open #spz-content .spz-ftag {
		display: inline-block; margin: 4px 2px; padding: 9px 15px; font-size: 14px;
	}
	body.ckf-filter-open #spz-content .mc-flabel,
	body.ckf-filter-open #spz-content .spz-flabel {
		display: block; width: 100%; margin: 12px 0 4px; font-size: 13px;
	}
	body.ckf-filter-open #spz-content .mc-freset,
	body.ckf-filter-open #spz-content .spz-freset {
		display: inline-block; margin: 14px 2px 4px; padding: 9px 15px;
	}
	body.ckf-filter-open #ckf-done { display: block; }
	/* Trier → feuille basse avec le sélecteur mc/spz en grand */
	body.ckf-sort-open #spz-content .mc-bar,
	body.ckf-sort-open #spz-content .spz-fbar {
		display: block !important; position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 9992; background: #fff; border-radius: 18px 18px 0 0;
		padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0)); margin: 0;
		box-shadow: 0 -10px 40px rgba(10, 18, 38, .35);
	}
	body.ckf-sort-open #spz-content .mc-bar .mc-filters { display: none !important; }
	body.ckf-sort-open #spz-content .spz-fbar .spz-ftag,
	body.ckf-sort-open #spz-content .spz-fbar .spz-flabel,
	body.ckf-sort-open #spz-content .spz-fbar .spz-freset { display: none !important; }
	body.ckf-sort-open #spz-content .mc-bar .mc-sort select,
	body.ckf-sort-open #spz-content .spz-fbar .spz-sort select {
		width: 100%; font-size: 16px; padding: 13px 12px;
		border: 1px solid #d6deea; border-radius: 12px; background: #fff;
	}
}