/*
Theme Name: Makao Child
Template: makao
Version: 1.0
Text Domain: makao-child
*/

/* =============================================
   Gallery strip – 3 images sous l'image principale
   ============================================= */

.qodef-woo-product-gallery-strip {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.qodef-woo-product-gallery-strip-item {
	display: block;          /* <a> est inline par défaut, on force le bloc */
	flex: 1 1 0;
	min-width: 0;            /* autorise l'item à rétrécir dans le flex */
	position: relative;      /* ancre le img en absolute */
	overflow: hidden;
}

/* Astuce padding-bottom pour un ratio 1:1 compatible avec les vieux navigateurs
   (Safari < 15, Firefox ESR, etc.) — remplace aspect-ratio: 1/1 qui y était ignoré
   et laissait les items à hauteur 0. */
.qodef-woo-product-gallery-strip-item::before {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.qodef-woo-product-gallery-strip-item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.qodef-woo-product-gallery-strip-item img:hover {
	transform: scale(1.05);
}

/* Placeholder invisible utilisé quand la galerie n'a que 1 ou 2 images :
   il garde la place du 3e item pour que les images se répartissent
   comme s'il y en avait toujours 3. */
.qodef-woo-product-gallery-strip-item--placeholder {
	visibility: hidden;
	pointer-events: none;
}

/* =============================================
   Widget Elementor / shortcode Product List
   (wrapper .qodef-woo-shortcode — DOM différent de la boutique WooCommerce)
   ============================================= */

/* Neutralise l'overlay du .qodef-woo-product-image-inner : on le repasse
   en flux normal pour que la strip galerie (injectée via le hook
   makao_core_action_product_list_item_additional_image_content) s'affiche
   sous l'image au lieu de rester en overlay. */
.qodef-woo-shortcode .qodef-woo-product-image-inner {
	position: static;
	background: transparent;
	opacity: 1;
	padding: 0;
}

.qodef-woo-shortcode .qodef-woo-product-button-holder {
	position: static;
	transform: none;
	top: auto;
	left: auto;
	padding: 0;
	display: block;
}

/* Cache le bouton WooCommerce (ex: "Choix des options", "Ajouter au panier")
   qui s'affiche dans .qodef-woo-product-button-holder. Notre CTA custom
   sera injecté plus bas dans .qodef-woo-product-content. */
.qodef-woo-shortcode .qodef-woo-product-button-holder > .button,
.qodef-woo-shortcode .qodef-woo-product-button-holder > a.add_to_cart_button,
.qodef-woo-shortcode .qodef-woo-product-button-holder > a.added_to_cart,
.qodef-woo-shortcode .qodef-woo-product-button-holder > a.product_type_simple,
.qodef-woo-shortcode .qodef-woo-product-button-holder > a.product_type_variable,
.qodef-woo-shortcode .qodef-woo-product-button-holder > a.product_type_grouped,
.qodef-woo-shortcode .qodef-woo-product-button-holder > a.product_type_external,
.qodef-woo-shortcode .qodef-woo-product-button-holder > .screen-reader-text {
	display: none !important;
}

/* Layout du .qodef-woo-product-content dans le widget :
   titre (left) / prix (right) sur une ligne, CTA en dessous sur toute la largeur.
   Le template utilise .qodef-pl-data-holder-left / -right, pas notre
   .penderie-product-title-price ; on passe donc par grid. */
.qodef-woo-shortcode .qodef-woo-product-content {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 8px;
	row-gap: 4px;
}

.qodef-woo-shortcode .qodef-woo-product-content > .penderie-product-cta {
	grid-column: 1 / -1;
}

/* L'image wrappée par JS dans un <a> doit rester un bloc pour ne pas
   casser le layout ni l'aspect-ratio de .qodef-woo-product-image. */
.qodef-woo-shortcode .penderie-product-image-link {
	display: block;
}

.qodef-woo-shortcode .penderie-product-image-link img {
	display: block;
	width: 100%;
	height: auto;
}

/* =============================================
   Structure .qodef-woo-product-content :
   - conteneur principal en colonne (titre/prix, puis CTA en dessous)
   - sous-conteneur titre+prix en ligne
   ============================================= */

.qodef-woo-product-content {
	display: flex;
	flex-direction: column;
}

.penderie-product-title-price {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

/* =============================================
   CTA "Ajouter au panier" – lien simple vers la fiche produit
   ============================================= */

.penderie-product-cta {
	margin-top: 12px;
}

.penderie-cta-link {
	display: block;
	text-align: left;
	text-decoration: underline;
}