/* ==========================================================================
   Page archive produits (boutique + catégories) sur-mesure (remplace le template
   Elementor + le plugin "Product Filter for WooCommerce by WBW")
   A placer dans : wp-content/themes/blocksy-1752578877-via-wpmarmite/assets/css/archive-product.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap');

/* --- Mise en page 2 colonnes : filtres à gauche / grille produits à droite --- */
.gc-shop-layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-top: 30px;
	margin-bottom: 60px;
}
.gc-shop-filters {
	flex: 0 0 260px;
	max-width: 260px;
}
.gc-shop-main {
	flex: 1 1 0%;
	min-width: 0; /* évite que la grille ne déborde du conteneur flex */
}
@media (max-width: 782px) {
	.gc-shop-layout { flex-direction: column; }
	.gc-shop-filters { max-width: 100%; flex-basis: auto; width: 100%; order: 2; }
	.gc-shop-main { order: 1; } /* grille produits avant les filtres sur mobile */
	.gc-shop-filters-toggle__summary { display: block; }
}

/* --- Bouton "Filtres" (mobile uniquement, voir media query ci-dessus) --- */
.gc-shop-filters-toggle__summary {
	display: none; /* caché sur desktop : la liste de filtres reste toujours visible telle quelle */
	cursor: pointer;
	list-style: none;
	font-family: 'Merriweather', Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 16px;
	margin-bottom: 20px;
	background: #faf8f5;
	border: 1px solid var(--gc-border, #ececec);
	border-radius: 6px;
}
.gc-shop-filters-toggle__summary::-webkit-details-marker { display: none; }
.gc-shop-filters-toggle__summary::after {
	content: "+";
	float: right;
	font-weight: 400;
	color: var(--gc-accent, #CD7F32);
}
.gc-shop-filters-toggle[open] > .gc-shop-filters-toggle__summary::after { content: "\2212"; }

/* --- Zones tactiles un peu plus grandes sur mobile (cases à cocher + slider de prix) --- */
@media (max-width: 480px) {
	.gc-filter-check { padding: 4px 0; }
	.widget_price_filter .ui-slider .ui-slider-handle { width: 22px; height: 22px; margin-left: -11px; }
}

/* --- Blocs de filtre (tri + prix) --- */
.gc-filter-block { margin-bottom: 34px; }
.gc-filter-title {
	font-family: 'Merriweather', Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 14px;
	color: #1c1c1c;
}

/* --- Tri : cases à cocher --- */
.gc-filter-checklist { list-style: none; margin: 0; padding: 0; }
.gc-filter-checklist li { margin-bottom: 10px; }
.gc-filter-check {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #333;
	font-size: 14px;
	line-height: 1.3;
}
.gc-filter-check__box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid #bbb;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}
.gc-filter-check.is-checked .gc-filter-check__box {
	background: var(--gc-accent, #CD7F32);
	border-color: var(--gc-accent, #CD7F32);
}
.gc-filter-check.is-checked .gc-filter-check__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.gc-filter-check.is-checked .gc-filter-check__label { font-weight: 600; color: #000; }

/* --- Catégories : image de la catégorie à côté de la case à cocher --- */
.gc-filter-checklist--categories li { margin-bottom: 12px; }
.gc-filter-check--category .gc-filter-check__thumb {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	object-fit: cover;
	flex: 0 0 auto;
}
.gc-filter-check__count { color: #999; font-size: 12px; }

/* --- Repère alphabétique (A, B, C...) au-dessus de chaque groupe de catégories --- */
.gc-filter-letter {
	font-family: 'Merriweather', Georgia, serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--gc-accent, #CD7F32);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 18px 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--gc-border, #ececec);
}
.gc-filter-categories .gc-filter-letter:first-child { margin-top: 0; }

/* --- Bandeau titre de catégorie : garde uniquement le titre + l'image de fond.
   Diagnostic en direct (DOM staging) : le texte de description n'est PAS affiché par WooCommerce
   (notre .woocommerce-products-header reste vide, Blocksy gère le titre lui-même) mais par le thème
   Blocksy, qui ajoute automatiquement la description du terme sous le titre dans son propre bloc
   ".hero-section .page-description" (indépendant de notre template archive-product.php). C'est ce
   bloc précis qu'il faut masquer pour ne garder que l'image en fond + le titre. */
.hero-section .page-description { display: none !important; }

/* Titre de catégorie dans le bandeau : blanc + ombre portée pour rester lisible sur la photo
   de fond (la couleur par défaut du thème, trop sombre, se fondait dans l'image). */
.hero-section .entry-header .page-title {
	color: #fff !important;
	font-family: 'Merriweather', Georgia, serif;
	font-weight: 700;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

/* --- Description de catégorie (texte SEO), affichée sous la grille + le filtre --- */
.gc-archive-description {
	margin-top: 50px;
	padding-top: 40px;
	border-top: 1px solid var(--gc-border, #ececec);
	line-height: 1.75;
	font-size: 15px;
}
.gc-archive-description img { max-width: 100%; height: auto; }
.gc-archive-description h2 { font-size: 24px; margin: 1.2em 0 .5em; }
.gc-archive-description h3 { font-size: 18px; margin: 1.2em 0 .4em; }
.gc-archive-description ul { padding-left: 20px; }
.gc-archive-description li { margin-bottom: 6px; }

/* --- Filtre par prix : widget natif WooCommerce restylé pour ressembler au slider orange existant --- */
.widget_price_filter .price_slider_wrapper { margin-top: 6px; }

.widget_price_filter .ui-slider {
	position: relative;
	height: 4px;
	background: #e5e0d8;
	border-radius: 2px;
	margin: 20px 6px 16px;
}
.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--gc-accent, #CD7F32);
	border-radius: 2px;
}
.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	transform: translateY(-50%);
	background: #fff;
	border: 2px solid var(--gc-accent, #CD7F32);
	border-radius: 50%;
	cursor: pointer;
	outline: none;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.widget_price_filter .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}
.widget_price_filter .price_slider_amount .button {
	order: 2;
	background: var(--gc-accent, #CD7F32) !important;
	border-color: var(--gc-accent, #CD7F32) !important;
	color: #fff !important;
	font-size: 12px;
	padding: 8px 14px !important;
	border-radius: 4px !important;
	font-weight: 600;
}
.widget_price_filter .price_slider_amount .price_label {
	order: 1;
	font-size: 13px;
	color: #555;
}
.widget_price_filter .price_slider_amount .price_label span { font-weight: 600; color: #1c1c1c; }