/* Reusable "read more / read less" line-clamp. Used by category & product
   descriptions and by any category-builder block (opt-in per block).

   Progressive enhancement: the server renders the FULL text with no clamp, so
   without JS everything is readable (SEO/accessibility safe). ho-clamp.js adds
   .is-clamped only when the text actually overflows 3 lines, then injects the
   toggle button. .is-open removes the clamp again on click. */

.ho-clamp.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Soft fade-out on the last visible line (background-independent — masks the
   text itself, so it works on any colour). Dropped when expanded. */
.ho-clamp.is-clamped:not(.is-open) {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.ho-clamp.is-clamped.is-open {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
	display: block;
}

/* Wrapper follows the source text alignment (JS sets text-align), so the
   button centres under centred descriptions and stays left under left copy. */
.ho-clamp-toggle-wrap {
	margin-top: .75rem;
	text-align: inherit;
}

.ho-clamp-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 0;
	background: none;
	border: 0;
	color: #e62128;
	font: inherit;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	line-height: 1.2;
	transition: opacity .15s ease;
}

.ho-clamp-toggle:hover,
.ho-clamp-toggle:focus-visible { text-decoration: underline; }

/* Chevron rotates when expanded. */
.ho-clamp-toggle::after {
	content: "";
	width: .55em;
	height: .55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-bottom: .15em;
}

.ho-clamp-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: .15em; margin-bottom: 0; }