/* ==========================================================================
 * PV9 — Compact product listing cards on mobile (Millesima-like density).
 *
 * Loaded ONLY on listing pages (category, search, manufacturer, supplier,
 * prices-drop, new-products, best-sales) from templates/_partials/stylesheets.tpl,
 * after custom.css + components/product-item.css. Everything lives inside
 * max-width: 767.98px, so tablet/desktop (>= 768px) are untouched.
 *
 * Scope: catalog grid only (.pv-catalog-center-column .products). Home tabs,
 * carousels, wishlist and quickview keep their own layout.
 * The !important flags are needed only to beat existing !important rules in
 * custom.css / product-item.css for the same properties.
 * ======================================================================== */

@media (max-width: 767.98px) {

	/* ---- Page gutters: 28px -> 12px so cards get the width back ---------- */
	body .pv-catalog-columns,
	body .pv-catalog-title-container,
	body .breadcrumb__wrapper > .container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		width: 100%;
	}

	/* ---- Grid: 2 columns down to 340px, tight gap ------------------------ */
	body .pv-catalog-center-column .products {
		gap: 0.5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* ---- Card shell -------------------------------------------------------- */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__top {
		padding: 0.4rem 0.5rem 0;
	}

	/* Image: container hugs the bottle instead of reserving 172px. */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-container {
		align-items: center;
		height: clamp(8rem, 34vw, 9.5rem);
		justify-content: center;
		margin-bottom: 0.35rem;
		min-height: 0;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-link {
		align-items: center;
		height: 100%;
		justify-content: center;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image {
		height: 100%;
		max-height: clamp(8rem, 34vw, 9.5rem);
		max-width: 100%;
		object-fit: contain;
		width: auto;
	}

	/* Discount badge: small pill like Millesima's score tag. */
	body .pv-catalog-center-column .products > .product-miniature .product-flags {
		gap: 2px;
		left: 0.4rem !important;
		top: 0.4rem !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-flags .badge,
	body .pv-catalog-center-column .products > .product-miniature .product-flags .badge.discount {
		font-size: 0.7rem !important;
		letter-spacing: 0;
		min-height: 20px;
		padding: 0.2rem 0.4rem;
	}

	/* Wishlist / compare / quickview: 28px icons tucked in the corner. */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions {
		gap: 0.25rem !important;
		right: 0.35rem !important;
		row-gap: 0.25rem !important;
		top: 0.35rem !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions > div,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions .sw-productcompare-action,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions .sw-product-wishlist-button,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions .sw-productcompare-button,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions .product-miniature__quickview-button,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions .product-miniature__mail-alert {
		flex: 0 0 28px !important;
		flex-basis: 28px !important;
		height: 28px !important;
		max-height: 28px !important;
		min-height: 28px !important;
		min-width: 28px !important;
		width: 28px !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__image-actions .material-icons {
		font-size: 16px !important;
		line-height: 1 !important;
	}

	/* ---- Text block ------------------------------------------------------- */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__bottom {
		gap: 0.25rem;
		padding: 0;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__heading {
		min-height: 0;
		padding: 0 0.5rem;
	}

	/* Serif name, 2 lines max (fixed 2-line box keeps rows aligned). */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font-size: 0.95rem;
		line-height: 1.22;
		margin-top: 0;
		max-height: calc(2 * 1.22em);
		min-height: calc(2 * 1.22em);
		padding: 0;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__infos {
		gap: 0.25rem;
		padding: 0 0.5rem;
	}

	/* Tasting notes: 2 lines + ellipsis. */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__description {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font-size: 0.72rem;
		line-height: 1.35;
		max-height: calc(2 * 1.35em);
		min-height: calc(2 * 1.35em);
	}

	/* ---- Price / region / stock / CTA ------------------------------------ */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__purchase-row {
		gap: 0.2rem !important;
		padding: 0.15rem 0.5rem 0.5rem;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__purchase-meta {
		gap: 0.15rem;
		margin-bottom: 0 !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__prices {
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.1rem 0.4rem;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__price {
		font-size: 1.15rem;
		line-height: 1.15;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__regular-price {
		font-size: 0.78rem;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__meta-row {
		align-items: center;
		gap: 0.35rem;
		margin: 0 !important;
		min-height: 0;
		padding-top: 0;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__meta-row .product-miniature__region {
		font-size: 0.72rem;
		line-height: 1.25;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__reviews {
		min-height: 0;
		transform: scale(0.85);
		transform-origin: right center;
	}

	/* Low-stock line; the empty slot stays reserved but much shorter. */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__stock,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__stock:not(.product-miniature__stock--low) {
		font-size: 0.68rem;
		line-height: 1.25;
		margin: 0 !important;
		min-height: calc(0.68rem * 1.25) !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__actions {
		margin-top: 0.15rem !important;
	}

	/* Add (or Out of stock) + a small "Details" text link beside it, same 36px
	 * row. If a long label (e.g. DE "Hinzufügen", "Out of Stock", "2 in Cart")
	 * doesn't fit, the link wraps to a short line under the button instead of
	 * clipping the label. */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form {
		align-items: center;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0 0.4rem !important;
		grid-template-columns: none !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__add {
		flex: 1 1 auto !important;
		min-width: max-content;
		order: 1;
		width: auto !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__details,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__details:hover,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__details:focus,
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__details:active {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		color: #4a4a4a !important;
		display: inline-flex !important;
		flex: 0 0 auto !important;
		font-size: 0.75rem !important;
		font-weight: 500;
		height: 28px !important;
		letter-spacing: 0;
		align-items: center;
		align-self: center !important;
		margin: 0 0 0 auto !important;
		min-height: 28px !important;
		order: 2;
		padding: 0 0.1rem !important;
		text-decoration: underline;
		text-transform: none;
		text-underline-offset: 2px;
		width: auto !important;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__details:focus-visible {
		outline: 2px solid currentColor !important;
		outline-offset: 1px;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__form .product-miniature__details .product-miniature__details-text {
		font-size: inherit !important;
		text-decoration: inherit;
	}

	body .pv-catalog-center-column .products > .product-miniature .product-miniature__add {
		font-size: 0.8rem;
		gap: 0.3rem;
		height: 36px !important;
		max-height: 36px;
		min-height: 36px !important;
		overflow: hidden;
		padding: 0 0.45rem !important;
		white-space: nowrap;
		width: 100% !important;
	}

	/* Text-only CTA (like Millesima) so "Adicionar" + "Detalhes" fit on one
	 * row in PT/ES/IT/FR down to 375px. */
	body .pv-catalog-center-column .products > .product-miniature .product-miniature__add .material-icons {
		display: none !important;
	}
}

/* Very narrow phones (< 340px): back to one column, same compact card. */
@media (max-width: 339.98px) {
	body .pv-catalog-center-column .products {
		grid-template-columns: minmax(0, 1fr);
	}
}