/**
 * Fiche produit WooCommerce (single-product) — CSS scopé.
 *
 * Chargé uniquement sur is_product() (voir inc/enqueue.php). Ne redéfinit
 * aucune couleur : réutilise exclusivement les tokens de assets/css/main.css.
 * Restyle uniquement le rendu du HTML natif WooCommerce (aucune classe ni
 * markup WooCommerce renommé/dupliqué).
 *
 * @package Anreut_Brennholz
 */

/* ==========================================================================
   1. Wrapper / breadcrumb
   ========================================================================== */

.woocommerce-page.single-product .woocommerce-breadcrumb {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	margin-bottom: var(--anreutb-space-md);
}

.woocommerce-page.single-product .woocommerce-breadcrumb a {
	color: var(--color-text-secondary);
}

.woocommerce-page.single-product .woocommerce-breadcrumb a:hover,
.woocommerce-page.single-product .woocommerce-breadcrumb a:focus {
	color: var(--color-accent-dark);
}

/* ==========================================================================
   2. Colonnes galerie / résumé
   ========================================================================== */

/*
 * row-gap volontairement à 0 : l'espacement vertical entre la ligne
 * galerie/résumé et les sections qui suivent (Produktdetails,
 * Produktbeschreibung, Lieferung & Zahlung) est géré uniquement par le
 * margin-top de `.anreutb-product-section` (section 7 ci-dessous) et par
 * le margin-top de `div.summary` en mobile (empilement 1 colonne). Avoir
 * à la fois un `gap` de grille ET un `margin-top` sur chaque section
 * additionnait les deux (bug corrigé : ~128px de vide au lieu de ~64-72px
 * entre chaque section).
 */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	align-items: start;
}

.single-product div.product div.images,
.single-product div.product div.summary {
	float: none;
	width: 100%;
	clear: none;
}

/*
 * WooCommerce core (`.woocommerce div.product div.summary`, spécificité
 * 0-3-2) ajoute `margin-bottom: 2em` par défaut : neutralisé ici pour que
 * l'espacement après la colonne résumé soit entièrement piloté par cette
 * feuille (voir `.anreutb-product-section` en section 7), sans
 * contribution cachée. Sélecteur avec `div.product`/`div.summary`
 * (spécificité 0-4-2) pour rester supérieur au sélecteur core sans
 * `!important`.
 */
.single-product div.product div.summary.entry-summary {
	margin-bottom: 0;
}

/* Mobile/tablette (1 colonne) : écart vertical entre galerie et résumé. */
.single-product div.product div.summary {
	margin-top: var(--anreutb-space-lg);
}

/*
 * Tout ce qui suit la galerie/résumé (Produktdetails, Produktbeschreibung,
 * Lieferung & Zahlung, produits liés, éventuels upsells) doit occuper toute
 * la largeur de la grille du produit, jamais une des deux colonnes
 * galerie/résumé.
 */
.single-product div.product > *:not(.images):not(.summary) {
	grid-column: 1 / -1;
}

/*
 * WooCommerce core (`.woocommerce div.product div.images`) ajoute aussi
 * `margin-bottom: 2em` par défaut : neutralisé pour la même raison que
 * `div.summary` ci-dessus.
 */
.single-product div.product div.images {
	border-radius: calc(var(--anreutb-radius) * 2);
	overflow: hidden;
	margin-bottom: 0;
}

/*
 * Les photos sources n'ont pas toutes le même ratio (portrait/paysage).
 * Pas de ratio carré forcé : la largeur suit toujours la colonne (100%),
 * la hauteur suit le ratio réel de l'image et n'est plafonnée que par
 * max-height (évite qu'une photo très portrait n'étire excessivement la
 * colonne galerie par rapport au résumé). Une image paysage occupe donc
 * toute la largeur sans bande morte ; une image portrait, une fois
 * plafonnée par max-height, est recentrée horizontalement par
 * object-fit: contain (jamais de recadrage/coupe du produit). Le fond de
 * la palette comble les marges résiduelles le cas échéant.
 */
.single-product div.product div.images .woocommerce-product-gallery__image img,
.single-product div.product div.images img.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: contain;
	background-color: var(--color-bg-alt);
}

@media (min-width: 1025px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: var(--anreutb-space-xl);
	}

	/* Desktop : galerie et résumé sont côte à côte, plus d'écart vertical. */
	.single-product div.product div.summary {
		margin-top: 0;
	}
}

/*
 * Badge promo : la couleur par défaut de WooCommerce core (olive/vert,
 * #958e09) détonne avec la palette Anreut. Seule la couleur change (fond
 * clair de la palette + texte accent) ; forme, taille et position restent
 * celles du badge natif WooCommerce (logique promo non modifiée).
 */
.single-product span.onsale {
	background-color: var(--color-bg-alt);
	color: var(--color-accent-dark);
	border: 1px solid var(--color-border);
	box-shadow: 0 1px 3px rgba(33, 27, 22, 0.08);
}

/* ==========================================================================
   3. Catégorie / titre / prix / disponibilité
   ========================================================================== */

.anreutb-product-category {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	margin: 0 0 0.35rem;
}

.single-product .summary .product_title {
	font-size: clamp(1.875rem, 2.4vw + 1rem, 2.125rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text-primary);
	margin: 0 0 var(--anreutb-space-sm);
}

/*
 * Spécificité : WooCommerce core (`woocommerce.css`) cible notamment
 * `.woocommerce div.product p.price` et `.woocommerce div.product .price`
 * (jusqu'à 3 classes + 2 éléments). On ajoute `.entry-summary` (classe
 * réelle du conteneur, déjà présente en HTML) pour rester supérieur sans
 * `!important`. Sélecteur volontairement sans tag `p` pour couvrir aussi le
 * prix affiché dans `.woocommerce-variation-price` (élément `span.price`
 * généré par WooCommerce lors du choix d'une variation).
 */
.single-product .summary.entry-summary .price {
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
}

.single-product .summary.entry-summary .price ins {
	text-decoration: none;
	color: var(--color-text-primary);
}

.single-product .summary.entry-summary .price del {
	color: var(--color-text-secondary);
	font-size: 1.0625rem;
	font-weight: 400;
	margin-right: 0.5rem;
}

.anreutb-price-tax-note {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	margin: 0.25rem 0 0;
}

.single-product .summary .woocommerce-product-details__short-description {
	margin: var(--anreutb-space-sm) 0 0;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.single-product .summary.entry-summary p.stock {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: var(--anreutb-space-sm) 0 0;
	font-weight: 500;
}

.single-product .summary.entry-summary p.stock.out-of-stock {
	color: var(--color-text-primary);
}

/* ==========================================================================
   4. Formulaire de variation (natif WooCommerce, restyle CSS uniquement)
   ========================================================================== */

.single-product .summary table.variations {
	width: 100%;
	margin: var(--anreutb-space-sm) 0 0;
	border: none;
}

.single-product .summary table.variations tbody,
.single-product .summary table.variations tr {
	display: block;
	width: 100%;
}

.single-product .summary table.variations tr + tr {
	margin-top: var(--anreutb-space-sm);
}

.single-product .summary table.variations th.label {
	display: block;
	text-align: left;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	padding: 0 0 0.4rem;
}

.single-product .summary table.variations td.value {
	display: block;
	padding: 0;
}

.single-product .summary table.variations select {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	font-family: var(--anreutb-font-base);
	color: var(--color-text-primary);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--anreutb-radius);
}

.single-product .summary table.variations select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.single-product .summary .reset_variations {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	text-decoration: underline;
}

.single-product .summary .woocommerce-variation-price .price {
	font-size: 1.5rem;
}

/* ==========================================================================
   5. Quantité + CTA sur la même ligne (desktop)
   ========================================================================== */

.single-product .summary form.cart,
.single-product .summary .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--anreutb-space-sm);
	margin-top: var(--anreutb-space-md);
}

.single-product .summary .quantity {
	flex: 0 0 auto;
}

.single-product .summary .quantity .qty {
	height: 54px;
	width: 4.75rem;
	text-align: center;
	font-size: 1rem;
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--anreutb-radius);
	background-color: var(--color-bg);
}

.single-product .summary .quantity .qty:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

/*
 * Spécificité : WooCommerce core (`woocommerce.css`) cible `.woocommerce
 * button.button.alt` (3 classes + 1 élément). Le sélecteur ci-dessous ajoute
 * `.button` en plus de `.single_add_to_cart_button` pour rester supérieur
 * (4 classes) sans recourir à `!important`.
 */
.single-product .summary.entry-summary .single_add_to_cart_button.button {
	flex: 1 1 12rem;
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 1.75rem;
	background-color: var(--color-accent);
	color: #fff;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1;
	border: none;
	border-radius: var(--anreutb-radius);
	cursor: pointer;
	transition: background-color var(--anreutb-transition);
}

.single-product .summary.entry-summary .single_add_to_cart_button.button:hover,
.single-product .summary.entry-summary .single_add_to_cart_button.button:focus {
	background-color: var(--color-accent-dark);
	color: #fff;
}

.single-product .summary.entry-summary .single_add_to_cart_button.button.disabled,
.single-product .summary.entry-summary .single_add_to_cart_button.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ==========================================================================
   6. Réassurance (carte détachée, grille 2x2 desktop) + bloc Lieferung
   ========================================================================== */

.anreutb-reassurance {
	background-color: var(--color-bg-alt);
	border-radius: calc(var(--anreutb-radius) * 2);
	padding: var(--anreutb-space-md);
	margin: var(--anreutb-space-lg) 0 0;
}

.anreutb-reassurance__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--anreutb-space-sm);
}

@media (min-width: 560px) {
	.anreutb-reassurance__list {
		grid-template-columns: 1fr 1fr;
	}
}

.anreutb-reassurance__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.anreutb-reassurance__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--color-accent-dark);
	margin-top: 0.1rem;
}

.anreutb-reassurance__icon svg {
	width: 100%;
	height: 100%;
}

.anreutb-reassurance__text {
	font-size: 0.875rem;
	color: var(--color-text-primary);
	line-height: 1.4;
}

/* ==========================================================================
   7. Sections sous la zone principale (remplacent les tabs par défaut)
   ========================================================================== */

/*
 * Écart entre la zone principale (galerie/résumé) et Produktdetails, puis
 * entre chaque section basse (Produktdetails / Produktbeschreibung /
 * Lieferung & Zahlung). Contrôlé uniquement ici (voir section 2 : le
 * row-gap de la grille est à 0 pour éviter le doublon corrigé). Cible
 * desktop 72–96px, mobile 48–64px (voir media query section 10).
 */
.single-product .anreutb-product-section {
	margin-top: 4.5rem;
	max-width: 100%;
}

.single-product .anreutb-product-section__title {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 var(--anreutb-space-md);
}

.anreutb-detail-list {
	margin: 0;
}

.anreutb-detail-list__row {
	display: grid;
	grid-template-columns: minmax(0, 38%) 1fr;
	gap: var(--anreutb-space-sm);
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--color-border);
}

.anreutb-detail-list__row:first-child {
	border-top: 1px solid var(--color-border);
}

.anreutb-detail-list__label {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.anreutb-detail-list__value {
	font-size: 0.9375rem;
	color: var(--color-text-primary);
	line-height: 1.5;
	margin: 0;
}

.anreutb-product-description__content {
	max-width: 860px;
	color: var(--color-text-primary);
	line-height: 1.7;
	font-size: 0.9375rem;
}

.anreutb-product-description__content p {
	margin: 0 0 var(--anreutb-space-sm);
}

.anreutb-product-description__content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   8. Produits associés par catégorie
   ========================================================================== */

.anreutb-related-by-category {
	margin-top: var(--anreutb-space-xl);
	padding-top: var(--anreutb-space-lg);
	border-top: 1px solid var(--color-border);
}

.anreutb-related-by-category__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 var(--anreutb-space-md);
}

.anreutb-related-by-category__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--anreutb-space-md);
}

@media (min-width: 560px) {
	.anreutb-related-by-category__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1025px) {
	.anreutb-related-by-category__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.anreutb-related-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--anreutb-radius) * 2);
	overflow: hidden;
}

.anreutb-related-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--color-bg);
}

.anreutb-related-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.anreutb-related-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: var(--anreutb-space-sm);
	flex: 1 1 auto;
}

.anreutb-related-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.anreutb-related-card__title a {
	color: var(--color-text-primary);
}

.anreutb-related-card__title a:hover,
.anreutb-related-card__title a:focus {
	color: var(--color-accent-dark);
}

.anreutb-related-card__price {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.anreutb-related-card__price ins {
	text-decoration: none;
	color: var(--color-text-primary);
}

.anreutb-related-card__price del {
	color: var(--color-text-secondary);
	font-weight: 400;
	font-size: 0.8125rem;
	margin-right: 0.35rem;
}

.anreutb-related-card__cta {
	margin-top: auto;
	padding-top: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	text-decoration: underline;
}

.anreutb-related-card__cta:hover,
.anreutb-related-card__cta:focus {
	color: var(--color-accent);
}

/* ==========================================================================
   9. Sticky CTA mobile
   ========================================================================== */

.anreutb-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: none;
	background-color: var(--color-bg);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(33, 27, 22, 0.1);
	padding: 0.6rem var(--anreutb-container-padding);
	transform: translateY(100%);
	transition: transform 220ms ease-in-out;
}

.anreutb-sticky-cta.is-visible {
	transform: translateY(0);
}

@media (max-width: 767px) {
	.anreutb-sticky-cta {
		display: block;
	}
}

.anreutb-sticky-cta__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.anreutb-sticky-cta__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.anreutb-sticky-cta__price {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-text-primary);
}

.anreutb-sticky-cta__button {
	flex: 0 0 auto;
	background-color: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: var(--anreutb-radius);
	padding: 0.65rem 1.1rem;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--anreutb-transition);
}

.anreutb-sticky-cta__button:hover,
.anreutb-sticky-cta__button:focus {
	background-color: var(--color-accent-dark);
}

/* ==========================================================================
   10. Tablette / mobile
   ========================================================================== */

@media (max-width: 1024px) {
	.single-product .summary .product_title {
		font-size: 1.625rem;
	}
}

@media (max-width: 767px) {
	.single-product .summary .quantity {
		flex-basis: 100%;
	}

	.single-product .summary .quantity .qty {
		width: 100%;
	}

	.single-product .summary.entry-summary .single_add_to_cart_button.button {
		flex-basis: 100%;
	}

	.single-product .anreutb-product-section {
		margin-top: 3.25rem;
	}
}