/* ==========================================================================
   Lopai Cellars — Design Tokens
   --------------------------------------------------------------------------
   The design-system token layer, as plain CSS custom properties. Pure CSS —
   no Hugo templating needed (the @font-face rules stay in main.css, which is
   the only file that needs the fingerprint pipeline).

   This file supersedes the old inline `:root { --color-* }` block in main.css.
   A "legacy aliases" section at the bottom maps every original variable name
   (--color-black, --max-width, …) onto the new system, so existing rules keep
   working unchanged while new work can use the richer tokens.
   ========================================================================== */

:root {
  /* ---- Brand core (shipped values) ------------------------------------- */
  --ink: #000000;
  --paper: #fdfdfd;
  --white: #ffffff;
  --cream: #f2ede3;

  /* ---- Earth accents (new) --------------------------------------------- */
  --brass: #9b804a;        /* gold/brass — afternoon light, foil, detail */
  --brass-deep: #7d6638;
  --brass-tint: #ece3d0;
  --pine: #132a1f;         /* deep cellar green */
  --pine-soft: #2f463a;
  --pine-tint: #dde4dd;
  --clay: #a6633d;         /* terracotta soil */
  --clay-deep: #864e2f;
  --clay-tint: #ecddd1;

  /* ---- Stone — warm neutral ramp --------------------------------------- */
  --stone-900: #1a1a1a;
  --stone-800: #333333;
  --stone-600: #666666;
  --stone-400: #999999;
  --stone-300: #cfcbc2;
  --stone-200: #e5e5e5;
  --stone-100: #efeae1;
  --stone-50:  #f7f4ee;

  /* ---- Earthy semantic states ------------------------------------------ */
  --positive: #3e6b4f;
  --critical: #993c2e;
  --notice: #9b804a;

  /* ---- Semantic aliases ------------------------------------------------ */
  --surface-page: var(--paper);
  --surface-raised: var(--white);
  --surface-sunken: var(--stone-50);
  --surface-cream: var(--cream);
  --surface-ink: var(--ink);
  --surface-pine: var(--pine);
  --surface-hover: var(--stone-100);

  --text-strong: var(--ink);
  --text-primary: var(--stone-800);
  --text-secondary: var(--stone-600);
  --text-muted: var(--stone-400);
  --text-inverse: var(--white);
  --text-accent: var(--brass);
  --text-on-ink: var(--white);
  --text-on-ink-muted: rgba(255, 255, 255, 0.6);

  --border-subtle: var(--stone-200);
  --border-strong: var(--ink);
  --border-on-ink: rgba(255, 255, 255, 0.18);

  --action: var(--ink);
  --action-hover: #333333;
  --action-text: var(--white);
  --link: var(--ink);
  --link-hover: #333333;
  --focus-ring: rgba(0, 0, 0, 0.45);
  --accent: var(--brass);
  --accent-hover: var(--brass-deep);

  --overlay-image: linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.55));
  --overlay-scrim: rgba(0, 0, 0, 0.8);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: 'Neutra2Text', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);
  --font-ui: var(--font-sans);

  --weight-book: 400;
  --weight-demi: 600;
  --weight-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  --text-lg: 1.4rem;
  --text-xl: 1.8rem;
  --text-2xl: 2.2rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;

  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-body: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;

  /* ---- Spacing & layout ------------------------------------------------ */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  --container-max: 68rem;
  --container-narrow: 44rem;
  --container-wide: 80rem;
  --gutter: var(--space-md);
  --touch-min: 44px;

  /* ---- Effects --------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 1px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width: 1px;
  --border-hair: 1px solid var(--border-subtle);
  --border-ink: 1px solid var(--ink);
  --border-faint: 1px solid var(--border-on-ink);

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(26, 22, 14, 0.05);
  --shadow-md: 0 4px 18px rgba(26, 22, 14, 0.08);
  --shadow-lg: 0 12px 44px rgba(26, 22, 14, 0.14);
  --shadow-overlay: 0 18px 60px rgba(0, 0, 0, 0.28);
  --text-shadow-hero: 0 1px 8px rgba(0, 0, 0, 0.6);

  --duration-fast: 0.2s;
  --duration-slow: 0.3s;
  --ease: ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-color: color var(--duration-fast) var(--ease),
                      background-color var(--duration-fast) var(--ease),
                      border-color var(--duration-fast) var(--ease);

  --z-dropdown: 10;
  --z-header: 100;
  --z-cart: 200;
  --z-dialog: 1000;
  --z-agegate: 1100;

  /* ======================================================================
     LEGACY ALIASES — original main.css variable names, mapped onto the new
     tokens so existing rules render identically. Safe to keep indefinitely;
     migrate rules to the semantic tokens above at your leisure.
     ====================================================================== */
  --color-accent-hover: var(--action-hover);
  --color-cream: var(--cream);
  --color-black: var(--ink);
  --color-white: var(--white);
  --color-bg: var(--paper);
  --color-text: var(--text-primary);
  --color-text-light: var(--text-secondary);
  --color-border: var(--border-subtle);
  --color-error: var(--critical);   /* fixes the old self-referential value */

  --font-body: var(--font-sans);
  --line-height: var(--leading-body);

  --max-width: var(--container-max);

  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
}
/* ==========================================================================
   Lopai Cellars — Main Stylesheet
   ========================================================================== */

/* Font
   ========================================================================== */

@font-face {
  font-family: 'Neutra2Text';
  src: url('/fonts/Neutra2Text_book-Lining.8a2fb4d8d8cce5b6836f15c81b9439f4f33d90b611eb0c600760e4c0da494c05.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neutra2Text';
  src: url('/fonts/Neutra2Text_Demi_Lining.5bb00eef42103ff505c8cf859d4d320668dc684bfdc0e2fa55f163da105c320f.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neutra2Text';
  src: url('/fonts/Neutra2Text_bold-Lining.c0298d09eae16184119e12b78037d48edd2280cf292d3604d57d71d67943278b.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Custom Properties
   --------------------------------------------------------------------------
   The token layer now lives in assets/css/tokens.css (bundled before this
   file in baseof.html). The legacy --color-*/--spacing-* names this stylesheet
   uses are aliased there, so the rules below resolve unchanged.
   ========================================================================== */

/* Reset & Base
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(16px, 0.25vw + 13px, 18px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

main {
  --main-padding: var(--spacing-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--main-padding);
}

a {
  color: var(--color-black);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent-hover);
}

/* Filled buttons rendered as links need white text. Scope this to the filled
   variants only — the outline/light variants (.btn-secondary, .btn-light,
   .btn-ghost) supply their own dark text and must not be forced white. */
a.btn-primary,
a.btn-brass,
a.c7-btn {
  color: var(--color-white);
}

a.btn-primary:hover,
a.btn-brass:hover,
a.c7-btn:hover {
  color: var(--color-white);
}

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-black);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

ul { list-style: none; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}

/* Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-white);
}

/* Header
   ========================================================================== */

.site-header {
  background-color: var(--color-black);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem var(--spacing-md) 0.3rem;
  position: relative;
}

.header-logo {
  text-decoration: none;
}

.header-logo img {
  height: 1.5rem;
  width: auto;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
}

.icon-btn {
  background: none;
  border: none;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.icon-btn:hover {
  opacity: 0.7;
  color: var(--color-white);
}

/* Hamburger */

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  flex-direction: column;
  gap: 0.3rem;
}

.hamburger span {
  display: block;
  width: 1.375rem;
  height: 1.5px;
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Navigation
   ========================================================================== */

.site-nav {
  border-top: none;
}

.site-nav > ul {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 0.4rem 0 0.7rem;
}

.site-nav a {
  color: var(--color-white);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-nav a:hover {
  opacity: 0.7;
}

/* Dropdown */

.has-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-black);
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
  min-width: 10rem;
  z-index: 10;
}

.has-dropdown:hover .dropdown {
  display: flex;
}

.dropdown li {
  text-align: center;
}

.dropdown a {
  display: block;
  padding: 0.5rem 1.2rem;
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: min(72vh, 620px);
  object-fit: cover;
  display: block;
}

.hero {
  margin: calc(-1 * var(--main-padding)) calc(-1 * var(--main-padding)) 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.55));
  padding: var(--spacing-md);
}

.home-tagline {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.home-subtitle {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: clamp(0.75rem, 2vw, 2rem);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.home-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.home-cta h1 {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.home-cta .btn {
  padding: clamp(0.4rem, 1vw, 0.6rem) clamp(1rem, 2vw, 1.6rem);
  font-size: clamp(0.65rem, 1.2vw, 0.75rem);
  background-color: var(--color-white);
  color: var(--color-black);
}

.home-cta .btn:hover {
  background-color: var(--color-border);
  color: var(--color-black);
}

/* Page Content
   ========================================================================== */

.page-content h1 {
  text-align: left;
  margin-bottom: var(--spacing-md);
}

.page-content h2 {
  margin-bottom: var(--spacing-sm);
}

.page-content p {
  margin-bottom: var(--spacing-sm);
}

/* Homepage editorial bands
   ========================================================================== */

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.home-release {
  padding: var(--spacing-xl) 0;
}

.home-release-head {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.home-release-head .eyebrow {
  margin-bottom: 0.6rem;
}

.home-release-foot {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.home-story-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.home-story-photo {
  width: 100%;
  height: 26rem;
  object-fit: cover;
  object-position: top;
}

.home-story-text .eyebrow {
  margin-bottom: var(--spacing-sm);
}

.home-story-text h2 {
  margin-bottom: var(--spacing-sm);
}

.home-story-text p {
  font-size: var(--text-md);
  margin-bottom: var(--spacing-sm);
}

.home-story-text .btn {
  margin-top: var(--spacing-sm);
}

/* Story Page
   ========================================================================== */

.story-head {
  margin-bottom: var(--spacing-lg);
}

.story-head .eyebrow {
  margin-bottom: var(--spacing-sm);
}

.story-lead {
  font-size: var(--text-2xl);
  max-width: 30rem;
}

.story-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.story-photo {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
  object-position: top;
  position: sticky;
  top: 7rem;
}

.story-prose h2 {
  font-size: var(--text-lg);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.story-prose h2:first-child {
  margin-top: 0;
}

.story-prose p {
  font-size: var(--text-md);
  margin-bottom: var(--spacing-sm);
}

.story-prose blockquote {
  margin: var(--spacing-lg) 0;
}

.story-prose blockquote::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--spacing-md);
  background: var(--brass);
}

.story-prose blockquote p {
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--color-black);
  text-wrap: balance;
}

/* Visit Page
   ========================================================================== */

.visit-intro {
  max-width: 44rem;
  margin-bottom: var(--spacing-xl);
}

.visit-intro .eyebrow {
  margin-bottom: var(--spacing-sm);
}

.visit-intro h1 {
  margin-bottom: var(--spacing-md);
}

.visit-intro p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-light);
}

.visit-intro .btn {
  margin-top: var(--spacing-sm);
}

.visit-location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.visit-info h2 {
  margin-bottom: var(--spacing-md);
}

.visit-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: var(--spacing-md);
}

.visit-icon {
  color: var(--brass);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.15rem;
}

.visit-row-text a {
  text-decoration: none;
  color: var(--color-text);
}

.visit-row-text a:hover {
  color: var(--color-accent-hover);
}

.visit-row-text p {
  margin-bottom: 0.1rem;
}

.visit-muted {
  color: var(--color-text-light);
}

.visit-contact {
  margin-top: var(--spacing-md);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.visit-contact a {
  color: var(--color-text-light);
}

.visit-map {
  width: 100%;
  height: 22rem;
  border: 0;
  display: block;
}

/* Contact Page
   ========================================================================== */

.contact-content {
  max-width: 44rem;
}

.contact-content .eyebrow {
  margin-bottom: var(--spacing-sm);
}

.contact-content h1 {
  margin-bottom: var(--spacing-md);
}

.contact-content p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-light);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.contact-content .c7-custom-form {
  margin-top: var(--spacing-md);
  text-align: left;
}

/* Join Page
   ========================================================================== */

.join-intro {
  max-width: 44rem;
  margin-bottom: var(--spacing-xl);
}

.join-intro .eyebrow {
  margin-bottom: var(--spacing-sm);
}

.join-intro h1 {
  margin-bottom: var(--spacing-md);
}

.join-intro p {
  font-size: var(--text-md);
  margin-bottom: var(--spacing-sm);
}

.join-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
}

.join-feature-num {
  display: block;
  font-size: var(--text-sm);
  color: var(--brass);
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.join-feature h3 {
  font-size: var(--text-md);
  margin-bottom: var(--spacing-xs);
}

.join-feature p {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.join-cta {
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
}

.join-cta h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-sm);
}

.join-cta p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--spacing-md);
  font-size: var(--text-sm);
}

/* C7 club-join button sits on the dark CTA band — flip it to light */
.join-cta .c7-btn,
.join-cta .c7-btn--primary,
.join-cta button {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}

.join-cta .c7-btn:hover,
.join-cta .c7-btn--primary:hover,
.join-cta button:hover {
  background-color: var(--color-cream) !important;
}

.join-foot {
  text-align: center;
  margin-top: var(--spacing-lg);
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

.join-foot a {
  color: var(--color-black);
}

/* Wines
   ========================================================================== */

.wine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg) var(--spacing-md);
}

.wine-card a {
  color: var(--color-black);
  text-decoration: none;
  display: block;
  text-align: center;
}

.wine-card a:hover {
  color: var(--color-accent-hover);
}

.wine-card-image {
  position: relative;
  height: 28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.wine-card-badge {
  position: absolute;
  top: 0;
  left: 0;
}

.wine-card--sold .wine-card-image img {
  opacity: 0.7;
}

.wine-card-image img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wine-card-placeholder,
.wine-detail-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.wine-detail-placeholder {
  height: 100%;
}

.wine-card-title {
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.3;
}

.wine-card-meta {
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.wines-page h1 {
  margin-bottom: var(--spacing-md);
}

.wines-intro {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-light);
}

.wines-intro p {
  margin-bottom: var(--spacing-sm);
}

/* Release sections on /wines/ index */
.wine-release-section {
  margin-bottom: var(--spacing-xl);
}

.wine-release-section:last-child {
  margin-bottom: 0;
}

.wine-release-head {
  margin-bottom: var(--spacing-lg);
}

.wine-release-head .eyebrow {
  display: block;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.wine-release-tagline {
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

/* Release page */
.wine-release-desc {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

/* Individual wine detail */
.wine-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-decoration: none;
  margin-bottom: var(--spacing-lg);
}

.wine-back:hover {
  color: var(--color-accent-hover);
}

.wine-detail-grid {
  display: grid;
  /* minmax(0, 1fr) keeps both columns at an even 50% — a plain 1fr track's
     implicit min-content minimum lets the C7 buy widget (injected into the
     right column at runtime) steal width from the image, shrinking the bottle. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-items: start;
}

.wine-detail-stage {
  background: transparent;
  height: 38rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.wine-detail-stage img {
  max-width: 100%;
  /* Absolute cap, NOT max-height: 100%. A percentage max-height resolves
     against the flex stage's height, which can momentarily read as indefinite
     during the grid reflow Commerce7 triggers — the cap drops, the bottle
     overflows to its intrinsic height on wide screens, then snaps back (the
     visible "shrink"). An absolute cap fits it to the 38rem stage from the
     first paint, independent of parent resolution. Keep in sync with the
     .wine-detail-stage height (and its mobile override below). */
  max-height: 38rem;
  min-height: 0;
  object-fit: contain;
}

.wine-detail-info h1 {
  text-align: left;
  margin-bottom: var(--spacing-sm);
}

.wine-detail-tags {
  margin-bottom: var(--spacing-md);
}

.wine-description {
  margin-bottom: var(--spacing-md);
}

.wine-description p {
  margin-bottom: var(--spacing-sm);
}

.wine-specs {
  margin: var(--spacing-md) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem var(--spacing-md);
}

.wine-specs dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-light);
  padding-top: 0.15rem;
}

.wine-specs dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.wine-detail-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-md) 0;
}

.wine-buy {
  margin-top: var(--spacing-md);
}

.wine-sold-out {
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* Footer
   ========================================================================== */

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.footer-divider {
  margin: var(--spacing-md) 0 var(--spacing-md);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.footer-top .c7-form__group {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.footer-top .c7-btn--primary {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
}

.footer-social a {
  color: var(--color-text-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.footer-social a:hover {
  opacity: 0.7;
}

/* Hide C7 subscribe label, use placeholder instead */
.c7-subscribe label,
.c7-subscribe .c7-required {
  display: none !important;
}

.c7-subscribe input[type="email"]::placeholder {
  color: var(--color-text-light);
}

.footer-meta {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.footer-meta a {
  color: var(--color-text-light);
}

.footer-meta a:hover {
  color: var(--color-accent-hover);
}

/* Commerce7 Theme Overrides
   ========================================================================== */

:root {
  /* Colors — map C7 palette to Lopai design tokens.
     !important needed because C7's JS injects tenant brand colors dynamically. */
  --c7-primary-color: var(--color-black) !important;
  --c7-primary-color-dark: var(--color-accent-hover) !important;
  --c7-primary-color-text: var(--color-black) !important;
  --c7-primary-color-focus: rgba(0, 0, 0, 0.15) !important;
  --c7-link-color: var(--color-black) !important;
  --c7-body-text-color: var(--color-text) !important;
  --c7-alt-text-color: var(--color-text-light) !important;
  --c7-heading-text-color: var(--color-black) !important;
  --c7-border-color: var(--color-border) !important;
  --c7-bg: var(--color-bg) !important;
  --c7-bg-alt: var(--color-cream) !important;

  /* Buttons */
  --c7-primary-button-bg: var(--color-black) !important;
  --c7-primary-button-bg-hover: var(--color-accent-hover) !important;
  --c7-primary-button-text-color: var(--color-white) !important;
  --c7-cart-count-bg: var(--color-black) !important;

  /* Typography */
  --c7-heading-font-weight: 400 !important;

  /* Shape — sharp edges to match Lopai style */
  --c7-border-radius: 0 !important;
  --c7-button-border-radius: 0 !important;
  --c7-field-border-radius: 0 !important;
  --c7-modal-border-radius: 0 !important;
  --c7-dropdown-border-radius: 0 !important;
  --c7-block-border-radius: 0 !important;
}

/* Hide C7 club page title (redundant with nav context) */
.c7-content > .c7-h1 {
  display: none;
}

/* C7 error styling — remove pink backgrounds and red text */
.c7-message--alert-error {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.c7-form__error {
  color: var(--color-error) !important;
}

.c7-form__field--error input,
.c7-form__field--error select,
.c7-form__field--error textarea {
  border-color: var(--color-error) !important;
}

/* Buttons — match site button style */
.c7-btn--primary {
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
}

/* Hide C7's built-in cart/account triggers (we use custom header icons).
   Positioned off-screen but with high z-index so the side cart overlay
   (which is a child of #c7-cart) renders above the sticky header. */
#c7-cart {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 200;
}

#c7-account {
  position: fixed;
  left: -9999px;
  top: -9999px;
}

/* Commerce7 Widget Overrides
   ========================================================================== */

.c7-subscribe form {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.c7-subscribe .c7-message--alert-error {
  width: 100%;
  margin-bottom: var(--spacing-xs);
  background: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.c7-subscribe input[type="email"] {
  font-family: var(--font-body);
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  min-width: 16rem;
  outline: none;
}

.c7-subscribe input[type="email"]:focus {
  border-color: var(--color-black);
}

/* Subscribe form error styling */

.c7-subscribe .c7-form__error {
  font-size: var(--text-xs);
}

.c7-subscribe button,
.c7-subscribe input[type="submit"] {
  font-family: var(--font-body);
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: 0.7rem 1.5rem;
  font-size: var(--text-sm);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
}

.c7-subscribe button:hover,
.c7-subscribe input[type="submit"]:hover {
  background-color: var(--color-accent-hover);
}

/* Checkout Page
   ========================================================================== */

.checkout-page {
  background-color: var(--color-white);
}

/* Age Gate — styling now lives in the <lopai-age-gate> web component's shadow
   DOM (assets/js/lopai-ui.js); no global rules needed here. */

/* Responsive
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --spacing-lg: 2.5rem;
    --spacing-xl: 3.5rem;
    --text-2xl: 1.8rem;
    --text-xl: 1.4rem;
  }

  main {
    --main-padding: var(--spacing-sm);
    padding: var(--main-padding);
  }

  /* Mobile header — hamburger left, logo absolutely centered, icons right */
  .header-top {
    justify-content: space-between;
  }

  .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header-icons {
    position: static;
    transform: none;
  }

  .header-logo img {
    height: 1.25rem;
  }

  /* Mobile nav */
  .hamburger {
    display: flex;
  }

  .site-nav {
    display: none;
    border-top: none;
  }

  .site-nav.open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
  }

  .site-nav li {
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-nav a {
    display: block;
    padding: 1rem;
    font-size: var(--text-sm);
  }

  /* Mobile dropdown — always visible, inline */
  .dropdown {
    display: flex;
    position: static;
    transform: none;
    min-width: 0;
    padding: 0;
  }

  .dropdown li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dropdown a {
    font-size: var(--text-sm);
    padding: 0.75rem 1rem;
    opacity: 0.7;
  }

  /* Hero */
  .hero {
    padding: 0;
  }

  .home-cta {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  /* Homepage bands */
  .home-story-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .home-story-photo {
    height: 18rem;
  }

  /* Story */
  .story-body {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .story-photo {
    position: static;
    max-height: 22rem;
    order: -1;
  }

  /* Wines */
  .wine-card-image {
    height: 14rem;
    margin-bottom: var(--spacing-xs);
  }

  .wine-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-sm);
  }

  .wine-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .wine-detail-stage {
    height: 24rem;
  }

  .wine-detail-stage img {
    max-height: 24rem;
  }

  .wine-detail-info h1 {
    text-align: center;
  }

  /* Join */
  .join-features {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /* Visit */
  .visit-location {
    grid-template-columns: 1fr;
  }

  .visit-map {
    height: 17.5rem;
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .wine-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile nav toggle script (inline, no external JS file)
   Activated via inline <script> in header partial */
/* ==========================================================================
   Lopai Cellars — Component primitives (CSS)
   --------------------------------------------------------------------------
   Plain CSS classes for the design-system pieces the shipped site didn't have
   yet: extra button variants, eyebrows, badges, tags, dividers, pull quotes,
   and a couple of section-surface helpers. Same flat / square / hairline
   language as the existing .btn and .wine-* rules. No build step, no JS.

   Loaded AFTER main.css (see INTEGRATION.md), so these can extend the base
   .btn defined there. Author against the tokens in tokens.css.
   ========================================================================== */

/* ---- Button variants (extend the existing .btn / .btn-primary) --------- */
.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn-secondary:hover {
  background-color: var(--ink);
  color: var(--white);
}

.btn-light {
  background-color: var(--white);
  color: var(--ink);
}
.btn-light:hover {
  background-color: var(--cream);
  color: var(--ink);
}

/* Editorial brass CTA — use sparingly, one per view at most. */
.btn-brass {
  background-color: var(--brass);
  color: var(--white);
}
.btn-brass:hover {
  background-color: var(--brass-deep);
  color: var(--white);
}

.btn-ghost {
  background-color: transparent;
  color: var(--ink);
}
.btn-ghost:hover {
  background-color: var(--surface-hover);
  color: var(--ink);
}

/* Size modifiers */
.btn-sm { padding: 0.6rem 1.4rem; font-size: var(--text-xs); }
.btn-lg { padding: 1.05rem 2.8rem; font-size: var(--text-base); }

/* ---- Eyebrow — the small tracked label voice --------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.eyebrow--brass { color: var(--brass); }
.eyebrow--inverse { color: var(--text-on-ink-muted); }

/* ---- Badge — uppercase status marker ----------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  white-space: nowrap;
}
.badge--sold {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--border-subtle);
}
.badge--brass { background: var(--brass); border-color: var(--brass); }
.badge--pine  { background: var(--pine);  border-color: var(--pine); }
.badge--clay  { background: var(--clay);  border-color: var(--clay); }
.badge--outline {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.badge--critical {
  color: var(--critical);
  background: transparent;
  border-color: var(--critical);
}

/* ---- Tag — quiet sentence-case metadata chip --------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.tag--solid { color: var(--text-primary); background: var(--surface-sunken); border-color: transparent; }
.tag--cream { color: var(--text-primary); background: var(--cream); border-color: transparent; }

/* A row of tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- Divider — hairline rule, optional centered label ------------------ */
.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-lg) 0;
}
.divider-labeled {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}
.divider-labeled::before,
.divider-labeled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.divider-labeled > span {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---- Pull quote — editorial, brass rule above, tracked attribution ----- */
.pullquote {
  margin: 0;
  max-width: 40rem;
}
.pullquote::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--space-md);
  background: var(--brass);
}
.pullquote blockquote {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  text-wrap: balance;
}
.pullquote figcaption {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pullquote--center { text-align: center; }
.pullquote--center::before { margin-left: auto; margin-right: auto; }

/* ---- Section surfaces — for building new editorial bands --------------- */
/* Full-bleed colored band that still centers its content to --container-max.
   Use on a <section>; put a .surface-inner inside for the column. */
.surface-cream { background: var(--cream); }
.surface-sunken { background: var(--surface-sunken); }
.surface-ink { background: var(--ink); color: var(--text-on-ink); }
.surface-pine { background: var(--pine); color: var(--text-on-ink); }
.surface-ink h1, .surface-ink h2, .surface-ink h3,
.surface-pine h1, .surface-pine h2, .surface-pine h3 { color: var(--white); }

.surface-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}