/**
 * Warenkorb (Cart) & Kasse (Checkout) — styles scopés aux WooCommerce Blocks
 * natifs (`is_cart()` / `is_checkout()` uniquement, voir inc/enqueue.php).
 *
 * Réutilise exclusivement les tokens définis dans assets/css/main.css
 * (--color-*, --anreutb-space-*, --anreutb-radius, --anreutb-transition,
 * .btn) : aucune nouvelle couleur hors ces variables.
 *
 * Cible les classes publiques/stables des WooCommerce Blocks
 * (préfixe `wc-block-...`), documentées et utilisées par WooCommerce
 * lui-même dans ses propres feuilles de style — pas de sélecteurs internes
 * fragiles (pas de nth-child sur une structure non garantie, etc.).
 */

/* ==========================================================================
   0. Titre de page (H1)
   ========================================================================== */

/* Constat vérifié en local (curl brut, sans JS) : les pages Warenkorb/Kasse
   passent par le `page.php` générique du thème (ce sont des Pages WordPress
   normales contenant les blocs woocommerce/cart et woocommerce/checkout),
   PAS par un quelconque wrapper `woocommerce_before_main_content`. Le H1
   `.anreutb-page__title` lit déjà `the_title()` : le renommage des titres
   (post_title) suffit donc à afficher "Warenkorb"/"Kasse", aucun hook
   supplémentaire n'est nécessaire. Léger espacement sous le titre pour
   respirer avant le layout Cart/Checkout. */
.anreutb-page__title {
	margin-bottom: var( --anreutb-space-md );
}

/* ==========================================================================
   1. Boutons — extension de .btn (fond accent-dark par défaut)
   ========================================================================== */

.btn.anreutb-btn-strong {
	background-color: var( --color-accent-dark );
}

.btn.anreutb-btn-strong:hover,
.btn.anreutb-btn-strong:focus {
	background-color: var( --color-accent );
}

/* Boutons natifs (React) du Warenkorb/de la Kasse : ils ne portent pas la
   classe .btn (markup non contrôlable), on réplique donc le même style
   visuel directement sur leurs classes natives WooCommerce Blocks. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var( --color-accent-dark ) !important;
	border-color: var( --color-accent-dark ) !important;
	border-radius: var( --anreutb-radius ) !important;
	color: #fff !important;
	font-weight: 600 !important;
	transition: background-color var( --anreutb-transition ), border-color var( --anreutb-transition );
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
	background-color: var( --color-accent ) !important;
	border-color: var( --color-accent ) !important;
	color: #fff !important;
}

/* ==========================================================================
   2. Lignes de totaux custom (Lieferung, Sie sparen) — cohérence visuelle
   avec les lignes natives wc-block-components-totals-item
   ========================================================================== */

.anreutb-shipping-row .wc-block-components-totals-item__value,
.anreutb-savings-row .wc-block-components-totals-item__value {
	font-weight: 600;
}

.anreutb-savings-row .wc-block-components-totals-item__label,
.anreutb-savings-row .wc-block-components-totals-item__value {
	color: var( --color-accent-dark );
}

/* Masque le bloc de livraison natif (calculateur d'adresse + case interactive
   inclus) : la livraison gratuite étant inconditionnelle sur toute
   l'Allemagne (seul pays livré), demander une adresse pour "calculer" un
   montant qui est toujours 0 € n'apporte rien — on affiche à la place notre
   ligne statique au libellé réellement dynamique (anreutb-shipping-row,
   injectée juste après ce même bloc par inc/cart-checkout.php). */
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-checkout-order-summary-shipping-block {
	display: none;
}

/* ==========================================================================
   3. Ligne produit — supprime la description longue (bug identifié),
   conserve uniquement la variation en texte secondaire
   ========================================================================== */

.wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-components-product-metadata__variation-data,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__variation-data {
	color: var( --color-text-secondary );
	font-size: 0.875rem;
}

/* Prix barré / prix promo réel : couleur accent uniquement sur le prix
   promotionnel affiché (jamais sur le prix normal barré). */
.wc-block-components-product-price__regular {
	color: var( --color-text-secondary );
}

.wc-block-components-product-price__value.is-discounted {
	color: var( --color-accent );
	font-weight: 600;
}

/* Miniature carrée ~96px en desktop, cliquable nativement (lien natif vers
   la fiche produit conservé). */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var( --anreutb-radius );
}

/* ==========================================================================
   4. Lien discret "Entfernen" (au lieu d'un bouton rouge agressif)
   ========================================================================== */

/* Spécificité augmentée : la règle native WooCommerce Blocks
   (table.wc-block-cart-items .wc-block-cart-items__row
   .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { color: inherit })
   a une spécificité plus élevée que le simple sélecteur de classe ci-dessus
   dans WooCommerce 11.0.1 (élément réel : <button> icône SVG) — le
   !important est nécessaire ici pour la vaincre de façon fiable. Le SVG
   hérite via `fill: currentColor` car son propre `fill` natif ne suit pas
   `color` sans cette déclaration explicite. */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link svg {
	color: var( --color-text-secondary ) !important;
	fill: currentColor !important;
}

.wc-block-cart-item__remove-link {
	font-weight: 400;
	text-decoration: underline;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus {
	color: var( --color-accent-dark );
}

/* ==========================================================================
   5. Zone tactile quantité (≥44px de hauteur, toutes tailles d'écran)
   ========================================================================== */

.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
	min-height: 44px;
}

/* ==========================================================================
   6. Accordéon "Gutscheincode?" — le panneau natif WooCommerce Blocks
   (wc-block-components-totals-coupon) est DÉJÀ un accordéon replié par
   défaut (composant natif React "Panel", initialOpen=false). On se contente
   ici d'un relookage visuel léger cohérent avec le design system, sans
   reconstruire de logique d'ouverture/fermeture ni de validation coupon.
   ========================================================================== */

.wc-block-components-totals-coupon {
	border-top: 1px solid var( --color-border );
	padding-top: var( --anreutb-space-sm );
}

.wc-block-components-totals-coupon__button {
	color: var( --color-text-secondary );
	font-weight: 600;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button:focus {
	color: var( --color-accent-dark );
}

/* ==========================================================================
   7. Liens secondaires (Weiter einkaufen, Widerrufsbelehrung)
   ========================================================================== */

.anreutb-continue-shopping-link,
.anreutb-checkout-withdrawal-link {
	margin-top: var( --anreutb-space-xs );
	text-align: center;
}

.anreutb-continue-shopping-link a,
.anreutb-checkout-withdrawal-link a {
	color: var( --color-text-secondary );
	text-decoration: underline;
}

.anreutb-continue-shopping-link a:hover,
.anreutb-continue-shopping-link a:focus,
.anreutb-checkout-withdrawal-link a:hover,
.anreutb-checkout-withdrawal-link a:focus {
	color: var( --color-accent-dark );
}

/* ==========================================================================
   8. Réassurance Checkout (sous le CTA natif "Zahlungspflichtig bestellen")
   ========================================================================== */

.anreutb-checkout-reassurance {
	display: flex;
	flex-direction: column;
	gap: var( --anreutb-space-xs );
	list-style: none;
	margin: var( --anreutb-space-sm ) 0 0;
	padding: 0;
	color: var( --color-text-secondary );
	font-size: 0.875rem;
	text-align: center;
}

/* ==========================================================================
   9. Panier vide
   ========================================================================== */

.anreutb-empty-cart-cta {
	margin-top: var( --anreutb-space-md );
	text-align: center;
}

/* ==========================================================================
   10. Layout desktop (> 1024px)
   ========================================================================== */

@media ( min-width: 1025px ) {
	/* Warenkorb : liste produits ~65% / résumé ~35%, résumé NON sticky
	   (spec explicite : le résumé du panier ne doit pas être sticky).
	   Constat vérifié dans le CSS natif de WooCommerce Blocks
	   (assets/client/blocks/cart.css) : `.wp-block-woocommerce-cart-items-block`
	   et `.wp-block-woocommerce-cart-totals-block` (PAS `.wc-block-cart__main`/
	   `.wc-block-cart__sidebar`, qui sont des classes cosmétiques imbriquées
	   sans largeur propre) portent déjà nativement width:65%/35% par défaut —
	   ces règles ne font que le rendre explicite/robuste face à une future
	   évolution du thème par défaut de WooCommerce. Aucun `position: sticky`
	   n'est appliqué ici : le résumé du panier reste dans le flux normal. */
	.wp-block-woocommerce-cart-items-block {
		width: 65% !important;
	}

	.wp-block-woocommerce-cart-totals-block {
		width: 35% !important;
	}

	/* Kasse : formulaire ~60% / Bestellübersicht ~40% (le natif WooCommerce
	   est 65/35 par défaut — même paire de classes que le Warenkorb, avec le
	   suffixe "-fields-block"/"-totals-block" au lieu de "-items-block" —
	   on l'ajuste ici explicitement à 60/40 pour respecter la spec). */
	.wp-block-woocommerce-checkout-fields-block {
		width: 60% !important;
	}

	.wp-block-woocommerce-checkout-totals-block {
		width: 40% !important;
	}

	/* Sticky : WooCommerce Blocks gère NATIVEMENT un `position: sticky`
	   adaptatif sur `.wc-block-checkout__sidebar` (classe `.is-sticky`
	   ajoutée par le bloc lui-même uniquement quand la Bestellübersicht est
	   MOINS haute que le formulaire, sur grand écran — voir le rapport pour
	   le détail du mécanisme constaté dans le bundle JS de WooCommerce). Ce
	   comportement natif est réutilisé tel quel plutôt que réimplémenté :
	   il couvre déjà, et de façon plus fiable qu'un `position: sticky`
	   maison, le cas où le contenu de la Bestellübersicht est plus haut que
	   le formulaire (auquel cas WooCommerce désactive lui-même le sticky).
	   `<main id="anreutb-main">` se referme avant le footer (page.php), donc
	   même dans le cas sticky natif, l'élément ne peut pas chevaucher le
	   footer : `position: sticky` désengage toujours au bas de son bloc
	   englobant, ici `<main>`. Aucune règle supplémentaire n'est donc
	   nécessaire ici — on se contente de ne pas entrer en conflit avec elle. */
}

/* ==========================================================================
   11. Tablet (≤ 1024px) — une colonne, résumé juste après la liste produits
   ========================================================================== */

/* WooCommerce Blocks utilise nativement des Container Queries (pas des
   Media Queries) pour son propre passage à une colonne, avec un seuil de
   700px de LARGEUR DE BLOC (pas de viewport) — trop bas pour satisfaire la
   spec explicite "tablet ≤1024px → une colonne" (entre ~700px et 1024px de
   largeur de fenêtre, le natif afficherait encore 2 colonnes). On force donc
   explicitement 1 colonne dès 1024px de viewport, avec `!important` pour
   primer de façon fiable sur les largeurs en pourcentage posées nativement
   par WooCommerce (même spécificité de sélecteur, ordre de chargement non
   garanti à 100 % selon les évolutions futures du cœur). */
@media ( max-width: 1024px ) {
	.wp-block-woocommerce-cart-items-block,
	.wp-block-woocommerce-cart-totals-block,
	.wp-block-woocommerce-checkout-fields-block,
	.wp-block-woocommerce-checkout-totals-block {
		width: 100% !important;
		padding-inline: 0 !important;
	}

	.wc-block-checkout__sidebar {
		position: static !important;
	}
}

/* ==========================================================================
   12. Mobile (≤ 767px)
   ========================================================================== */

@media ( max-width: 767px ) {
	/* Ligne produit : grille 2 zones (image à gauche, reste empilé à droite). */
	.wc-block-cart-items__row,
	.wc-block-cart-item__wrap {
		display: grid;
		grid-template-columns: 96px 1fr;
		gap: var( --anreutb-space-sm );
		align-items: start;
	}

	.wc-block-cart-item__image {
		grid-row: 1 / span 4;
	}

	/* CTA pleine largeur, bien visible. */
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		width: 100%;
	}

	/* Pas de sticky bottom bar dans cette passe V1 (spec explicite). */
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
		position: static;
	}
}