/* ============================================================
   Cataleya — ajustări PDP (slidere 2-up + „Citește tot")
   Fișier nou. Se încarcă doar pe pagina de produs.
   ============================================================ */
/* ------------------------------------------------------------
   1. Slidere produse: 2 carduri + peek pe mobil
   ------------------------------------------------------------ */
@media (max-width: 992px) {
	body .related.products ul.products,
	body .upsells.products ul.products,
	body .cross-sells ul.products,
	body .mobile-scroll ul.products {
		--ct-cards-visible: 2.45;   /* câte carduri vizibile (peek-ul tău) */
		--ct-gutter: 0;             /* aliniat fix cu titlul */
		width: 100%;
		margin-left: 0;
		padding-left: var(--ct-gutter);
		padding-right: var(--ct-gutter);
		column-gap: 0.75rem;
		scroll-padding-left: var(--ct-gutter);
	}
	body .related.products ul.products li.product,
	body .upsells.products ul.products li.product,
	body .cross-sells ul.products li.product,
	body .mobile-scroll ul.products li.product {
		/* lățimea depinde DOAR de câte vrem vizibile -> calc mereu valid,
		   indiferent de valoarea (sau unitatea) gutterului */
		min-width: calc(100vw / var(--ct-cards-visible));
		max-width: calc(100vw / var(--ct-cards-visible));
		scroll-snap-align: start;
	}
}
/* ------------------------------------------------------------
   2. „Citește tot" — colaps descriere lungă
   Buton aliniat 1:1 la .ct-options__sizes-toggle (muted, fără underline).
   Textul rămâne în DOM (clamp pe înălțime, NU display:none) -> SEO ok.
   ------------------------------------------------------------ */
.ct-readmore {
	position: relative;
	max-height: 18rem;            /* înălțimea colapsată — ajustează după gust */
	overflow: hidden;
	transition: max-height 0.35s ease;
}
.ct-readmore.is-expanded {
	max-height: 200rem;
}
.ct-readmore:not(.is-expanded)::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 10rem;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.ct-readmore__toggle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 0px;
	padding: 20px 0;
	background: #fff0;
	border: none;
	color: var(--ct-text-muted, #6b6b6b);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: color var(--ct-base, 0.2s) var(--ct-ease, ease);
}
.ct-readmore__toggle:hover {
	color: var(--ct-text-primary, #2b2b2b);   /* doar puțin mai închis */
}
.ct-readmore__toggle-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #c61932;
}
/* colapsat: „+" vizibil, „−" ascuns */
.ct-readmore__toggle .ct-readmore__toggle-icon--minus {
	display: none;
}
/* expandat: „−" vizibil, „+" ascuns */
.ct-readmore__toggle[aria-expanded="true"] .ct-readmore__toggle-icon--plus {
	display: none;
}
.ct-readmore__toggle[aria-expanded="true"] .ct-readmore__toggle-icon--minus {
	display: inline-block;
}
/* ------------------------------------------------------------
   3. Titluri uniforme în slidere (mobil + desktop)
   Font puțin mai mic + max 3 linii. La 3 linii + font mai mic
   diferențiatorul de la finalul titlului („— Lalele") rămâne vizibil,
   iar cardurile devin compacte și egale ca înălțime.
   Dacă titlul tău folosește altă clasă decât .woocommerce-loop-product__title,
   spune-mi clasa și o adaug.
   ------------------------------------------------------------ */
.related.products .woocommerce-loop-product__title,
.upsells .woocommerce-loop-product__title,
.cross-sells .woocommerce-loop-product__title,
.mobile-scroll .woocommerce-loop-product__title {
	font-size: 15px;            /* REGLAJ 1: mai mic = mai puține linii (încearcă 14px dacă tot iese pe 4) */
	line-height: 1.35;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;      /* REGLAJ 2: 4 = păstrează look-ul actual; 2 = compact dar taie modelul */
	line-clamp: 3;
	overflow: hidden;
}