/**
 * assets/css/commerce.css
 * ----------------------------------------------------------------------
 * 1) [idh_boutique] — grille produits + filtres + pagination (même gabarit
 *    que .idh-journal / pages.css, adapté aux produits WooCommerce).
 * 2) Habillage charte des pages natives WooCommerce [woocommerce_cart] et
 *    [woocommerce_checkout] — AUCUNE règle ici ne touche à la logique
 *    (paiement, livraison, coupons) : uniquement couleurs, polices,
 *    espacements, boutons, aux tokens --idh-*.
 * ----------------------------------------------------------------------
 */

/* ==========================================================================
   0 · Widgets Shortcode dans un conteneur Elementor flex (Archive Boutique)
   --------------------------------------------------------------------------
   Le modèle Elementor Archive empile ses widgets Shortcode ([idh_boutique],
   [idh_faq]…) dans un conteneur flex (.e-con-inner). Un item flex ne
   grandit pas tout seul pour un contenu dont la hauteur change APRÈS le
   premier rendu — ici via boutique.js (filtres/pagination côté client) —
   son overflow reste visible, mais le widget SUIVANT se positionne d'après
   la hauteur flex calculée, pas la hauteur réelle : chevauchement constaté
   entre [idh_boutique] et [idh_faq]. flex-shrink:0 + min-height:auto force
   l'item à s'ajuster à son contenu réel, comme un bloc normal.
   !important nécessaire : frontend.min.css pose « .elementor-element {
   flex-shrink: var(--flex-shrink); } » (même spécificité 0-1-0 que notre
   règle, chargé après elle → gagne par ordre de cascade) — cette variable
   vaut « initial » par défaut, donc flex-shrink retombe sur 1 (la valeur
   par défaut de la propriété), écrasant silencieusement notre 0.

   Insuffisant seul, cause réelle confirmée en direct (DevTools) : le
   conteneur Elementor (.e-con-inner) a flex-direction:column ET
   flex-wrap:wrap. Cette combinaison précise fait que Chrome fige la
   hauteur de chaque item AVANT que le JS du widget (boutique.js, qui
   filtre/paginate) ait fini de dimensionner son contenu réel — l'item
   reste trop court, son overflow reste visible mais chevauche le widget
   suivant. Forcer flex-wrap:nowrap sur ce conteneur précis supprime le
   phénomène (vérifié : l'écart passe de -284px à +120px). Portée limitée
   via :has() au SEUL conteneur qui héberge [idh_boutique], pour ne pas
   toucher aux autres mises en page en colonnes de multi-lignes du site. */
.e-con-inner:has(.idh-boutique) {
	flex-wrap: nowrap !important;
}
.elementor-widget-shortcode {
	flex-shrink: 0 !important;
	min-height: auto !important;
}

/* ==========================================================================
   1 · [idh_boutique] — grille de produits + filtres + pagination
   Filtrage / pagination : assets/js/boutique.js (IIFE « .idh-boutique »).
   ========================================================================== */
.idh-boutique {
	padding-inline: var(--idh-cadre, var(--rail));
	/* !important sur les deux : woocommerce/assets/css/twenty-twenty-one.css
	   pose « .woocommerce section { padding-top:2rem; padding-bottom:0 } » —
	   sur une archive catégorie/boutique, <body> porte la classe woocommerce,
	   donc cette règle (0,1,1) bat notre simple classe (0,1,0) et écrasait
	   les deux valeurs (constaté : padding-top figé à 32px = 2rem, padding-
	   bottom à 0), d'où le chevauchement avec la section suivante
	   ([idh_faq]) sur mobile. */
	padding-top: clamp(40px, 6vw, 68px) !important;
	padding-bottom: clamp(56px, 9vh, 120px) !important;
}
.idh-boutique__intro,
.idh-boutique__barre,
.idh-boutique__grille,
.idh-boutique__pagination,
.idh-boutique__vide { max-width: 1280px; margin-inline: auto; }

.idh-boutique__intro { margin-bottom: clamp(22px, 3vw, 34px); }
.idh-boutique__intro h2 { color: var(--idh-title); margin: 0; }
.idh-boutique__intro .section-kicker { margin-bottom: 12px; }
.idh-boutique__sous {
	margin: 14px 0 0; max-width: 56ch;
	font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--idh-ink-soft);
}

/* --- barre de filtres --------------------------------------------------- */
.idh-boutique__barre {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px 22px; margin-bottom: clamp(22px, 3vw, 32px);
}
.idh-boutique__marque { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--idh-ink-soft); }
.idh-boutique__marque select {
	font: inherit; font-size: .85rem; padding: 8px 30px 8px 12px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
	background: #fff; color: var(--idh-ink); cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--idh-ink-soft) 50%), linear-gradient(135deg, var(--idh-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 16px) center, calc(100% - 11px) center;
	background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.idh-boutique__filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.idh-boutique .filtre-pilule {
	-webkit-appearance: none; appearance: none;
	font: inherit; font-size: .85rem; font-weight: 500; line-height: 1;
	letter-spacing: .01em; text-transform: none;
	margin: 0; padding: 10px 18px;
	border: 1px solid var(--idh-line) !important;
	border-radius: var(--idh-radius-btn);
	background: transparent !important; color: var(--idh-ink) !important;
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
}
.idh-boutique .filtre-pilule:hover {
	background: var(--idh-ink) !important; color: var(--idh-bg) !important;
	border-color: var(--idh-ink) !important;
}
.idh-boutique .filtre-pilule.est-actif {
	background: var(--idh-primary) !important; color: var(--idh-on-primary) !important;
	border-color: var(--idh-primary) !important;
}
.idh-boutique .filtre-pilule.est-actif:hover {
	background: var(--idh-primary-dark) !important;
	border-color: var(--idh-primary-dark) !important;
}

/* --- grille -------------------------------------------------------------- */
.idh-boutique__grille {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(26px, 3vw, 34px) clamp(20px, 2.4vw, 28px);
}
.carte-produit { display: flex; flex-direction: column; }
.carte-produit[hidden] { display: none; }
.carte-produit__media {
	position: relative; display: block; overflow: visible;
	aspect-ratio: 4 / 3; margin-bottom: 15px;
}
.carte-produit__media img,
.carte-produit__media-vide {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
	border-radius: var(--idh-media-radius) !important;
	clip-path: var(--idh-media-clip, none);
}
.carte-produit__media img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.carte-produit__media-vide { position: absolute; inset: 0; background: var(--idh-bg-alt); }
.carte-produit:hover .carte-produit__media img { transform: scale(1.045); }
.carte-produit__categorie {
	position: absolute; top: 13px; left: 13px; z-index: 2;
	background: rgba(30, 44, 38, .82); color: #fff;
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: 6px 11px; border-radius: var(--idh-radius); backdrop-filter: blur(4px);
}
.carte-produit__corps { display: flex; flex-direction: column; align-items: flex-start; }
.carte-produit__corps h3 { margin: 0 0 6px; color: var(--idh-title); }
.carte-produit__corps h3 a { text-decoration: none; }
.carte-produit__prix {
	display: block; margin-bottom: 12px;
	font-family: var(--idh-font-display); font-weight: 600; font-size: 1.05rem;
	color: var(--idh-title);
}
.carte-produit__prix del { color: var(--idh-ink-soft); font-weight: 400; opacity: .7; margin-right: 6px; }
.carte-produit__prix ins { text-decoration: none; }
.carte-produit__ajout { margin-top: auto; width: 100%; }

.idh-boutique__vide { margin: 30px auto 0; color: var(--idh-ink-soft); }

/* --- pagination numérotée -------------------------------------------- */
.idh-boutique__pagination {
	display: flex; align-items: center; justify-content: center;
	gap: 6px; margin: clamp(34px, 4vw, 52px) 0 0; flex-wrap: wrap;
	border: 0; padding-top: 0;
}
.idh-boutique__pagination[hidden] { display: none; }
.idh-boutique__pagination button {
	-webkit-appearance: none; appearance: none;
	font: inherit; font-size: .88rem;
	min-width: 38px; height: 38px; padding: 0 10px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0 !important; border-radius: var(--idh-radius) !important;
	background: transparent !important; color: var(--idh-ink-soft) !important;
	cursor: pointer; transition: background-color .2s, color .2s;
}
.idh-boutique__pagination button:hover:not(:disabled) { background: var(--idh-bg-alt) !important; color: var(--idh-ink) !important; }
.idh-boutique__pagination button.est-courant { background: var(--idh-primary) !important; color: var(--idh-on-primary) !important; }
.idh-boutique__pagination button:disabled { opacity: .4; cursor: default; }
.idh-boutique__pagination .idh-boutique__ellipsis { color: var(--idh-ink-soft); padding: 0 4px; }

@media (max-width: 1100px) { .idh-boutique__grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .idh-boutique__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .idh-boutique__grille { grid-template-columns: 1fr; } }

/* Bouton « Ajouter au panier » du bloc 1 (dans la grille) — même traitement
   visuel que .bouton, sans dépendre de sa présence (la classe WooCommerce
   .button reste le sélecteur, la classe .bouton n'est pas ajoutée au markup). */
.idh-boutique .button,
.idh-boutique a.added_to_cart {
	display: inline-block; width: 100%; text-align: center;
	font: inherit; font-size: .88rem; font-weight: 500; letter-spacing: .01em;
	padding: 12px 20px; margin-top: 8px;
	border: 1px solid var(--idh-primary); border-radius: var(--idh-radius-btn);
	background: var(--idh-primary); color: var(--idh-on-primary);
	cursor: pointer; text-decoration: none;
	transition: background-color .3s, color .3s, border-color .3s;
}
.idh-boutique .button:hover { background: var(--idh-primary-dark); border-color: var(--idh-primary-dark); }
.idh-boutique .button.loading { opacity: .6; pointer-events: none; }

/* ==========================================================================
   2 · Pages natives WooCommerce [woocommerce_cart] / [woocommerce_checkout]
   Aucune règle de logique ici — uniquement l'habillage visuel à la charte.
   --------------------------------------------------------------------------
   IMPORTANT : sélecteur `div.woocommerce`, jamais `.woocommerce` seul.
   WooCommerce ajoute aussi la classe `woocommerce` sur <body> pour toute
   page produit/boutique (pas seulement panier/commande) — `.woocommerce`
   tout court appliquerait ce cadrage à la page entière (menu compris) sur
   les fiches produit et l'archive boutique, constaté en direct (body
   product-template-default portait max-width:1100px + padding ~82px).
   `div.woocommerce` ne matche que le conteneur du shortcode
   [woocommerce_cart]/[woocommerce_checkout], jamais <body>.
   ========================================================================== */
div.woocommerce {
	font-family: var(--idh-font-body);
	color: var(--idh-ink);
	max-width: 1100px; margin-inline: auto;
	padding-inline: var(--idh-cadre, var(--rail));
	padding-block: clamp(30px, 5vw, 54px);
}

/* --- boutons ------------------------------------------------------------ */
div.woocommerce a.button,
div.woocommerce button.button,
div.woocommerce input.button,
div.woocommerce #respond input#submit {
	font: inherit; font-size: .93rem; font-weight: 500; letter-spacing: .01em;
	padding: 15px 30px;
	border: 1px solid var(--idh-primary) !important; border-radius: var(--idh-radius-btn) !important;
	background: var(--idh-primary) !important; color: var(--idh-on-primary) !important;
	cursor: pointer; text-decoration: none; text-transform: none;
	transition: background-color .3s, color .3s, border-color .3s;
}
div.woocommerce a.button:hover,
div.woocommerce button.button:hover,
div.woocommerce input.button:hover,
div.woocommerce #respond input#submit:hover {
	background: var(--idh-primary-dark) !important; border-color: var(--idh-primary-dark) !important;
}
div.woocommerce a.button.alt,
div.woocommerce button.button.alt,
div.woocommerce input.button.alt,
div.woocommerce #place_order {
	background: var(--idh-accent) !important; border-color: var(--idh-accent) !important; color: var(--idh-on-accent) !important;
}
div.woocommerce a.button.alt:hover,
div.woocommerce button.button.alt:hover,
div.woocommerce input.button.alt:hover,
div.woocommerce #place_order:hover {
	background: var(--idh-accent-dark) !important; border-color: var(--idh-accent-dark) !important;
}

/* --- tableau panier ------------------------------------------------------ */
div.woocommerce table.shop_table {
	border-collapse: collapse; width: 100%;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius);
	overflow: hidden;
}
div.woocommerce table.shop_table th {
	font-family: var(--idh-font-display); font-weight: 600; color: var(--idh-title);
	background: var(--idh-bg-alt); text-align: left; padding: 14px 16px;
}
div.woocommerce table.shop_table td { padding: 14px 16px; border-top: 1px solid var(--idh-line); }
div.woocommerce table.shop_table td.product-name a { color: var(--idh-title); text-decoration: none; }
div.woocommerce table.shop_table td.product-price,
div.woocommerce table.shop_table td.product-subtotal { font-weight: 500; color: var(--idh-title); }
div.woocommerce .quantity .qty {
	font: inherit; width: 64px; padding: 8px 10px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
}
div.woocommerce .cart-collaterals .cart_totals {
	background: var(--idh-bg-alt); border-radius: var(--idh-radius); padding: 24px;
}
div.woocommerce .cart_totals table.shop_table { border: 0; }
div.woocommerce .cart_totals table.shop_table th,
div.woocommerce .cart_totals table.shop_table td { background: transparent; padding: 10px 0; border-top: 1px solid var(--idh-line); }

/* --- formulaire coupon --------------------------------------------------- */
div.woocommerce .coupon .input-text {
	font: inherit; padding: 12px 14px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
}

/* --- checkout : champs de formulaire ------------------------------------- */
div.woocommerce form .form-row label { font-size: .88rem; color: var(--idh-ink-soft); margin-bottom: 6px; display: block; }
div.woocommerce form .form-row .required { color: var(--idh-accent); }
div.woocommerce form .form-row input.input-text,
div.woocommerce form .form-row textarea,
div.woocommerce form .form-row select,
.woocommerce-additional-fields select {
	font: inherit; width: 100%; padding: 13px 14px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
	background: #fff; color: var(--idh-ink);
}
div.woocommerce form .form-row input.input-text:focus,
div.woocommerce form .form-row textarea:focus,
div.woocommerce form .form-row select:focus { outline: 2px solid var(--idh-primary); outline-offset: 1px; }
div.woocommerce #order_review,
.woocommerce-checkout-review-order {
	background: var(--idh-bg-alt); border-radius: var(--idh-radius); padding: 24px;
}
.woocommerce-checkout-review-order-table { border: 0; }

/* --- notices (succès / erreur / info) ------------------------------------ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	border-radius: var(--idh-radius); padding: 16px 20px;
	background: var(--idh-bg-alt); border-left: 4px solid var(--idh-primary);
	list-style: none; margin: 0 0 22px;
}
.woocommerce-error { border-left-color: #c0392b; }

@media (max-width: 780px) {
	div.woocommerce table.shop_table thead { display: none; }
	div.woocommerce table.shop_table td { display: block; border-top: 0; padding: 8px 16px; }
	div.woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--idh-line); padding: 10px 0; }
}

/* ==========================================================================
   3 · Fiche produit unique (is_product()) — gabarit natif WooCommerce
   --------------------------------------------------------------------------
   Pas de cadrage max-width/margin/padding-inline ici, volontairement :
   .product est le conteneur flex/grid de WooCommerce (galerie + résumé
   côte à côte) — lui ajouter une largeur ou des marges par-dessus casse son
   calcul de largeur en cascade avec Elementor (constaté : image et texte
   écrasés dans une colonne étroite, plus de responsive). Seules couleurs,
   typographie et espacements VERTICAUX entre blocs sont touchés ici.
   ========================================================================== */
/* Titre : plus affiché ici — repris dans le bandeau (components/hero.php,
   branche is_product(), posé automatiquement avant .product). Évite le
   doublon plutôt que de le masquer en CSS (woocommerce_template_single_title
   déjà retiré côté PHP, components/boutique.php). */

/* --- résumé (prix, quantité, ajouter au panier) « encadré » ------------- */
.single-product div.product .summary.entry-summary {
	box-sizing: border-box;
	background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius);
	padding: clamp(20px, 3vw, 32px);
}
.single-product div.product p.price {
	font-family: var(--idh-font-display); font-weight: 600; font-size: 1.4rem;
	color: var(--idh-title);
}
.single-product div.product p.price del { color: var(--idh-ink-soft); font-weight: 400; opacity: .7; }
.single-product div.product .woocommerce-product-details__short-description {
	color: var(--idh-ink); margin: 18px 0;
}
.single-product div.product form.cart {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0;
}
.single-product div.product form.cart .quantity .qty {
	font: inherit; width: 64px; padding: 13px 10px; text-align: center;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
}
.single-product div.product .single_add_to_cart_button {
	font: inherit; font-size: .93rem; font-weight: 500; letter-spacing: .01em;
	padding: 15px 30px;
	border: 1px solid var(--idh-primary) !important; border-radius: var(--idh-radius-btn) !important;
	background: var(--idh-primary) !important; color: var(--idh-on-primary) !important;
	cursor: pointer; text-decoration: none;
	transition: background-color .3s, color .3s, border-color .3s;
}
.single-product div.product .single_add_to_cart_button:hover {
	background: var(--idh-primary-dark) !important; border-color: var(--idh-primary-dark) !important;
}
.single-product div.product .product_meta {
	margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--idh-line);
	font-size: .85rem; color: var(--idh-ink-soft);
}
.single-product div.product .product_meta a { color: var(--idh-ink); }

.single-product div.product .woocommerce-tabs {
	margin-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--idh-line); padding-top: 24px;
}
.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; border: 0;
}
.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; border: 0; background: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block; padding: 10px 18px; border-radius: var(--idh-radius-btn);
	background: var(--idh-bg-alt); color: var(--idh-ink); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--idh-primary); color: var(--idh-on-primary);
}
.single-product div.product .woocommerce-Tabs-panel { color: var(--idh-ink); line-height: 1.7; }
.single-product div.product .woocommerce-Tabs-panel h2 { color: var(--idh-title); }
/* Description saisie avec une mise en forme improvisée (gras/retours à la
   ligne collés) : on force un affichage lisible en bloc plutôt qu'en ligne,
   sans dépendre de la structure exacte du HTML collé dans le champ. */
.single-product div.product .woocommerce-Tabs-panel p { margin: 0 0 14px; }
.single-product div.product .woocommerce-Tabs-panel strong { color: var(--idh-title); }
.single-product div.product .woocommerce-Tabs-panel table {
	width: 100%; border-collapse: collapse; margin: 14px 0;
}
.single-product div.product .woocommerce-Tabs-panel table th,
.single-product div.product .woocommerce-Tabs-panel table td {
	text-align: left; padding: 10px 12px; border: 1px solid var(--idh-line); vertical-align: top;
}
/* Listes à puces/numérotées de la description : les widgets WooCommerce
   d'Elementor imposent `display:inline-flex` + une couleur grise à TOUS les
   <li> qu'ils contiennent (vérifié : le widget « Modifier Onglets de
   données de produit » applique cette règle même à un <li> de description,
   pas seulement à ses propres listes à puces). `!important` nécessaire pour
   battre cette règle globale d'Elementor. */
.single-product div.product .woocommerce-Tabs-panel ul:not(.tabs) {
	margin: 0 0 14px; padding-left: 22px; list-style: disc;
	border: 0 !important; /* d'autres widgets Elementor pausent un border-bottom sur <ul> */
}
.single-product div.product .woocommerce-Tabs-panel ol {
	margin: 0 0 14px; padding-left: 22px; list-style: decimal;
	border: 0 !important;
}
.single-product div.product .woocommerce-Tabs-panel ul:not(.tabs) li,
.single-product div.product .woocommerce-Tabs-panel ol li {
	display: list-item !important;
	margin: 0 0 6px; padding: 0;
	color: var(--idh-ink) !important;
}

/* --- produits similaires / associés : même grille que [idh_boutique] --- */
.single-product div.product .related.products,
.single-product div.product .upsells.products {
	margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(30px, 4vw, 48px);
	border-top: 1px solid var(--idh-line);
}
.single-product div.product .related.products > h2,
.single-product div.product .upsells.products > h2 {
	color: var(--idh-title); margin: 0 0 clamp(18px, 2.5vw, 26px);
}
.single-product div.product ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(22px, 2.6vw, 30px); list-style: none; margin: 0; padding: 0;
}
.single-product div.product ul.products li.product {
	box-sizing: border-box;
	background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius);
	padding: 16px; text-align: left;
}
.single-product div.product ul.products li.product a { text-decoration: none; }
.single-product div.product ul.products li.product img {
	width: 100% !important; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--idh-radius); margin-bottom: 10px;
}
.single-product div.product ul.products li.product .woocommerce-loop-product__title {
	color: var(--idh-title); font-size: .98rem; font-weight: 500; margin: 4px 0 6px;
}
.single-product div.product ul.products li.product .price {
	font-family: var(--idh-font-display); font-weight: 600; color: var(--idh-title);
}
.single-product div.product ul.products li.product .price del { color: var(--idh-ink-soft); font-weight: 400; opacity: .7; }
.single-product div.product ul.products li.product .button {
	display: block; width: 100%; text-align: center; margin-top: 10px;
	font: inherit; font-size: .85rem; font-weight: 500;
	padding: 11px 16px; border: 1px solid var(--idh-primary); border-radius: var(--idh-radius-btn);
	background: var(--idh-primary); color: var(--idh-on-primary); text-decoration: none;
	transition: background-color .3s, border-color .3s;
}
.single-product div.product ul.products li.product .button:hover {
	background: var(--idh-primary-dark); border-color: var(--idh-primary-dark);
}
.single-product div.product ul.products li.product .onsale {
	position: absolute; top: 10px; left: 10px;
	background: var(--idh-accent); color: var(--idh-on-accent);
	font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	padding: 5px 10px; border-radius: var(--idh-radius);
}
.single-product div.product ul.products li.product { position: relative; }

@media (max-width: 1100px) { .single-product div.product ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .single-product div.product ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .single-product div.product ul.products { grid-template-columns: 1fr; } }