/**
 * Shop Mezcales block (blocks/products/shop-mezcales.php)
 *
 * Left header (heading + intro + CTA + slider controls) beside a right
 * horizontal peek-slider of the shared mezcales product cards. Card visuals come
 * from mezcales-listing.css; this file owns the two-column layout + slider chrome.
 */

.dm-shop {
	/* The mezcales cards read these from their .dm-mezcales listing wrapper,
	   which this block doesn't have — redefine them so the Add-to-cart fill and
	   other --dmm-* tokens resolve (otherwise the button renders unfilled). */
	--dmm-forest: var(--dm-bg-default-tertiary);
	--dmm-cream: var(--dm-bg-default-primary);
	background-color: var(--dm-bg-default-primary);
	padding-block: clamp(3rem, 6vw, 5.5rem);
	overflow: hidden;
}

.dm-shop__inner {
	display: grid;
	grid-template-columns: minmax(260px, 30%) 1fr;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: stretch;
	padding-inline: 16px;
}

/* ---- Left column ---------------------------------------------------- */
.dm-shop__left {
	display: flex;
	flex-direction: column;
}

.dm-shop__heading {
	margin: 0;
	color: var(--dm-fg-default-primary);                      /* Semantics/fg/default/primary */
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-style: normal;                  /* roman */
	font-size: 40px;                     /* Figma: 40px, not fluid */
	line-height: 1.1;                    /* Figma: 110% -> 44px */
	letter-spacing: -0.8px;              /* Figma: -0.8px (= -0.02em at 40px) */
}

.dm-shop__intro {
	margin: 0.85rem 0 0;
	max-width: 30rem;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

/* Forest pill CTA. */
.dm-shop__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 48px;
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
	padding: 0 1.75rem;
	border-radius: 999px;
	background: var(--dm-bg-default-tertiary);
	color: var(--dm-fg-default-white);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

/* A track with nothing to scroll gets no scroll chrome at all. Toggled by
   shop-mezcales.js from the real overflow, so a slider that fits on desktop
   but overflows on a narrow screen still gets its arrows back there. */
.dm-shop--static .dm-shop__controls {
	display: none;
}

/* Controls (progress + arrows) pinned to the bottom of the left column. */
.dm-shop__controls {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: auto;
	padding-top: 2.5rem;
}

.dm-shop__progress {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	background: color-mix(in srgb, var(--color-forest) 18%, transparent);
	border-radius: 2px;
	overflow: hidden;
}

.dm-shop__progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 30%;                          /* set by JS from the visible fraction */
	background: var(--dm-bg-default-tertiary);
	border-radius: 2px;
	transition: left 0.15s ease, width 0.15s ease;
}

.dm-shop__arrows {
	display: flex;
	gap: 0.65rem;
	flex: 0 0 auto;
}

.dm-shop__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--dm-border-default-dark-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--dm-fg-default-primary);
	cursor: pointer;
}

/* ---- Right slider --------------------------------------------------- */
/* Left column stays inside the container; the slider bleeds to the right
   viewport edge. The negative right margin (= half the container's side space)
   grows the auto-width slider out to the screen edge at every breakpoint. */
.dm-shop__slider {
	min-width: 0;                        /* allow the grid track to shrink */
	margin-right: calc(50% - 50vw);
}

.dm-shop__track {
	display: flex;
	gap: clamp(0.85rem, 1.4vw, 1.25rem);
	/* Room inside the scroll box for what paints outside a card: the hovered
	   tile's elevation (0 12px 30px, so ~18px above and ~42px below) and a
	   focused button's 4px ring. The matching negative margins put the track
	   back exactly where it was, so nothing shifts. Without this the scroll
	   box trims the shadow a few px past the card. */
	padding-block: 24px 48px;
	padding-left: 36px;
	margin-block: -24px -48px;
	margin-left: -36px;
	scroll-padding-left: 36px;
	/* That 36px of room also lets the card scrolled off to the left peek back
	   into view, which reads as a hard seam against the heading column. Fade
	   the strip out instead: the ramp ends exactly where the first card starts,
	   so the cards themselves are never dimmed - only what is passing behind. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
	mask-image: linear-gradient(to right, transparent 0, #000 36px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;               /* hide native scrollbar (Firefox) */
	-ms-overflow-style: none;
}

.dm-shop__track::-webkit-scrollbar {
	display: none;                       /* hide native scrollbar (WebKit) */
}

/* Fixed-width cards → peek slider. */
.dm-shop__track > .dm-mezcales-card {
	flex: 0 0 clamp(260px, 24vw, 330px);
	scroll-snap-align: start;
}

/* Two-column (desktop) layout: the slider bleeds to the right viewport edge, which
   pushes the last card's snap-start past the max scroll offset. With `mandatory`
   start-snapping the scroll then can't rest there and snaps back, leaving the final
   card(s) unreachable. Relax to `proximity` (still snaps mid-track, never traps the
   end) and add trailing room equal to the bleed so the last card clears the edge. */
@media (min-width: 901px) {
	.dm-shop__track {
		scroll-snap-type: x proximity;
		padding-right: calc(50vw - 50%);
	}
}

/* Village product sliders (blocks/villages/maps.php) can hold as few as 2-4
   cards. The slider keeps its full viewport-edge bleed (see below), but that
   bleed inflates the track's scroll area past the screen edge - so with only a
   few cards the content is narrower than the scroll area and the trailing card
   sits in the clipped off-screen region, unreachable. Adding trailing scroll
   room equal to the bleed guarantees the track overflows enough to bring the
   last card fully into view. Snapping off so it can rest there. Scoped so the
   8-card Shop block is untouched. */
.dm-map--products .dm-shop__track {
	scroll-snap-type: none;
	padding-right: calc(50vw - 50%);
}

/* ---- Responsive: stack (header above, slider below) ----------------- */
@media (max-width: 900px) {
	.dm-shop__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.dm-shop__controls {
		margin-top: 1.75rem;
		padding-top: 0;
	}

	/* Stacked: keep the slider bleeding to the right screen edge (cancel the
	   inner's 16px right padding) so the peek card reaches the edge instead of
	   being clipped short of it. */
	.dm-shop__slider {
		margin-right: -16px;
	}

	.dm-shop__track > .dm-mezcales-card {
		flex-basis: 76vw;
		max-width: 320px;
	}
}

/* Mobile: more top/bottom breathing room. */
@media (max-width: 767px) {
	.dm-shop {
		padding-block: 5rem;
	}

	.dm-shop__intro {
		margin: 0.95rem 0 0;
		line-height: 1.3;                /* a touch tighter on mobile */
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "Home Page - Small Desktop" > image-product-carousel (1987:16243):
 * px-100 py-80, gap 16; a fixed 500px left column with 32px of inner right
 * padding (so the text measures 468); title 52/110%/-1.04px; 16px to the
 * intro, 32px to the button; the controls row sits on the column's baseline
 * with a 32px gap and 48px arrows 16px apart.
 *
 * Card internals (image padding, info padding, flavour rows) are deliberately
 * NOT touched here — .dm-mezcales-card is shared with the mezcales listing and
 * the village sliders, which have their own boards.
 *
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-shop {
		padding-block: 80px;
	}

	.dm-shop__inner {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
		grid-template-columns: 500px 1fr;
		gap: 16px;
	}

	.dm-shop__left {
		padding-right: 32px;
	}

	.dm-shop__heading {
		font-size: 52px;                /* heading/h2 */
		letter-spacing: -0.02em;        /* -1.04px at 52px */
	}

	.dm-shop__intro {
		margin-top: 16px;
		max-width: none;                /* fills the 468 column */
	}

	.dm-shop__cta {
		margin-top: 32px;
		padding: 0 24px;
	}

	.dm-shop__controls {
		gap: 32px;
	}

	.dm-shop__arrows {
		gap: 16px;
	}

	.dm-shop__arrow {
		width: 48px;
		height: 48px;
	}

	.dm-shop__track {
		gap: 16px;
	}
}

/* ---- Edge bleed, every desktop width -------------------------------- *
 * From 901px the slider runs past the container to the screen edge, and the
 * track needs the same distance as trailing room so its last card can scroll
 * in to the container's right edge. The old pair of rules got both wrong:
 * calc(50% - 50vw) on the slider took 50% of its own grid column, not of the
 * container, so it overshot the screen by up to a couple of hundred px - the
 * track ran on under the clip and its last card could never come into view.
 *
 * The distance is (screen - container) / 2 + the inner's side padding, with
 * the container as tailwind.css sizes `.container`: 768 below 1024, capped
 * at 1080 (no padding) through 1280, then 1280 and 1536. 100vw counts the
 * scrollbar, so on Windows the last card stops ~8px short of the line -
 * nothing more.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 901px) {
	.dm-shop {
		--dm-shop-edge: calc((100vw - 768px) / 2 + 16px);
	}
}

@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-shop {
		--dm-shop-edge: calc((100vw - min(1080px, 100vw - 32px)) / 2);
	}
}

@media (min-width: 1281px) {
	.dm-shop {
		--dm-shop-edge: calc((100vw - 1280px) / 2 + 16px);
	}
}

@media (min-width: 1536px) {
	.dm-shop {
		--dm-shop-edge: calc((100vw - 1536px) / 2 + 16px);
	}
}

@media (min-width: 901px) {
	.dm-shop__slider {
		margin-right: calc(-1 * var(--dm-shop-edge));
	}

	/* Three classes: outranks the per-slider padding-right rules here
	   (.dm-map--products) and in village-single.css (.dm-map--villages),
	   whichever stylesheet loads last. */
	.dm-shop .dm-shop__slider > .dm-shop__track {
		padding-right: var(--dm-shop-edge);
	}
}

/* Stacked (<=900): the slider still bleeds to the right screen edge, so give
   the track the page gutter as trailing room - otherwise the last card ends
   flush on the screen edge (home Shop) or ~8px from it (village sliders,
   whose calc(50vw - 50%) resolves to half the 16px bleed here). The left edge
   keeps its fade mask, which is the intended treatment there. */
@media (max-width: 900px) {
	.dm-shop .dm-shop__slider > .dm-shop__track {
		padding-right: 16px;
	}
}