/**
 * HDO France Listes — comparateur & wishlist
 * Styles neutres, pensés pour s'intégrer au thème The7 sans le surcharger.
 */

/* ============ Variables ============ */

:root {
	--hdo-lc-active: #43b2c2;   /* bleu-vert de la charte HDO */
	--hdo-lc-idle:   #5D7380;   /* gris-bleu du thème */
}

/* ============ Icônes SVG ============ */

.hdo-lc-ico {
	width: 1em;
	height: 1em;
	display: block;
	flex: 0 0 auto;
}

/* Le cœur se remplit lorsqu'il est actif. */
.hdo-lc-btn--wishlist.is-active .hdo-lc-ico,
.hdo-lc-count[data-hdo-lc-count="wishlist"].is-active .hdo-lc-ico {
	fill: currentColor;
}

/* ============ Boutons produits — base ============ */

.hdo-lc-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0 0;
}

.hdo-lc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--hdo-lc-idle);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.hdo-lc-btn:hover  { color: var(--hdo-lc-active); }
.hdo-lc-btn.is-busy { opacity: .45; pointer-events: none; }

.hdo-lc-btn.is-active {
	background: var(--hdo-lc-active);
	border-color: var(--hdo-lc-active);
	color: #fff;
}

/* ============ Cartes produit — boutons superposés à l'image ============
 *
 * Structure The7 : .product.type-product > figure.woocom-project > .trigger-img-hover
 * On positionne par rapport à la carte (.product.type-product) et non au
 * wrapper d'archive Elementor, qui porte aussi la classe .product.
 * ------------------------------------------------------------------ */

.product.type-product { position: relative; }

.hdo-lc-actions--loop {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 5;
	margin: 0;
	display: flex;
	justify-content: space-between;   /* comparateur à gauche, wishlist à droite */
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
	pointer-events: none;             /* le clic traverse vers l'image */
}

.hdo-lc-actions--loop .hdo-lc-btn {
	pointer-events: auto;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .93);
	border: 1px solid rgba(0, 0, 0, .07);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .13);
	backdrop-filter: blur(2px);
}

.hdo-lc-actions--loop .hdo-lc-btn:hover {
	background: #fff;
	transform: scale(1.08);
}

.hdo-lc-actions--loop .hdo-lc-btn.is-active {
	background: var(--hdo-lc-active);
	border-color: var(--hdo-lc-active);
	color: #fff;
}

/* Libellés masqués visuellement mais lus par les lecteurs d'écran. */
.hdo-lc-actions--loop .hdo-lc-btn__label,
.hdo-lc-actions--single .hdo-lc-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============ Fiche produit — boutons sur la galerie ============
 *
 * Ancrage sur le wrapper de la GRANDE image uniquement.
 * La galerie The7 peut placer les vignettes à gauche (thumb-position-left) :
 * s'ancrer sur .dt-wc-product-gallery poserait le bouton de gauche par-dessus
 * la colonne de vignettes.
 * ------------------------------------------------------------------ */

.dt-product-gallery-wrap,
.woocommerce-product-gallery__wrapper { position: relative; }

.hdo-lc-actions--single {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	z-index: 6;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
	pointer-events: none;
}

.hdo-lc-actions--single .hdo-lc-btn {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 21px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	border: 1px solid rgba(0, 0, 0, .07);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	backdrop-filter: blur(2px);
}

.hdo-lc-actions--single .hdo-lc-btn:hover {
	background: #fff;
	transform: scale(1.06);
}

.hdo-lc-actions--single .hdo-lc-btn.is-active {
	background: var(--hdo-lc-active);
	border-color: var(--hdo-lc-active);
	color: #fff;
}

/*
 * Décalage sous le badge « promo » — uniquement si le badge est réellement
 * présent dans le DOM. La classe onsale-h-position-left est un réglage du
 * widget The7, posé même sans promotion : s'y fier décalait le bouton de
 * gauche en permanence.
 */
.dt-product-gallery-wrap:has(.onsale) .hdo-lc-actions--single .hdo-lc-btn--compare {
	margin-top: 42px;
}

/* ============ Compteurs header ============ */

.hdo-lc-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

/*
 * C'est l'icône qui sert de référence de position, pas le lien : le lien peut
 * être élargi par le contrôle Elementor, la pastille resterait alors détachée
 * de l'icône.
 */
.hdo-lc-count__icon {
	position: relative;
	display: inline-flex;
	font-size: 18px;
	line-height: 0;
}

.hdo-lc-count__badge {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	color: #fff;
	background: #c0392b;
	border-radius: 999px;
}

/* ============ Tableau comparateur ============ */

.hdo-lc-compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hdo-lc-compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.hdo-lc-compare th,
.hdo-lc-compare td {
	padding: 12px 14px;
	border: 1px solid #e6e6e6;
	vertical-align: top;
	text-align: left;
}

/* Colonne des intitulés, figée au scroll horizontal */
.hdo-lc-rowlabel {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 160px;
	min-width: 160px;
	font-weight: 600;
	background: #fafafa;
}

.hdo-lc-compare td { min-width: 220px; background: #fff; }

.hdo-lc-row--compare_remove_button td,
.hdo-lc-row--compare_remove_button th { padding: 8px 14px; text-align: center; }

.hdo-lc-row--thumbnail td { text-align: center; }
.hdo-lc-row--thumbnail img { max-width: 160px; height: auto; }

.hdo-lc-row--title { font-size: 15px; font-weight: 600; }
.hdo-lc-title { text-decoration: none; }

.hdo-lc-row--price { font-weight: 600; }

.hdo-lc-row--description td { font-size: 13px; line-height: 1.5; color: #555; }

.hdo-lc-row:nth-child(even) td { background: #fcfcfc; }

.hdo-lc-na { color: #aaa; }

/* ============ Bouton retirer ============ */

.hdo-lc-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: #999;
	background: transparent;
	border: 1px solid #ddd;
	border-radius: 3px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.hdo-lc-remove:hover { color: #c0392b; border-color: #c0392b; }
.hdo-lc-remove.is-busy { opacity: .4; pointer-events: none; }

/* ============ Grille wishlist (2 colonnes) ============ */

.hdo-lc-wishlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.hdo-lc-card {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 16px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
}

.hdo-lc-card__remove { position: absolute; top: 10px; right: 10px; }

.hdo-lc-card__thumb { flex: 0 0 110px; }
.hdo-lc-card__thumb img { width: 100%; height: auto; display: block; }

.hdo-lc-card__body { flex: 1 1 auto; min-width: 0; padding-right: 34px; }

.hdo-lc-card__title {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.hdo-lc-card__sku { font-size: 12px; color: #888; margin-bottom: 4px; }
.hdo-lc-card__price { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.hdo-lc-card__stock { font-size: 13px; margin-bottom: 10px; }
.hdo-lc-card__stock .stock { margin: 0; }

/* ============ État vide ============ */

.hdo-lc-empty {
	padding: 40px 20px;
	text-align: center;
	color: #777;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 4px;
}

.hdo-lc-empty p { margin: 0 0 14px; }
.hdo-lc-empty p:last-child { margin-bottom: 0; }

/* ============ Responsive ============ */

@media (max-width: 900px) {
	.hdo-lc-wishlist { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.hdo-lc-rowlabel { width: 110px; min-width: 110px; font-size: 13px; }
	.hdo-lc-compare td { min-width: 170px; }
	.hdo-lc-compare th,
	.hdo-lc-compare td { padding: 9px 10px; }
	.hdo-lc-card { flex-direction: column; }
	.hdo-lc-card__thumb { flex: 0 0 auto; max-width: 160px; }
	.hdo-lc-card__body { padding-right: 0; }
}