/* =========================================================
   FableYou Theme — woocommerce.css
   Boutique, fiche produit, panier/paiement (mode "Shopify-style")
   Utilise --fy-product-accent quand products.theme_config est défini
   pour ce produit (voir inc/product-theme.php), avec repli sur la
   couleur primaire globale sinon.
   ========================================================= */

.fy-main--shop {
	max-width: var(--fy-max-width);
	margin: 0 auto;
	padding: 40px 24px 80px;
}

/* --- En-tête boutique : fil d'Ariane, titre, barre de tri --- */
.woocommerce-breadcrumb {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fy-text-tertiary);
	margin-bottom: 12px;
}
.woocommerce-breadcrumb a {
	color: var(--fy-text-tertiary);
}
.woocommerce-breadcrumb a:hover {
	color: var(--fy-primary);
}

.woocommerce-products-header {
	margin-bottom: 32px;
}
.woocommerce-products-header__title.page-title {
	position: relative;
	display: inline-block;
	font-size: 2.4rem;
	padding-bottom: 14px;
}
.woocommerce-products-header__title.page-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--fy-action), var(--fy-action-hover));
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
	display: inline-block;
	margin: 0 0 24px;
}
.woocommerce-result-count {
	color: var(--fy-text-tertiary);
	font-size: 0.9rem;
}
.woocommerce-ordering {
	float: right;
}
.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background: var(--fy-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230284c7'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1.5px solid var(--fy-border-light);
	border-radius: 50px;
	padding: 8px 36px 8px 18px;
	font-family: var(--fy-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fy-text-body);
	cursor: pointer;
}
.woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--fy-accent);
}

/* --- Grille boutique / catégories ---
   flex plutôt que grid : avec peu de produits, les cartes gardent une
   largeur naturelle au lieu de s'étirer ou de laisser une grille fantôme. */
ul.products {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}
ul.products li.product {
	flex: 1 1 260px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	background: var(--fy-surface);
	border: 1px solid var(--fy-border-light);
	border-radius: 14px;
	overflow: hidden;
	padding: 0;
	box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}
ul.products li.product::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--fy-product-accent, var(--fy-primary)), var(--fy-product-accent-hover, var(--fy-accent)));
	z-index: 1;
}
ul.products li.product:hover {
	box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
}
/* Sélecteurs alignés sur la spécificité des styles par défaut de WooCommerce
   (.woocommerce ul.products li.product ...), sans quoi ce dernier gagne le
   conflit CSS malgré un chargement après le nôtre. */
.woocommerce ul.products li.product a img,
ul.products li.product img {
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
	margin: 0;
	background: linear-gradient(135deg, var(--fy-surface-blue-light), #bae6fd);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--fy-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	padding: 0;
	margin: 18px 20px 8px !important;
}
ul.products li.product .price {
	display: block;
	margin: 0 20px 20px;
	color: var(--fy-product-accent, var(--fy-primary));
	font-weight: 700;
	font-size: 1.05rem;
}
/* Le bouton "Commander" remplit tout le bas de la carte (bords compris) */
ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
ul.products li.product .button {
	margin: 0 !important;
	width: 100%;
	display: block;
	text-align: center;
	background: var(--fy-action);
	color: #111111;
	font-weight: 700;
	border-radius: 0;
	padding: 16px 20px;
	margin-top: auto !important;
}
ul.products li.product .button:hover {
	background: var(--fy-action-hover);
}

/* WooCommerce force width:48% + float:left sur li.product en dessous de
   768px (woocommerce-smallscreen.css, sélecteur `ul.products[class*=columns-]
   li.product` plus spécifique que le nôtre) pour proposer une grille 2
   colonnes aux thèmes qui ne stylent pas la boutique eux-mêmes. Le float est
   sans effet ici (ignoré sur un enfant flex), mais `width:48%` reste consulté
   par la mise en page flex tant qu'on ne le neutralise pas explicitement —
   d'où les cartes qui ne prenaient pas toute la largeur en mobile. */
@media (max-width: 768px) {
	ul.products {
		flex-direction: column;
	}
	ul.products li.product,
	.woocommerce ul.products[class*="columns-"] li.product {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
		margin: 0 !important;
	}
}

/* --- Fiche produit ---
   flex plutôt que grid : la galerie et le résumé se partagent la largeur,
   mais les autres enfants directs de div.product (onglets avis, div .clear)
   gardent naturellement toute la largeur au lieu d'être écrasés dans une
   colonne de grille de 50%. */
.single-product div.product {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}
.single-product div.product > .woocommerce-product-gallery {
	flex: 1 1 420px;
	max-width: 560px;
	border-radius: 12px;
	overflow: hidden;
}
.single-product div.product > .summary {
	flex: 1 1 380px;
	min-width: 0;
}
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .clear {
	flex-basis: 100%;
	width: 100%;
}

.single-product div.product .product_title {
	font-size: 2rem;
	margin-bottom: 8px;
}

.single-product div.product p.price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--fy-product-accent, var(--fy-primary));
}

.single-product div.product .stock {
	color: var(--fy-success);
	font-weight: 600;
}

/* Achat toujours limité à 1 exemplaire (voir aussi le filtre PHP
   woocommerce_quantity_input_args dans inc/woocommerce-checkout.php,
   qui verrouille min=max=1 côté serveur) */
.single-product div.product .quantity {
	display: none !important;
}

/* Le bouton WooCommerce natif porte la classe .alt, stylée par défaut par
   WooCommerce en violet (#7f54b3 / #7249a4 au survol, via --wc-primary) avec
   une spécificité CSS supérieure à la nôtre spécifiquement sur les états
   :hover/:focus/:active (le pseudo-classe compte comme une classe en plus
   dans le calcul de spécificité) — d'où le bouton qui redevenait violet au
   survol malgré un fond jaune/bleu correct au repos. On neutralise ça avec
   des règles dédiées en !important sur chaque état. */
.single-product div.product .single_add_to_cart_button,
.single-product div.product button.button {
	display: block;
	width: 100%;
	background: var(--fy-product-accent, var(--fy-action)) !important;
	color: #111111 !important;
	font-weight: 700 !important;
	border: none;
	border-radius: 50px;
	padding: 20px 36px;
	font-size: 1.05rem;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s ease, filter 0.15s ease;
}
.single-product div.product .single_add_to_cart_button:hover,
.single-product div.product .single_add_to_cart_button:focus,
.single-product div.product .single_add_to_cart_button:active {
	background: var(--fy-product-accent-hover, var(--fy-action-hover)) !important;
	color: #111111 !important;
}

/* --- Badge produit + bannière hero (identité visuelle par produit) --- */
.fy-product-hero {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
}
.fy-product-hero img {
	width: 100%;
	object-fit: cover;
}

.fy-product-badge {
	display: inline-block;
	background: var(--fy-product-accent-soft, var(--fy-surface-blue-light));
	color: var(--fy-product-accent, var(--fy-primary));
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 14px;
	border-radius: 50px;
	margin-bottom: 12px;
}

/* --- Panier (le panier n'est en principe jamais affiché car l'ajout
   redirige direct au paiement, cf. inc/woocommerce-checkout.php, mais on
   garde un style correct au cas où la page reste accessible) --- */
.woocommerce-cart table.shop_table {
	background: var(--fy-surface-subtle);
	border-radius: 12px;
	padding: 20px;
}

/* --- Page de paiement ("Validation de la commande") ---
   Coordonnées à gauche, récapitulatif de commande + paiement à droite
   (collant), champs agrandis et espacés pour un remplissage confortable. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 24px 48px;
	align-items: start;
}
/* Éléments techniques WooCommerce (login/coupon repliables, boutons
   Apple/Google Pay, attribution de commande) : toujours pleine largeur,
   ne doivent jamais entrer dans la grille à 2 colonnes. */
.woocommerce-checkout form.checkout > .woocommerce-form-login-toggle,
.woocommerce-checkout form.checkout > .woocommerce-form-login,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout > .checkout_coupon,
.woocommerce-checkout form.checkout > [id^="ppc-button-"] {
	grid-column: 1 / -1;
}

/* Sans grid-row explicite, #customer_details ne s'auto-plaçait que sur la
   ligne 1 de la grille — celle-ci s'étirait alors à la hauteur du formulaire
   de facturation (très haut), poussant les lignes 2 et 3 de la colonne 2
   (aperçu de commande + #order_review, qui contient aussi le bloc paiement)
   tout en bas de la page, sous le formulaire, au lieu de rester à côté.
   On fait donc s'étendre la colonne 1 sur les 3 lignes existantes. */
.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 3;
}
.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-bottom: 0;
}
.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 3;
	position: sticky;
	top: 90px;
	align-self: start;
	background: var(--fy-surface-subtle);
	border-radius: 14px;
	padding: 24px;
}

/* Aperçu de commande en lecture seule (image produit + personnages/décors
   sélectionnés) — inséré par inc/checkout-order-preview.php entre le titre
   "Votre commande" (ligne 1) et le tableau récapitulatif (ligne 3 ci-dessus,
   décalé pour lui faire de la place). */
.woocommerce-checkout .fy-order-preview {
	grid-column: 2;
	grid-row: 2;
	background: var(--fy-surface-subtle);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 16px;
}
.fy-order-preview__product {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--fy-border-light);
}
.fy-order-preview__product img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
}
.fy-order-preview__product-name {
	font-family: var(--fy-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
}
.fy-order-preview__label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fy-text-tertiary);
	margin: 0 0 10px;
}
.fy-order-preview__section + .fy-order-preview__section {
	margin-top: 16px;
}
.fy-order-preview__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 10px;
}
.fy-order-preview__card {
	text-align: center;
}
.fy-order-preview__card img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--fy-border-light);
}
.fy-order-preview__card--decor img {
	aspect-ratio: 16/9;
}
.fy-order-preview__card span {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--fy-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: block;
	}
	.woocommerce-checkout #order_review {
		position: static;
		margin-top: 32px;
	}
}

/* Formulaires stackés en une seule colonne (plus lisible que le
   traditionnel 48%/48% de WooCommerce, surtout dans une colonne resserrée) */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout h3 {
	font-size: 1.3rem;
	margin-bottom: 16px;
}

.woocommerce-checkout .form-row {
	margin: 0 0 20px !important;
	padding: 0 !important;
}
.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--fy-text-secondary);
	line-height: 1.3 !important;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	padding: 14px 16px !important;
	height: auto !important;
	font-family: var(--fy-font-body);
	font-size: 1rem !important;
	border: 1.5px solid var(--fy-border-light) !important;
	border-radius: 10px !important;
	background-color: var(--fy-surface) !important;
	transition: border-color 0.15s ease;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--fy-accent) !important;
	outline: none;
}
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto !important;
	padding: 10px 16px !important;
	border: 1.5px solid var(--fy-border-light) !important;
	border-radius: 10px !important;
}

/* Récapitulatif de commande */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--fy-border-light);
	text-align: left;
}
.woocommerce-checkout-review-order-table thead th {
	font-family: var(--fy-font-heading);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fy-text-tertiary);
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--fy-product-accent, var(--fy-primary));
}

/* Boutons Apple Pay / Google Pay (Express Checkout de WooCommerce Payments)
   — déplacés juste après le total par le JS inline de
   inc/woocommerce-checkout.php (fableyou_theme_reposition_express_checkout_buttons).
   Le bouton lui-même est rendu par Stripe dans un iframe (pas stylable
   directement), mais Stripe empile ses boutons verticalement dès que le
   conteneur qui l'accueille est trop étroit pour les mettre côte à côte —
   d'où la largeur max ci-dessous, qui force l'empilement demandé sans
   toucher au fonctionnement du bouton. */
.woocommerce-checkout #order_review .wcpay-express-checkout-wrapper {
	max-width: 280px;
	margin: 4px auto 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--fy-border-light);
}

/* Moyens de paiement */
.woocommerce-checkout-payment {
	margin-top: 8px;
}
ul.payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
ul.payment_methods li.wc_payment_method {
	background: var(--fy-surface);
	border: 1.5px solid var(--fy-border-light);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 10px;
}
ul.payment_methods li.wc_payment_method label {
	font-weight: 600;
	margin-left: 8px;
}
ul.payment_methods li.wc_payment_method input.input-radio {
	width: 18px;
	height: 18px;
	accent-color: var(--fy-primary);
}
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 18px !important;
	font-size: 1.1rem !important;
	border-radius: 50px !important;
	margin-top: 12px;
	background: var(--fy-action) !important;
	color: #111111 !important;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus,
.woocommerce-checkout #place_order:active {
	background: var(--fy-action-hover) !important;
	color: #111111 !important;
}

/* Tous les boutons WooCommerce, y compris la variante .alt (violette par
   défaut — voir le commentaire détaillé plus haut sur la fiche produit) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--fy-action) !important;
	color: #111111 !important;
	font-weight: 700;
	border-radius: 50px;
	border: none;
	padding: 10px 24px;
}
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce #respond input#submit:active,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce a.button:active,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce button.button:active,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce input.button:active {
	background: var(--fy-action-hover) !important;
	color: #111111 !important;
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--fy-primary);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--fy-primary);
}
.woocommerce-error {
	border-top-color: var(--fy-destructive);
}
.woocommerce-error::before {
	color: var(--fy-destructive);
}

/* --- Mon compte --- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}
.woocommerce-MyAccount-navigation a {
	font-weight: 600;
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--fy-primary);
}