/**
 * Habachiya — Boutique & Fiches Produits
 *
 * Palette : teal (#0C5448) · or (#C4952A) · crème (#F7F2E8) · sombre (#1E1A14)
 * Cohérente avec cart.css (mêmes variables CSS)
 */

/* ===================================================================
   Variables — identiques à cart.css
   =================================================================== */
:root {
	--h-teal:        #0C5448;
	--h-teal-hover:  #093D34;
	--h-teal-light:  #EAF4F1;
	--h-gold:        #C4952A;
	--h-gold-hover:  #A87D20;
	--h-gold-light:  #F5D98A;
	--h-sand:        #F7F2E8;
	--h-sand-dark:   #EDE5D4;
	--h-dark:        #1E1A14;
	--h-brown:       #6B7074;
	--h-text:        #1E1A14;
	--h-bg:          #FDFAF4;
	--h-border:      #DDD5C0;
	--h-white:       #FFFFFF;
	--h-radius:      10px;
	--h-shadow:      0 2px 14px rgba(12, 84, 72, 0.07);
	--h-shadow-hover:0 8px 30px rgba(12, 84, 72, 0.15);
	--h-t:           0.18s ease;
}

/* ===================================================================
   Container — même largeur que le panier
   Divi utilise .container + #left-area pour les pages sans builder
   =================================================================== */
body.woocommerce .container,
body.woocommerce-page .container {
	max-width: 1320px !important;
	width: 92% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* Force layout single-colonne — neutralise tout flex/grid parasite de WC blocks ou Divi */
body.woocommerce #content-area,
body.woocommerce-page #content-area {
	display: block !important;
}

body.woocommerce #left-area,
body.woocommerce-page #left-area {
	display: block !important;
	width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
}

/* Masquer sidebar */
body.woocommerce #sidebar,
body.woocommerce-page #sidebar {
	display: none !important;
}

/* .et_pb_row si page builder */
body.woocommerce .et_pb_row,
body.woocommerce-page .et_pb_row {
	max-width: 1320px !important;
	width: 92% !important;
}

/* Titre page boutique (woocommerce-products-header) — pleine largeur, au-dessus de tout */
body.woocommerce .woocommerce-products-header,
body.woocommerce-page .woocommerce-products-header {
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	margin-bottom: 4px !important;
}

/* Ligne résultats + tri — float natif WC conservé (count left, ordering right) */
body.woocommerce .woocommerce-result-count,
body.woocommerce-page .woocommerce-result-count {
	float: left !important;
	clear: none !important;
	display: block !important;
}

body.woocommerce .woocommerce-ordering,
body.woocommerce-page .woocommerce-ordering {
	float: right !important;
	clear: none !important;
	display: block !important;
}

/* Grille produits — clear les floats avant de démarrer */
body.woocommerce ul.products,
body.woocommerce-page ul.products {
	clear: both !important;
}

/* Pagination — pleine largeur, centrée, en bas */
body.woocommerce .woocommerce-pagination,
body.woocommerce-page .woocommerce-pagination {
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	text-align: center !important;
	margin-top: 40px !important;
}

/* ===================================================================
   Fond page boutique
   =================================================================== */
body.woocommerce,
body.woocommerce-page {
	background-color: var(--h-bg) !important;
}

/* ===================================================================
   Breadcrumb — sous le titre, pleine largeur
   =================================================================== */
.woocommerce-breadcrumb {
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	font-size: 13px !important;
	color: var(--h-brown) !important;
	margin-bottom: 20px !important;
}
.woocommerce-breadcrumb a {
	color: var(--h-brown) !important;
	text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover {
	color: var(--h-teal) !important;
}

/* ===================================================================
   Titre de page boutique
   =================================================================== */
h1.page-title,
.woocommerce-products-header__title {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	font-family: Georgia, 'Palatino Linotype', serif !important;
	font-size: 30px !important;
	font-weight: normal !important;
	color: var(--h-dark) !important;
	letter-spacing: 0.4px !important;
	margin-bottom: 6px !important;
}

/* Trait teal sous le titre */
h1.page-title::after {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	background: var(--h-teal);
	margin-top: 10px;
	border-radius: 2px;
}

/* ===================================================================
   Barre résultats / tri
   =================================================================== */

/* Supprimer toutes les bordures parasites dans le header de boutique
   (Divi ou WC peut ajouter des borders sur td/div/form) */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-ordering *:not(select),
.woocommerce .woocommerce-products-header,
.woocommerce-products-header,
.woocommerce-notices-wrapper,
/* Cibler toutes les tables et cellules hors grille produit sur la page boutique */
body.woocommerce table:not(.shop_table):not(.woocommerce-cart-form__contents),
body.woocommerce-page table:not(.shop_table):not(.woocommerce-cart-form__contents),
body.woocommerce table:not(.shop_table) td,
body.woocommerce table:not(.shop_table) th {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.woocommerce-result-count {
	font-size: 13px !important;
	color: var(--h-brown) !important;
}

.woocommerce-ordering select {
	border: 1.5px solid var(--h-border) !important;
	border-radius: 6px !important;
	background-color: var(--h-white) !important;
	color: var(--h-text) !important;
	padding: 7px 32px 7px 12px !important;
	font-size: 13px !important;
}
.woocommerce-ordering select:focus {
	border-color: var(--h-teal) !important;
	outline: none !important;
}

/* ===================================================================
   Filtre par catégorie — barre de pills
   =================================================================== */
.hab-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--h-border);
}

.hab-cat-btn {
	font-size: 13px;
	font-weight: 500;
	padding: 8px 20px;
	border-radius: 30px;
	border: 1.5px solid var(--h-border);
	background: var(--h-white);
	color: var(--h-text);
	text-decoration: none !important;
	transition: background var(--h-t), border-color var(--h-t), color var(--h-t);
	white-space: nowrap;
	line-height: 1.4;
}

.hab-cat-btn:hover {
	background: var(--h-teal-light);
	border-color: var(--h-teal);
	color: var(--h-teal);
}

.hab-cat-btn.is-active {
	background: var(--h-teal);
	border-color: var(--h-teal);
	color: var(--h-white) !important;
}

/* ===================================================================
   Grille produits — layout natif WooCommerce (floats)
   =================================================================== */
ul.products {
	margin: 0 !important;
}

/* ===================================================================
   Carte produit
   =================================================================== */
ul.products li.product {
	background: var(--h-white) !important;
	border: 1px solid var(--h-border) !important;
	border-radius: var(--h-radius) !important;
	padding: 0 !important;
	box-shadow: var(--h-shadow) !important;
	transition: box-shadow 0.22s ease, transform 0.22s ease !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
}

ul.products li.product:hover {
	box-shadow: var(--h-shadow-hover) !important;
	transform: translateY(-4px) !important;
}

/* ===================================================================
   Zone image
   =================================================================== */
ul.products li.product .woocommerce-LoopProduct-link {
	display: block !important;
	background: var(--h-white) !important;
	overflow: hidden !important;
	border-radius: var(--h-radius) var(--h-radius) 0 0 !important;
}

ul.products li.product .woocommerce-LoopProduct-link img {
	width: 100% !important;
	height: 200px !important;
	object-fit: contain !important;
	padding: 18px !important;
	box-sizing: border-box !important;
	display: block !important;
	transition: transform 0.3s ease !important;
}

ul.products li.product:hover .woocommerce-LoopProduct-link img {
	transform: scale(1.05) !important;
}

/* ===================================================================
   Titre produit — forcer la couleur contre Divi/WC qui met des liens bleus
   =================================================================== */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
	font-family: Georgia, 'Palatino Linotype', serif !important;
	font-size: 15px !important;
	font-weight: normal !important;
	color: var(--h-dark) !important;
	line-height: 1.5 !important;
	padding: 12px 14px 4px !important;
	margin: 0 !important;
}

/* Lien du titre produit — empêcher la couleur de lien Divi */
ul.products li.product a .woocommerce-loop-product__title,
ul.products li.product .woocommerce-LoopProduct-link h2 {
	color: var(--h-dark) !important;
}

ul.products li.product a:hover .woocommerce-loop-product__title,
ul.products li.product .woocommerce-LoopProduct-link:hover h2 {
	color: var(--h-teal) !important;
}

/* ===================================================================
   Étoiles de notation
   =================================================================== */
ul.products li.product .star-rating {
	margin: 0 0 4px 14px !important;
	font-size: 13px !important;
}
ul.products li.product .star-rating::before {
	color: var(--h-sand-dark) !important;
}
ul.products li.product .star-rating span::before {
	color: var(--h-gold) !important;
}

/* ===================================================================
   Prix
   =================================================================== */
ul.products li.product .price {
	display: block !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--h-gold) !important;
	padding: 4px 14px 10px !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

ul.products li.product .price del {
	color: var(--h-brown) !important;
	font-size: 12.5px !important;
	font-weight: normal !important;
	opacity: 0.65 !important;
}

ul.products li.product .price ins {
	text-decoration: none !important;
}

/* ===================================================================
   Sélecteur variantes / addons PPOM
   =================================================================== */
ul.products li.product select {
	border: 1.5px solid var(--h-border) !important;
	border-radius: 6px !important;
	background: var(--h-white) !important;
	color: var(--h-text) !important;
	font-size: 13px !important;
	padding: 6px 10px !important;
	margin: 0 14px 10px !important;
	width: calc(100% - 28px) !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
}

ul.products li.product select:focus {
	border-color: var(--h-teal) !important;
	outline: none !important;
}

/* ===================================================================
   Bouton "Ajouter au panier"
   =================================================================== */
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product button.button,
ul.products li.product .add_to_cart_button {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	background: var(--h-teal) !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	border: none !important;
	border-radius: 0 0 var(--h-radius) var(--h-radius) !important;
	padding: 14px 16px !important;
	width: 100% !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: background var(--h-t) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	display: block !important;
	margin-top: auto !important;
}

ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product button.button:hover {
	background: var(--h-teal-hover) !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

/* Masquer lien "Voir le panier" après ajout */
ul.products li.product .added_to_cart {
	display: none !important;
}

/* ===================================================================
   Badge "Promo"
   =================================================================== */
ul.products li.product .onsale,
span.onsale {
	background: var(--h-teal) !important;
	color: var(--h-white) !important;
	border-radius: 5px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	padding: 4px 9px !important;
	min-height: unset !important;
	min-width: unset !important;
	line-height: 1.4 !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
}

/* ===================================================================
   Toast "Ajouté au panier"
   =================================================================== */
#dl-toast {
	background: var(--h-dark) !important;
}
#dl-toast a {
	color: var(--h-gold-light) !important;
}

/* ===================================================================
   Pagination
   =================================================================== */
.woocommerce-pagination ul {
	border: none !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
	border: 1.5px solid var(--h-border) !important;
	border-radius: 7px !important;
	color: var(--h-text) !important;
	margin: 0 3px !important;
	min-width: 36px !important;
	line-height: 36px !important;
}

.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
	background: var(--h-teal) !important;
	border-color: var(--h-teal) !important;
	color: var(--h-white) !important;
}

/* ===================================================================
   Responsive — mobile 1 colonne
   =================================================================== */
@media (max-width: 580px) {
	ul.products {

	ul.products li.product .woocommerce-LoopProduct-link img {
		height: 165px !important;
	}

	h1.page-title {
		font-size: 24px !important;
	}
}