/* ==========================================================================
   Éditions ATP — Carte Produit WooCommerce (content-product.php)
   Territoire : WOOCOMMERCE / PRODUCT-CARD
   ========================================================================== */

/* ── 1. Variables de Carte Produit ── */
:root {
	--atp-card-radius      : 10px;
	--atp-card-shadow      : 0 2px 12px rgba(0, 0, 0, .08);
	--atp-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, .15);
	--atp-card-border      : #e5e7eb;
	--atp-card-text        : #1d2327;
	--atp-card-muted       : #6b7280;
	--atp-card-orange      : var(--atp-accent-text, #b45309);
	--atp-card-btn-bg      : #1d2327;
	--atp-card-btn-hover   : #f2b300;
}

/* ── 2. Grille Universelle des Produits (4 Colonnes Harmonieuses sur PC) ── */
.woocommerce ul.products,
.woocommerce-page ul.products,
.atp-home-books-section ul.products,
.home ul.products,
.front-page ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px !important;
	margin: 0 0 40px 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

ul.products::before,
ul.products::after {
	display: none !important;
}

/* ── 3. Conteneur li.product (Cellule de Grille Neutre & Élastique) ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	float: none !important;
	clear: none !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* ── 4. Carte Unique du Livre (.atp-book-card avec Equal Height) ── */
.atp-book-card {
	background: #ffffff !important;
	border: 1px solid var(--atp-card-border) !important;
	border-radius: var(--atp-card-radius) !important;
	box-shadow: var(--atp-card-shadow) !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
	transition: box-shadow .22s ease, transform .22s ease !important;
}

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

/* ── 3. Zone Image — Ratio Portrait 2:3 ── */
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link,
.atp-book-card__thumb-link {
	display: block !important;
	position: relative !important;
}

ul.products li.product a img,
.atp-book-card__thumb-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 2 / 3 !important;
	object-fit: contain !important;
	background: #f5f5f5 !important;
	display: block !important;
	margin: 0 !important;
	transition: filter .28s ease !important;
	border-radius: 0 !important;
	max-width: 100% !important;
}

ul.products li.product:hover a img,
.atp-book-card:hover .atp-book-card__thumb-img {
	filter: brightness(1.07) saturate(1.04) !important;
}

.atp-book-card__thumb-placeholder {
	width: 100%;
	aspect-ratio: 2 / 3;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
}

/* ── 4. Badges de Format ── */
.atp-book-card__badges-overlay,
.atp-loop-badges {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 10 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 6px !important;
	pointer-events: none !important;
	line-height: normal !important;
}

.atp-loop-badge {
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 12px !important;
	border-radius: 50px !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.atp-loop-badge--papier {
	background-color: #dcfce7 !important;
	color: #15803d !important;
	border: 1px solid #bbf7d0 !important;
}

.atp-loop-badge--pdf {
	background-color: #dbeafe !important;
	color: #1e40af !important;
	border: 1px solid #bfdbfe !important;
}

.atp-loop-badge--chapitre {
	background-color: #fef3c7 !important;
	color: #b45309 !important;
	border: 1px solid #fde68a !important;
}

/* Badge Soldes */
ul.products li.product .onsale {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.5 !important;
	padding: 3px 9px !important;
	border-radius: 20px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .15px !important;
	background: #ef4444 !important;
	color: #fff !important;
	text-transform: none !important;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .22) !important;
	z-index: 10 !important;
}

/* ── 5. Contenu Texte & Typographie ── */
.atp-book-card__content {
	padding: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	justify-content: space-between !important;
	text-align: left !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.atp-book-card__meta-info {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}

.atp-book-card__footer {
	margin-top: auto !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	padding-top: 8px !important;
}

/* Titre */
ul.products li.product .woocommerce-loop-product__title,
.atp-book-card__title {
	color: #1d2327 !important;
	padding: 0 !important;
	margin: 0 0 6px 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
}

.atp-book-card__title a {
	color: inherit;
	text-decoration: none;
}

.atp-book-card__title a:hover {
	color: var(--atp-yellow, #f59e0b);
}

/* Auteur(s) */
ul.products li.product .atp-loop-auteurs,
.atp-book-card__authors {
	display: block !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #6b7280 !important;
	margin: 8px 0 !important;
	padding: 7px 0 !important;
	border-top: 1px solid #e5e7eb !important;
	border-bottom: 1px solid #e5e7eb !important;
	text-align: left !important;
}

ul.products li.product .atp-loop-auteurs a,
.woocommerce ul.products li.product .atp-loop-auteurs a,
.atp-book-card__authors a {
	display: inline !important;
	color: #6b7280 !important;
	text-decoration: none !important;
	font-size: 12px !important;
	transition: color .15s !important;
}

ul.products li.product .atp-loop-auteurs a:hover,
.woocommerce ul.products li.product .atp-loop-auteurs a:hover,
.atp-book-card__authors a:hover {
	color: #1d2327 !important;
	text-decoration: underline !important;
}

/* Prix */
ul.products li.product .price,
.atp-book-card__price {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--atp-card-orange, #b45309) !important;
	display: block !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	text-align: left !important;
}

ul.products li.product .price del,
.atp-book-card__price del {
	font-size: 11.5px !important;
	font-weight: 400 !important;
	opacity: .55 !important;
	margin-right: 4px !important;
}

ul.products li.product .price ins,
.atp-book-card__price ins {
	text-decoration: none !important;
	font-weight: 700 !important;
}

/* Note */
ul.products li.product .star-rating {
	font-size: .7em !important;
	margin: 0 0 6px 0 !important;
}

/* ── 6. Bouton d'Action ── */
ul.products li.product .button,
.atp-btn-view {
	display: block !important;
	width: 100% !important;
	margin: auto 0 0 0 !important;
	padding: 10px 20px !important;
	border-radius: 50px !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	text-align: center !important;
	background: #f2b300 !important;
	color: #1d2327 !important;
	border: none !important;
	text-decoration: none !important;
	transition: background .18s, color .18s !important;
	box-sizing: border-box !important;
	font-size: 13.5px !important;
	cursor: pointer;
}

ul.products li.product .button:hover,
ul.products li.product .button:focus-visible,
.atp-btn-view:hover {
	background: #1d2327 !important;
	color: #f2b300 !important;
	text-decoration: none !important;
}

ul.products li.product .button.disabled,
ul.products li.product .button:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* ── 7. Responsive Grille : Tablette (769px - 1023px) ── */
@media (min-width: 769px) and (max-width: 1023px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.atp-home-books-section ul.products,
	.home ul.products,
	.front-page ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px !important;
	}
}

/* ── 8. Responsive Grille : Mobile (<= 768px) ── */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.atp-home-books-section ul.products,
	.home ul.products,
	.front-page ul.products,
	ul.products {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		margin-bottom: 28px !important;
	}

	ul.products li.product {
		width: 100% !important;
		max-width: 320px !important;
		margin: 0 auto 28px auto !important;
	}

	ul.products li.product .woocommerce-loop-product__title,
	.atp-book-card__title {
		font-size: 16px !important;
		font-weight: 700 !important;
		line-height: 1.35 !important;
	}

	ul.products li.product .button,
	.atp-btn-view {
		font-size: 14px !important;
		padding: 11px 20px !important;
		background-color: var(--e-global-color-accent, var(--atp-yellow, #f59e0b)) !important;
		color: #000000 !important;
		font-weight: 700 !important;
	}
}