/*
 * Phones only (the theme stacks the archive header below 768px): clamp the
 * category/style description to two lines so products show above the fold.
 * The clamp is applied to the paragraphs, and the "Ler mais" toggle lives
 * inside the description element, because the theme lays the header out
 * as a CSS grid and an extra sibling would be auto-placed in the wrong cell.
 * The toggle is added by archive-description.js only when the text overflows.
 */
@media (max-width: 767.98px) {
	.woocommerce-products-header .is-clamped > p:first-child {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		margin-bottom: 0;
	}

	.woocommerce-products-header .is-clamped > p:not(:first-child) {
		display: none;
	}

	/* Scoped selectors: the theme styles every <button> as a full-width pill. */
	.woocommerce-products-header .amless-description-toggle,
	.woocommerce-products-header .amless-description-toggle:hover,
	.woocommerce-products-header .amless-description-toggle:focus,
	.woocommerce-products-header .amless-description-toggle:active {
		display: inline-block;
		width: auto;
		height: auto;
		min-height: 0;
		margin: 0.5rem 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: none;
		color: var(--mbf-color-primary, currentColor);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		text-align: left;
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}

	.woocommerce-products-header .amless-description-toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}

@media (min-width: 768px) {
	.amless-description-toggle {
		display: none;
	}
}