/* CercleKit WooCommerce — Widget « Boucle produit » : vues carrousel + pagination.
 * Les cartes produit et la vue Liste (.we-list) sont réutilisées telles quelles
 * (module Boucle produit + filtre-boutique.css). Ici : uniquement le carrousel
 * et la pagination, spécifiques à ce widget. */

.ckwc-boucle { position: relative; }

/* ---- Vue Grille : colonnes RESPONSIVES pilotées par --ckwc-cols (contrôle
 * « Colonnes » desktop/tablette/mobile). On force une vraie CSS Grid pour ne
 * pas dépendre de la classe columns-N du thème (non responsive). ---- */
.ckwc-boucle--grid .woocommerce ul.products,
.ckwc-boucle--grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--ckwc-cols, 4), minmax(0, 1fr));
	gap: var(--ckwc-cards-gap, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ckwc-boucle--grid ul.products::before,
.ckwc-boucle--grid ul.products::after { content: none !important; display: none !important; }
.ckwc-boucle--grid ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* ---- Vue Carrousel : piste horizontale à défilement, cartes = mêmes li.product ---- */
.ckwc-boucle-carousel { position: relative; }

.ckwc-boucle-carousel .products.ckwc-carousel-track {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--ckwc-cards-gap, 20px);
	margin: 0;
	padding: 4px 2px;
	list-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ckwc-boucle-carousel .products.ckwc-carousel-track::-webkit-scrollbar { display: none; }
.ckwc-boucle-carousel .products.ckwc-carousel-track::before,
.ckwc-boucle-carousel .products.ckwc-carousel-track::after { content: none !important; display: none !important; }

.ckwc-boucle-carousel .products.ckwc-carousel-track > li.product {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--ckwc-cols, 4) - 1) * var(--ckwc-cards-gap, 20px)) / var(--ckwc-cols, 4));
	max-width: calc((100% - (var(--ckwc-cols, 4) - 1) * var(--ckwc-cards-gap, 20px)) / var(--ckwc-cols, 4));
	margin: 0 !important;
	width: auto !important;
}

/* ---- Débord « façon Apple » (réglage « Déborder jusqu'au bord de l'écran ») ----
 * LE PRINCIPE : la piste sort du conteneur par des marges NÉGATIVES égales à la
 * distance conteneur → bord de l'écran, et rend exactement cette distance en
 * padding. Sa boîte de CONTENU reste donc la largeur du conteneur — or c'est elle
 * que lisent les `100%` du calcul des cartes ci-dessus : le nombre de colonnes
 * reste celui du conteneur, sans une ligne de calcul en plus.
 * `scroll-padding-left` cale l'aimantation sur le bord du CONTENEUR, pas sur le
 * bord de l'écran : la carte qui s'arrête à gauche s'aligne avec le reste de la
 * page. Les deux distances sont mesurées par boucle-widget.js (le conteneur n'est
 * pas forcément centré, et `100vw` compte la barre de défilement sous Windows —
 * de quoi fabriquer un défilement horizontal de toute la page).
 * Le 4px haut/bas d'origine est conservé : c'est la place des ombres. */
.ckwc-boucle-carousel.ckwc-carousel--bleed .products.ckwc-carousel-track {
	margin-left: calc(-1 * var(--ckwc-bleed-l, 0px));
	margin-right: calc(-1 * var(--ckwc-bleed-r, 0px));
	padding-left: var(--ckwc-bleed-l, 0px);
	padding-right: var(--ckwc-bleed-r, 0px);
	scroll-padding-left: var(--ckwc-bleed-l, 0px);
	scroll-padding-right: var(--ckwc-bleed-r, 0px);
}

/* Reset FORT (sélecteur à 2 classes) : le thème stylise les <button> (souvent
 * fond transparent + texte blanc → flèches invisibles). Couleur & fond sont
 * pilotés par variables en !important : le thème ne peut plus écraser, mais les
 * contrôles Elementor (qui règlent ces variables) restent maîtres. Défaut
 * VISIBLE : icône foncée, fond blanc, ombre douce. */
.ckwc-boucle-carousel .ckwc-carousel-nav {
	position: absolute;
	top: var(--ckwc-arrow-top, 50%);
	bottom: var(--ckwc-arrow-bottom, auto);
	transform: translateY(var(--ckwc-arrow-ty, -50%));
	z-index: 20;
	box-sizing: border-box;
	width: var(--ckwc-arrow-box, 42px);
	height: var(--ckwc-arrow-box, 42px);
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ckwc-arrow-bg, #ffffff) !important;
	color: var(--ckwc-arrow-color, #111827) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	line-height: 0;
}
.ckwc-boucle-carousel .ckwc-carousel-nav--prev { left: var(--ckwc-prev-left, 12px); right: var(--ckwc-prev-right, auto); }
.ckwc-boucle-carousel .ckwc-carousel-nav--next { left: var(--ckwc-next-left, auto); right: var(--ckwc-next-right, 12px); }

/* Icône : couleur robuste quel que soit le type d'icône.
 *  - icône Elementor (SVG « e-font-icon-svg ») : se colore par FILL
 *  - chevron de secours (SVG stroke) : suit color/currentColor
 *  - police (eicons/FontAwesome <i>) : color */
.ckwc-boucle-carousel .ckwc-carousel-nav svg {
	width: var(--ckwc-arrow-icon, 20px);
	height: var(--ckwc-arrow-icon, 20px);
}
.ckwc-boucle-carousel .ckwc-carousel-nav svg.e-font-icon-svg,
.ckwc-boucle-carousel .ckwc-carousel-nav svg.e-font-icon-svg path {
	fill: var(--ckwc-arrow-color, #111827) !important;
}
.ckwc-boucle-carousel .ckwc-carousel-nav svg:not(.e-font-icon-svg) {
	stroke: var(--ckwc-arrow-color, #111827) !important;
}
.ckwc-boucle-carousel .ckwc-carousel-nav i {
	font-size: var(--ckwc-arrow-icon, 20px);
	line-height: 1;
	color: var(--ckwc-arrow-color, #111827) !important;
}

/* Survol : bascule vers les couleurs de survol si définies. */
.ckwc-boucle-carousel .ckwc-carousel-nav:hover {
	background: var(--ckwc-arrow-bg-h, var(--ckwc-arrow-bg, #ffffff)) !important;
	color: var(--ckwc-arrow-color-h, var(--ckwc-arrow-color, #111827)) !important;
}
.ckwc-boucle-carousel .ckwc-carousel-nav:hover svg.e-font-icon-svg,
.ckwc-boucle-carousel .ckwc-carousel-nav:hover svg.e-font-icon-svg path {
	fill: var(--ckwc-arrow-color-h, var(--ckwc-arrow-color, #111827)) !important;
}
.ckwc-boucle-carousel .ckwc-carousel-nav:hover svg:not(.e-font-icon-svg) {
	stroke: var(--ckwc-arrow-color-h, var(--ckwc-arrow-color, #111827)) !important;
}
.ckwc-boucle-carousel .ckwc-carousel-nav:hover i {
	color: var(--ckwc-arrow-color-h, var(--ckwc-arrow-color, #111827)) !important;
}

/* Le nombre de cartes visibles en carrousel suit --ckwc-cols à tous les
 * breakpoints (le contrôle « Colonnes » gère desktop/tablette/mobile). */

/* ---- Pagination numérotée ---- */
.ckwc-boucle-pagination {
	margin-top: 28px;
	display: flex;
	justify-content: center;
}
/* Masquée en vue Comparatif (basculée par la barre de filtre). */
.ckwc-boucle-pagination.cd-hidden { display: none !important; }
.ckwc-boucle-pagination .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ckwc-pag-gap, 6px);
	margin: 0;
	padding: 0;
}
.ckwc-boucle-pagination .page-numbers li { margin: 0; }
.ckwc-boucle-pagination .page-numbers a,
.ckwc-boucle-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--ckwc-pag-size, 40px);
	min-height: var(--ckwc-pag-size, 40px);
	padding: var(--ckwc-pag-pad, 8px 14px);
	border: var(--ckwc-pag-bw, 1px) solid var(--ckwc-pag-border, #e5e7eb);
	border-radius: var(--ckwc-pag-radius, 8px);
	background: var(--ckwc-pag-bg, #fff);
	color: var(--ckwc-pag-color, #111);
	text-decoration: none;
	font-size: var(--ckwc-pag-fs, 14px);
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ckwc-boucle-pagination .page-numbers a:hover,
.ckwc-boucle-pagination .page-numbers a:focus {
	background: var(--ckwc-pag-hover-bg, #f3f4f6);
	color: var(--ckwc-pag-hover-color, var(--ckwc-pag-color, #111));
	border-color: var(--ckwc-pag-hover-border, var(--ckwc-pag-border, #e5e7eb));
}
.ckwc-boucle-pagination .page-numbers .current {
	background: var(--ckwc-pag-active-bg, #111);
	border-color: var(--ckwc-pag-active-border, var(--ckwc-pag-active-bg, #111));
	color: var(--ckwc-pag-active-color, #fff);
}

.ckwc-boucle__empty {
	padding: 24px;
	color: #6b7280;
}