/*
 * Socorro 2026 refresh. Styles for the m33- blocks, header and footer.
 * Values come from the Socorro Figma file (Home, desktop 1440 / mobile 375).
 *
 * Fonts: Futura PT and Oso Serif from the client's Adobe Fonts web project.
 * Futura PT weights on the web: 400 Book, 500 Medium, 600 Demi, 700 Heavy.
 * Futura PT Bold is a separate family (futura-pt-bold), used via --m33-sans-bold.
 */

:root {
	--m33-teal-100: #c7f9f9;
	--m33-teal-200: #97eff2;
	--m33-teal-500: #128790;
	--m33-teal-600: #126c79;
	--m33-teal-700: #145964;
	--m33-copper-400: #c4884b;
	--m33-copper-500: #b3733d;
	--m33-copper-600: #9b5a33;
	--m33-ink: #1e1e1e;
	--m33-grey-200: #e6e6e6;
	--m33-grey-300: #d3d3d3;
	--m33-grey-500: #727272;
	--m33-grey-600: #535353;
	--m33-grey-700: #404040;
	--m33-white: #fff;
	--m33-paper-color: #efe4d0;
	--m33-paper: url("img/paper.jpg");

	--m33-sans: "futura-pt", "Futura", "Century Gothic", sans-serif;
	--m33-sans-bold: "futura-pt-bold", "futura-pt", "Futura", "Century Gothic", sans-serif;
	--m33-serif-italic: "EB Garamond", Georgia, serif;
	--m33-display-serif: "oso-serif-variable", Georgia, serif;

	--m33-max: 1280px;
	--m33-gutter: 32px;
	--m33-btn-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 -2px 0 rgba(0, 0, 0, .05);
}

/* Base ------------------------------------------------------------------ */

.m33-site {
	margin: 0;
	background: var(--m33-white);
	color: var(--m33-ink);
	font-family: var(--m33-sans);
	-webkit-font-smoothing: antialiased;
}

.m33-site #wrapper { overflow-x: clip; }

[class^="m33-"] *,
[class^="m33-"] *::before,
[class^="m33-"] *::after { box-sizing: border-box; }

.m33-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.m33-skip {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--m33-teal-600);
	color: var(--m33-white);
	font: 500 16px/24px var(--m33-sans);
}
.m33-skip:focus { top: 16px; }

.m33-container {
	width: 100%;
	max-width: var(--m33-max);
	margin: 0 auto;
}

.m33-paper {
	background-color: var(--m33-paper-color);
	background-image: var(--m33-paper);
	background-size: 512px 512px;
	background-position: top left;
}

.m33-icon { width: 20px; height: 20px; flex: none; }

.m33-empty {
	padding: 24px;
	border: 1px dashed var(--m33-grey-300);
	font: 400 16px/24px var(--m33-sans);
	text-align: center;
}

/* Type ------------------------------------------------------------------ */

.m33-site h1, .m33-site h2, .m33-site h3 { text-transform: none; }

.m33-h2 {
	margin: 0;
	font: 500 36px/44px var(--m33-sans);
	letter-spacing: -0.02em;
	color: var(--m33-ink);
}

.m33-display {
	margin: 0;
	font: 400 60px/72px var(--m33-sans);
	letter-spacing: -0.02em;
	color: var(--m33-teal-600);
}

.m33-serif-italic {
	margin: 0;
	font: italic 400 18px/28px var(--m33-serif-italic);
}

.m33-lead {
	margin: 0;
	font: 400 20px/30px var(--m33-sans);
	color: var(--m33-ink);
}

.m33-prose {
	font: 400 18px/28px var(--m33-sans);
	color: var(--m33-ink);
}
.m33-prose p { margin: 0 0 18px; }
.m33-prose p:last-child { margin-bottom: 0; }
.m33-prose a { color: var(--m33-teal-600); text-decoration: underline; text-underline-offset: 2px; }

/* Buttons --------------------------------------------------------------- */

.m33-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border: 0;
	border-radius: 0;
	background: var(--m33-teal-600);
	color: var(--m33-white);
	box-shadow: var(--m33-btn-shadow);
	font: 500 16px/24px var(--m33-sans);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.m33-btn:hover, .m33-btn:focus-visible { background: var(--m33-teal-700); color: var(--m33-white); text-decoration: none; }
.m33-btn:focus-visible, .m33-textlink:focus-visible, .m33-faq__toggle:focus-visible,
.m33-nav a:focus-visible, .m33-header__cart:focus-visible, .m33-header__burger:focus-visible,
.m33-footer a:focus-visible, .m33-newsletter__input:focus-visible {
	outline: 2px solid var(--m33-teal-500);
	outline-offset: 2px;
}

.m33-btn--lg { padding: 12px 20px; }
.m33-btn--teal { background: var(--m33-teal-600); }

.m33-btn--outline {
	background: var(--m33-white);
	color: var(--m33-copper-400);
	border: 2px solid var(--m33-copper-400);
	box-shadow: none;
	padding: 8px 14px;
}
.m33-btn--outline:hover, .m33-btn--outline:focus-visible { background: var(--m33-copper-400); color: var(--m33-white); }

.m33-textlink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: 500 16px/24px var(--m33-sans);
	text-transform: uppercase;
	color: var(--m33-teal-700);
	text-decoration: none;
}
.m33-textlink:hover { color: var(--m33-teal-500); text-decoration: underline; text-underline-offset: 3px; }

/* Header ---------------------------------------------------------------- */

.m33-header {
	position: relative;
	z-index: 50;
	background: var(--m33-white);
}

.m33-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: var(--m33-max);
	height: 72px;
	margin: 0 auto;
	padding: 0 var(--m33-gutter);
}

.m33-header__logo { display: block; flex: none; width: 130px; }
.m33-header__logo img { display: block; width: 100%; height: auto; }

.m33-nav { flex: 1; }
.m33-nav ul { list-style: none; margin: 0; padding: 0; }
.m33-nav__menu { display: flex; align-items: center; gap: 2px; }
.m33-nav__menu > li { position: relative; }
.m33-nav a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 8px;
	font: 700 14px/20px var(--m33-sans);
	color: var(--m33-grey-700);
	text-decoration: none;
}
.m33-nav a:hover, .m33-nav .current-menu-item > a, .m33-nav .current-menu-ancestor > a { color: var(--m33-teal-600); }
.m33-nav .menu-item-has-children > a::after {
	content: "";
	width: 8px; height: 8px;
	margin-left: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.m33-nav .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 220px;
	padding: 8px;
	background: var(--m33-white);
	box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
	border: 1px solid var(--m33-grey-200);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.m33-nav li:hover > .sub-menu,
.m33-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.m33-nav .sub-menu a { display: flex; padding: 8px 12px; font-weight: 500; }

.m33-header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.m33-header__cart { display: inline-flex; color: var(--m33-ink); }
.m33-header__cart .m33-icon { width: 24px; height: 24px; }
.m33-header__cart:hover { color: var(--m33-teal-600); }
.m33-header__burger {
	display: none;
	padding: 8px;
	margin-right: -8px;
	border: 0;
	background: none;
	color: var(--m33-ink);
	cursor: pointer;
}
.m33-header__burger .m33-icon { width: 24px; height: 24px; }

.m33-drawer[hidden] { display: none; }
.m33-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(11, 38, 45, .5);
}
.m33-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(360px, 100%);
	padding: 72px 24px 32px;
	overflow-y: auto;
	background: var(--m33-white);
}
.m33-drawer__close {
	position: absolute;
	top: 16px; right: 16px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--m33-ink);
	cursor: pointer;
}
.m33-drawer__close .m33-icon { width: 24px; height: 24px; }
.m33-drawer__menu, .m33-drawer__menu ul { list-style: none; margin: 0; padding: 0; }
.m33-drawer__menu > li { border-bottom: 1px solid var(--m33-grey-200); }
.m33-drawer__menu a {
	display: block;
	padding: 14px 0;
	font: 700 18px/28px var(--m33-sans);
	color: var(--m33-ink);
	text-decoration: none;
}
.m33-drawer__menu .sub-menu { padding: 0 0 12px 16px; }
.m33-drawer__menu .sub-menu a { padding: 8px 0; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--m33-grey-600); }
.m33-drawer-open { overflow: hidden; }

/* Hero ------------------------------------------------------------------ */

.m33-hero {
	--m33-hero-h: 450px;
	position: relative;
	z-index: 0;
	height: var(--m33-hero-h);
	padding: 0 80px;
}
/* The agave photo is pinned to the top of the viewport, as in the Figma
   prototype (Background layer: 1440x965 desktop, 375x942 mobile). Every
   section after the hero scrolls over it, and below it the page is white.
   position: fixed (not background-attachment: fixed) so it also holds
   still on iOS Safari. */
.m33-hero__bg {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 965px;
	z-index: -1;
	background-color: #5e7a72;
	background-size: cover;
	background-position: center;
}
.m33-hero__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: var(--m33-max);
	height: 100%;
	margin: 0 auto;
}
.m33-hero__title { margin: 0; }
.m33-hero__lockup { display: block; width: 413px; max-width: 100%; height: auto; }
.m33-hero__title--text {
	font: 400 64px/1 var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
	color: var(--m33-white);
	text-align: center;
	text-transform: uppercase;
}

/* Lifestyle band -------------------------------------------------------- */

.m33-band {
	position: relative;
	z-index: 1;
	padding: 0 80px;
}
.m33-band__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: var(--m33-max);
	min-height: 529px;
	margin: 0 auto;
	padding: 16px;
	background-color: #3a3a3a;
	background-size: cover;
	background-position: center;
}
.m33-band__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(30, 30, 30, .6);
	mix-blend-mode: multiply;
}
.m33-band--tall .m33-band__frame { min-height: 609px; }
.m33-band__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 600px;
	text-align: center;
	color: var(--m33-white);
}
.m33-band--tall .m33-band__text { max-width: 768px; }
.m33-band__heading {
	margin: 0;
	font: 400 48px/44px var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
	letter-spacing: -0.02em;
	color: var(--m33-white);
}
.m33-band__body {
	margin: 0;
	font: 400 20px/30px var(--m33-sans);
	color: var(--m33-white);
}

/* Image and text -------------------------------------------------------- */

.m33-image-text {
	position: relative;
	z-index: 1;
	max-width: var(--m33-max);
	margin: 0 auto;
	padding: 64px 32px;
}
.m33-image-text .m33-container { display: flex; flex-direction: column; gap: 10px; }
.m33-image-text__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 32px;
	padding: 32px;
}
.m33-image-text__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 31px;
	padding: 0 16px;
	align-self: start;
}
.m33-image-text__accent { display: block; color: var(--m33-teal-500); }
.m33-image-text__media { position: relative; min-height: 340px; }
.m33-image-text__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m33-image-text__row--img-left .m33-image-text__media { order: -1; }

/* Expressions ----------------------------------------------------------- */

.m33-expressions {
	position: relative;
	z-index: 1;
	max-width: var(--m33-max);
	margin: 0 auto;
	padding: 64px 64px 32px;
}
.m33-expressions::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	top: 362px;
	background-color: var(--m33-paper-color);
	background-image: var(--m33-paper);
	background-size: 512px 512px;
}
.m33-expressions .m33-container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.m33-expressions__heading { text-align: center; color: var(--m33-white); }
.m33-expressions__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	padding: 16px;
}
.m33-expressions__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 8px;
	--m33-tone: var(--m33-teal-500);
	--m33-tone-hover: var(--m33-teal-600);
}
.m33-tone--reposado { --m33-tone: var(--m33-copper-500); --m33-tone-hover: var(--m33-copper-600); }
.m33-tone--anejo { --m33-tone: var(--m33-ink); --m33-tone-hover: #000; }
.m33-expressions__media { display: flex; justify-content: center; width: 100%; height: 400px; }
.m33-expressions__bottle { display: block; width: auto; max-width: 100%; height: 400px; object-fit: contain; }
.m33-expressions__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	text-align: center;
}
.m33-expressions__body .m33-serif-italic { margin-top: -8px; color: var(--m33-ink); }
.m33-expressions__name {
	margin: 0;
	font: 700 36px/44px var(--m33-sans-bold);
	letter-spacing: -0.02em;
	color: var(--m33-tone);
}
.m33-tone--anejo .m33-expressions__name { color: var(--m33-ink); }
.m33-btn--tone { background: var(--m33-tone); }
.m33-btn--tone:hover, .m33-btn--tone:focus-visible { background: var(--m33-tone-hover); }
.m33-rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(18, 135, 144, .35);
}

/* Cocktails ------------------------------------------------------------- */

.m33-cocktails {
	position: relative;
	z-index: 1;
	max-width: var(--m33-max);
	margin: 0 auto;
	padding: 16px;
}
.m33-cocktails .m33-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.m33-cocktails__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 768px;
	padding: 32px 0;
	text-align: center;
}
.m33-cocktails__eyebrow { color: var(--m33-copper-600); }
.m33-cocktails__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
	padding: 16px;
}
.m33-cocktails__card {
	display: flex;
	flex-direction: column;
	height: 600px;
	overflow: hidden;
	background: var(--m33-white);
}
.m33-cocktails__media {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: var(--m33-grey-200);
}
.m33-cocktails__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	transition: transform .4s ease;
}
.m33-cocktails__card:hover .m33-cocktails__media img { transform: scale(1.03); }
.m33-cocktails__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 32px;
	min-height: 189px;
}
.m33-cocktails__name { margin: 0; font: 700 30px/38px var(--m33-sans-bold); color: var(--m33-ink); }
.m33-cocktails__name a { color: inherit; text-decoration: none; }
.m33-cocktails__made { margin: 0; font: 700 18px/28px var(--m33-sans); color: var(--m33-ink); }
.m33-cocktails__more {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 128px;
	padding: 16px 0;
}

/* FAQ ------------------------------------------------------------------- */

.m33-faq {
	position: relative;
	z-index: 1;
	max-width: var(--m33-max);
	margin: 0 auto;
	padding: 32px;
}
.m33-faq .m33-container { display: flex; flex-direction: column; gap: 64px; padding: 0 32px; }
.m33-faq__intro { display: flex; flex-direction: column; gap: 12px; max-width: 768px; }
.m33-faq__eyebrow { color: var(--m33-copper-500); }
.m33-faq__lead { margin: 8px 0 0; font: 400 20px/30px var(--m33-sans); color: var(--m33-grey-600); }
.m33-faq__list { display: flex; flex-direction: column; gap: 16px; }
.m33-faq__item { padding: 24px; }
.m33-faq__q { margin: 0; font: inherit; }
.m33-faq__toggle {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 16px 16px 0 0;
	background: transparent;
	font: 700 16px/24px var(--m33-sans);
	color: var(--m33-ink);
	text-align: left;
	cursor: pointer;
}
.m33-faq__item.is-open .m33-faq__toggle { background: var(--m33-white); }
.m33-faq__item:not(.is-open) .m33-faq__toggle { border-radius: 16px; }
.m33-faq__toggle:hover .m33-faq__qtext { color: var(--m33-teal-600); }
.m33-faq__icon { display: inline-flex; flex: none; color: var(--m33-grey-400, #a3a3a3); }
.m33-faq__icon .m33-icon { width: 24px; height: 24px; }
.m33-faq__minus { display: none; }
.m33-faq__item.is-open .m33-faq__plus { display: none; }
.m33-faq__item.is-open .m33-faq__minus { display: block; }
.m33-faq__a {
	padding: 0 16px 16px 56px;
	margin-top: -4px;
	border-radius: 0 0 16px 16px;
	background: var(--m33-white);
}
.m33-faq__a .m33-prose { font-size: 16px; line-height: 24px; color: var(--m33-grey-600); }

/* Footer ---------------------------------------------------------------- */

.m33-footer {
	--m33-icon-bg: var(--m33-teal-500);
	position: relative;
	z-index: 1;
	max-width: var(--m33-max);
	margin: 0 auto;
	padding: 64px 0 48px;
	background: var(--m33-teal-500);
	color: var(--m33-white);
}
.m33-footer__inner { display: flex; flex-direction: column; gap: 64px; padding: 0 32px; }
.m33-footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 48px; }
.m33-footer__brand { display: flex; flex-direction: column; gap: 32px; }
.m33-footer__logo { display: block; width: 171px; }
.m33-footer__logo img { display: block; width: 100%; height: auto; }
.m33-footer__wordmark { font: 500 28px/1 var(--m33-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--m33-white); }
.m33-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; padding: 0 16px; }
.m33-footer__social { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.m33-footer__social a { display: block; color: var(--m33-teal-200); }
.m33-footer__social a:hover { color: var(--m33-white); }
.m33-footer__social .m33-icon { width: 32px; height: 32px; }
.m33-footer__menu, .m33-footer__legal { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.m33-footer__menu { gap: 32px; }
.m33-footer__menu a { font: 700 14px/20px var(--m33-sans); color: var(--m33-teal-100); text-decoration: none; }
.m33-footer__menu a:hover { color: var(--m33-white); text-decoration: underline; text-underline-offset: 3px; }
.m33-footer__newsletter { width: 360px; max-width: 100%; }
.m33-newsletter { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.m33-newsletter__label { font: 700 14px/20px var(--m33-sans); color: var(--m33-white); }
.m33-newsletter__row { display: flex; gap: 16px; }
.m33-newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--m33-grey-300);
	border-radius: 0;
	background: var(--m33-white);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	font: 400 16px/24px var(--m33-sans);
	color: var(--m33-ink);
}
.m33-newsletter__input::placeholder { color: var(--m33-grey-500); }
.m33-newsletter__status { margin: 0; min-height: 20px; font: 400 14px/20px var(--m33-sans); color: var(--m33-white); }
.m33-newsletter.is-done .m33-newsletter__row { display: none; }
.m33-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 32px;
	border-top: 1px solid var(--m33-grey-200);
	font: 400 14px/20px var(--m33-sans);
}
.m33-footer__bottom p { margin: 0; color: var(--m33-white); }
.m33-footer__legal { gap: 12px; }
.m33-footer__legal a { color: var(--m33-white); text-decoration: none; }
.m33-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tablet ---------------------------------------------------------------- */

@media (max-width: 1100px) {
	.m33-hero, .m33-band { padding-left: 32px; padding-right: 32px; }
	.m33-expressions { padding-left: 32px; padding-right: 32px; }
	.m33-cocktails__grid { gap: 20px; }
	.m33-nav__menu { gap: 0; }
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 991px) {
	.m33-header__inner { height: 64px; padding: 0 16px; }
	.m33-nav { display: none; }
	.m33-header__burger { display: inline-flex; }

	.m33-hero { --m33-hero-h: 381px; padding: 0 32px; }
	.m33-hero__bg { height: 942px; }
	.m33-hero__lockup { width: 263px; }

	.m33-band { padding: 0; }
	.m33-band__frame, .m33-band--tall .m33-band__frame { min-height: 529px; padding: 32px 24px; }
	.m33-band__heading { font-size: 40px; line-height: 40px; }
	.m33-band__body { font-size: 18px; line-height: 28px; }

	.m33-image-text { padding: 48px 0; }
	.m33-image-text__row { grid-template-columns: 1fr; padding: 16px 16px 32px; gap: 24px; }
	.m33-image-text__row--img-left .m33-image-text__media { order: 0; }
	.m33-image-text__copy { padding: 0 8px; gap: 24px; }
	.m33-image-text__media { min-height: 0; aspect-ratio: 448 / 340; }

	.m33-display { font-size: 44px; line-height: 52px; }
	.m33-h2 { font-size: 32px; line-height: 40px; }

	.m33-expressions { padding: 64px 16px 32px; }
	.m33-expressions::before { top: 337px; }
	.m33-expressions__heading { font-weight: 500; font-size: 36px; line-height: 44px; }
	.m33-expressions__grid { grid-template-columns: 1fr; max-width: 247px; margin: 0 auto; padding: 16px 0; }

	.m33-cocktails { padding: 16px 16px 32px; }
	.m33-cocktails__grid { grid-template-columns: 1fr; padding: 0 8px; gap: 24px; }
	.m33-cocktails__card { height: auto; }
	/* Same shape as the card photos (Nov 2): the old tall phone box cut off the sides. */
	.m33-cocktails__media { flex: none; aspect-ratio: 384 / 329; }
	.m33-cocktails__body { padding: 24px; min-height: 0; }
	.m33-cocktails__name { font-size: 26px; line-height: 34px; }

	.m33-faq { padding: 48px 16px; }
	.m33-faq .m33-container { padding: 0; gap: 40px; }
	.m33-faq__item { padding: 0; }
	.m33-faq__a { padding-left: 56px; }

	.m33-footer { padding: 48px 0 40px; }
	.m33-footer__inner { padding: 0 24px; gap: 48px; }
	.m33-footer__top { flex-direction: column; gap: 40px; }
	.m33-footer__links { padding: 0; gap: 24px; }
	.m33-footer__newsletter { width: 100%; }
	.m33-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}

@media (max-width: 400px) {
	.m33-newsletter__row { flex-direction: column; }
	.m33-newsletter__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.m33-site *, .m33-site *::before, .m33-site *::after { transition: none !important; }
}

/* 2026-10-03 fixes */
@media (min-width: 1101px) {
	.m33-expressions__card { padding: 8px 0; }
	.m33-expressions__body { padding: 16px 0; flex: 1 1 auto; }
	.m33-expressions__body .m33-serif-italic { flex: 1 1 auto; max-width: 300px; }
	.m33-expressions__body .m33-serif-italic.is-short { white-space: nowrap; max-width: none; }
}
/* Two expressions (Sampler): two centred columns instead of three. */
@media (min-width: 992px) {
	.m33-expressions__grid:has(> .m33-expressions__card:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 340px));
		justify-content: center;
	}
}
.m33-site .m33-nav a,
.m33-site .m33-drawer__menu a,
.m33-site .m33-footer__menu a,
.m33-site .m33-footer__legal a {
	font-family: var(--m33-sans) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
.m33-site .m33-nav__menu > li > a { font-weight: 700 !important; font-size: 14px !important; line-height: 20px !important; }
.m33-site .m33-nav .sub-menu a { font-weight: 500 !important; }
.m33-site .m33-drawer__menu > li > a { font-weight: 700 !important; font-size: 18px !important; }
.m33-site .m33-drawer__menu .sub-menu a { font-weight: 400 !important; font-size: 16px !important; }
.m33-site .m33-footer__menu a { font-weight: 700 !important; font-size: 14px !important; }
.m33-site .m33-footer__legal a { font-weight: 400 !important; font-size: 14px !important; }
.m33-site .m33-newsletter__input {
	height: auto !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--m33-grey-300) !important;
	border-radius: 0 !important;
	background: var(--m33-white) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
	font: 400 16px/24px var(--m33-sans) !important;
	color: var(--m33-ink) !important;
}
.m33-site .m33-newsletter__input::placeholder { color: var(--m33-grey-500) !important; opacity: 1; }
.m33-site .m33-newsletter__submit {
	height: auto !important;
	margin: 0 !important;
	padding: 8px 14px !important;
	border: 2px solid var(--m33-copper-400) !important;
	border-radius: 0 !important;
	background: var(--m33-white) !important;
	color: var(--m33-copper-400) !important;
	font: 500 16px/24px var(--m33-sans) !important;
	letter-spacing: normal !important;
}
.m33-site .m33-newsletter__submit:hover,
.m33-site .m33-newsletter__submit:focus-visible {
	background: var(--m33-copper-400) !important;
	color: var(--m33-white) !important;
}


/* Plain text pages (Terms, Privacy, Cookies and similar). Applies to pages on
   the default template that are not built with Elementor or the m33 blocks. */
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) {
	max-width: 800px;
	margin: 0 auto;
	padding: 64px 24px 96px;
	font: 400 16px/26px var(--m33-sans);
	color: var(--m33-grey-700);
}
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) h1 {
	margin: 0 0 8px;
	font: 500 48px/56px var(--m33-sans);
	letter-spacing: -0.02em;
	color: var(--m33-teal-600);
}
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) h2 {
	margin: 40px 0 12px;
	font: 500 24px/32px var(--m33-sans);
	letter-spacing: -0.01em;
	color: var(--m33-ink);
}
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) p,
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) ul { margin: 0 0 16px; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) ul { padding-left: 20px; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) li { margin-bottom: 8px; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) a { color: var(--m33-teal-600); text-decoration: underline; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) .wp-block-table { margin: 0 0 24px; overflow-x: auto; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) th,
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) td { padding: 10px 12px; border: 1px solid var(--m33-grey-300); text-align: left; vertical-align: top; }
.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) th { background: var(--m33-grey-200); font-weight: 700; color: var(--m33-ink); }
@media (max-width: 991px) {
	.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) { padding: 40px 16px 64px; }
	.m33-site.page-template-default:not(.home):not(.elementor-page) #content:not(:has(> [class^="m33-"])) h1 { font-size: 36px; line-height: 44px; }
}

/* Mobile: centre the image-and-text button, as in the mobile comp. */
@media (max-width: 991px) {
	.m33-image-text__copy > .m33-btn { align-self: center; }
}


/* =========================================================================
 * Inner pages (2026)
 * Values from the Socorro Figma file: About, Our Process, Cocktails, recipe,
 * Shop, product and FAQ pages (desktop 1440 / mobile 375).
 * ====================================================================== */

:root {
	--m33-teal-700b: #145964;
	--m33-brown: #69392a;
	--m33-grey-400: #a3a3a3;
}

/* Sections after the hero sit above the fixed page photo. */
.m33-sec { position: relative; z-index: 1; }

/* Content column: 1280 wide with the photo showing in the side gutters. */
.m33-panel {
	width: calc(100% - 160px);
	max-width: var(--m33-max);
	margin-left: auto;
	margin-right: auto;
}

/* Fixed, blurred page photo. Same 965px layer as the homepage. */
.m33-page-bg {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 965px;
	z-index: -1;
	overflow: hidden;
	background-color: #3d4644;
}
.m33-page-bg::before {
	content: "";
	position: absolute;
	inset: -24px;
	background-image: var(--m33-bg);
	background-size: cover;
	background-position: center;
	filter: blur(8px);
}
.m33-page-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), linear-gradient(rgba(0, 0, 0, .57), rgba(0, 0, 0, .57));
}
.m33-page-bg--light::after { background: rgba(30, 30, 30, .25); }

/* Shared type ----------------------------------------------------------- */

.m33-oso {
	font-family: var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
}

.m33-btn--brand { background: var(--m33-teal-500); }
.m33-btn--brand:hover, .m33-btn--brand:focus-visible { background: var(--m33-teal-600); }
.m33-btn--ghost {
	background: rgba(255, 255, 255, .5);
	color: var(--m33-grey-700);
	box-shadow: var(--m33-btn-shadow), inset 0 0 0 1px var(--m33-ink);
	padding: 6px 12px;
}
.m33-btn--ghost:hover, .m33-btn--ghost:focus-visible { background: var(--m33-white); color: var(--m33-ink); }
.m33-btn--soldout {
	background: var(--m33-grey-400);
	color: var(--m33-white);
	cursor: default;
}
.m33-btn--soldout:hover { background: var(--m33-grey-400); }
.m33-btn--outline.m33-btn--lg { padding: 10px 16px; }

.m33-tone--blanco { --m33-tone: var(--m33-teal-500); --m33-tone-hover: var(--m33-teal-600); }
.m33-tone--blanco-110 { --m33-tone: var(--m33-teal-700b); --m33-tone-hover: #0e434b; }
.m33-tone--extra-anejo { --m33-tone: var(--m33-brown); --m33-tone-hover: #522c20; }

/* Page hero ------------------------------------------------------------- */

.m33-phero { position: relative; z-index: 0; }
.m33-phero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: var(--m33-max);
	min-height: 289px;
	margin: 0 auto;
	padding: 64px;
	text-align: center;
	color: var(--m33-white);
}
.m33-phero__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m33-phero__eyebrow {
	margin: 0;
	font: italic 700 18px/28px var(--m33-serif-italic);
	color: var(--m33-white);
}
.m33-phero__title {
	margin: 0;
	font: 400 72px/90px var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
	letter-spacing: -0.02em;
	color: var(--m33-white);
}
.m33-phero__subtitle {
	margin: 0;
	font: 500 36px/44px var(--m33-sans);
	letter-spacing: -0.02em;
	color: var(--m33-white);
}
.m33-phero__body {
	max-width: 768px;
	font: 400 20px/30px var(--m33-sans);
	color: var(--m33-white);
}
.m33-phero__body p { margin: 0 0 20px; }
.m33-phero__body p:last-child { margin-bottom: 0; }
.m33-phero__body a { color: var(--m33-white); text-decoration: underline; }
.m33-phero__callout { padding: 6px 0; }
.m33-phero__btn { margin-top: 16px; }

/* Image and text: inner page layouts ------------------------------------ */

.m33-image-text.m33-image-text--half,
.m33-image-text.m33-image-text--wide { padding: 0; }
.m33-image-text--half .m33-container,
.m33-image-text--wide .m33-container { display: block; max-width: none; }
.m33-image-text--half .m33-image-text__row,
.m33-image-text--wide .m33-image-text__row {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px 32px;
	padding: 64px;
}
.m33-image-text--half .m33-image-text__copy { grid-column: span 6; padding: 0; gap: 16px; }
.m33-image-text--half .m33-image-text__media,
.m33-image-text--half .m33-image-text__statement { grid-column: span 6; }
.m33-image-text--wide .m33-image-text__copy { grid-column: span 4; padding: 0; gap: 16px; align-self: center; }
.m33-image-text--wide .m33-image-text__media,
.m33-image-text--wide .m33-image-text__statement { grid-column: span 8; }

.m33-image-text--half .m33-image-text__media,
.m33-image-text--wide .m33-image-text__media { min-height: 340px; }

.m33-image-text--half .m33-prose,
.m33-image-text--wide .m33-prose { color: var(--m33-ink); }
.m33-image-text--half .m33-btn--lg,
.m33-image-text--wide .m33-btn--lg { padding: 10px 16px; }

.m33-image-text__titles { display: flex; flex-direction: column; }
.m33-image-text__eyebrow {
	margin: 0;
	font: italic 700 18px/28px var(--m33-serif-italic);
	color: var(--m33-ink);
}
.m33-image-text__sub {
	margin: 0;
	font: italic 400 18px/28px var(--m33-serif-italic);
	color: var(--m33-ink);
}
.m33-image-text--h-lg .m33-h2 { font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; }
.m33-image-text--h-md .m33-h2 { font: 400 30px/38px var(--m33-sans); letter-spacing: 0; }

.m33-image-text__statement {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
	text-align: center;
	align-self: center;
}
.m33-image-text__row--img-left .m33-image-text__statement { order: -1; }
.m33-image-text__st-eyebrow {
	margin: 0;
	font: italic 600 18px/28px var(--m33-serif-italic);
	color: var(--m33-copper-500);
}
.m33-image-text__st-text {
	margin: 0;
	font: 400 72px/90px var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
	letter-spacing: -0.02em;
	color: var(--m33-teal-500);
	text-wrap: balance;
}

/* Lifestyle band without a photo (e.g. "No Shortcuts.") ---------------- */

.m33-band.m33-band--tint { padding: 0; }
.m33-band--tint .m33-band__frame {
	max-width: none;
	min-height: 468px;
	padding: 64px;
	background: rgba(30, 30, 30, .25);
}
.m33-band--tint .m33-band__frame::before { display: none; }
.m33-band--tint .m33-band__text { max-width: 757px; gap: 16px; }
.m33-band--tint .m33-band__heading { font-size: 72px; line-height: 90px; }
.m33-band--tint .m33-band__body { font-size: 18px; line-height: 28px; }
.m33-band__body p { margin: 0 0 18px; }
.m33-band__body p:last-child { margin-bottom: 0; }
.m33-band__cta { display: flex; justify-content: center; }

/* FAQ: inner page and FAQ page styles ----------------------------------- */

.m33-faq.m33-faq--page { max-width: var(--m33-max); padding: 32px; }
.m33-faq--page .m33-container { gap: 32px; padding: 0 32px; max-width: none; }
.m33-faq--page .m33-faq__intro { gap: 0; }
.m33-faq--page .m33-faq__eyebrow { font-weight: 400; color: var(--m33-copper-500); }
.m33-faq--page .m33-faq__heading { font-weight: 600; }
.m33-faq--page .m33-faq__list { padding: 0 32px 16px; }
.m33-faq--page .m33-faq__item,
.m33-faq--list .m33-faq__item { padding: 0; border-radius: 16px; }
.m33-faq--page .m33-faq__item.is-open,
.m33-faq--list .m33-faq__item.is-open { background: var(--m33-white); }
.m33-faq--page .m33-faq__toggle,
.m33-faq--list .m33-faq__toggle { border-radius: 16px; background: transparent; }
.m33-faq--page .m33-faq__item.is-open .m33-faq__toggle,
.m33-faq--list .m33-faq__item.is-open .m33-faq__toggle { background: transparent; padding-bottom: 4px; }
.m33-faq--page .m33-faq__a,
.m33-faq--list .m33-faq__a { margin: 0; padding: 0 16px 16px 56px; background: transparent; }

.m33-faq.m33-faq--list { max-width: var(--m33-max); padding: 16px 128px; }
.m33-phero + .m33-faq--list { padding-top: 48px; }
.m33-faq--list .m33-container { gap: 16px; padding: 0; max-width: none; }
.m33-faq--list .m33-faq__intro { padding: 0 16px; max-width: none; }
.m33-faq--list .m33-faq__heading {
	font: 400 36px/44px var(--m33-display-serif);
	font-variation-settings: "wdth" 85, "wght" 400;
	letter-spacing: -0.02em;
	color: var(--m33-teal-500);
}
.m33-faq--list .m33-faq__list { gap: 0; }
.m33-faq--list .m33-faq__item + .m33-faq__item { border-top: 1px solid var(--m33-ink); border-radius: 0; }
.m33-faq--list .m33-faq__item.is-open { border-top-color: transparent; border-radius: 16px; }
.m33-faq--list .m33-faq__item.is-open + .m33-faq__item { border-top-color: transparent; }

/* Awards ---------------------------------------------------------------- */

.m33-awards { padding: 64px; }
.m33-awards__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 32px;
}
.m33-award {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-bottom: 24px;
	text-align: center;
	color: var(--m33-ink);
}
.m33-award__medal { width: 233px; max-width: 100%; aspect-ratio: 1; }
.m33-award__medal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m33-award__level { margin: 0; font: 700 30px/38px var(--m33-sans-bold); color: inherit; }
.m33-award__comp { margin: 0; font: 400 20px/30px var(--m33-sans); color: inherit; }
.m33-award__ex {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font: 400 20px/30px var(--m33-sans);
	color: var(--m33-ink);
	text-decoration: none;
}
.m33-award__ex .m33-icon { width: 24px; height: 24px; }
.m33-award__ex:hover { color: var(--m33-teal-600); text-decoration: underline; text-underline-offset: 3px; }

.m33-awband {
	overflow: hidden;
	width: calc(100% - 160px);
	max-width: var(--m33-max);
	margin: 0 auto;
	color: var(--m33-white);
}
.m33-awband::before {
	content: "";
	position: absolute;
	inset: -24px;
	background-image: var(--m33-bg);
	background-size: cover;
	background-position: center;
	filter: blur(8px);
}
.m33-awband::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 135, 144, .5);
}
.m33-awband__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 64px 16px;
	text-align: center;
}
.m33-awband__intro { display: flex; flex-direction: column; gap: 8px; max-width: 564px; }
.m33-awband__heading { margin: 0; font: 700 48px/60px var(--m33-sans-bold); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-awband__body { margin: 0; font: 400 20px/30px var(--m33-sans); color: var(--m33-white); }
.m33-awband__list { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 32px; }
.m33-awband .m33-award { flex: 1; padding: 0; color: var(--m33-white); }
.m33-awband .m33-award__medal { width: 109px; }
.m33-awband .m33-award__level { color: var(--m33-white); }
.m33-awband .m33-award__comp { color: var(--m33-white); }

/* Press ----------------------------------------------------------------- */

.m33-press { padding: 64px; }
.m33-press__heading {
	margin: 0 0 32px;
	font: 400 48px/60px var(--m33-sans);
	letter-spacing: -0.02em;
	color: var(--m33-ink);
}
.m33-press__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.m33-pcard { display: flex; flex-direction: column; gap: 8px; }
.m33-pcard__media { display: block; aspect-ratio: 480 / 256; overflow: hidden; background: var(--m33-grey-200); }
.m33-pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m33-pcard__media--logo { display: flex; align-items: center; aspect-ratio: auto; height: 96px; overflow: visible; background: none; border-bottom: 1px solid rgba(30, 30, 30, .2); }
.m33-pcard__media--logo img { width: auto; height: auto; max-width: 100%; object-fit: contain; padding: 0; }
.m33-pcard__text { flex: 1; padding: 8px 0; border-bottom: 1px solid var(--m33-teal-500); color: var(--m33-ink); }
.m33-pcard__date { margin: 0; font: italic 600 12px/18px var(--m33-serif-italic); }
.m33-pcard__outlet { margin: 0; font: 700 18px/28px var(--m33-sans-bold); }
.m33-pcard__title { margin: 0; font: 400 20px/30px var(--m33-sans); color: var(--m33-ink); }
.m33-pcard__more { color: var(--m33-teal-700b); padding: 2px 0; }

.m33-press-contact { padding: 64px 32px; color: var(--m33-white); }
.m33-press-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.m33-press-contact__eyebrow { margin: 0; font: italic 400 18px/28px var(--m33-serif-italic); color: var(--m33-white); }
.m33-press-contact__heading { margin: -16px 0 0; font: 700 36px/44px var(--m33-sans-bold); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-press-contact__body { margin: 0; font: 400 18px/28px var(--m33-sans); color: var(--m33-white); }

/* Chips (tequila filter) ------------------------------------------------ */

.m33-chips { display: flex; justify-content: center; gap: 10px; }
.m33-chip {
	--m33-chip: var(--m33-teal-500);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 32px;
	border: 1px solid var(--m33-chip);
	border-radius: 100px;
	background: transparent;
	color: var(--m33-chip);
	font: 400 18px/28px var(--m33-sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.m33-chip--reposado { --m33-chip: var(--m33-copper-500); }
.m33-chip--anejo { --m33-chip: var(--m33-ink); }
.m33-chip:hover, .m33-chip.is-active { background: var(--m33-chip); color: var(--m33-white); }
.m33-chip:focus-visible { outline: 2px solid var(--m33-teal-500); outline-offset: 2px; }

/* Recipe cards ---------------------------------------------------------- */

.m33-rcard { display: flex; flex-direction: column; overflow: hidden; background: var(--m33-white); }
.m33-rcard[hidden] { display: none; }
.m33-rcard__media { position: relative; display: block; aspect-ratio: 480 / 411; overflow: hidden; background: var(--m33-grey-200); }
.m33-rcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.m33-rcard:hover .m33-rcard__media img { transform: scale(1.03); }
.m33-rcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 32px;
}
.m33-rcard__name { margin: 0; font: 700 18px/28px var(--m33-sans-bold); color: var(--m33-ink); }
.m33-rcard__name a { color: inherit; text-decoration: none; }
.m33-rcard__name a:hover { color: var(--m33-teal-600); }
.m33-rcard__made { margin: 0; font: 400 16px/24px var(--m33-sans); color: var(--m33-ink); }

/* Recipe grid (Cocktails page) ------------------------------------------ */

.m33-rgrid { padding: 64px 64px 48px; }
.m33-rgrid__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(18, 135, 144, .35);
	text-align: center;
}
.m33-rgrid__heading { margin: 0; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-ink); }
.m33-rgrid__lead { margin: 0 0 16px; font: 400 18px/28px var(--m33-sans); color: var(--m33-ink); }
.m33-rgrid__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; }

/* Cocktails block, small cards (product pages) -------------------------- */

.m33-cocktails.m33-cocktails--small { max-width: var(--m33-max); }
.m33-cocktails--small .m33-cocktails__grid { gap: 32px; }
.m33-cocktails--small .m33-cocktails__eyebrow { font-weight: 400; }

/* Recipe page ----------------------------------------------------------- */

.m33-recipe__top { padding: 0 64px; }
.m33-recipe__photo { height: 480px; overflow: hidden; background: var(--m33-grey-200); }
.m33-recipe__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m33-recipe__intro {
	display: grid;
	grid-template-columns: 5fr 1px 6fr;
	gap: 0 48px;
	padding: 32px 0;
	color: var(--m33-ink);
}
.m33-recipe__intro::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	background: var(--m33-ink);
	opacity: .6;
}
.m33-recipe__titles { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; padding: 16px 0; text-align: center; }
.m33-recipe__story { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.m33-recipe__eyebrow { margin: 0; font: italic 700 18px/28px var(--m33-serif-italic); color: inherit; }
.m33-recipe__title {
	margin: 0;
	font: 400 72px/90px var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
	letter-spacing: -0.02em;
	color: var(--m33-ink);
}
.m33-recipe__tagline { margin: 0; font: 400 30px/38px var(--m33-sans); color: var(--m33-ink); }
.m33-recipe__titles .m33-chip { margin-top: 16px; }
.m33-recipe__h2 { margin: 0; font: 400 30px/38px var(--m33-sans); color: var(--m33-ink); }
.m33-recipe__storytext { font: 400 20px/30px var(--m33-sans); color: var(--m33-ink); }
.m33-recipe__storytext p { margin: 0 0 20px; }
.m33-recipe__storytext p:last-child { margin: 0; }

.m33-recipe__main {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px 32px;
	padding: 64px 96px;
	background: var(--m33-white);
}
.m33-recipe__card {
	grid-column: span 8;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border: 2px solid var(--m33-teal-500);
}
.m33-recipe__cardtitle { margin: 0; font: 700 30px/38px var(--m33-sans-bold); color: var(--m33-teal-500); }
.m33-recipe__meta { margin: -8px 0 0; font: italic 400 18px/28px var(--m33-serif-italic); color: var(--m33-grey-600); }
.m33-recipe__ingredients { list-style: none; margin: 0; padding: 0; font: 400 18px/28px var(--m33-sans); color: var(--m33-ink); }
.m33-recipe__ingredients li { display: grid; grid-template-columns: 1fr 5fr; gap: 16px; margin-bottom: 12px; }
.m33-recipe__ingredients li:last-child { margin-bottom: 0; }
.m33-recipe__amt { text-align: right; }
.m33-recipe__rule { width: 100%; height: 0; margin: 16px 0; border: 0; border-top: 1px solid var(--m33-teal-500); }
.m33-recipe__steps { list-style: none; counter-reset: m33-step; margin: 0; padding: 0; font: 400 18px/28px var(--m33-sans); color: var(--m33-ink); }
.m33-recipe__steps li {
	counter-increment: m33-step;
	display: grid;
	grid-template-columns: 1fr 5fr;
	gap: 8px 16px;
	align-items: center;
	padding: 8px 0;
}
.m33-recipe__steps li::before {
	content: counter(m33-step) ".";
	text-align: center;
	font: 300 24px/24px var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 300;
	letter-spacing: -0.02em;
}
.m33-recipe__callout {
	margin: 0;
	padding: 16px 0;
	opacity: .9;
	font: italic 400 36px/48px var(--m33-display-serif);
	font-variation-settings: "wdth" 70, "wght" 400;
	letter-spacing: -0.02em;
	color: var(--m33-copper-500);
}
.m33-recipe__made {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}
.m33-recipe__made-eyebrow { margin: 0; font: italic 700 18px/28px var(--m33-serif-italic); color: var(--m33-teal-500); }
.m33-recipe__made-name { margin: 0 0 18px; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-teal-500); }
.m33-recipe__bottle { display: block; width: 207px; height: 400px; margin-bottom: 26px; }
.m33-recipe__bottle img { display: block; width: 100%; height: 100%; object-fit: contain; }

.m33-recipe__related { padding: 32px; color: var(--m33-white); }
.m33-recipe__related-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.m33-recipe__related-heading { margin: 0; font: 700 30px/38px var(--m33-sans-bold); color: var(--m33-white); }
.m33-recipe__related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 32px 64px; }

/* Shop: product grid ---------------------------------------------------- */

.m33-products { padding: 64px 32px; }
.m33-products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 10px; }
.m33-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 8px;
	align-self: start;
}
.m33-product__media { display: flex; justify-content: center; width: 100%; }
.m33-product__media a { display: block; }
.m33-product__img { display: block; width: 207px; height: 400px; object-fit: contain; }
.m33-product--wide .m33-product__img { width: 100%; max-width: 380px; }
.m33-product__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	text-align: center;
}
.m33-product__name { margin: 0 0 -8px; font: 700 36px/44px var(--m33-sans-bold); letter-spacing: -0.02em; color: var(--m33-tone); }
.m33-product__tagline { margin: 0; font: italic 400 18px/28px var(--m33-serif-italic); color: var(--m33-ink); }

/* Bottle Nexus buttons (rendered in the page, styled to match) ---------- */

.m33-bn { min-height: 36px; }
/* The fallback link is styled as the finished button and shows until the
   Bottle Nexus button has rendered, so there is no blank gap while it loads. */
.m33-bn:not(.is-live) > div { display: none !important; }
.m33-bn.is-live .m33-bn__fallback { display: none; }
.m33-bn__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, .5);
	box-shadow: var(--m33-btn-shadow), inset 0 0 0 1px var(--m33-ink);
	color: var(--m33-grey-700);
	font: 500 16px/24px var(--m33-sans);
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
}
.m33-bn__fallback::after {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.62 6.04h16.76M3.4 6.35 2.1 20.1A1.7 1.7 0 0 0 3.8 22h16.4a1.7 1.7 0 0 0 1.7-1.9L20.6 6.35a1.7 1.7 0 0 0-.4-.95L18.5 3.36A1.7 1.7 0 0 0 17.2 2.8H6.8a1.7 1.7 0 0 0-1.3.56L3.8 5.4a1.7 1.7 0 0 0-.4.95Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.62 6.04h16.76M3.4 6.35 2.1 20.1A1.7 1.7 0 0 0 3.8 22h16.4a1.7 1.7 0 0 0 1.7-1.9L20.6 6.35a1.7 1.7 0 0 0-.4-.95L18.5 3.36A1.7 1.7 0 0 0 17.2 2.8H6.8a1.7 1.7 0 0 0-1.3.56L3.8 5.4a1.7 1.7 0 0 0-.4.95Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m33-bn__fallback:hover, .m33-bn__fallback:focus-visible { background: var(--m33-white); color: var(--m33-ink); }
.m33-bn--solid .m33-bn__fallback { padding: 6px 12px; background: var(--m33-teal-600); box-shadow: var(--m33-btn-shadow); color: var(--m33-white); }
.m33-bn--solid .m33-bn__fallback::after { display: none; }
.m33-bn--solid .m33-bn__fallback:hover, .m33-bn--solid .m33-bn__fallback:focus-visible { background: var(--m33-teal-700); color: var(--m33-white); }
.m33-bn.is-pending .m33-bn__fallback { opacity: .7; cursor: progress; }
.m33-bn > div[data-product-id] { height: auto !important; }
.m33-bn [data-component="button-wrapper"],
.m33-bn [data-component="button-details"],
.m33-bn [data-component="action-wrapper"] { margin: 0 !important; padding: 0 !important; width: auto !important; }
.m33-bn button[data-component="button"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: rgba(255, 255, 255, .5) !important;
	box-shadow: var(--m33-btn-shadow), inset 0 0 0 1px var(--m33-ink) !important;
	color: var(--m33-grey-700) !important;
	font: 500 16px/24px var(--m33-sans) !important;
	letter-spacing: normal !important;
	text-transform: uppercase !important;
	cursor: pointer;
}
.m33-bn button[data-component="button"]::after {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.62 6.04h16.76M3.4 6.35 2.1 20.1A1.7 1.7 0 0 0 3.8 22h16.4a1.7 1.7 0 0 0 1.7-1.9L20.6 6.35a1.7 1.7 0 0 0-.4-.95L18.5 3.36A1.7 1.7 0 0 0 17.2 2.8H6.8a1.7 1.7 0 0 0-1.3.56L3.8 5.4a1.7 1.7 0 0 0-.4.95Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.62 6.04h16.76M3.4 6.35 2.1 20.1A1.7 1.7 0 0 0 3.8 22h16.4a1.7 1.7 0 0 0 1.7-1.9L20.6 6.35a1.7 1.7 0 0 0-.4-.95L18.5 3.36A1.7 1.7 0 0 0 17.2 2.8H6.8a1.7 1.7 0 0 0-1.3.56L3.8 5.4a1.7 1.7 0 0 0-.4.95Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m33-bn button[data-component="button"]:hover,
.m33-bn button[data-component="button"]:focus-visible { background: var(--m33-white) !important; color: var(--m33-ink) !important; }
.m33-bn--solid button[data-component="button"] {
	padding: 6px 12px !important;
	background: var(--m33-teal-600) !important;
	box-shadow: var(--m33-btn-shadow) !important;
	color: var(--m33-white) !important;
}
.m33-bn--solid button[data-component="button"]::after { display: none; }
.m33-bn--solid button[data-component="button"]:hover,
.m33-bn--solid button[data-component="button"]:focus-visible { background: var(--m33-teal-700) !important; color: var(--m33-white) !important; }

/* Product page hero ----------------------------------------------------- */

.m33-pphero { width: calc(100% - 160px); max-width: var(--m33-max); margin: 0 auto; }
.m33-pphero__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 289px;
	color: var(--m33-white);
}
.m33-pphero__name {
	flex: 1;
	margin: 0;
	font: 700 48px/60px var(--m33-sans-bold);
	letter-spacing: -0.02em;
	color: var(--m33-white);
}
.m33-pphero__spacer { flex: none; width: 260px; }
.m33-pphero__bottle {
	position: absolute;
	z-index: 2;
	top: 5px;
	left: 50%;
	width: 399px;
	height: auto;
	transform: translateX(-50%);
	pointer-events: none;
}
.m33-pphero__notes-wrap { flex: 1; }
.m33-pphero__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.m33-pphero__note { display: flex; flex-direction: column; align-items: center; text-align: center; }
.m33-pphero__icon { display: block; width: 62px; height: 57px; object-fit: contain; }
.m33-pphero__note-title { font: italic 700 18px/28px var(--m33-serif-italic); white-space: nowrap; }
.m33-pphero__note-text { font: 400 18px/28px var(--m33-sans); white-space: nowrap; }
.m33-pphero__panel {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 517px;
	padding: 64px 32px;
}
.m33-pphero__buy { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.m33-pphero__gap { flex: none; width: 258px; }
.m33-pphero__desc { margin: 0; font: 400 18px/28px var(--m33-sans); color: var(--m33-ink); }
.m33-pphero__meta { margin: 0; font: italic 700 18px/28px var(--m33-serif-italic); color: var(--m33-teal-500); }
.m33-pphero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.m33-pphero__buttons .m33-bn > div[data-product-id] { margin-left: 0 !important; }
.m33-pphero__tasting { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.m33-pphero__tasting-heading { margin: 0; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-ink); }
.m33-pphero__label { margin: 0; font: italic 700 18px/28px var(--m33-serif-italic); color: var(--m33-teal-500); }
.m33-pphero__text { margin: -8px 0 0; font: 400 18px/28px var(--m33-sans); color: var(--m33-ink); }

/* Tablet ---------------------------------------------------------------- */

@media (max-width: 1100px) {
	.m33-panel, .m33-awband, .m33-pphero { width: calc(100% - 64px); }
	.m33-faq.m33-faq--list { padding-left: 64px; padding-right: 64px; }
	.m33-recipe__main { padding: 48px 32px; }
	.m33-awards__grid, .m33-press__grid, .m33-rgrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.m33-image-text__st-text { font-size: 56px; line-height: 68px; }
	.m33-pphero__note-title, .m33-pphero__note-text { white-space: normal; }
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 991px) {
	.m33-panel, .m33-awband, .m33-pphero { width: 100%; }
	.m33-page-bg::after, .m33-page-bg--light::after {
		background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), linear-gradient(rgba(0, 0, 0, .57), rgba(0, 0, 0, .57));
	}

	.m33-phero__inner { min-height: 0; padding: 32px; }
	.m33-phero__title { font-size: 48px; line-height: 52px; }
	.m33-phero__subtitle { font-size: 30px; line-height: 38px; letter-spacing: 0; }

	.m33-image-text--half .m33-image-text__row,
	.m33-image-text--wide .m33-image-text__row { grid-template-columns: 1fr; gap: 0; padding: 0; }
	.m33-image-text--half .m33-image-text__copy,
	.m33-image-text--wide .m33-image-text__copy,
	.m33-image-text--half .m33-image-text__media,
	.m33-image-text--wide .m33-image-text__media,
	.m33-image-text--half .m33-image-text__statement,
	.m33-image-text--wide .m33-image-text__statement { grid-column: 1; }
	.m33-image-text--half .m33-image-text__media,
	.m33-image-text--wide .m33-image-text__media { order: -1; aspect-ratio: auto; height: 340px; min-height: 340px; }
	.m33-image-text--half .m33-image-text__copy,
	.m33-image-text--wide .m33-image-text__copy { padding: 32px; }
	.m33-image-text__row--statement .m33-image-text__statement { order: -1; padding: 32px 32px 0; }
	.m33-image-text__st-text { font-size: 48px; line-height: 54px; }
	.m33-image-text--h-lg .m33-h2, .m33-image-text--h-md .m33-h2 { font: 400 30px/38px var(--m33-sans); letter-spacing: 0; }

	.m33-band--tint .m33-band__frame { min-height: 0; padding: 64px 32px; }
	.m33-band--tint .m33-band__heading { font-size: 48px; line-height: 52px; }

	.m33-faq.m33-faq--page { padding: 32px; }
	.m33-faq--page .m33-container { padding: 0; gap: 16px; }
	.m33-faq--page .m33-faq__heading { font: 600 20px/30px var(--m33-sans); letter-spacing: 0; }
	.m33-faq--page .m33-faq__list { padding: 0; }
	.m33-faq.m33-faq--list { padding: 16px 32px; }
	.m33-phero + .m33-faq--list { padding-top: 32px; }
	.m33-faq--list .m33-faq__heading { white-space: normal; }
	.m33-faq--page .m33-faq__a, .m33-faq--list .m33-faq__a { padding-left: 52px; }
	.m33-faq--page .m33-faq__toggle, .m33-faq--list .m33-faq__toggle { gap: 12px; }

	.m33-awards { padding: 32px; }
	.m33-awards__grid { grid-template-columns: 1fr; gap: 24px; }
	.m33-award { padding-bottom: 0; }
	.m33-award__medal { width: 160px; }
	.m33-awband__heading { font-size: 30px; line-height: 38px; letter-spacing: 0; }
	.m33-awband__body { font-size: 18px; line-height: 28px; }
	.m33-awband__list { flex-direction: column; align-items: center; gap: 24px; padding: 32px 0; }
	.m33-awband .m33-btn--outline.m33-btn--lg { padding: 6px 12px; }

	.m33-press { padding: 32px; }
	.m33-press__heading { margin-bottom: 24px; font-size: 30px; line-height: 38px; letter-spacing: 0; }
	.m33-press__grid { grid-template-columns: 1fr; }
	.m33-press-contact { padding: 64px 32px; }

	.m33-chips { width: 100%; }
	.m33-chip { flex: 1; padding: 8px 10px; }
	.m33-recipe__titles .m33-chip { flex: none; padding: 8px 32px; }

	.m33-rgrid { padding: 32px; }
	.m33-rgrid__heading { font: 400 30px/38px var(--m33-sans); letter-spacing: 0; }
	.m33-rgrid__grid { grid-template-columns: 1fr; gap: 16px; }

	.m33-recipe__top { padding: 0; }
	.m33-recipe__intro { grid-template-columns: 1fr; padding: 32px; gap: 0; }
	.m33-recipe__intro::before { grid-column: 1; grid-row: 2; height: 1px; margin: 8px 0; }
	.m33-recipe__titles { grid-column: 1; grid-row: 1; }
	.m33-recipe__story { grid-column: 1; grid-row: 3; }
	.m33-recipe__title { font-size: 48px; line-height: 52px; }
	.m33-recipe__main { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
	.m33-recipe__card, .m33-recipe__made { grid-column: 1; }
	.m33-recipe__card { padding: 24px; }
	.m33-recipe__ingredients li, .m33-recipe__steps li { grid-template-columns: 2fr 4fr; gap: 8px; }
	.m33-recipe__amt { text-align: left; }
	.m33-recipe__callout { font-size: 24px; line-height: 32px; text-align: center; }
	.m33-recipe__related-grid { grid-template-columns: 1fr; gap: 16px; padding: 32px 0 0; }

	.m33-products { padding: 64px 32px; }
	.m33-products__grid { grid-template-columns: 1fr; gap: 32px; }
	.m33-product__name { font-size: 30px; line-height: 38px; letter-spacing: 0; }
	.m33-tone--blanco .m33-product__name { font-size: 36px; line-height: 44px; letter-spacing: -0.02em; }

	.m33-pphero__band { flex-wrap: wrap; align-items: flex-start; padding: 32px; row-gap: 32px; }
	.m33-pphero__name { flex: 0 0 100%; font-size: 30px; line-height: 38px; letter-spacing: 0; text-align: center; }
	.m33-pphero__spacer { position: relative; width: 50%; height: 482px; }
	.m33-pphero__bottle { position: absolute; top: 0; left: 50%; width: auto; height: 482px; }
	.m33-pphero__notes-wrap { flex: 0 0 50%; }
	.m33-pphero__notes { grid-template-columns: 1fr; }
	.m33-pphero__panel { flex-direction: column; gap: 16px; min-height: 0; padding: 32px; }
	.m33-pphero__gap { display: none; }
	.m33-pphero__tasting { order: -1; }
	.m33-pphero__tasting-heading { font: 700 30px/38px var(--m33-sans-bold); letter-spacing: 0; color: var(--m33-teal-500); }
	.m33-pphero__buy { padding: 0; }
	.m33-pphero__buttons { flex-direction: column; align-items: flex-start; }
}


/* Footer lines up with the content column (same 80px / 32px gutters). */
.m33-footer { width: calc(100% - 160px); }
@media (max-width: 1100px) { .m33-footer { width: calc(100% - 64px); } }
@media (max-width: 991px) { .m33-footer { width: 100%; } }


/* Award expression link: the chevron follows the last word when the name wraps. */
.m33-award__ex { display: block; text-wrap: balance; }
.m33-award__ex .m33-icon { display: inline-block; vertical-align: -5px; margin-left: 2px; }


/* Recipe photo: fills the frame like the Figma recipe page (1152 x 480 on
   desktop, 375 x 480 on mobile). The "Photo position" field on each recipe
   sets which part of the photo stays in view. */
.m33-recipe__photo { position: relative; height: 480px; overflow: hidden; background: var(--m33-grey-200); }
.m33-recipe__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 991px) {
	/* 4:3 on phones keeps more of each wide photo in view than the old tall crop. */
	.m33-recipe__photo { height: 75vw; }
}


/* Legal pages (Privacy, Terms, Cookies): text on the paper panel. */
.m33-legal {
	padding: 64px 128px 80px;
	font: 400 16px/26px var(--m33-sans);
	color: var(--m33-grey-700);
}
.m33-legal h2 { margin: 40px 0 12px; font: 500 24px/32px var(--m33-sans); letter-spacing: -0.01em; color: var(--m33-ink); }
.m33-legal h2:first-child { margin-top: 0; }
.m33-legal h3 { margin: 24px 0 8px; font: 600 18px/28px var(--m33-sans); color: var(--m33-ink); }
.m33-legal p, .m33-legal ul, .m33-legal ol { margin: 0 0 16px; }
.m33-legal ul, .m33-legal ol { padding-left: 20px; }
.m33-legal li { margin-bottom: 8px; }
.m33-legal a { color: var(--m33-teal-600); text-decoration: underline; }
.m33-legal .wp-block-table { margin: 0 0 24px; overflow-x: auto; }
.m33-legal table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; background: rgba(255, 255, 255, .5); }
.m33-legal th, .m33-legal td { padding: 10px 12px; border: 1px solid var(--m33-grey-300); text-align: left; vertical-align: top; }
.m33-legal th { background: rgba(230, 230, 230, .7); font-weight: 700; color: var(--m33-ink); }
@media (max-width: 1100px) { .m33-legal { padding: 48px 64px 64px; } }
@media (max-width: 991px) { .m33-legal { padding: 32px; } }


@media (max-width: 991px) {
	.m33-recipe__steps li { grid-template-columns: 32px 1fr; gap: 12px; }
	.m33-cocktails--small .m33-display { font-weight: 500; font-size: 36px; line-height: 44px; }
}


/* Mobile homepage: in Figma the 942px photo starts under the 64px header,
   so its bottom edge sits 1006px from the top of the screen. */
@media (max-width: 991px) {
	.m33-hero__bg { height: 1006px; }
}


/* Partners band (Spirit of Socorro, "Our Impact"): shaded, over the page photo. */
.m33-partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 64px;
	background: rgba(30, 30, 30, .2);
	color: var(--m33-white);
	text-align: center;
}
.m33-partners__intro { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.m33-partners__eyebrow { margin: 0; font: italic 700 18px/28px var(--m33-serif-italic); color: var(--m33-white); }
.m33-partners__heading { margin: 0; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-partners__body { max-width: 768px; margin: 0; font: 400 18px/28px var(--m33-sans); color: var(--m33-white); }
.m33-partners__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 32px; width: 100%; padding: 32px 64px; }
.m33-partner { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.m33-partner__logo { display: flex; align-items: center; justify-content: center; height: 122px; overflow: hidden; background: #21aeb7; }
.m33-partner__logo span { font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-partner__logo img { max-width: 80%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.m33-partner__name { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-partner__name .m33-icon { width: 24px; height: 24px; flex: none; }
@media (max-width: 1100px) {
	.m33-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 0; }
}
@media (max-width: 991px) {
	.m33-partners { padding: 32px; }
	.m33-partners__grid { grid-template-columns: 1fr; gap: 32px; }
	.m33-partner__name { font: 400 20px/30px var(--m33-sans); letter-spacing: 0; }
}

/* Our Story: photo runs the full height of its text, top-aligned like Figma */
@media (min-width: 992px) {
	.page-id-212 .m33-image-text--half .m33-image-text__media { align-self: stretch; height: auto; min-height: 340px; }
}

/* Pillars (Spirit of Socorro). Same band as the Figma "Our Impact" section. */
.m33-pillars { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 64px 64px; background: rgba(30, 30, 30, .2); color: var(--m33-white); text-align: center; }
.m33-pillars__intro { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 768px; }
.m33-pillars__heading { margin: 0; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-pillars__body p { margin: 0 0 12px; font: 400 18px/28px var(--m33-sans); color: var(--m33-white); }
.m33-pillars__body p:last-child { margin-bottom: 0; }
.m33-pillars__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; padding: 0 64px; }
.m33-pillar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m33-pillar__icon { display: flex; align-items: center; justify-content: center; height: 64px; margin-bottom: 8px; }
.m33-pillar__icon img { display: block; width: auto; height: auto; max-width: 104px; max-height: 64px; }
.m33-pillar__label { margin: 0; font: italic 700 18px/28px var(--m33-serif-italic); color: var(--m33-white); }
.m33-pillar__title { margin: 0; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-white); }
.m33-pillar__text { margin: 0; max-width: 320px; font: 400 18px/28px var(--m33-sans); color: var(--m33-white); }
@media (max-width: 1100px) {
	.m33-pillars__grid { padding: 0; }
}
@media (max-width: 991px) {
	.m33-pillars { padding: 32px; }
	.m33-pillars__heading { font-size: 28px; line-height: 36px; }
	.m33-pillars__grid { grid-template-columns: 1fr; gap: 32px; }
	.m33-pillar__title { font: 400 20px/30px var(--m33-sans); letter-spacing: 0; }
}

/* Find Us: the existing Stockist locator, American Airlines line and delivery
   links, placed on the paper panel used by the other inner pages. */
.m33-findus { padding: 48px 64px 64px; font-family: var(--m33-sans); }
.m33-findus .wp-block-group__inner-container { max-width: none; }
.m33-findus .stocklist-wrap { padding: 0 !important; background: transparent !important; }
.m33-findus .map-wrap .container-fluid,
.m33-findus [data-stockist-widget-tag] { margin: 0 0 48px; }
.m33-findus p.has-text-align-right { margin: 0 0 24px; }
.m33-findus .st-bottom { margin-top: 0; padding: 32px 0 0 !important; border-top: 1px solid var(--m33-grey-300); }
.m33-findus .st-page-subttl { font-family: var(--m33-sans) !important; margin: 0; }
@media (max-width: 1100px) { .m33-findus { padding: 48px 32px 64px; } }
@media (max-width: 991px) { .m33-findus { padding: 32px 16px 48px; } }

/* Background photo height on every page: 92% of the window height, so the
   photo scales with the screen (the Figma layer is 965px on a 1440 frame). */
.m33-hero__bg,
.m33-page-bg { height: 92vh; }
@media (max-width: 991px) {
	.m33-hero__bg,
	.m33-page-bg { height: 92vh; }
}

/* Cocktails filter: "Clear filter" shows under the chips once one is selected. */
.m33-chips-clear {
	display: block;
	margin: 12px auto 0;
	padding: 4px 8px;
	border: 0;
	background: none;
	font: 500 14px/20px var(--m33-sans);
	color: var(--m33-teal-600);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.m33-chips-clear[hidden] { display: none; }
.m33-chips-clear:hover { color: var(--m33-ink); }
.m33-chips-clear:focus-visible { outline: 2px solid var(--m33-teal-500); outline-offset: 2px; }

/* Offer and limited-release callouts on product cards and product heroes. */
.m33-product__callout,
.m33-pphero__callout { margin: 0; font: 500 16px/24px var(--m33-sans); color: var(--m33-tone, var(--m33-teal-600)); }
.m33-pphero__callout { margin-top: 4px; }

/* Expression names link to their product page. */
.m33-expressions__name a { color: inherit; text-decoration: none; }
.m33-expressions__name a:hover, .m33-expressions__name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.m33-recipe__made-body { margin: 0 0 16px; font: 400 16px/24px var(--m33-sans); color: var(--m33-grey-700); text-align: center; }

/* Find Us sections from the site copy doc: delivery, American Airlines, locator. */
.m33-findus__section { padding: 0 0 48px; margin: 0 0 48px; border-bottom: 1px solid var(--m33-grey-300); text-align: center; }
.m33-findus__section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.m33-findus__eyebrow { margin: 0 0 8px; font: italic 400 18px/28px var(--m33-serif-italic); color: var(--m33-copper-500); }
.m33-findus__heading { margin: 0 0 12px; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-ink); }
.m33-findus__body { max-width: 640px; margin: 0 auto 24px; font: 400 18px/28px var(--m33-sans); color: var(--m33-grey-700); }
.m33-findus__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.m33-findus__aa-logo { margin: 0; }
.m33-findus__aa-logo img { width: 200px; height: auto; }
.m33-findus__locator { text-align: left; }
.m33-findus__locator .m33-findus__heading, .m33-findus__locator .m33-findus__body { text-align: center; }
@media (max-width: 991px) { .m33-findus__heading { font-size: 28px; line-height: 36px; } }

/* Delivery and American Airlines side by side above the locator. */
.m33-findus__row { padding: 0 0 40px; margin: 0 0 48px; border-bottom: 1px solid var(--m33-grey-300); }
.m33-findus__row > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.m33-findus__row .m33-findus__section { padding: 8px 40px; margin: 0; border-bottom: 0; }
.m33-findus__row .m33-findus__delivery { border-right: 1px solid var(--m33-grey-300); }
.m33-findus__row .m33-findus__heading { font-size: 30px; line-height: 38px; }
.m33-findus__row .m33-findus__body { font-size: 16px; line-height: 26px; margin-bottom: 20px; }
.m33-findus__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.m33-findus__logo { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--m33-grey-700) !important; font: 500 14px/20px var(--m33-sans); text-decoration: none !important; transition: opacity .2s; }
.m33-findus__logo img { display: block; width: 150px; height: auto; }
.m33-findus__logo:hover, .m33-findus__logo:focus-visible { opacity: .8; }
@media (max-width: 991px) {
	.m33-findus__row > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.m33-findus__row .m33-findus__section { padding: 0 0 32px; }
	.m33-findus__row .m33-findus__delivery { border-right: 0; border-bottom: 1px solid var(--m33-grey-300); margin-bottom: 32px; }
	.m33-findus__row .m33-findus__air { padding-bottom: 0; }
	.m33-findus__row { padding-bottom: 32px; margin-bottom: 32px; }
}

/* Contact overlay intro line (site copy doc). */
.m33-contact__lead { margin: 0 0 24px; font: 400 16px/24px var(--m33-sans); color: var(--m33-grey-700); }

/* Contact overlay. Styled here because Bootstrap is not loaded on the 2026 pages. */
#contactModal { display: none; }
#contactModal.is-open { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30, 30, 30, .6); }
html.m33-modal-open { overflow: hidden; }
#contactModal .modal-dialog { width: 100%; max-width: 640px; margin: 0; }
#contactModal .modal-content { position: relative; max-height: calc(100vh - 32px); overflow: auto; padding: 48px 40px 40px; background-color: var(--m33-paper-color); background-image: var(--m33-paper); background-size: 512px 512px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
#contactModal .close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
#contactModal .close::before, #contactModal .close::after { content: ""; position: absolute; top: 19px; left: 10px; width: 20px; height: 2px; background: var(--m33-ink); }
#contactModal .close::before { transform: rotate(45deg); }
#contactModal .close::after { transform: rotate(-45deg); }
#contactModal .h2 { margin: 0 0 8px; font: 500 36px/44px var(--m33-sans); letter-spacing: -0.02em; color: var(--m33-ink); text-transform: none; }
#contactModal label { display: block; margin: 0 0 16px; font: 500 14px/20px var(--m33-sans); color: var(--m33-ink); }
#contactModal input[type=text], #contactModal input[type=email], #contactModal textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--m33-grey-300); border-radius: 0; background: rgba(255, 255, 255, .7); font: 400 16px/24px var(--m33-sans); color: var(--m33-ink); }
#contactModal textarea { height: 120px; resize: vertical; }
#contactModal .form-group-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#contactModal .wpcf7-list-item { margin: 0; }
#contactModal .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
#contactModal input[type=submit] { margin-top: 8px; padding: 12px 24px; border: 0; background: var(--m33-teal-500); color: var(--m33-white); font: 500 14px/20px var(--m33-sans); text-transform: uppercase; cursor: pointer; }
#contactModal input[type=submit]:hover { background: var(--m33-teal-600); }
#contactModal .form-success-message { display: none; font: 400 16px/24px var(--m33-sans); color: var(--m33-ink); }
#contactModal .form-success-message strong { display: block; margin-bottom: 4px; font: 500 24px/32px var(--m33-sans); }
#contactModal .wpcf7-form.sent .form-inputs-group { display: none; }
#contactModal .wpcf7-form.sent .form-success-message { display: block; }
#contactModal .wpcf7-form.sent .wpcf7-response-output { display: none; }
@media (max-width: 600px) {
	#contactModal .modal-content { padding: 40px 20px 24px; }
	#contactModal .form-group-row { grid-template-columns: 1fr; }
	#contactModal .h2 { font-size: 28px; line-height: 36px; }
}
#contactModal.is-open { display: flex !important; opacity: 1; }
#contactModal .modal-content { border-radius: 0; }
#contactModal .captcha-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 16px; color: var(--m33-ink); font: 400 14px/20px var(--m33-sans); }
#contactModal .captcha-wrap * { color: var(--m33-ink); }
#contactModal .captcha-wrap label { margin: 0; }
#contactModal .captcha-wrap input[type=text] { display: inline-block; width: 80px; height: 36px; margin: 0 0 0 8px; padding: 0 8px; border: 1px solid var(--m33-grey-500); background: rgba(255, 255, 255, .7); border-radius: 0; }
#contactModal input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--m33-teal-500); }
#contactModal .wpcf7-list-item-label::before { width: 20px !important; height: 20px !important; border: 1px solid var(--m33-grey-500) !important; background: rgba(255, 255, 255, .7) !important; }
#contactModal .wpcf7-list-item-label::after { border-color: var(--m33-teal-600) !important; }

/* Eyebrow and multi-paragraph body on the band (Reserva de Pablo story). */
.m33-awband__eyebrow { font-weight: 700; color: var(--m33-white); }
.m33-awband__body + .m33-awband__body { margin-top: 12px; }

/* Image-and-text photos fill the frame from the Figma file. Each row's
   "Photo crop" setting picks which part of the photo is kept. */

/* Product hero with a multi-bottle image (Trio): a wider middle column so the
   bottles print at the same scale as a single bottle. */
@media (min-width: 992px) {
	.m33-pphero--wide .m33-pphero__spacer { width: 380px; }
	.m33-pphero--wide .m33-pphero__bottle { width: 588px; }
	.m33-pphero--wide .m33-pphero__gap { width: 380px; }
}
/* Mobile: when there are no flavor icons beside the bottle, centre the bottle. */
@media (max-width: 991px) {
	.m33-pphero__notes-wrap:empty { display: none; }
	.m33-pphero__spacer:has(+ .m33-pphero__notes-wrap:empty) { width: 100%; }
}

/* Figma photo framing (Oct 22): image-text photos keep the Figma height
   on desktop instead of stretching with the text, and cocktail cards use
   the Figma 384 x 329 photo shape. */
@media (min-width: 992px) {
	.m33-image-text .m33-image-text__media,
	.m33-image-text--half .m33-image-text__media,
	.m33-image-text--wide .m33-image-text__media { min-height: 0; height: var(--m33-it-h, 340px); align-self: center; }
	.m33-cocktails__card { height: auto; }
	.m33-cocktails__media { flex: none; aspect-ratio: 384 / 329; }
}

/* Shop grid (Oct 22): cards in a row stretch to the same height and the
   buttons sit at the bottom, so the CTAs line up across the row. */
@media (min-width: 992px) {
	.m33-product { align-self: stretch; }
	.m33-product__body { flex: 1 1 auto; }
	.m33-product__body > .m33-btn--tone { margin-top: auto; }
	.m33-product__body > .m33-btn--soldout { height: 42px; display: inline-flex; align-items: center; }
}

/* Cocktail grids with four or five picks (copy doc V3) */
@media (min-width: 992px) {
	.m33-cocktails__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.m33-cocktails__grid:has(> :nth-child(5):last-child) { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
	.m33-cocktails__grid:has(> :nth-child(5):last-child) > * { flex: 0 0 calc((100% - 64px) / 3); }
}

/* Pre-launch: recipe pages without a photo keep an empty grey photo area. */
.m33-recipe__photo--empty { background: var(--m33-grey-200); }
.m33-recipe__photo--empty::before { display: none; }

/* Age gate (Figma V3 "Age Gate"): paper card on a dark teal overlay. */
.m33-agegate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: 150px 16px 24px; background: rgba(11, 38, 45, .75); overflow-y: auto; }
.m33-agegate[hidden] { display: none; }
html.m33-ag-open { overflow: hidden; }
.m33-agegate__card { width: min(550px, 100%); padding: 44px 63px; display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; color: #000; }
.m33-agegate__logo { display: block; width: 185px; height: auto; }
.m33-agegate .m33-agegate__title { margin: 0; max-width: 424px; color: #000; font: 500 36px/44px var(--m33-sans); letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.m33-agegate__sub { margin: 0; color: #000; font: italic 400 18px/28px var(--m33-serif-italic); }
.m33-agegate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.m33-agegate__no { background: rgba(255, 255, 255, .5); color: var(--m33-grey-700); box-shadow: var(--m33-btn-shadow), inset 0 0 0 1px var(--m33-ink); }
.m33-agegate__no:hover, .m33-agegate__no:focus-visible { background: var(--m33-white); color: var(--m33-ink); }
.m33-agegate__msg { margin: 0; color: #000; font: italic 400 18px/26px var(--m33-serif-italic); }
.m33-agegate__msg:empty { display: none; }
.m33-agegate__legal { margin: 0; max-width: 424px; color: #000; font: 500 12px/18px var(--m33-sans); }
.m33-agegate__legal a { color: inherit; text-decoration: underline; }
.m33-agegate__legal a:focus-visible { outline: 2px solid var(--m33-teal-500); outline-offset: 2px; }
@media (max-width: 600px) {
	.m33-agegate { padding-top: 48px; }
	.m33-agegate__card { padding: 32px 24px; gap: 20px; }
	.m33-agegate .m33-agegate__title { font-size: 28px; line-height: 34px; }
	.m33-agegate__actions { gap: 16px; }
}

/* Tasting icons: rows of three, with a short last row centred (Reposado has five). */
.m33-pphero__notes { display: flex; flex-wrap: wrap; justify-content: center; }
.m33-pphero__note { flex: 0 0 calc((100% - 20px) / 3); min-width: 0; }
@media (max-width: 991px) {
	.m33-pphero__note { flex-basis: 100%; }
}

/* Prices: product cards and the product hero. */
.m33-price { margin: 0; font: 500 18px/26px var(--m33-sans); color: var(--m33-grey-700, #3d3d3d); }
.m33-price s { margin-right: 8px; color: var(--m33-grey-500, #8a8a8a); font-weight: 400; }
.m33-pphero__price { font-size: 22px; line-height: 30px; }

/* Bottle Nexus sets a 42px minimum height on its button wrapper, which sits it
   3px off our 36px buttons. Let the wrapper match the button. */
.m33-bn [data-component="button-wrapper"] { min-height: 0 !important; }

/* The Bottle Nexus classic layout carries the price; show only its button. */
.m33-bn [data-component="product-image"],
.m33-bn [data-component="button-title"],
.m33-bn [data-component="button-price"],
.m33-bn [data-component="add-quantity-selector"] { display: none !important; }

/* Show where the cursor is when the footer Newsletter link focuses the email field. */
.m33-newsletter__input:focus { outline: 2px solid #fff; outline-offset: 2px; }

/* Brian's review, Nov 3 2026 (QA #29-31). */
@media (min-width: 992px) {
	/* No arrow next to About; its menu still opens on hover and focus. */
	.m33-nav .menu-item-has-children > a::after { content: none; }
	/* Larger logo so "Tequila" under SOCORRO is easier to read. */
	.m33-header__logo { width: 170px; }
}
@media (max-width: 991px) {
	.m33-header__logo { width: 150px; }
}
/* Even out short paragraphs in photo bands so one word never sits alone on the last line. */
.m33-band p, .m33-band__heading { text-wrap: balance; }

/* Shop: center a two-card last row (5 products) */
@media (min-width: 992px) {
	.m33-products__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.m33-products__grid > .m33-product { grid-column: span 2; }
	.m33-products__grid > .m33-product:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* Cocktail cards: keep "Made with" and the button aligned across a row when a title wraps */
.m33-cocktails__body, .m33-rcard__body { flex: 1 1 auto; }
.m33-cocktails__made, .m33-rcard__made { margin-top: auto; }

/* Age gate: keep the subline on one line on tablet and desktop (Nov 11). */
@media (min-width: 601px) {
	.m33-agegate__card { padding-left: 40px; padding-right: 40px; }
	.m33-agegate__sub { white-space: nowrap; }
}