/**
 * ALVIA Nos Produits – Styles
 * BEM léger, compatible Divi. Responsive : desktop 3 cols, tablette 2, mobile 1.
 * Pages catégories : même apparence via body.alvia-category-same-layout
 */

/* --------------------------------------------------------------------------
 * Responsive mobile : éviter tout dépassement horizontal
 * -------------------------------------------------------------------------- */
body.alvia-nos-produits-page,
body.alvia-category-same-layout {
	overflow-x: hidden;
}
body.alvia-nos-produits-page #main-content,
body.alvia-nos-produits-page .main-content,
body.alvia-nos-produits-page #main-content .container,
body.alvia-nos-produits-page .main-content .container,
body.alvia-category-same-layout #main-content,
body.alvia-category-same-layout .main-content,
body.alvia-category-same-layout #main-content .container,
body.alvia-category-same-layout .main-content .container {
	overflow-x: hidden;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * Page Nos produits / Catégories : supprimer la ligne verticale à gauche
 * -------------------------------------------------------------------------- */
body.alvia-nos-produits-page #main-content,
body.alvia-nos-produits-page #main-content .container,
body.alvia-nos-produits-page .main-content .container,
body.alvia-category-same-layout #main-content,
body.alvia-category-same-layout #main-content .container,
body.alvia-category-same-layout .main-content .container {
	border-left: none !important;
}
body.alvia-nos-produits-page #main-content .container::before,
body.alvia-nos-produits-page .main-content .container::before,
body.alvia-category-same-layout #main-content .container::before,
body.alvia-category-same-layout .main-content .container::before {
	content: none !important;
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Page Nos produits : header horizontal (éviter menu vertical sur desktop)
 * -------------------------------------------------------------------------- */
@media (min-width: 981px) {
	body.alvia-nos-produits-page .et_pb_row.alvia-header,
	body.alvia-nos-produits-page .alvia-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}
	body.alvia-nos-produits-page .alvia-header-nav,
	body.alvia-nos-produits-page .et_pb_column .alvia-header-nav {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
	}
	body.alvia-nos-produits-page .et_pb_row.alvia-header .et_pb_column:has(.alvia-header-nav) {
		position: relative !important;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
}

/* --------------------------------------------------------------------------
 * Layout principal
 * -------------------------------------------------------------------------- */

/* Même largeur que le header : pas de max-width réduit, contenu à la même largeur que la row header */
body.alvia-nos-produits-page #main-content,
body.alvia-nos-produits-page .main-content,
body.alvia-category-same-layout #main-content,
body.alvia-category-same-layout .main-content {
	max-width: 1539px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
#alvia-nos-produits.alvia-np,
body.alvia-nos-produits-page #main-content .container .alvia-np,
body.alvia-nos-produits-page .main-content .container .alvia-np,
body.alvia-category-same-layout #main-content .container .alvia-np,
body.alvia-category-same-layout .main-content .container .alvia-np {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: hidden;
}
body.alvia-nos-produits-page #main-content .container,
body.alvia-nos-produits-page .main-content .container,
body.alvia-category-same-layout #main-content .container,
body.alvia-category-same-layout .main-content .container {
	width: 100%;
	max-width: 1539px !important;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
@media (max-width: 480px) {
	body.alvia-nos-produits-page #main-content .container,
	body.alvia-nos-produits-page .main-content .container,
	body.alvia-category-same-layout #main-content .container,
	body.alvia-category-same-layout .main-content .container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Mobile : supprimer marges gauche des produits sur pages catégories/archives */
@media (max-width: 980px) {
	body.alvia-category-same-layout .alvia-np__products-wrap {
		margin-left: -20px !important;
		margin-right: -20px !important;
		width: calc(100% + 40px) !important;
		max-width: none !important;
	}
	body.alvia-category-same-layout .alvia-np .products,
	body.alvia-category-same-layout .alvia-np ul.products {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
	body.alvia-category-same-layout .alvia-np .products .product,
	body.alvia-category-same-layout .alvia-np ul.products li.product {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
}
@media (max-width: 480px) {
	body.alvia-category-same-layout .alvia-np__products-wrap {
		margin-left: -16px !important;
		margin-right: -16px !important;
		width: calc(100% + 32px) !important;
	}
}

/* Mobile : éliminer les vides (padding/margin des conteneurs), pas de marge négative ni bouton étiré */
@media (max-width: 980px) {
	body.alvia-nos-produits-page #page-container,
	body.alvia-category-same-layout #page-container {
		padding-top: 0 !important;
	}
	body.alvia-nos-produits-page .entry-header,
	body.alvia-nos-produits-page .post-header,
	body.alvia-nos-produits-page .et_pb_title_container,
	body.alvia-category-same-layout .entry-header,
	body.alvia-category-same-layout .post-header,
	body.alvia-category-same-layout .et_pb_title_container {
		display: none !important;
	}
	/* Réduire l'espace sous le header (section Divi souvent juste avant #main-content) */
	body.alvia-nos-produits-page .et_pb_section:first-of-type,
	body.alvia-category-same-layout .et_pb_section:first-of-type {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	body.alvia-nos-produits-page #main-content,
	body.alvia-nos-produits-page .main-content,
	body.alvia-category-same-layout #main-content,
	body.alvia-category-same-layout .main-content {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
	}
	body.alvia-nos-produits-page #main-content .container,
	body.alvia-nos-produits-page .main-content .container,
	body.alvia-category-same-layout #main-content .container,
	body.alvia-category-same-layout .main-content .container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Sections/rows Divi dans la zone contenu */
	body.alvia-nos-produits-page #main-content .et_pb_section,
	body.alvia-nos-produits-page #main-content .et_pb_row,
	body.alvia-nos-produits-page .et_pb_section:not(:has(.alvia-header)),
	body.alvia-category-same-layout #main-content .et_pb_section,
	body.alvia-category-same-layout #main-content .et_pb_row,
	body.alvia-category-same-layout .et_pb_section:not(:has(.alvia-header)) {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	#alvia-nos-produits.alvia-np,
	body.alvia-nos-produits-page .alvia-np,
	body.alvia-category-same-layout .alvia-np {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.alvia-np__layout {
		margin-top: 0 !important;
	}
	.alvia-np__toolbar {
		margin-bottom: 8px !important;
	}
}

.alvia-np {
	--alvia-np-sidebar-width: 260px;
	--alvia-np-gap: 24px;
}

.alvia-np__layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alvia-np-gap);
	align-items: flex-start;
	min-width: 0;
}

/* Mobile (< 981px) : sidebar sans hauteur fixe, vide réduit au max sous Filtres. AUCUN impact desktop. */
@media (max-width: 980px) {
	.alvia-np__layout {
		flex-direction: column;
		gap: 0 !important;
		align-items: stretch;
	}
	.alvia-np__sidebar {
		flex: 0 0 auto !important;
		width: 100%;
		max-width: 100%;
		height: auto !important;
		min-height: 0 !important;
		display: block;
		padding: 0 !important;
		margin: 0 !important;
	}
	/* Panneau filtres fermé : aucun espace réservé */
	.alvia-np__sidebar .alvia-np__filters-panel:not(.alvia-np__filters-panel--open) {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
	}
	.alvia-np__sidebar:has(.alvia-np__filters-panel--open) {
		height: auto;
		min-height: auto;
	}
	/* Main sans flex-grow, collé sous la sidebar. Marge négative pour annuler tout padding Divi résiduel. */
	.alvia-np__main {
		flex: 0 0 auto !important;
		min-width: 0;
		width: 100%;
		max-width: 100%;
		margin: 0 !important;
		margin-top: 20px !important;
		padding: 0 !important;
		padding-top: 0 !important;
	}
	.alvia-np__toolbar {
		margin: 0 !important;
		padding: 0 0 6px 0 !important;
	}
	.alvia-np__sidebar-toggle {
		margin: 0 !important;
		padding: 8px 16px;
		width: 100%;
	}
}

/* Archive boutique / catégorie : pas de sidebar, zone principale pleine largeur */
.alvia-np--archive .alvia-np__main {
	flex: 1;
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * Sidebar filtres (desktop : sticky)
 * -------------------------------------------------------------------------- */

.alvia-np__sidebar {
	flex: 0 0 var(--alvia-np-sidebar-width);
	min-width: 0;
	border-right: none; /* évite la longue ligne grise verticale entre filtres et grille */
}

@media (min-width: 981px) {
	.alvia-np__sidebar {
		position: sticky;
	}
}

/* Bouton toggle mobile (caché sur desktop) */
.alvia-np__sidebar-toggle {
	display: none;
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 12px;
	font-size: 1rem;
	font-weight: 600;
	background: #7fa82e;
	color: #fff;
	border: 1px solid #6d9326;
	border-radius: 4px;
	cursor: pointer;
}

@media (max-width: 980px) {
	.alvia-np__sidebar-toggle {
		display: block;
	}
}

.alvia-np__sidebar-toggle:hover {
	background: #6d9326;
	color: #fff;
}

.alvia-np__sidebar-toggle[aria-expanded="true"] {
	background: #6d9326;
	color: #fff;
}

/* Panel filtres : replié par défaut sur mobile (pas de bordure droite = pas de ligne grise verticale) */
.alvia-np__filters-panel {
	background: #fafafa;
	border: 1px solid #eee;
	border-right: none;
	border-radius: 6px;
	padding: 20px;
}

@media (max-width: 980px) {
	.alvia-np__filters-panel {
		display: none;
	}

	.alvia-np__filters-panel.alvia-np__filters-panel--open {
		display: block;
		margin-top: 8px;
	}
}

/* --------------------------------------------------------------------------
 * Filtres individuels
 * -------------------------------------------------------------------------- */

.alvia-np-filter {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.alvia-np-filter:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.alvia-np-filter__title {
	margin: 0 0 10px 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.alvia-np-filter__content {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.alvia-np-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 0.9rem;
}

.alvia-np-filter__option input {
	margin: 0;
}

.alvia-np-filter__option--child {
	padding-left: 20px;
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
 * Boutons EFFACER / VALIDER
 * -------------------------------------------------------------------------- */

.alvia-np__filters-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.alvia-np__btn {
	padding: 10px 20px;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid transparent;
}

.alvia-np__btn--primary {
	background: #7fa82e;
	color: #fff;
	border-color: #6d9326;
}

.alvia-np__btn--primary:hover {
	background: #6d9326;
}

.alvia-np__btn--secondary {
	background: #f0f0f0;
	color: #333;
	border-color: #ccc;
}

.alvia-np__btn--secondary:hover {
	background: #e5e5e5;
}

/* --------------------------------------------------------------------------
 * Zone principale (grille produits)
 * -------------------------------------------------------------------------- */

.alvia-np__main {
	flex: 1;
	min-width: 0;
	border-left: none; /* évite la ligne grise entre sidebar et grille */
}

.alvia-np__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
	margin-top: 0;
	min-width: 0;
}

.alvia-np__sort-label {
	font-size: 0.95rem;
	font-weight: 500;
	flex-shrink: 0;
}

.alvia-np__sort-select {
	padding: 8px 12px;
	font-size: 0.9rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	min-width: 0;
	max-width: 100%;
}

/* Mobile : toolbar et tri empilés si nécessaire */
@media (max-width: 480px) {
	.alvia-np__toolbar {
		gap: 8px;
	}
	.alvia-np__sort-select {
		flex: 1 1 auto;
		min-width: 140px;
	}
}

/* --------------------------------------------------------------------------
 * Grille produits WooCommerce
 * Override marges thème/WooCommerce pour éviter le "grand vide" avant les produits
 * -------------------------------------------------------------------------- */

.alvia-np__products-wrap {
	margin-top: 0 !important;
	padding-top: 0 !important;
	transition: opacity 0.2s ease;
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
	float: inline-end;
}

/* Gap colonnes : override Divi/WooCommerce pour grille cohérente */
.alvia-np .alvia-np-products,
.alvia-np .products,
.alvia-np ul.products,
ul.alvia-np-products {
	display: grid !important;
	column-gap: 20px !important;
	row-gap: 20px !important;
	list-style: none !important;
	margin: 0 0 30px 0 !important;
	padding: 0 !important;
	min-width: 0;
	max-width: 100%;
}

/* Neutralise le ::before clearfix WooCommerce/Divi (cause du "grand vide") */
.alvia-np .products::before,
.alvia-np .alvia-np-products::before {
	content: none !important;
	display: none !important;
}

@media (min-width: 981px) {
	/* Grille 4 colonnes desktop (override Divi/WooCommerce) */
	.alvia-np .alvia-np-products,
	.alvia-np .products,
	.alvia-np .alvia-np-products.columns-3,
	.alvia-np .products.columns-3,
	.alvia-np .alvia-np-products.columns-4,
	.alvia-np .products.columns-4 {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (min-width: 768px) and (max-width: 980px) {
	.alvia-np .alvia-np-products,
	.alvia-np .products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.alvia-np .alvia-np-products,
	.alvia-np .products {
		grid-template-columns: 1fr !important;
	}
	.woocommerce-ordering {
		width: 49% !important;
	}
	.woocommerce-ordering > .orderby {
		width: 100% !important;
	}
}

.alvia-np .products .product,
.alvia-np ul.products li.product,
ul.alvia-np-products li {
	margin: 0 !important;
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden;
}

/* Images produit : responsive */
.alvia-np .products .product .woocommerce-LoopProduct-link {
	display: block;
	overflow: hidden;
}
.alvia-np .products .product img,
.alvia-np ul.products li.product img,
ul.alvia-np-products li img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
}

/* Liens et contenus produit : éviter débordement */
.alvia-np .products .product a,
.alvia-np ul.products li.product a,
ul.alvia-np-products li a {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.alvia-np-product__content {
	min-width: 0;
	overflow: hidden;
}

.alvia-np-product__description,
.alvia-np-product__meta,
.alvia-np-product__description p {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

/* Boutons produit : responsive */
.alvia-np .products .button,
.alvia-np .products a.button,
.alvia-np-product__btn {
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	text-align: center;
}

/* Premier produit : pas de marge supérieure (override thème/WooCommerce) */
.alvia-np .products .product:first-child {
	margin-top: 0 !important;
}

/* Structure produit custom (content-product-alvia) */
.alvia-np-product__inner {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.alvia-np-product__badge {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 8px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #7fa82e;
	color: #fff;
	border-radius: 4px;
}

.alvia-np-product__meta {
	margin: 4px 0;
	font-size: 0.85rem;
	color: #666;
}

.alvia-np-product__description {
	margin: 8px 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #555;
}

.alvia-np-product__description p {
	margin: 0 0 0.5em 0;
}

.alvia-np-product__description p:last-child {
	margin-bottom: 0;
}

.alvia-np-product__stock--in-stock {
	color: #0a0;
}

.alvia-np-product__stock--out-of-stock {
	color: #c00;
}

/* Boutons produit : icône panier pour « Ajouter au panier » (remplace la flèche Divi) */
.alvia-np .products .add_to_cart_button,
.alvia-np .products a.add_to_cart_button {
	padding-left: 1em;
	padding-right: 1em;
}
.alvia-np .products .add_to_cart_button::before,
.alvia-np .products a.add_to_cart_button::before {
	content: none !important;
}
.alvia-np .products .add_to_cart_button::after,
.alvia-np .products a.add_to_cart_button::after {
	content: "\f174" !important;
	font-family: "dashicons" !important;
	font-size: 1.1em;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -1px;
	margin: 0 0 0 4px;
}

/* Texte vert foncé au survol */
.alvia-np .products a.button:hover,
.alvia-np .products .button:hover,
.alvia-np-product__btn:hover {
	color: #5a7a20 !important;
}

/* État chargement */
.alvia-np__products-wrap.alvia-np--loading {
	position: relative;
}

.alvia-np__products-wrap.alvia-np--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.7);
	pointer-events: none;
}


/* --------------------------------------------------------------------------
 * Pagination
 * -------------------------------------------------------------------------- */

.alvia-np-pagination {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #eee;
	margin-bottom: 30px;
}

.alvia-np-pagination__info {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
}

.alvia-np-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none!important;
}

.alvia-np-pagination__list li {
	margin: 0px 5px!important;
	border: none!important;
}
.alvia-np-pagination__item a,
.alvia-np-pagination__item span {
	display: inline-block;
	padding: 8px 14px;
	font-size: 0.9rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
}

.alvia-np-pagination__item a:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

.alvia-np-pagination__item .current {
	background: #7fa82e;
	color: #fff;
	border-color: #6d9326;
}