/**
 * Onyx Admin Customizer — CSS frontend.
 *
 * Uniformise l'affichage des images produits en cadre carré 1:1
 * (object-fit: contain, centré, jamais coupé/déformé) :
 *   - boucles produits WooCommerce (shop, catégorie, tag, recherche,
 *     produits liés, shortcodes) ;
 *   - miniatures de la galerie sur la fiche produit (PAS la grande image).
 *
 * Portée volontairement limitée aux images de produits : rien d'autre
 * sur le site n'est affecté. Réversible en désactivant le plugin.
 * Chargé uniquement sur le frontend (jamais dans wp-admin).
 */

/* ==========================================================================
   1. Boucles produits (grille d'archive & loops WoodMart)
   Cible la classe d'image produit WoodMart DIRECTEMENT (.wd-product-img-link),
   indépendamment du layout : grille WooCommerce par défaut (ul.products
   li.product) OU widget Elementor WoodMart d'archive (div.products div.product,
   wd_archive_products / wd_products). Le lien image devient un cadre carré
   uniforme ; l'image tient dedans (object-fit: contain, jamais coupée).
   Ces classes n'existent que sur les cartes produit → rien d'autre n'est touché.
   ========================================================================== */

.wd-product-img-link,
a.product-image-link,
.product-image-link.wd-product-img-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	background-color: #ffffff;
	position: relative;
}

/* Image <img> de la carte : contenue, centrée, non déformée, non coupée.
   Surcharge aussi le style inline max-width:300px sans contrainte de hauteur. */
.wd-product-img-link img,
a.product-image-link img,
.wd-product-img-link .attachment-full,
.wd-product-img-link .attachment-woocommerce_thumbnail,
.wd-product-img-link img.wp-post-image {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	min-height: 0 !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	position: static !important;
}

/* Galerie de survol WoodMart (images en background via data-image-url). */
.wd-product-img-link .wd-product-grid-slider,
.wd-product-img-link .wd-product-grid-slider .wd-product-grid-slide {
	height: 100% !important;
	padding-top: 0 !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}

/* Sécurité : si le slider contient des <img> plutôt que des backgrounds. */
.wd-product-img-link .wd-product-grid-slide img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

/* ==========================================================================
   2. Miniatures de la galerie produit (fiche produit)
   UNIQUEMENT les vignettes — la grande image principale n'est PAS touchée.
   ========================================================================== */

.single-product .wd-gallery-thumb .wd-gallery-item,
.single-product .flex-control-thumbs li,
.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
}

.single-product .wd-gallery-thumb .wd-gallery-item img,
.single-product .flex-control-thumbs li img,
.single-product .wd-gallery-thumb .wd-carousel-item img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	margin: 0 auto !important;
}

/* ==========================================================================
   3. Responsive : le cadre 1:1 se conserve nativement (aspect-ratio).
   Rien à surcharger sur mobile — la grille WoodMart gère les colonnes.
   ========================================================================== */

/* ==========================================================================
   4. Page produit : bloc de confiance + correction du libellé du bouton
   ========================================================================== */

/* « Voeg Toe Aan Winkelwagen » -> « Voeg toe aan winkelwagen » (WoodMart met
   text-transform: capitalize sur le bouton ; on revient en casse normale). */
.single-product .single_add_to_cart_button,
.single-product .cart .single_add_to_cart_button {
	text-transform: none !important;
}

/* Bloc de confiance compact sous le bouton d'ajout au panier. */
.onyx-trust {
	margin: 16px 0 4px;
	padding: 14px 16px;
	background: #f7f3ec;
	border: 1px solid #ece3d2;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.45;
}

.onyx-trust-delivery {
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: 1px solid #ece3d2;
	font-weight: 600;
	color: #1b2430;
	display: flex;
	align-items: center;
	gap: 8px;
}

.onyx-trust-delivery::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ea24a;
	box-shadow: 0 0 0 3px rgba(46, 162, 74, 0.18);
}

.onyx-trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.onyx-trust-list li {
	position: relative;
	margin: 0;
	padding-left: 24px;
	color: #47505f;
}

.onyx-trust-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #d4a054;
	font-weight: 700;
}

.onyx-trust-list a {
	color: #1b2430;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.onyx-trust-list a:hover,
.onyx-trust-list a:focus {
	color: #b8863d;
}

/* Section « Ook interessant voor jouw huisdier » (produits liés, même catégorie).
   Rendue par le plugin sous le contenu produit (le layout builder ne l'affiche
   pas nativement). Espacement compact ; la grille produit hérite du style WoodMart
   et du cadre image 1:1 défini plus haut. */
.onyx-related {
	clear: both;
	margin-top: 32px;
}

.onyx-related .related.products,
.onyx-related .related.products.wd-products {
	margin-top: 0;
}

.onyx-related .related.products > h2,
.onyx-related .related.products > .title,
.onyx-related .wd-products-element-title {
	margin-bottom: 18px;
	font-size: 22px;
}

/* ==========================================================================
   5. Barre « sticky add to cart » — MOBILE UNIQUEMENT
   La barre native WoodMart (.wd-sticky-btn) ne propose pas de mode
   « mobile only » : activer l'option l'affiche aussi sur desktop/tablette.
   On force donc le mode mobile-only en masquant la barre à partir de 769px
   (borne mobile WoodMart = 768.98px) et en annulant le padding-bottom que
   WoodMart ajoute au body sur desktop. Aucun impact desktop ; sur mobile la
   barre WoodMart s'affiche normalement (prix + bouton, « Kies opties » pour
   les produits variables — pas d'ajout forcé sans variante).
   ========================================================================== */
@media (min-width: 769px) {
	.wd-sticky-btn {
		display: none !important;
	}

	body.wd-sticky-btn-on {
		padding-bottom: 0 !important;
	}
}

/* ==========================================================================
   6. « Vaak samen gekocht » (WoodMart Frequently Bought Together)
   Le titre WoodMart force la casse « capitalize » (Vaak Samen Gekocht) ; on
   revient en casse de phrase néerlandaise correcte (Vaak samen gekocht).
   ========================================================================== */
.wd-fbt .wd-el-title.title,
.wd-fbt .wd-el-title {
	text-transform: none !important;
}

/* ==========================================================================
   7. Galerie produit : image secondaire au format anormal (ex. 72×496, bande
   étroite et haute) étirée à la largeur de colonne -> hauteur de galerie
   énorme (~2900px) et grand espace vide sous la galerie. On plafonne la
   hauteur des images de la grande galerie ; object-fit conserve le ratio.
   Les images normales (≤500px de haut dans cette colonne) ne sont pas touchées.
   ========================================================================== */
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
	max-height: 500px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
	margin-left: auto !important;
	margin-right: auto !important;
}