/* LC Compoziții — secțiuni de produse (motor de reguli)
   Rulează exclusiv pe single Compoziție. Reutilizează clasa nativă
   WooCommerce `.products` (grid-ul din content-product.php), stilizată ca
   un carusel orizontal (nu grid fix), consistent vizual cu cardurile de
   pe arhivele reale de produse (border, thumbnail 1:1, titlu Lora/petrol). */

.lc-compozitii-product-section {
	margin: 40px 0;
}

/* Wrapper carusel — poziționează săgețile peste marginile listei */
.lc-compozitii-carousel {
	position: relative;
}

.lc-compozitii-product-grid.products {
	display: flex !important;
	overflow-x: auto;
	overflow-anchor: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 20px !important;
	margin: 0 !important;
	padding: 4px 4px 12px !important;
	list-style: none !important;
	/* ascunde scrollbar-ul nativ — navigarea se face prin săgeți sau swipe,
	   nu prin bara de scroll vizibilă */
	scrollbar-width: none;
}
.lc-compozitii-product-grid.products::-webkit-scrollbar {
	display: none;
}

.lc-compozitii-product-grid.products > li {
	list-style: none !important;
	margin: 0 !important;
	/* LC fix (root cause confirmată): tema Astra aplică pe clasa
	   `.ast-article-single` (gândită pentru layout de blog, nu pentru
	   cardurile din acest carusel) `padding: 5.34em 6.67em` — cu
	   box-sizing:border-box, acest padding singur depășea lățimea cardului,
	   colapsând conținutul la 0. */
	padding: 0 !important;
	border: 1px solid #e8eef0;
	border-radius: 8px;
	background-color: #fff;
	overflow: hidden;
	scroll-snap-align: start;

	/* Lățime procentuală (nu fixă în px) — indiferent cât de lată e coloana
	   de conținut pe diverse Compoziții, exact ~3 carduri încap complet,
	   iar al 4-lea rămâne parțial tăiat, invitând la scroll orizontal. */
	flex: 0 0 31%;
	max-width: 31%;
}

@media (max-width: 900px) {
	.lc-compozitii-product-grid.products > li {
		flex: 0 0 220px;
		max-width: 220px;
	}
}

/* Thumbnail — pe această pagină e cel NATIV WooCommerce (fără clasele
   custom `custom-product-thumbnail imgv2` pe care le are tema pe arhive
   reale), deci forțăm explicit aceleași proporții/comportament vizual. */
.lc-compozitii-product-grid.products > li .astra-shop-thumbnail-wrap {
	width: 100% !important;
	display: block !important;
	position: relative !important;
	/* LC fix: tehnica height:0 + padding-top:100% fixează strict înălțimea
	   pe baza lățimii, imună la orice conținut din flux normal (ex. div-ul
	   butonului de wishlist, care altfel putea împinge containerul mai înalt
	   decât un pătrat perfect, chiar și cu `aspect-ratio` setat — acela e
	   doar o „sugestie" CSS pe care conținutul o poate depăși). */
	height: 0 !important;
	padding: 100% 0 0 0 !important;
	overflow: hidden !important;
	background-color: #fff;
	margin: 0;
	box-sizing: border-box;
}
/* Orice element direct din interior (imagine + butonul de wishlist) e
   poziționat absolut peste tot cadrul — nimic nu mai participă la fluxul
   normal, deci nimic nu mai poate influența înălțimea containerului. */
.lc-compozitii-product-grid.products > li .astra-shop-thumbnail-wrap > * {
	position: absolute;
	inset: 0;
}

.lc-compozitii-product-grid.products > li img {
	/* LC fix: imaginile sunt lazy-load (placeholder SVG 0x0 până se încarcă
	   real prin data-src) — fără o dimensiune explicită, placeholder-ul
	   rămâne la 0 și lazy-load-ul nu detectează elementul ca vizibil.
	   Poziționarea absolută (inset:0) vine din regula generică de mai sus
	   (`.astra-shop-thumbnail-wrap > *`) — aici doar umplerea vizuală. */
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	/* LC fix root cause reală a spațiului alb persistent: o regulă GLOBALĂ
	   din CSS-ul temei (fără niciun scope, aplicată pe tot site-ul, nu doar
	   pe arhive) — `.astra-shop-thumbnail-wrap img { padding: 10px 0
	   !important; }` — adăuga 10px sus/jos direct pe imagine, necontestată
	   până acum (nu suprascriam padding pe img deloc). */
	padding: 0 !important;
	/* object-fit:cover (nu contain) — umple complet cadrul pătrat, fără
	   spațiu alb rezidual în jur când imaginea sursă nu e perfect 1:1. */
	object-fit: cover !important;
	display: block;
	cursor: zoom-in;
}

.lc-compozitii-product-grid.products > li .astra-shop-summary-wrap {
	padding: 0 12px 0;
	background-color: #F3F8F9;
}
.lc-compozitii-product-grid.products > li .astra-shop-summary-wrap.new-custom-product-wrap {
	padding-top: 0;
	margin-top: 0;
	background-color: #F3F8F9 !important;
}

.lc-compozitii-product-grid.products > li .expandable-title {
	color: #3B6772;
	font-family: 'Lora', serif;
	font-weight: 600;
	font-size: 1.08em;
	margin-top: 14px;
	margin-bottom: 10px;
}

.lc-compozitii-product-grid.products > li .price {
	display: block;
	margin: 0 0 10px;
}

.lc-compozitii-product-grid.products > li .rating-row-archive {
	margin-bottom: 0;
}

.lc-compozitii-product-grid.products > li .price span {
	color: #3B6772;
	font-weight: 600;
}

/* Buton "Vezi detalii" — stil identic cu cel din arhivele reale */
.lc-compozitii-product-grid.products > li .new-external-button {
	display: block !important;
	background-color: #fff !important;
	color: #D97534 !important;
	border: 2px solid #D97534 !important;
	width: 100%;
	margin: 6px 0 14px !important;
	padding: 8px 18px !important;
	font-family: 'Inter', sans-serif;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	border-radius: 6px !important;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.lc-compozitii-product-grid.products > li .new-external-button:hover {
	background-color: #D97534 !important;
	color: #fff !important;
}

/* Săgeți discrete — ambele condiționate simetric: vizibile la hover DOAR
   când JS confirmă că există efectiv conținut de derulat în direcția
   respectivă (`.can-scroll-prev` / `.can-scroll-next`, adăugate pe baza
   poziției reale de scroll). */
.lc-compozitii-carousel__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 5;
	width: 34px;
	height: 64px;
	border-radius: 6px;
	border: 1px solid #D97534;
	background-color: #fff;
	color: #D97534;
	font-size: 28px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(217, 117, 52, 0.2);
	opacity: 0;
	visibility: hidden;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.lc-compozitii-carousel__arrow:hover,
.lc-compozitii-carousel__arrow:focus,
.lc-compozitii-carousel__arrow:active {
	outline: none;
	border-color: #D97534;
}
.lc-compozitii-carousel:hover .lc-compozitii-carousel__arrow--next.can-scroll-next {
	opacity: 1;
	visibility: visible;
}
.lc-compozitii-carousel:hover .lc-compozitii-carousel__arrow--prev.can-scroll-prev {
	opacity: 1;
	visibility: visible;
}
.lc-compozitii-carousel__arrow:hover {
	background-color: #D97534;
	color: #fff;
}
.lc-compozitii-carousel__arrow--prev {
	left: -10px;
}
.lc-compozitii-carousel__arrow--next {
	right: -10px;
}
/* pe mobil săgețile nu au sens (swipe direct) — le ascundem complet */
@media (max-width: 900px) {
	.lc-compozitii-carousel__arrow {
		display: none;
	}
}

/* Link "Vezi toate produsele" — text simplu + săgeată dreapta, sub carusel */
.lc-compozitii-see-all {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
	margin: 24px auto 0;
	color: #D97534;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 15px;
	transition: color 0.2s ease, gap 0.2s ease;
}
.lc-compozitii-see-all::after {
	content: "\2192"; /* → */
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s ease;
}
.lc-compozitii-see-all:hover {
	color: #C0601E;
	gap: 10px;
}
.lc-compozitii-see-all:hover::after {
	transform: translateX(2px);
}