/* =============================================================
   Queeny Related Products — Styles
   Colonnes 100 % contrôlables via propriétés CSS custom.
   ============================================================= */

/* ---- Wrapper de grille ---- */
.queeny-rp-grid {
	display: grid;
	gap: var(--queeny-rp-gap, 20px);
}

/* Mode : colonnes égales (défaut) */
.queeny-rp-grid[data-col-mode="equal"],
.queeny-rp-grid:not([data-col-mode]) {
	grid-template-columns: repeat(var(--queeny-rp-cols, 4), 1fr);
}

/* Mode : largeur fixe par colonne (px ou %) */
.queeny-rp-grid[data-col-mode="fixed"] {
	grid-template-columns: repeat(var(--queeny-rp-cols, 4), var(--queeny-rp-col-w, 220px));
	/* Scroll horizontal si les colonnes débordent au lieu de casser la mise en page */
	overflow-x: auto;
}

/* Mode : auto-remplissage — les colonnes s'organisent seules selon la largeur minimale */
.queeny-rp-grid[data-col-mode="autofill"] {
	grid-template-columns: repeat(auto-fill, minmax(var(--queeny-rp-col-w, 200px), 1fr));
}

/* ---- Titre de section ---- */
.queeny-rp-section-title {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}

/* ---- Message vide ---- */
.queeny-rp-no-products {
	color: #999;
	font-style: italic;
	text-align: center;
	padding: 1.5rem 0;
}

/* ---- Alignement texte ---- */
.queeny-content-align-left   .queeny-product-content { text-align: left; }
.queeny-content-align-center .queeny-product-content { text-align: center; }
.queeny-content-align-right  .queeny-product-content { text-align: right; }

.queeny-content-align-left   .queeny-product-footer { justify-content: flex-start; }
.queeny-content-align-center .queeny-product-footer { justify-content: center; }
.queeny-content-align-right  .queeny-product-footer { justify-content: flex-end; }

/* ---- Hover carte — réutilise les classes du widget principal ---- */
/* Les classes .queeny-card-hover-* et .queeny-img-hover-* sont déjà
   définies dans widget-product-grid-luxury.css et s'appliquent
   automatiquement ici car les cartes partagent les mêmes classes. */

/* ---- Responsive : Elementor génère les CSS custom properties
   aux bons breakpoints via les selectors des contrôles responsive.
   Les grilles "equal" et "fixed" s'adaptent donc automatiquement.
   Ci-dessous : fallbacks si Elementor ne surcharge pas les variables. ---- */

@media (max-width: 1024px) {
	.queeny-rp-grid[data-col-mode="equal"],
	.queeny-rp-grid:not([data-col-mode]) {
		grid-template-columns: repeat(
			var(--queeny-rp-cols, 2),
			1fr
		);
	}
	.queeny-rp-grid[data-col-mode="fixed"] {
		grid-template-columns: repeat(
			var(--queeny-rp-cols, 2),
			var(--queeny-rp-col-w, 180px)
		);
	}
}

@media (max-width: 767px) {
	.queeny-rp-grid[data-col-mode="equal"],
	.queeny-rp-grid:not([data-col-mode]) {
		grid-template-columns: repeat(
			var(--queeny-rp-cols, 1),
			1fr
		);
	}
	.queeny-rp-grid[data-col-mode="fixed"] {
		grid-template-columns: repeat(
			var(--queeny-rp-cols, 1),
			var(--queeny-rp-col-w, 100%)
		);
	}
}