/**
 * Our Mezcales page listing block styles.
 * Facet dropdowns, product-card grid, and numbered pagination.
 * Tailwind utilities handle layout; this file covers the interactive bits
 * and design details Tailwind classes don't express inline.
 * Mirrors assets/css/cocktails-listing.css.
 */

.dm-mezcales {
	--dmm-forest: var(--dm-bg-default-tertiary);
	--dmm-cream: var(--dm-bg-default-primary);

	/* Full-width top divider matching the header's border. */
	border-top: 1px solid color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
	padding-top: 1.7rem;
	padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
	.dm-mezcales {
		padding-top: 1.3rem;
		padding-bottom: 5rem;
	}
}

/* ------------------------------------------------------------------ *
 * Toolbar / dropdowns
 * ------------------------------------------------------------------ */
.dm-mezcales-filters {
	column-gap: 2.5rem;
}

.dm-mezcales-dd {
	position: relative;
}

.dm-mezcales-dd__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--dmm-forest);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.25rem 0;
	white-space: nowrap;
}

.dm-mezcales-dd__caret {
	transition: transform 0.2s ease;
}

.dm-mezcales-dd.is-open .dm-mezcales-dd__caret {
	transform: rotate(180deg);
}

.dm-mezcales-dd__panel {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 40;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--dm-bg-default-white);
	border: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
	border-radius: 0.6rem;
	box-shadow: 0 12px 30px color-mix(in srgb, var(--color-forest) 15%, transparent);
	padding: 0.5rem;
}

.dm-mezcales-dd--sort .dm-mezcales-dd__panel {
	right: 0;
}

.dm-mezcales-dd__opt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.4rem;
	font-size: 0.92rem;
	color: var(--dmm-forest);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dm-mezcales-dd__opt:hover {
	background: color-mix(in srgb, var(--color-forest) 6%, transparent);
}

.dm-mezcales-dd__opt input {
	accent-color: var(--dmm-forest);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Muted per-option product count, e.g. "San Luis Del Rio (2)". */
.dm-mezcales-dd__count {
	color: color-mix(in srgb, var(--color-forest) 50%, transparent);
	font-variant-numeric: tabular-nums;
}

.dm-mezcales-clear {
	/* Sit at the left of the filter list (before the dropdowns). */
	order: -1;
	margin-right: 0.5rem;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	font-weight: 500;
	color: var(--dmm-forest);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Mobile Filter & Sort drawer
 *
 * Desktop: the drawer wrappers are transparent (display: contents) so the
 * facet dropdowns flow inline in the toolbar exactly as before; the trigger,
 * overlay, header and footer are hidden.
 * Mobile (<768px): the toolbar collapses to a "Sort & Filter" button that opens
 * a full-height sheet where each facet becomes an accordion section.
 * Mirrors assets/css/cocktails-listing.css.
 * ------------------------------------------------------------------ */
.dm-mezcales-filter-trigger { display: none; }
.dm-mezcales-clear-mobile { display: none; }

.dm-mezcales-drawer,
.dm-mezcales-drawer__panel,
.dm-mezcales-drawer__body { display: contents; }

.dm-mezcales-drawer__overlay,
.dm-mezcales-drawer__header,
.dm-mezcales-drawer__footer { display: none; }

/* Scroll lock applied to <body> while the drawer is open. */
.dm-mezcales-drawer-lock { overflow: hidden; }

@media (max-width: 767px) {
	/* Toolbar: results count (left) + trigger (right) on one row. */
	.dm-mezcales-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.dm-mezcales-count-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.dm-mezcales-clear-mobile {
		display: inline-block;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-weight: 700;
		color: var(--dmm-forest);
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		text-decoration: underline;
	}

	.dm-mezcales-clear-mobile[hidden] {
		display: none;
	}

	/* Trigger button — filled forest pill "Sort & Filter". */
	.dm-mezcales-filter-trigger {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
		font-family: var(--font-default);
		font-size: 1rem;
		font-weight: 500;
		color: var(--dm-fg-default-white);
		background: var(--dmm-forest);
		border: 0;
		border-radius: 9999px;
		padding: 0.7rem 1.5rem;
		cursor: pointer;
	}

	.dm-mezcales-filter-trigger__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 9999px;
		background: var(--dmm-cream);
		color: var(--dmm-forest);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
	}

	.dm-mezcales-filter-trigger__count[hidden] {
		display: none;
	}

	/* Overlay + sheet */
	.dm-mezcales-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		visibility: hidden;
		pointer-events: none;
	}

	.dm-mezcales-drawer.is-open {
		visibility: visible;
		pointer-events: auto;
	}

	.dm-mezcales-drawer__overlay {
		display: block;
		position: absolute;
		inset: 0;
		background: color-mix(in srgb, var(--color-forest) 50%, transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.dm-mezcales-drawer.is-open .dm-mezcales-drawer__overlay {
		opacity: 1;
	}

	.dm-mezcales-drawer__panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		background: var(--dm-bg-default-white);
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.dm-mezcales-drawer.is-open .dm-mezcales-drawer__panel {
		transform: none;
	}

	/* Header */
	.dm-mezcales-drawer__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.25rem;
		border-bottom: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
		flex-shrink: 0;
	}

	.dm-mezcales-drawer__title {
		font-family: var(--font-display, serif);
		font-weight: 400;
		font-size: 24px;
		line-height: 1.2;
		color: var(--dmm-forest);
	}

	.dm-mezcales-drawer__close {
		display: inline-flex;
		background: none;
		border: 0;
		color: var(--dmm-forest);
		cursor: pointer;
		padding: 0.25rem;
	}

	/* Scrollable body */
	.dm-mezcales-drawer__body {
		display: block;
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0.5rem 1.25rem 1.25rem;
	}

	/* Filters become a vertical accordion list */
	.dm-mezcales-filters {
		display: block;
		column-gap: 0;
	}

	.dm-mezcales-dd {
		border-bottom: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
	}

	.dm-mezcales-dd__btn {
		display: flex;
		width: 100%;
		font-size: 1.05rem;
		font-weight: 500;
		padding: 0.9rem 0;
		white-space: normal;
	}

	.dm-mezcales-dd__caret {
		margin-left: auto;
	}

	/* Panel expands inline (not an absolute popover) */
	.dm-mezcales-dd__panel {
		position: static;
		min-width: 0;
		max-height: none;
		overflow: visible;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0.75rem;
	}

	/* Clear All sits at the bottom of the list (order:-1 is a desktop layout). */
	.dm-mezcales-clear {
		order: 0;
		display: block;
		margin: 1.25rem 0 0;
	}

	/* Sticky footer with the Apply button */
	.dm-mezcales-drawer__footer {
		display: flex;
		justify-content: center;
		padding: 1rem 1.25rem;
		border-top: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
		flex-shrink: 0;
	}

	.dm-mezcales-apply {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		width: 100%;
		max-width: 320px;
		padding: 0.85rem 1.75rem;
		font-family: var(--font-default);
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--dm-fg-default-white);
		background: var(--dmm-forest);
		border: 0;
		border-radius: 9999px;
		cursor: pointer;
	}
}

/* ------------------------------------------------------------------ *
 * Results
 * ------------------------------------------------------------------ */
.dm-mezcales-results {
	transition: opacity 0.2s ease;
	margin-top: 1.5rem;
}

.dm-mezcales-results[data-mezcales-loading="true"] {
	opacity: 0.45;
	pointer-events: none;
}

@media (min-width: 768px) {
	.dm-mezcales-results {
		margin-top: 2rem;
	}
}

/* Board rule: product cards have a 280px min-width and the number per row
   adapts to the space available — so the track count is derived from the
   container instead of being pinned to fixed breakpoints. auto-fill (not
   auto-fit) keeps the card at its track width when a filter leaves only one
   or two results, rather than stretching it across the row. The inner min()
   stops the 280px floor from overflowing viewports narrower than that. */
.dm-mezcales-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	row-gap: 2.8rem;
}

@media (min-width: 768px) {
	.dm-mezcales-grid {
		row-gap: 4rem;
	}
}

/* ------------------------------------------------------------------ *
 * Product card
 * ------------------------------------------------------------------ */

/* ---- States (Figma tile board) ------------------------------------
   default — flat, sitting straight on the page background.
   hovered — the tile lifts onto a white surface with a soft elevation,
   the village scene fills the panel and the bottle steps out of the way.
   The curve is the one written on the board. */
.dm-mezcales-card {
	/* Side padding so the copy clears the edge of the white surface that
	   appears on hover; the bottle panel bleeds back out to the card edges
	   with a matching negative margin. */
	padding: 0 16px 16px;
	border-radius: 4px;
	background: transparent;
	transition: 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.dm-mezcales-card:hover,
.dm-mezcales-card:focus-within {
	background: var(--dm-bg-default-white);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--dm-ext-black) 12%, transparent);
}

@media (max-width: 767px) {
	.dm-mezcales-card {
		padding: 0 10px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-mezcales-card {
		transition: none;
	}
}

.dm-mezcales-card__media {
	position: relative;
	margin: 0 -16px; /* full-bleed panel inside the padded card */
	border-radius: 4px 4px 0 0;
	overflow: hidden; /* clips the hover art to the panel */
	/* Mobile: full-width panel with a fixed height (no forced aspect ratio). */
	height: 320px;
	/* Warm cream panel behind the bottle (measured off the Figma tile board).
	   No blurred backdrop here — the flat panel is the design (cocktails cards
	   keep theirs). */
	background: var(--dm-ext-greige-pale);
}

@media (min-width: 768px) {
	.dm-mezcales-card__media {
		height: auto;
		/* Square panel, as drawn on the tile board (463 x 461 in the export). */
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 767px) {
	.dm-mezcales-card__media {
		margin: 0 -10px;
	}
}

.dm-mezcales-card__media img,
.dm-mezcales-card__media .dm-mezcales-noimg {
	position: relative;
	z-index: 1;
}

/* Admin-set tag (e.g. "Best Seller") over the top-left of the bottle panel.
   Text: body/xs/strong — Roboto Condensed 12px / 500 / 140%, white. */
.dm-mezcales-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 1.5rem);
	font-family: var(--font-default);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4; /* 140% */
	color: var(--color-white, var(--dm-bg-default-white));
	background: var(--dm-bg-success-primary);
	border-radius: 6px;
	padding: 0.25rem 0.6rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Keep the bottle from touching the card edges. */
.dm-mezcales-card__media img {
	padding: 1.25rem 0;
	max-height: 100%;
	width: auto;
	margin: 0 auto;
}

/* ---- Hover art -------------------------------------------------------
   That expression's village scene, filling the panel on hover (Figma tile
   board: "Art background that appears on hover", HOVERED state). The
   URL arrives as --dm-card-art on the element; background-image is bound
   only on hover/focus because a browser fetches the background of an
   opacity:0 element just the same, and pulling ~20 scenes on page load for
   an effect most visitors never trigger is not worth it. The fade stays on
   the element so the transition still runs. Same approach as the
   collections grid (see collection-products.css). */
.dm-mezcales-card__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
	pointer-events: none;
}

.dm-mezcales-card:hover .dm-mezcales-card__art,
.dm-mezcales-card a:focus-visible .dm-mezcales-card__art {
	background-image: var(--dm-card-art);
	opacity: 1;
}

/* The scene replaces the bottle rather than sitting behind it, so the
   bottle drops away as the art arrives (board's HOVERED state). */
.dm-mezcales-card__media img,
.dm-mezcales-card__media .dm-mezcales-noimg {
	transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
		transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.dm-mezcales-card:hover .dm-mezcales-card__art + img,
.dm-mezcales-card a:focus-visible .dm-mezcales-card__art + img {
	opacity: 0;
	transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
	.dm-mezcales-card__art,
	.dm-mezcales-card__media img,
	.dm-mezcales-card__media .dm-mezcales-noimg {
		transition: none;
	}
}

/* Title + price row. Title = heading/h5 (IM FELL Double Pica italic 24px). */
.dm-mezcales-card__title {
	font-family: var(--font-display, serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.05;
	color: var(--color-forest, var(--dm-fg-default-primary));
	margin: 0;
	transition: color 0.2s ease;
	/* Hold two lines (2 x line-height) so a name that wraps doesn't push that
	   card's description, meters and buttons below its neighbours' — cards sit
	   in a row/grid with no shared row height of their own, so the space has to
	   be reserved here. Kept exactly two lines tall: any less and a wrapping
	   title overflows the reserve and the row falls out of alignment again. */
	min-height: 2.1em;
}

/* Cap a wrapping name at the two lines the card reserves. */
.dm-mezcales-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dm-mezcales-card__title a:hover {
	color: var(--color-forest-light, var(--dm-ext-forest-light));
}

/* Price + info icon cluster, right-aligned against the title. */
.dm-mezcales-card__price-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.dm-mezcales-card__price {
	font-family: var(--font-default);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--color-forest, var(--dm-fg-default-primary));
	white-space: nowrap;
}

/* The plugin writes the amount as `<strong>`; keep the cluster's own weight. */
.dm-mezcales-card__price strong {
	font-weight: inherit;
}

/* "Currently unavailable" lands in the same span — smaller, and allowed to wrap. */
.dm-mezcales-card__price.pr-usa-lc-product__price--unavailable {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-forest-light, var(--dm-ext-forest-light));
	white-space: normal;
	text-align: right;
}

/* The plugin mount stays empty until a shipping address is known, so the info
   icon has to go with it rather than sit alone against the title. */
.dm-mezcales-card__price-wrap:has(> .dm-mezcales-card__price[hidden]) {
	display: none;
}

/* Same, for browsers without `:has()`. */
.dm-mezcales-card__price[hidden] + .dm-mezcales-card__tip {
	display: none;
}

/* Price info (i) — a tooltip trigger, not a link. */
.dm-mezcales-card__tip {
	position: relative;
	display: inline-flex;
}

.dm-mezcales-card__info {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-forest, var(--dm-fg-default-primary));
	opacity: 0.65;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.dm-mezcales-card__info:hover,
.dm-mezcales-card__info:focus-visible {
	opacity: 1;
}

/* TOOLTIP state from the board: white bubble above the icon, right-aligned to
   it so it stays inside the card. Hover on pointers, focus on keyboards, and a
   tap focuses the button on touch. */
.dm-mezcales-card__tip-bubble {
	position: absolute;
	bottom: calc(100% + 10px);
	right: -6px;
	z-index: 20;
	width: max-content;
	max-width: 260px;
	padding: 12px 16px;
	border-radius: 8px;
	/* hairline keeps the bubble readable once the hovered card turns white */
	border: 1px solid color-mix(in srgb, var(--dm-ext-black) 8%, transparent);
	background: var(--dm-bg-default-white);
	color: var(--dm-fg-default-primary);
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--dm-ext-black) 14%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.dm-mezcales-card__info:hover + .dm-mezcales-card__tip-bubble,
.dm-mezcales-card__info:focus-visible + .dm-mezcales-card__tip-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.dm-mezcales-card__tip-bubble {
		transition: none;
	}
}

.dm-mezcales-card__desc {
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dm-fg-default-secondary);
	margin-top: 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Flavor profile dot meters ---- */
.dm-mezcales-card__flavors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.dm-mezcales-card__flavor-label {
	display: block;
	font-family: var(--font-default);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--dmm-forest);
}

.dm-mezcales-card__dots {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 0.35rem;
}

.dm-mezcales-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dm-ext-stone);
	flex-shrink: 0;
}

.dm-mezcales-dot.is-on {
	background: var(--dmm-forest);
}

/* Filled dots pop in one-by-one on render (initial load + AJAX-inserted cards).
   Only the lit dots animate; the empty track stays put. */
@media (prefers-reduced-motion: no-preference) {
	.dm-mezcales-card__dots .dm-mezcales-dot.is-on {
		animation: dm-mezcales-dot-pop 0.4s var(--dm-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
	}

	.dm-mezcales-card__dots .dm-mezcales-dot:nth-child(1) { animation-delay: 0.04s; }
	.dm-mezcales-card__dots .dm-mezcales-dot:nth-child(2) { animation-delay: 0.10s; }
	.dm-mezcales-card__dots .dm-mezcales-dot:nth-child(3) { animation-delay: 0.16s; }
	.dm-mezcales-card__dots .dm-mezcales-dot:nth-child(4) { animation-delay: 0.22s; }
	.dm-mezcales-card__dots .dm-mezcales-dot:nth-child(5) { animation-delay: 0.28s; }
}

@keyframes dm-mezcales-dot-pop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	60% {
		transform: scale(1.28);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ---- Actions: add-to-cart + compare ---- */
.dm-mezcales-card__actions {
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.dm-mezcales-card__actions {
		margin-top: 1.45rem;
	}
}

.dm-mezcales-card__cart {
	flex: 1 1 55%;
	min-width: 0;
}

/* The LiquidCommerce quick-add shortcode ships its own top margin — strip it so
   the button aligns with Compare. */
.dm-mezcales-card__cart > *,
.dm-mezcales-card__cart .liquidcommerce-quick-add-to-cart {
	margin-top: 0;
}

/* Normalise the LiquidCommerce quick-add button to fill its slot and match the
   design. The shortcode ships its own uppercase/bold/large Tailwind classes;
   these (higher-specificity) rules override them. Text: body/md/regular —
   Roboto Condensed 16px / 400 / 140%, white. */
.dm-mezcales-card__cart a,
.dm-mezcales-card__cart button,
.dm-mezcales-card__cart .liquidcommerce-quick-add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem; /* matches Compare; keeps label + icon on one line */
	width: 100%;
	height: 100%;
	margin-top: 0;
	min-height: 52px;
	box-sizing: border-box;
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4; /* 140% */
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-white, var(--dm-fg-default-white));
	background: var(--dmm-forest);
	border: 1.5px solid var(--dmm-forest);
	border-radius: 9999px;
	padding: 0.75rem 1.1rem;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

/* The plugin's own `.pr-usa-lc-theme .button.pr-usa-lc-btn--primary` rule
   (three classes) sets the 8px panel radius from --pr-usa-lc-radius and
   outweighs the element selector above, so the card button rendered as a
   rounded rectangle. Same trick as the PDP (product-single.css): qualify our
   selector with the plugin's own classes so the full pill wins whichever
   order the two sheets load in.

   The same rule also forces 1.25rem side padding, which left too little room
   for "Add to cart" plus its icon inside the 55% slot, so the label wrapped
   onto two lines. Tightened to 0.75rem here (the theme's own 1.1rem above is
   outranked and never lands) so label and icon sit on one line. */
.dm-mezcales-card__cart .pr-usa-lc-theme .button.pr-usa-lc-product__trigger,
.dm-mezcales-card__cart .pr-usa-lc-theme .button.pr-usa-lc-btn--primary,
.dm-mezcales-card__cart .pr-usa-lc-theme .button.pr-usa-lc-atc {
	border-radius: 9999px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* Cart (bag+) icon after the label — Vector (4).svg.
   Masked, not painted: the SVG hardcodes fill='white', and a background
   image cannot inherit currentColor, so the icon used to stay white while
   the label went forest on the yellow hover. As a mask only its shape is
   used and background-color supplies the ink, so it now tracks the label
   in every state — white on the forest default, #062D20 on hover. */
.dm-mezcales-card__cart button::after,
.dm-mezcales-card__cart a::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 16.6667V3.33333H3.33333C3.33333 2.41667 3.65972 1.63194 4.3125 0.979167C4.96528 0.326389 5.75 0 6.66667 0C7.58333 0 8.36806 0.326389 9.02083 0.979167C9.67361 1.63194 10 2.41667 10 3.33333H13.3333V10.4167H11.6667V5H10V7.5H8.33333V5H5V7.5H3.33333V5H1.66667V15H8.33333V16.6667H0ZM8.33333 3.33333H5C5 2.875 5.16319 2.48264 5.48958 2.15625C5.81597 1.82986 6.20833 1.66667 6.66667 1.66667C7.125 1.66667 7.51736 1.82986 7.84375 2.15625C8.17014 2.48264 8.33333 2.875 8.33333 3.33333Z' fill='white'/%3E%3Cpath d='M13.2739 14.2261H15.4167V15.7739H13.2739V17.9167H11.7261V15.7739H9.58333V14.2261H11.7261V12.0833H13.2739V14.2261Z' fill='white'/%3E%3C/svg%3E");
	mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 16.6667V3.33333H3.33333C3.33333 2.41667 3.65972 1.63194 4.3125 0.979167C4.96528 0.326389 5.75 0 6.66667 0C7.58333 0 8.36806 0.326389 9.02083 0.979167C9.67361 1.63194 10 2.41667 10 3.33333H13.3333V10.4167H11.6667V5H10V7.5H8.33333V5H5V7.5H3.33333V5H1.66667V15H8.33333V16.6667H0ZM8.33333 3.33333H5C5 2.875 5.16319 2.48264 5.48958 2.15625C5.81597 1.82986 6.20833 1.66667 6.66667 1.66667C7.125 1.66667 7.51736 1.82986 7.84375 2.15625C8.17014 2.48264 8.33333 2.875 8.33333 3.33333Z' fill='white'/%3E%3Cpath d='M13.2739 14.2261H15.4167V15.7739H13.2739V17.9167H11.7261V15.7739H9.58333V14.2261H11.7261V12.0833H13.2739V14.2261Z' fill='white'/%3E%3C/svg%3E");
}

.dm-mezcales-card__cart a:hover,
.dm-mezcales-card__cart button:hover {
	opacity: 0.88;
}

.dm-mezcales-card__compare {
	flex: 1 1 45%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4; /* 140%, matches Add to cart */
	letter-spacing: normal;
	text-transform: none;
	color: var(--dmm-forest);
	background: transparent;
	border: 1.5px solid var(--dmm-forest);
	border-radius: 9999px;
	padding: 0.75rem 1.1rem;
	box-sizing: border-box;
	cursor: pointer;
}

/* Mobile: slightly shorter action buttons. */
@media (max-width: 767px) {
	.dm-mezcales-card__cart a,
	.dm-mezcales-card__cart button,
	.dm-mezcales-card__cart .liquidcommerce-quick-add-to-cart,
	.dm-mezcales-card__compare {
		min-height: 46px;
	}
}

.dm-mezcales-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--font-display, serif);
	font-style: italic;
	font-size: 3rem;
	color: color-mix(in srgb, var(--color-forest) 25%, transparent);
}

/* ------------------------------------------------------------------ *
 * In-grid promo banner (spans the full grid width after the 4th card)
 * ------------------------------------------------------------------ */
.dm-mezcales-grid__full {
	grid-column: 1 / -1;
}

.dm-mezcal-banner {
	position: relative;
	display: flex;
	align-items: flex-end; /* mobile: content sits at the bottom */
	overflow: hidden;
	border-radius: 0.375rem;
	/* Definite width: without it, `aspect-ratio` + `min-height` below resolve
	   backwards (height -> width) and blow the banner past the viewport,
	   giving the whole page horizontal scroll at tablet widths. */
	width: 100%;
	max-width: 100%;
	/* Mobile: natural height (no forced aspect ratio), at least the design height. */
	min-height: 518px;
	isolation: isolate;
}

.dm-mezcal-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Gradient for text legibility. Mobile: overall darken (text sits over image).
   Desktop: darken the right where the heading sits (#000000BF → #00000000). */
.dm-mezcal-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Mobile: transparent up top, darkening into the bottom where the copy sits. */
	background: linear-gradient(180deg, transparent 32%, color-mix(in srgb, var(--dm-ext-black) 18%, transparent) 56%, color-mix(in srgb, var(--dm-ext-black) 82%, transparent) 100%);
}

.dm-mezcal-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Left/right padding matches the page gutter (px-4 = 1rem) like other sections. */
	padding: 3rem 1rem;
	color: var(--color-white, var(--dm-fg-default-white));
}

.dm-mezcal-banner__content {
	max-width: 34rem;
}

/* Heading — heading/h2: IM FELL Double Pica, 400, 52px, 110%, -1.04px, white.
   "Discover" (the <em>) renders italic. */
.dm-mezcal-banner__title {
	font-family: var(--font-display, serif);
	font-weight: 400;
	/* Mobile heading-mobile/h2-M: IM FELL Double Pica, 36px, 110%, -0.72px. */
	font-size: 36px;
	line-height: 1.1; /* 110% -> 39.6px */
	letter-spacing: -0.72px;
	color: var(--color-white, var(--dm-fg-default-white));
	margin: 0 0 2rem;
}

.dm-mezcal-banner__title em,
.dm-mezcal-banner__title i {
	font-style: italic;
}

/* Mobile: hold the heading to a tighter, balanced wrap. */
@media (max-width: 767px) {
	.dm-mezcal-banner__title {
		max-width: 19ch;
	}
}

/* White pill button — matches the cocktails listing button (Roboto Condensed,
   16px / 400, forest text on white). */
.dm-mezcal-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 125px;
	padding: 0.6rem 1.75rem;
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-forest, var(--dm-fg-default-primary));
	background: var(--dm-bg-default-white);
	border-radius: 9999px;
	text-decoration: none;
}

@media (min-width: 768px) {
	.dm-mezcal-banner {
		align-items: center;
		min-height: 300px;
		aspect-ratio: 1200 / 360;
		max-height: none;
	}

	.dm-mezcal-banner__overlay {
		background: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--dm-ext-black) 75%, transparent) 100%);
	}

	/* Restore the wide-banner heading size (mobile hardcodes 36px). */
	.dm-mezcal-banner__title {
		font-size: 52px;
		letter-spacing: -0.02em; /* ~-1.04px at 52px */
		margin: 0 0 2.1rem;
	}

	/* Heading + button sit in the right half, vertically centered. */
	.dm-mezcal-banner__inner {
		padding: 3rem 3.5rem;
	}

	/* Push the content block to the right; text + button stay left-aligned
	   within it (button sits under the heading's left edge). */
	.dm-mezcal-banner__content {
		margin-left: auto;
		max-width: 30rem;
	}
}

/* Tablet: 52px is a desktop size and crowds the banner at this width.
   Step down to the h3 size so the heading wraps cleanly. */
@media (min-width: 768px) and (max-width: 1023px) {
	.dm-mezcal-banner__title {
		font-size: 40px;
		margin-bottom: 1.6rem;
	}
}

/* ------------------------------------------------------------------ *
 * Pagination
 * ------------------------------------------------------------------ */
.dm-mezcales-pagination {
	gap: 0.25rem;
}

.dm-mezcales-page,
.dm-mezcales-page-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	border: 0;
	background: none;
	color: var(--dmm-forest);
	font-size: 1.05rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dm-mezcales-page:hover:not(.is-current),
.dm-mezcales-page-arrow:hover:not(.is-disabled) {
	background: color-mix(in srgb, var(--color-forest) 8%, transparent);
}

.dm-mezcales-page.is-current {
	background: var(--dmm-forest);
	color: var(--dm-fg-default-white);
	font-weight: 600;
	cursor: default;
	width: 48px;
	min-width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
}

.dm-mezcales-page-arrow.is-disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "PLP - Small Desktop" (2021:16519):
 *   ui_filters (2021:16559)   72 tall: a 1080 row inset 16 top/bottom, the
 *                             result count then the filter buttons from x=202,
 *                             each button 40 tall with 16px side padding.
 *   Product List (2021:16583) three 344 cards per row, 24 apart, 48 between
 *                             rows - 344*3 + 24*2 = 1080.
 *   ui_paging (2021:16597)    48px items 2px apart, 24px arrows.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-mezcales-filters {
		column-gap: 0;                  /* the buttons carry their own padding */
	}

	/* Board: h-40, pl-16 pr-12, 4px between label and chevron. */
	.dm-mezcales-dd__btn {
		height: 40px;
		padding-left: 16px;
		padding-right: 12px;
		gap: 4px;
		font-size: 16px;                /* body/md/regular */
		line-height: 1.4;
		letter-spacing: 0;
	}

	.dm-mezcales-dd__caret {
		width: 20px;
		height: 20px;
	}

	/* "Clear All Filters (2)" is an underlined text button on the board. */
	.dm-mezcales-clear {
		height: 40px;
		padding-left: 16px;
		padding-right: 12px;
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: 0;
		text-decoration: underline;
	}

	/* Two classes so this outranks the inline `text-sm md:text-base` utility. */
	.dm-mezcales-toolbar .dm-mezcales-count {
		font-size: 16px;                /* body/md/regular */
		line-height: 1.4;
	}

	/* Filter bar is 72 tall: 16 above the 40px buttons, then 16 + the list's
	   24 top padding = 40 down to the first card row. */
	.dm-mezcales {
		padding-top: 16px;
	}

	/* Two classes so this outranks the inline `mt-8 md:mt-12` utilities. */
	.dm-mezcales .dm-mezcales-results {
		margin-top: 40px;
	}

	/* The in-grid promo banner is 1080 x 468 here, not full-bleed. */
	.dm-mezcales-grid__full .dm-mezcal-banner {
		aspect-ratio: 1080 / 468;
		border-radius: 4px;             /* radius/r-xs */
	}

	/* banner-content (2021:19466): a 520 column, 24 in from the right edge,
	   vertically centred; 32 between heading and button. */
	.dm-mezcales-grid__full .dm-mezcal-banner__inner {
		padding: 0 24px;
	}

	.dm-mezcales-grid__full .dm-mezcal-banner__content {
		max-width: 520px;
	}

	.dm-mezcales-grid__full .dm-mezcal-banner__title {
		margin-bottom: 32px;
	}

	.dm-mezcales-grid__full .dm-mezcal-banner__btn {
		padding-inline: 24px;           /* board: h-48, px-24 */
	}

	/* The PHP injects the banner after the 4th card, which with three columns
	   strands one card on row 2. Both boards put it after the first row, so
	   push the 4th card onward behind it. Equal `order` values keep DOM order,
	   so cards 1-3 and the banner stay at 0 and everything after moves to 1. */
	.dm-mezcales-grid > :nth-child(n+4) {
		order: 1;
	}

	.dm-mezcales-grid > .dm-mezcales-grid__full {
		order: 0;
	}

	/* Three fixed columns, not auto-fill: the board is 344/24/344/24/344. */
	.dm-mezcales-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 48px;
	}

	.dm-mezcales-pagination {
		gap: 2px;
	}

	.dm-mezcales-page,
	.dm-mezcales-page-arrow {
		min-width: 48px;
		height: 48px;
		font-size: 16px;
	}
}