/* ==================================================================== *
 * Where to Buy — page-where-to-buy.php
 *
 * The checkout / Thank-you system again: cream page, soft off-white cards,
 * IM FELL headings. The store search, list and map inside .dm-wtb__widget
 * are the BuySpiritsNow widget, themed by its own del-maguey.css; this file
 * only frames it.
 * ==================================================================== */

.dm-wtb {
	--dm-wtb-card: color-mix(in srgb, var(--dm-bg-default-white, #FFFFFF) 60%, var(--dm-bg-default-primary, #F3EDE2));
	--dm-wtb-panel: color-mix(in srgb, var(--dm-bg-default-primary, #F3EDE2) 75%, var(--dm-ext-greige-pale, #E8E1D4));
	--dm-wtb-hairline: color-mix(in srgb, var(--color-forest, #062D20) 10%, transparent);

	padding: 20px 0 96px;
	background: var(--dm-bg-default-primary, #F3EDE2);
	color: var(--dm-fg-default-primary, #062D20);
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
}

.dm-wtb__breadcrumb {
	margin-bottom: 20px;
}

/* ---- Heading --------------------------------------------------------- */

.dm-wtb__head {
	margin: 0 0 28px;
}

.dm-wtb__eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--dm-fg-default-secondary, #70695C);
}

.dm-wtb__title {
	margin: 0;
	padding-top: 4px;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 64px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--dm-fg-default-primary, #062D20);
}

.dm-wtb__lede {
	max-width: 620px;
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.5;
}

/* ---- "Can't be delivered" banner ------------------------------------- */

.dm-wtb__context {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.45;
	background: var(--dm-bg-warning-secondary, #FFFCF0);
	border: 1px solid var(--dm-border-warning-strong, #FFD95C);
	border-radius: 8px;
}

.dm-wtb__context p {
	margin: 0;
}

.dm-wtb__context strong {
	font-weight: 700;
}

.dm-wtb__context-img {
	flex: 0 0 auto;
	width: 28px;
	height: 56px;
	object-fit: contain;
}

.dm-wtb__context-clear {
	margin-left: auto;
	font-size: 14px;
	white-space: nowrap;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- The widget ------------------------------------------------------ */

/* A card around it, and room while it loads so the page doesn't jump. */
.dm-wtb__widget {
	min-height: 480px;
	padding: 24px;
	background: var(--dm-wtb-card);
	border: 1px solid var(--dm-wtb-hairline);
	border-radius: 8px;
}

.dm-wtb__widget wtb-main {
	display: block;
}

/* The service turned the brand down: a message in place of the spinner. */
.dm-wtb__widget.is-fallback {
	min-height: 0;
	padding: 28px 32px 32px;
}

.dm-wtb__fallback[hidden] {
	display: none;
}

.dm-wtb__fallback p {
	max-width: 620px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

/* ---- Delivery band --------------------------------------------------- */

.dm-wtb__deliver {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 40px;
	margin: 48px 0 0;
	padding: 40px 48px;
	color: var(--dm-fg-default-white, #FFFFFF);
	background: var(--color-forest, #062D20);
	border-radius: 8px;
}

.dm-wtb__deliver-title {
	margin: 0;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--dm-fg-default-white, #FFFFFF);
}

.dm-wtb__deliver p {
	max-width: 560px;
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--dm-fg-default-white, #FFFFFF) 80%, transparent);
}

.dm-wtb__deliver-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.dm-wtb__deliver-link {
	font-size: 15px;
	color: var(--dm-fg-default-white, #FFFFFF);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.dm-wtb__deliver-link:focus-visible {
	outline: 2px solid var(--dm-border-default-light-strong, #FFFFFF);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Help cards ------------------------------------------------------ */

.dm-wtb__help {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 12px;
}

.dm-wtb__card {
	padding: 28px 32px 32px;
	background: var(--dm-wtb-card);
	border: 1px solid var(--dm-wtb-hairline);
	border-radius: 8px;
}

.dm-wtb__card p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.dm-wtb__card-title {
	margin: 0 0 10px;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--dm-fg-default-primary, #062D20);
}

/* Bottle, name and UPC for the shopper to show at the counter. */
.dm-wtb__upc {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 12px 14px;
	font-size: 14px;
	background: var(--dm-wtb-panel);
	border-radius: 6px;
}

.dm-wtb__upc img {
	width: 18px;
	height: 40px;
	object-fit: contain;
}

.dm-wtb__upc b {
	display: block;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 17px;
	font-weight: 400;
}

.dm-wtb__upc code {
	font-family: inherit;
	letter-spacing: 0.06em;
	color: var(--dm-fg-default-secondary, #70695C);
}

/* Underline on the words, arrow clear of it — as on the Thank-you page. */
.dm-wtb__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
	text-decoration: none;
}

.dm-wtb__link span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.dm-wtb__link svg {
	transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.dm-wtb__link:hover svg,
.dm-wtb__link:focus-visible svg {
	transform: translateX(3px);
}

/* ---- Tablets and phones ---------------------------------------------- */

@media (max-width: 1023px) {
	.dm-wtb__title {
		font-size: 48px;
	}

	.dm-wtb__deliver,
	.dm-wtb__help {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.dm-wtb {
		padding-bottom: 64px;
	}

	.dm-wtb__title {
		font-size: 40px;
	}

	.dm-wtb__lede {
		font-size: 16px;
	}

	.dm-wtb__context {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr);
		align-items: start;
		gap: 4px 14px;
	}

	.dm-wtb__context-img {
		grid-row: 1 / span 2;
	}

	.dm-wtb__context-clear {
		grid-column: 2;
		justify-self: start;
		margin-left: 0;
	}

	.dm-wtb__widget {
		padding: 12px;
	}

	.dm-wtb__deliver {
		padding: 28px 20px;
	}

	.dm-wtb__deliver-title {
		font-size: 30px;
	}

	.dm-wtb__deliver-actions .dm-btn {
		flex: 1 1 100%;
	}

	.dm-wtb__card {
		padding: 24px 20px;
	}
}

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

/* ---- Small desktop (1024-1280) ---------------------------------------
 * No Figma board; shared 1280 rules: capped 1080 container, page title 60,
 * section heading 40, 24px card padding, 4px radius. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-wtb {
		padding-bottom: 80px;
	}

	.dm-wtb__inner {
		/* The capped 1080 container already provides the 100px gutter. */
		padding-inline: 0;
	}

	.dm-wtb__title {
		font-size: 60px;
	}

	.dm-wtb__context,
	.dm-wtb__widget,
	.dm-wtb__card {
		border-radius: 4px;
	}

	.dm-wtb__widget.is-fallback,
	.dm-wtb__card {
		padding: 24px;
	}

	.dm-wtb__deliver {
		padding: 40px;
		border-radius: 4px;
	}

	.dm-wtb__help {
		gap: 24px;
	}

	.dm-wtb__card-title {
		font-size: 24px;
	}
}