/* ============================================================
   FINESIP CATALOGUE — DARK MODE WEB-ART
   Design System: Midnight + Rose + Cream (FineSip Brand v2.1)
   ============================================================ */

:root {
  --color-primary: #1B305C;
  --color-primary-light: #2a4580;
  --color-primary-dark: #0A0A14;
  --color-primary-10: rgba(28, 48, 93, 0.1);
  --color-primary-20: rgba(28, 48, 93, 0.2);
  /* Gold removed — Rose is sole accent (FineSip Brand v2.1) */
  --color-accent-rose: #DA1B5C;
  --color-map-accent: #DA1B5C;
  --color-map-accent-soft: rgba(219, 27, 92, 0.14);
  --color-map-accent-mid: rgba(219, 27, 92, 0.34);
  --color-map-accent-strong: rgba(219, 27, 92, 0.9);
  --color-neutral-50: #1a1a2e;
  --color-neutral-100: #16162a;
  --color-neutral-200: #2a2a40;
  --color-neutral-400: #6e6a64;
  --color-neutral-600: rgba(248, 241, 231, 0.6);
  --color-neutral-900: #F8F1E7;
  --color-surface: #F8F1E7;
  --color-surface-warm: #0e0e1c;
  --color-overlay: rgba(10, 10, 20, 0.82);
  --color-ink: #0A0A14;
  --color-cream: #F8F1E7;
  --color-glass: rgba(255, 255, 255, 0.04);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-glass-hover: rgba(255, 255, 255, 0.07);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --text-h1: clamp(2.8rem, 5vw, 5.4rem);
  --text-h2: clamp(2rem, 4vw, 3.2rem);
  --text-h3: clamp(1.55rem, 2.5vw, 2.2rem);
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-label: 0.6875rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-pill: 0px;
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 14px 32px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 28px 64px rgba(0, 0, 0, 0.5), 0 8px 18px rgba(0, 0, 0, 0.35);
  /* --shadow-gold removed — use --shadow-rose */
  --shadow-rose: 0 12px 32px rgba(219, 27, 92, 0.2);
  --shadow-map-accent: 0 16px 34px rgba(219, 27, 92, 0.25);
  /* --glow-gold removed — use --glow-rose */
  --glow-rose: 0 0 20px rgba(219, 27, 92, 0.3), 0 0 40px rgba(219, 27, 92, 0.1);
  --glow-card: 0 0 1px rgba(218, 27, 92, 0.4), 0 0 30px rgba(218, 27, 92, 0.06);
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --duration-slower: 620ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --max-content-width: 1240px;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  color: var(--color-cream);
  /* Brand midnight-blue gradient (matches the rest of the site) instead of the
     near-black --color-ink, per the client's "remove the black background". */
  background-color: #0D1529;
  background-image:
    var(--grain),
    radial-gradient(circle at 20% 10%, rgba(219, 27, 92, 0.05), transparent 42%),
    radial-gradient(circle at 80% 90%, rgba(218, 27, 92, 0.04), transparent 42%),
    linear-gradient(160deg, #0D1529 0%, #1B305C 50%, #162347 100%);
  background-attachment: fixed;
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Self-sufficient overflow guard: the catalogue uses full-bleed
     (margin-inline: calc(50% - 50vw)) and -10vw glows that rely on clipping.
     Don't depend on shared.css's body{overflow-x:hidden}. clip avoids creating
     a scroll container while still preventing any sideways scroll. */
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

main {
  min-height: 100svh;
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-rose);
  outline-offset: 3px;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

.page-shell {
  width: min(calc(100% - 40px), var(--max-content-width));
  margin: 0 auto;
}

.page-section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* ============================================================
   TYPOGRAPHY ATOMS
   ============================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  color: rgba(248, 241, 231, 0.55);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 241, 231, 0.3));
}

.section-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--color-cream);
}

.section-subtitle {
  margin: var(--space-4) 0 0;
  max-width: 42rem;
  color: rgba(248, 241, 231, 0.6);
  font-size: var(--text-body-lg);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.9rem 1.3rem;
  border: 1px solid transparent;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-default),
    background-color var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
  cursor: pointer;
}

button,
[role="button"],
a,
.country-chip,
.region-chip,
.map-country-node,
.map-hotspot,
.mode-switch__button {
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  color: var(--color-ink);
  background: linear-gradient(135deg, #E84D7D, var(--color-accent-rose));
  box-shadow: var(--shadow-rose);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-accent-rose), #B5164D);
  box-shadow: var(--glow-rose);
}

.btn--dark {
  color: var(--color-cream);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border: 1px solid rgba(218, 27, 92, 0.2);
  box-shadow: var(--shadow-medium);
}

.btn--dark:hover {
  border-color: rgba(218, 27, 92, 0.4);
  box-shadow: var(--glow-rose);
}

.btn--ghost {
  color: var(--color-cream);
  border-color: rgba(248, 241, 231, 0.12);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  border-color: rgba(218, 27, 92, 0.4);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: var(--glow-rose);
}

.btn--soft {
  color: var(--color-cream);
  border-color: rgba(248, 241, 231, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.btn--soft:hover {
  border-color: rgba(218, 27, 92, 0.3);
}

.btn--icon {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}

/* ============================================================
   SITE HEADER — HIDDEN (replaced by nav orb)
   ============================================================ */

.site-header {
  display: none;
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 5rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-cream);
}

.header-nav {
  display: none;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.header-nav a {
  position: relative;
  color: rgba(248, 241, 231, 0.7);
  font-size: var(--text-body-sm);
}

.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 1px;
  background: var(--color-accent-rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-luxury);
}

.header-nav a:hover::after,
.header-nav a.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(248, 241, 231, 0.6);
}

.lang-switcher button {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-switcher button.is-active {
  color: var(--color-accent-rose);
}

.header-cta {
  display: none;
}

/* ============================================================
   MENU TOGGLE — HIDDEN (replaced by nav orb)
   ============================================================ */

.menu-toggle {
  display: none;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-normal) var(--ease-default);
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before {
  position: absolute;
  top: -0.32rem;
  left: 0;
}

.menu-toggle__bars::after {
  position: absolute;
  top: 0.32rem;
  left: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  transform: translateY(0.32rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  transform: translateY(-0.32rem) rotate(-45deg);
}

/* ============================================================
   MOBILE DRAWER — HIDDEN
   ============================================================ */

.mobile-drawer {
  display: none;
}

.mobile-drawer.is-open {
  display: none;
}

.mobile-drawer__nav {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  text-align: center;
}

.mobile-drawer__nav a {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 7vw, 3rem);
  color: var(--color-cream);
}

/* ============================================================
   CATALOGUE HERO — Cinematic full-viewport opening
   ============================================================ */

.catalogue-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: var(--space-12);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(7rem, 14vw, 10rem) max(20px, calc((100vw - var(--max-content-width)) / 2)) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  color: var(--color-cream);
  background:
    linear-gradient(180deg,
      rgba(10, 10, 20, 1) 0%,
      rgba(28, 48, 93, 0.18) 40%,
      rgba(219, 27, 92, 0.06) 70%,
      rgba(10, 10, 20, 1) 100%);
}

.catalogue-hero::before {
  content: "";
  position: absolute;
  inset: -50%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(218, 27, 92, 0.05) 0deg,
      transparent 60deg,
      rgba(219, 27, 92, 0.03) 120deg,
      transparent 180deg,
      rgba(28, 48, 93, 0.05) 240deg,
      transparent 300deg,
      rgba(218, 27, 92, 0.05) 360deg);
  animation: heroGradientRotate 40s linear infinite;
  pointer-events: none;
}

.catalogue-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(219, 27, 92, 0.1), transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(218, 27, 92, 0.08), transparent 40%);
  pointer-events: none;
}

@keyframes heroGradientRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.catalogue-hero__grain {
  position: absolute;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
  z-index: 1;
}

.catalogue-hero__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(0deg, var(--color-ink), transparent);
  pointer-events: none;
  z-index: 1;
}

.catalogue-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-8);
  width: 100%;
  align-content: center;
  text-align: left;
}

.catalogue-hero__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 10vw, 8.5rem);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.04em;
  background: linear-gradient(160deg, #ffffff 20%, rgba(248, 241, 231, 0.7) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.catalogue-hero__rule {
  width: clamp(4rem, 12vw, 7rem);
  height: 2px;
  margin: var(--space-6) 0;
  background: linear-gradient(90deg, rgba(248, 241, 231, 0.2), transparent);
}

.catalogue-hero__intro {
  max-width: 38rem;
  margin: 0;
  color: rgba(248, 241, 231, 0.7);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.7;
}

.catalogue-hero__story {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
  margin: 0;
  color: rgba(248, 241, 231, 0.55);
  text-align: left;
}

/* Stats glass bar — sidebar on desktop, bottom bar on mobile */
.catalogue-hero__stats-bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin: 0;
  background: rgba(218, 27, 92, 0.1);
  border: 1px solid rgba(218, 27, 92, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero-stat {
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.75rem);
  background: rgba(10, 10, 20, 0.6);
  text-align: center;
  transition: background var(--duration-normal) var(--ease-luxury);
}

.hero-stat:hover {
  background: rgba(255, 255, 255, 0.04);
}

.hero-stat__value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.9;
  color: rgba(248, 241, 231, 0.55);
}

.hero-stat__label {
  display: block;
  margin-top: var(--space-2);
  color: rgba(248, 241, 231, 0.5);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Legacy aliases for JS compat */
.hero-panel__title { margin: 0; }
.hero-panel__intro { margin: 0; }
.hero-panel__story { }
.hero-panel__stats { }

/* ============================================================
   MODE SWITCH — Dark glassmorphism pill
   ============================================================ */

.mode-switch {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-block: var(--space-3);
  background: transparent;
  border: 0;
}

.mode-switch__glow {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(10, 10, 20, 0.88);
  border-bottom: 1px solid rgba(218, 27, 92, 0.06);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.mode-switch__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}

.mode-switch__list {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  transition: border-radius 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Sliding indicator pill */
.mode-switch__indicator {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  width: calc(50% - 0.35rem);
  height: calc(100% - 0.7rem);
  background: linear-gradient(135deg, var(--color-primary), rgba(218, 27, 92, 0.18));
  border: 1px solid rgba(218, 27, 92, 0.25);
  box-shadow: 0 0 16px rgba(218, 27, 92, 0.12), 0 0 32px rgba(218, 27, 92, 0.04);
  z-index: 0;
  pointer-events: none;
  /* GSAP handles the animation, but add CSS transition as fallback */
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s ease;
}

.mode-switch__indicator.is-right {
  transform: translateX(100%);
}

.mode-switch__button {
  position: relative;
  z-index: 1;
  padding: 0.9rem 1.1rem;
  color: rgba(248, 241, 231, 0.45);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    color 0.4s var(--ease-luxury);
}

.mode-switch__button:hover {
  color: rgba(248, 241, 231, 0.7);
}

.mode-switch__button.is-active {
  color: var(--color-cream);
}

.mode-switch__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  color: rgba(248, 241, 231, 0.5);
  font-size: var(--text-body-sm);
}

/* ============================================================
   COUNTRY & REGION FILTERS
   ============================================================ */

.country-filter {
  display: grid;
  gap: var(--space-8);
}

.country-filter__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.region-filter[hidden] {
  display: none;
}

.region-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.region-chip {
  min-height: 2.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(218, 27, 92, 0.15);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  color: rgba(248, 241, 231, 0.7);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury),
    background-color var(--duration-normal) var(--ease-luxury),
    color var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury);
}

.region-chip:hover,
.region-chip.is-active {
  transform: translateY(-2px);
  border-color: rgba(218, 27, 92, 0.5);
  background: rgba(218, 27, 92, 0.12);
  color: var(--color-accent-rose);
  box-shadow: var(--glow-rose);
}

.country-chip {
  min-width: 0;
  padding: 1.35rem 1.3rem;
  border: 1px solid rgba(218, 27, 92, 0.12);
  border-left: 3px solid rgba(218, 27, 92, 0.25);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-subtle);
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury),
    background var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury);
}

.country-chip.is-active,
.country-chip:hover {
  transform: translateY(-4px);
  border-color: rgba(218, 27, 92, 0.5);
  border-left-color: var(--color-accent-rose);
  background: rgba(218, 27, 92, 0.08);
  box-shadow: var(--glow-rose);
}

.country-chip__label {
  display: block;
  color: var(--color-accent-rose);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.country-chip__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: rgba(248, 241, 231, 0.5);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   CATALOGUE LAYOUT
   ============================================================ */

.catalogue-layout {
  display: grid;
  gap: var(--space-16);
}

.catalogue-panel {
  display: none;
}

.catalogue-panel.is-active {
  display: block;
}

.catalogue-panel .reveal-up,
.catalogue-panel .reveal-fade,
.catalogue-panel .reveal-left,
.catalogue-panel .reveal-right {
  opacity: 1;
  transform: none;
}

/* ============================================================
   ROBUST ENTRANCES (CSS-driven, ticker-independent)
   The catalogue used to reveal panels/cards/reveals with GSAP+ScrollTrigger
   fromTo({opacity:0}); when a trigger didn't fire (panel shown from
   display:none) or the GSAP ticker hitched, elements were stranded INVISIBLE
   — the "bug on arriving / on clicking Map Explorer". These pure-CSS rules
   always reach their end state, so nothing can be stranded.
   ============================================================ */

/* Force every reveal on the catalogue + detail pages to its visible resting
   state, defeating any inline opacity:0 / transform / blur left by the shared
   scroll-reveal observers (!important overrides inline styles). */
body[data-page="catalogue"] [class*="reveal-"],
body[data-page="detail"] [class*="reveal-"] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Wine cards rise in with a light CSS stagger (first 8, then a shared delay).
   TRANSFORM-ONLY (no opacity) by design: the worst case if the animation
   engine is ever paused is a card that's slightly offset but still fully
   visible — never an invisible/stranded grid. */
.card-grid .wine-card {
  animation: catalogueCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.card-grid .wine-card:nth-child(1) { animation-delay: 0.03s; }
.card-grid .wine-card:nth-child(2) { animation-delay: 0.08s; }
.card-grid .wine-card:nth-child(3) { animation-delay: 0.13s; }
.card-grid .wine-card:nth-child(4) { animation-delay: 0.18s; }
.card-grid .wine-card:nth-child(5) { animation-delay: 0.23s; }
.card-grid .wine-card:nth-child(6) { animation-delay: 0.28s; }
.card-grid .wine-card:nth-child(7) { animation-delay: 0.33s; }
.card-grid .wine-card:nth-child(8) { animation-delay: 0.38s; }
.card-grid .wine-card:nth-child(n+9) { animation-delay: 0.42s; }
@keyframes catalogueCardIn {
  from { transform: translateY(20px); }
  to   { transform: none; }
}

.catalogue-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-8);
}

.catalogue-summary__text {
  color: rgba(248, 241, 231, 0.6);
  font-size: var(--text-body-lg);
}

.card-grid {
  display: grid;
  gap: var(--space-8);
}

/* Featured first card spans full width */
.card-grid .wine-card:first-child {
  grid-column: 1 / -1;
  padding: var(--space-8);
  border-left: 3px solid var(--color-accent-rose);
  background:
    radial-gradient(circle at top left, rgba(218, 27, 92, 0.06), transparent 40%),
    radial-gradient(circle at bottom right, rgba(219, 27, 92, 0.04), transparent 40%),
    rgba(255, 255, 255, 0.03);
}

.card-grid .wine-card:first-child .wine-card__top {
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: var(--space-8);
}

.card-grid .wine-card:first-child .wine-card__title {
  font-size: var(--text-h2);
}

/* ============================================================
   WINE CARD — Glassmorphism with border glow & 3D tilt-ready
   ============================================================ */

.wine-card {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-6) var(--space-8);
  border: 1px solid rgba(218, 27, 92, 0.1);
  background:
    radial-gradient(circle at top right, rgba(219, 27, 92, 0.04), transparent 40%),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition:
    transform var(--duration-slow) var(--ease-luxury),
    box-shadow var(--duration-slow) var(--ease-luxury),
    border-color var(--duration-slow) var(--ease-luxury);
  transform-style: preserve-3d;
  will-change: transform;
}

.wine-card--clickable {
  cursor: pointer;
}

.wine-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(218, 27, 92, 0.35);
  box-shadow:
    var(--shadow-elevated),
    var(--glow-card),
    0 0 60px rgba(218, 27, 92, 0.04);
}

.wine-card__top {
  display: grid;
  grid-template-columns: minmax(112px, 132px) 1fr;
  gap: var(--space-4);
  align-items: center;
}

.wine-card__meta {
  display: grid;
  gap: var(--space-2);
}

.wine-card__country {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-accent-rose);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wine-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: 0.98;
  font-weight: 400;
  color: var(--color-cream);
}

.wine-card__producer,
.wine-card__region {
  color: rgba(248, 241, 231, 0.55);
  font-size: var(--text-body-sm);
}

.wine-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.38rem 0.6rem;
  color: var(--color-cream);
  background: rgba(219, 27, 92, 0.2);
  border: 1px solid rgba(219, 27, 92, 0.3);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(219, 27, 92, 0.1);
}

.wine-card__note {
  margin: 0;
  color: rgba(248, 241, 231, 0.55);
}

.wine-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}

.wine-card__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wine-card__vintage {
  color: var(--color-accent-rose);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   BOTTLE — CSS-drawn, dark-mode tinted
   ============================================================ */

.bottle {
  position: relative;
  width: 100%;
  max-width: 128px;
  aspect-ratio: 1 / 3.6;
  margin-inline: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4));
  transition: transform 0.6s var(--ease-luxury);
}

.wine-card:hover .bottle {
  transform: translateY(-6px);
}

.bottle--detail {
  max-width: 200px;
}

.bottle--detail .bottle__image {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.4));
  transition: transform 0.6s var(--ease-luxury);
}

.bottle--detail:hover .bottle__image {
  transform: translateY(-6px) scale(1.02);
}

.bottle--image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.bottle__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.bottle__glass {
  position: absolute;
  inset: 6% 18% 0;
  border-radius: 28% 28% 18% 18% / 12% 12% 8% 8%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 38%),
    var(--bottle-fill, linear-gradient(180deg, #2a3a2a, #1a2a1a));
}

.bottle__neck {
  position: absolute;
  top: 0;
  left: 38%;
  width: 24%;
  height: 17%;
  border-radius: 22% 22% 8% 8%;
  background: var(--bottle-fill, linear-gradient(180deg, #2a3a2a, #1a2a1a));
}

.bottle__foil {
  position: absolute;
  top: 0;
  left: 35%;
  width: 30%;
  height: 8%;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, rgba(218, 27, 92, 0.6), rgba(10, 10, 20, 0.6));
}

.bottle__label {
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 20%;
  padding: 0.7rem 0.55rem;
  background: linear-gradient(180deg, rgba(248, 241, 231, 0.9), rgba(220, 210, 195, 0.85));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.bottle__label strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  line-height: 1.05;
  color: var(--color-ink);
}

.bottle__label span {
  display: block;
  margin-top: 0.3rem;
  color: rgba(10, 10, 20, 0.6);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bottle[data-style="sparkling"] .bottle__neck {
  height: 21%;
}

.bottle[data-color="White"] {
  --bottle-fill: linear-gradient(180deg, #3a3520, #2a2510 70%, #1a1808);
}

.bottle[data-color="Rosé"] {
  --bottle-fill: linear-gradient(180deg, #3d1a24, #2d0e18 70%, #1a060e);
}

.bottle[data-color="Red"] {
  --bottle-fill: linear-gradient(180deg, #2a1018, #1a0810 72%, #0e0408);
}

/* ============================================================
   MAP EXPLORER
   ============================================================ */

.map-explorer {
  display: grid;
  gap: var(--space-6);
}

.map-explorer__intro {
  display: grid;
  gap: var(--space-2);
}

.map-shell {
  position: relative;
  display: grid;
  gap: var(--space-6);
  align-items: stretch;
}

.map-canvas {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(218, 27, 92, 0.1);
  background:
    radial-gradient(circle at top left, rgba(219, 27, 92, 0.06), transparent 30%),
    radial-gradient(circle at bottom right, rgba(28, 48, 93, 0.08), transparent 30%),
    rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}

.map-toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.map-breadcrumbs,
.map-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.map-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.3rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(218, 27, 92, 0.12);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  color: rgba(248, 241, 231, 0.7);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury),
    background-color var(--duration-normal) var(--ease-luxury),
    color var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury);
}

.map-breadcrumb::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-map-accent-mid);
}

.map-breadcrumb:hover,
.map-breadcrumb.is-active {
  transform: translateY(-1px);
  border-color: var(--color-map-accent-mid);
  background: rgba(219, 27, 92, 0.1);
  color: var(--color-cream);
  box-shadow: var(--glow-rose);
}

.map-breadcrumb:hover::before,
.map-breadcrumb.is-active::before {
  background: var(--color-map-accent);
}

/* ============================================================
   MAP STAGE — Dark atmosphere with star-field dots
   ============================================================ */

.map-stage {
  position: relative;
  min-height: clamp(430px, 64vw, 720px);
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(248, 241, 231, 0.15), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(248, 241, 231, 0.1), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(248, 241, 231, 0.12), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(248, 241, 231, 0.08), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(218, 27, 92, 0.15), transparent),
    radial-gradient(1px 1px at 70% 90%, rgba(219, 27, 92, 0.1), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(218, 27, 92, 0.12), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(248, 241, 231, 0.08), transparent),
    linear-gradient(180deg, rgba(10, 10, 20, 0.95), rgba(14, 14, 28, 0.98));
  box-shadow: inset 0 0 0 1px rgba(218, 27, 92, 0.06);
}

.map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(219, 27, 92, 0.06), transparent 22%),
    radial-gradient(circle at 84% 78%, rgba(218, 27, 92, 0.05), transparent 26%);
  pointer-events: none;
}

.map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  /* Soft midnight-blue vignette (no black): transparent at centre so the
     brand gradient shows, deepening to brand-navy at the edges. */
  background:
    radial-gradient(circle at 50% 52%, rgba(22, 35, 71, 0) 0, rgba(22, 35, 71, 0.12) 30%, rgba(13, 21, 41, 0.4) 68%, rgba(13, 21, 41, 0.58) 100%);
  transition: opacity var(--duration-slower) var(--ease-default);
  pointer-events: none;
}

.map-stage.is-country-focused::after {
  opacity: 1;
}

.map-world-stage,
.map-focus-stage {
  position: absolute;
  inset: 0;
}

.map-world-stage {
  z-index: 1;
  display: grid;
  place-items: center;
  transform-origin: 0 0;
  will-change: transform, opacity;
  /* clip the pan/zoom layer (.map-world-figure) so the dragged map never
     bleeds outside the stage */
  overflow: hidden;
  transition:
    filter var(--duration-slower) var(--ease-default),
    opacity var(--duration-slower) var(--ease-default);
}

.map-stage.is-country-focused .map-world-stage {
  /* Hide the world map entirely in the focus view: the dedicated country
     SVG (.map-focus-stage__canvas) is the focal element, and the world map
     behind it just read as a distracting texture. Backstop for the inline
     opacity:0 that updateMapStage() also sets via GSAP. */
  opacity: 0;
}

.map-world-figure {
  position: absolute;
  inset: 0;
}

/* The pan/zoom transform lives on .map-world-frame (it holds the base map +
   country badges, so both stay perfectly aligned while panning/zooming).
   Desktop: the frame fills the figure (current look). Mobile: see the
   responsive block — it becomes an undistorted, height-filling "cover" map. */
.map-world-frame {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  /* No will-change: a promoted compositor layer would be rasterised once at the
     base size and then GPU-scaled (blurry) on zoom. Letting the browser
     re-rasterise the inline SVG at the zoomed scale keeps the map crisp. */
}

/* ── World-view pan & zoom affordances ── */
.map-stage.is-pannable {
  touch-action: none;
  cursor: grab;
}

.map-stage.is-pannable:active {
  cursor: grabbing;
}

.map-zoom-controls {
  position: absolute;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 5;
  display: grid;
  gap: 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.map-stage.is-pannable .map-zoom-controls {
  opacity: 1;
  pointer-events: auto;
}

.map-zoom-controls__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(218, 27, 92, 0.25);
  border-radius: 10px;
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-cream);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.map-zoom-controls__btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.map-zoom-controls__btn:hover:not(:disabled) {
  border-color: rgba(218, 27, 92, 0.55);
  color: var(--color-accent-rose);
}

.map-zoom-controls__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.map-world-base {
  position: absolute;
  left: -0.104%;
  top: 0.556%;
  width: 99.834%;
  height: 100.875%;
  object-fit: fill;
  object-position: center center;
  /* No filter here: a filter rasterises the element and re-introduces blur when
     the map is zoomed. The land is dimmed by recolouring it instead (below). */
  pointer-events: none;
  user-select: none;
}

/* Dim the land directly (replaces the old brightness(0.7) filter) so the inline
   SVG stays crisp at any zoom. Borders softened to match the previous look. */
.map-world-base .land {
  fill: #8b8d93;
}

.map-world-base .border {
  stroke: rgba(247, 243, 235, 0.45);
}

/* Highlight the FineSip countries: filled FineSip blue with a rose outline so
   they stand out from the grey land (matches the focus view). */
.map-world-base .land.fr,
.map-world-base .land.it,
.map-world-base .land.es,
.map-world-base .land.at,
.map-world-base .land.ar,
.map-world-base .land.cl,
.map-world-base .land.za,
.map-world-base .land.nz {
  fill: rgba(40, 64, 120, 0.95);
  stroke: var(--color-accent-rose, #DA1B5C);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
}

/* ============================================================
   MAP COUNTRY NODES — Glowing dots with pulse
   ============================================================ */

.map-country-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.map-country-node {
  position: absolute;
  left: var(--country-x);
  top: var(--country-y);
  width: var(--country-w);
  height: var(--country-h);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.map-country-node::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(219, 27, 92, 0.2), transparent 68%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-luxury);
  pointer-events: none;
}

.map-country-node__badge {
  position: absolute;
  left: var(--badge-x);
  top: var(--badge-y);
  transform: translate(-50%, -50%) scale(var(--map-inv-scale, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  border: 1.5px solid rgba(218, 27, 92, 0.5);
  background: rgba(10, 10, 20, 0.9);
  backdrop-filter: blur(8px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(219, 27, 92, 0.2),
    0 0 16px rgba(219, 27, 92, 0.1);
  color: var(--color-cream);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  /* The transform (zoom counter-scale) transition is synced to the frame via
     --map-zoom-dur: 0s during a pinch/drag so markers track 1:1, 0.45s during
     button/double-tap zoom so they stay constant-size through the animation. */
  transition:
    transform var(--map-zoom-dur, 0s) cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury);
  pointer-events: none;
}

.map-country-node:hover::before,
.map-country-node.is-active::before,
.map-country-node:focus::before,
.map-country-node:focus-visible::before {
  opacity: 1;
}

.map-country-node:hover .map-country-node__badge,
.map-country-node.is-active .map-country-node__badge,
.map-country-node:focus .map-country-node__badge,
.map-country-node:focus-visible .map-country-node__badge {
  transform: translate(-50%, -50%) scale(calc(1.08 * var(--map-inv-scale, 1)));
  border-color: var(--color-accent-rose);
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(219, 27, 92, 0.15),
    var(--glow-rose);
}

.map-country-node:focus-visible .map-country-node__badge {
  outline: 2px solid var(--color-accent-rose);
  outline-offset: 3px;
}

/* ============================================================
   MAP HOTSPOTS — Pulsing rose dots with glow
   ============================================================ */

.map-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.68rem;
  height: 1.68rem;
  border-radius: 999px;
  border: 1.65px solid var(--color-map-accent-strong);
  background: rgba(10, 10, 20, 0.9);
  backdrop-filter: blur(6px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(219, 27, 92, 0.2);
  color: var(--color-cream);
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    background-color var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury);
  pointer-events: auto;
}

.map-hotspot::after {
  content: "";
  position: absolute;
  inset: -0.32rem;
  border-radius: 999px;
  border: 1px solid var(--color-map-accent-mid);
  animation: mapPulse 3s ease-out infinite;
}

.map-hotspot:hover,
.map-hotspot.is-active,
.map-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
  border-color: var(--color-map-accent);
  background: rgba(219, 27, 92, 0.15);
  color: var(--color-cream);
  box-shadow:
    var(--shadow-map-accent),
    var(--glow-rose);
}

.map-hotspot__count {
  position: relative;
  z-index: 1;
  font-size: 0.66rem;
  font-weight: 600;
}

.map-hotspot--single {
  width: 1.4rem;
  height: 1.4rem;
}

.map-hotspot--single .map-hotspot__count {
  font-size: 0.58rem;
}

.map-hotspot__label {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  min-width: max-content;
  padding: 0.35rem 0.68rem;
  border: 1px solid rgba(218, 27, 92, 0.2);
  background: rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-medium);
  color: var(--color-accent-rose);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  transition:
    opacity var(--duration-normal) var(--ease-luxury),
    transform var(--duration-normal) var(--ease-luxury);
  pointer-events: none;
}

.map-hotspot:hover .map-hotspot__label,
.map-hotspot.is-active .map-hotspot__label,
.map-hotspot:focus-visible .map-hotspot__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   MAP FOCUS STAGE — Full dark immersive canvas
   ============================================================ */

.map-focus-stage {
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.8rem);
  padding: clamp(6rem, 8vw, 7rem) clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity var(--duration-slow) var(--ease-luxury),
    transform var(--duration-slow) var(--ease-luxury),
    visibility var(--duration-slow) var(--ease-default);
}

.map-focus-stage.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.map-focus-stage__hud {
  display: grid;
  gap: var(--space-4);
  align-self: center;
  max-width: 24rem;
  position: relative;
  z-index: 4;
}

.map-focus-stage__back {
  justify-self: start;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(218, 27, 92, 0.2);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
  color: var(--color-accent-rose);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury);
}

.map-focus-stage__back:hover,
.map-focus-stage__back:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(218, 27, 92, 0.4);
  box-shadow: var(--glow-rose);
}

.map-focus-stage__copy {
  position: relative;
  max-width: 23rem;
  padding: clamp(1.4rem, 3vw, 1.8rem);
  border: 1px solid rgba(218, 27, 92, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(40, 64, 120, 0.4), transparent 58%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.map-focus-stage__copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent-rose), rgba(218, 27, 92, 0.1));
}

.map-focus-stage__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-map-accent);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-focus-stage__eyebrow::before {
  content: "";
  width: 1.3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-map-accent));
}

.map-focus-stage__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--color-cream);
}

.map-focus-stage__subtitle {
  margin: var(--space-3) 0 0;
  max-width: 34rem;
  color: rgba(248, 241, 231, 0.6);
}

.map-focus-stage__description {
  margin: var(--space-4) 0 0;
  color: rgba(248, 241, 231, 0.55);
  font-size: 0.99rem;
  line-height: 1.72;
}

/* Stats are now standalone glass cards in a 2-column grid (no outer box) for a
   cleaner, more premium feel. */
.map-focus-stage__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.map-focus-stage__stat {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(218, 27, 92, 0.16);
  background:
    radial-gradient(150% 130% at 100% 0%, rgba(218, 27, 92, 0.12), transparent 55%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.map-focus-stage__stat-value {
  color: var(--color-accent-rose);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 0.85;
}

.map-focus-stage__stat-label,
.map-focus-stage__regions-label {
  color: rgba(248, 241, 231, 0.55);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.map-focus-stage__regions {
  display: grid;
  gap: 0.85rem;
}

.map-focus-stage__region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.map-focus-stage__region-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(219, 27, 92, 0.3);
  background: linear-gradient(135deg, rgba(219, 27, 92, 0.16), rgba(219, 27, 92, 0.04));
  color: rgba(248, 241, 231, 0.92);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   MAP FOCUS CANVAS — with grid overlay
   ============================================================ */

.map-focus-stage__canvas {
  position: relative;
  justify-self: stretch;
  align-self: center;
  width: min(100%, 72rem);
  height: min(calc(100svh - 10rem), 46rem);
  min-height: min(42vw, 34rem);
  border: 1px solid rgba(218, 27, 92, 0.1);
  background:
    /* Subtle grid overlay */
    linear-gradient(rgba(218, 27, 92, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 27, 92, 0.03) 1px, transparent 1px),
    /* Atmospheric gradients */
    radial-gradient(circle at center, rgba(40, 64, 120, 0.22) 0, transparent 55%),
    radial-gradient(circle at top left, rgba(219, 27, 92, 0.05), transparent 30%),
    linear-gradient(160deg, rgba(13, 21, 41, 0.55), rgba(22, 35, 71, 0.5));
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(218, 27, 92, 0.06),
    0 30px 64px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  --focus-frame-left: 0%;
  --focus-frame-top: 0%;
  --focus-frame-width: 100%;
  --focus-frame-height: 100%;
  --focus-content-left: 0%;
  --focus-content-top: 0%;
  --focus-content-width: 100%;
  --focus-content-height: 100%;
}

.map-focus-stage__inspector-slot {
  display: none;
  min-width: 0;
}

.map-focus-stage__inspector-slot:not(:empty) {
  display: block;
}

/* ============================================================
   MAP FOCUS RAIL — Horizontal scrolling glassmorphism cards
   ============================================================ */

.map-focus-rail {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.1rem;
  border: 1px solid rgba(218, 27, 92, 0.1);
  background:
    radial-gradient(circle at top left, rgba(219, 27, 92, 0.04), transparent 30%),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.map-focus-rail__heading {
  display: grid;
  gap: 0.5rem;
}

.map-focus-rail__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.45rem;
  scrollbar-width: none;
}

.map-focus-rail__list::-webkit-scrollbar {
  display: none;
}

.map-focus-rail__list .map-inspector__wine {
  flex: 0 0 min(20rem, 76vw);
  min-height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(218, 27, 92, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  transition:
    border-color var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury);
}

.map-focus-rail__list .map-inspector__wine:hover {
  border-color: rgba(218, 27, 92, 0.3);
  box-shadow: var(--glow-rose);
}

.map-focus-rail__list .map-inspector__wine--bottle {
  flex-basis: min(23rem, 84vw);
}

.map-focus-rail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ============================================================
   MAP FOCUS SVG — Country shapes with rose gradient stroke
   ============================================================ */

.map-focus-svg {
  position: absolute;
  left: var(--focus-frame-left);
  top: var(--focus-frame-top);
  width: var(--focus-frame-width);
  height: var(--focus-frame-height);
  overflow: visible;
  pointer-events: none;
  transition:
    width var(--duration-slower) var(--ease-default),
    height var(--duration-slower) var(--ease-default),
    left var(--duration-slower) var(--ease-default),
    top var(--duration-slower) var(--ease-default);
}

.map-focus-svg__grid circle,
.map-focus-svg__grid line {
  fill: none;
  stroke: rgba(218, 27, 92, 0.06);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}

.map-focus-country__shadow {
  fill: rgba(219, 27, 92, 0.08);
}

.map-focus-country__fill {
  fill: rgba(28, 48, 93, 0.8);
  stroke: var(--color-accent-rose);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}

.map-focus-region-svg,
.map-hotspot-layer {
  position: absolute;
  left: var(--focus-content-left);
  top: var(--focus-content-top);
  width: var(--focus-content-width);
  height: var(--focus-content-height);
  pointer-events: none;
  transition:
    width var(--duration-slower) var(--ease-default),
    height var(--duration-slower) var(--ease-default),
    left var(--duration-slower) var(--ease-default),
    top var(--duration-slower) var(--ease-default);
}

.map-focus-region-svg {
  z-index: 4;
  overflow: visible;
  pointer-events: auto;
}

.map-hotspot-layer {
  z-index: 5;
}

/* ============================================================
   MAP FOCUS REGIONS — Semi-transparent with glow on hover
   ============================================================ */

.map-focus-region {
  fill: var(--region-fill, rgba(219, 27, 92, 0.06));
  stroke: rgba(219, 27, 92, 0.35);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(219, 27, 92, 0.06));
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  transition:
    fill 0.35s var(--ease-luxury),
    stroke 0.35s var(--ease-luxury),
    stroke-width 0.35s var(--ease-luxury),
    opacity 0.35s var(--ease-luxury),
    filter 0.35s var(--ease-luxury);
}

.map-focus-region:hover {
  fill: rgba(219, 27, 92, 0.22);
  stroke: rgba(219, 27, 92, 0.7);
  stroke-width: 1.2;
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(219, 27, 92, 0.2));
}

.map-focus-region.is-active {
  fill: rgba(219, 27, 92, 0.28);
  stroke: var(--color-map-accent, #DA1B5C);
  stroke-width: 1.5;
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(219, 27, 92, 0.3));
}

/* Region label tooltip (positioned by JS) */
.map-region-tooltip {
  position: absolute;
  z-index: 10;
  padding: 0.4rem 0.75rem;
  background: rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(218, 27, 92, 0.2);
  border-radius: 6px;
  color: var(--color-cream, #F8F1E7);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.map-region-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.map-focus-stage .map-hotspot {
  width: 1.18rem;
  height: 1.18rem;
  border-width: 1.5px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.map-focus-stage .map-hotspot__count {
  font-size: 0.5rem;
}

.map-focus-stage .map-hotspot--single {
  width: 0.92rem;
  height: 0.92rem;
}

.map-focus-stage .map-hotspot--single .map-hotspot__count {
  font-size: 0.36rem;
}

.map-focus-stage .map-hotspot::after {
  inset: -0.12rem;
  opacity: 0.34;
}

/* ============================================================
   MAP PREVIEW CARD — Dark glassmorphism tooltip
   ============================================================ */

.map-preview-card {
  position: absolute;
  z-index: 7;
  max-width: min(260px, calc(100% - 2rem));
  padding: 0.95rem 1rem;
  border: 1px solid rgba(218, 27, 92, 0.2);
  background:
    radial-gradient(circle at top left, rgba(219, 27, 92, 0.1), transparent 40%),
    rgba(10, 10, 20, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
  color: var(--color-cream);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 18px)) scale(0.96);
  transition:
    opacity var(--duration-normal) var(--ease-luxury),
    transform var(--duration-normal) var(--ease-luxury);
  pointer-events: none;
}

.map-preview-card.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 22px)) scale(1);
}

.map-preview-card__eyebrow {
  display: block;
  color: var(--color-map-accent);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-preview-card__title {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 0.95;
  color: var(--color-cream);
}

.map-preview-card__copy {
  margin: 0.55rem 0 0;
  color: rgba(248, 241, 231, 0.65);
  font-size: var(--text-body-sm);
}

.map-preview-card__list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.map-preview-card__list span {
  color: rgba(248, 241, 231, 0.85);
  font-size: var(--text-body-sm);
}

/* ============================================================
   MAP INSPECTOR — Glassmorphism panel
   ============================================================ */

.map-inspector {
  position: relative;
  padding: var(--space-6);
  border: 1px solid rgba(218, 27, 92, 0.12);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
  overflow: visible;
  transition:
    transform var(--duration-slow) var(--ease-luxury),
    box-shadow var(--duration-slow) var(--ease-luxury),
    background-color var(--duration-slow) var(--ease-luxury);
}

.map-inspector::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.map-inspector__chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}

.map-inspector__heading {
  min-width: 0;
}

.map-inspector__content {
  transition:
    opacity var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default);
}

.map-inspector__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(218, 27, 92, 0.2);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color: var(--color-accent-rose);
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    background-color var(--duration-normal) var(--ease-luxury),
    color var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury);
}

.map-inspector__toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-rose);
}

.map-inspector__toggle-icon {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  transition: transform var(--duration-normal) var(--ease-luxury);
}

.map-inspector.is-collapsed .map-inspector__content,
.map-inspector.is-collapsed .map-inspector__heading {
  display: none;
}

.map-inspector.is-collapsed .map-inspector__toggle-icon {
  transform: rotate(180deg);
}

.map-inspector.is-collapsed .map-inspector__chrome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.map-inspector__label {
  color: var(--color-map-accent);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-inspector__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-cream);
}

.map-inspector__copy {
  margin: var(--space-3) 0 0;
  color: rgba(248, 241, 231, 0.55);
}

.map-inspector__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.map-inspector__wine {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(218, 27, 92, 0.08);
}

.map-inspector__wine:last-child {
  border-bottom: 0;
}

.map-inspector__wine strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-cream);
}

.map-inspector__wine span {
  display: block;
  color: rgba(248, 241, 231, 0.55);
  font-size: var(--text-body-sm);
}

.map-inspector__wine--bottle {
  align-items: stretch;
  padding: var(--space-4);
  border: 1px solid rgba(218, 27, 92, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    transform var(--duration-normal) var(--ease-luxury),
    border-color var(--duration-normal) var(--ease-luxury),
    box-shadow var(--duration-normal) var(--ease-luxury);
}

.map-inspector__wine--bottle:hover,
.map-inspector__wine--bottle:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(218, 27, 92, 0.3);
  box-shadow: var(--glow-rose);
}

.map-inspector__wine-visual {
  flex: 0 0 5.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 9rem;
  padding: 0.35rem;
  background:
    radial-gradient(circle at top, rgba(219, 27, 92, 0.08), transparent 56%),
    rgba(255, 255, 255, 0.02);
}

.map-inspector__wine-visual .bottle {
  max-width: 4.25rem;
  height: 100%;
  min-height: 8.2rem;
}

.map-inspector__wine-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}

.map-inspector__wine-copy {
  display: grid;
  gap: 0.35rem;
}

.map-inspector__wine-copy strong {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 0.98;
}

.map-inspector__wine-producer,
.map-inspector__wine-region {
  display: block;
}

.map-inspector__wine-producer {
  color: var(--color-accent-rose);
  font-weight: 600;
}

.map-inspector__wine-region {
  color: rgba(248, 241, 231, 0.5);
}

.map-inspector__wine-action {
  align-self: flex-start;
}

/* ============================================================
   MAP MODE — Full viewport immersion
   ============================================================ */

/* The shared scroll-progress rail (fixed, right:24px) sits in the same right
   gutter as the map inspector in map mode — hide it here so it doesn't draw a
   line across the inspector panel. Scoped to the catalogue map mode only. */
body[data-catalogue-mode="map"] .scroll-progress {
  display: none;
}

body[data-catalogue-mode="map"] .mode-switch {
  position: fixed;
  bottom: 2rem;
  left: 1.5rem;
  top: auto;
  z-index: 120;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
}

body[data-catalogue-mode="map"] .mode-switch__inner {
  display: block;
}

body[data-catalogue-mode="map"] .mode-switch__meta {
  display: none;
}

body[data-catalogue-mode="map"] .mode-switch__glow {
  opacity: 0;
}

body[data-catalogue-mode="map"] .mode-switch__list {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0.35rem;
  gap: 0;
  border: 1px solid rgba(218, 27, 92, 0.15);
  background: rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}

body[data-catalogue-mode="map"] .mode-switch__indicator {
  border-radius: 9px;
}

body[data-catalogue-mode="map"] .mode-switch__button {
  width: auto;
  padding: 0.85rem 1.3rem;
  color: rgba(248, 241, 231, 0.6);
  white-space: nowrap;
  font-size: 0.72rem;
}

body[data-catalogue-mode="map"] .mode-switch__button.is-active {
  color: var(--color-cream) !important;
}

body[data-catalogue-mode="map"] #browse {
  padding: 0;
}

body[data-catalogue-mode="map"] .catalogue-layout {
  gap: 0;
}

body[data-catalogue-mode="map"] .site-header,
body[data-catalogue-mode="map"] .hero-panel,
body[data-catalogue-mode="map"] #catalogue-footer {
  display: none;
}

body[data-catalogue-mode="map"] {
  background:
    radial-gradient(circle at 20% 10%, rgba(219, 27, 92, 0.05), transparent 42%),
    radial-gradient(circle at 80% 90%, rgba(218, 27, 92, 0.04), transparent 42%),
    linear-gradient(160deg, #0D1529 0%, #1B305C 50%, #162347 100%);
  background-attachment: fixed;
}

body[data-catalogue-mode="map"] main {
  min-height: 100svh;
}

body[data-catalogue-mode="map"] #map-panel {
  margin-inline: calc(50% - 50vw);
}

body[data-catalogue-mode="map"] #map-panel .map-explorer {
  gap: 0;
}

body[data-catalogue-mode="map"] #map-panel .map-explorer__intro {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused {
  --map-focus-rail-width: clamp(18.5rem, 24vw, 30rem);
  --map-focus-gap: clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: 1fr;
  min-height: auto;
  padding: clamp(6rem, 7vw, 6.75rem) clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3rem);
  gap: var(--map-focus-gap);
}

body[data-catalogue-mode="map"] #map-panel .map-canvas {
  min-height: 100svh;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-catalogue-mode="map"] #map-panel .map-toolbar {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-stage {
  min-height: 100svh;
  height: auto;
  overflow: visible;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(248, 241, 231, 0.12), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(248, 241, 231, 0.08), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(248, 241, 231, 0.1), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(218, 27, 92, 0.1), transparent),
    linear-gradient(180deg, #0D1529 0%, #1B305C 55%, #162347 100%);
  box-shadow: none;
}

body[data-catalogue-mode="map"] #map-panel .map-stage::before {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-grid {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-inspector {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  width: min(22.5rem, calc(100vw - 2.5rem));
  max-height: calc(100% - 2.5rem);
  overflow: auto;
}

body[data-catalogue-mode="map"] #map-panel .map-inspector.is-collapsed {
  position: fixed;
  top: 50%;
  right: 1.25rem;
  width: 3.9rem;
  min-width: 3.9rem;
  min-height: 3.9rem;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  transform: translateY(-50%);
}

body[data-catalogue-mode="map"] #map-panel .map-inspector.is-collapsed .map-inspector__chrome {
  display: flex;
}

body[data-catalogue-mode="map"] #map-panel .map-inspector.is-collapsed::before {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-inspector.is-collapsed .map-inspector__heading {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-inspector.is-collapsed .map-inspector__toggle {
  width: 3.6rem;
  height: 3.6rem;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.4),
    var(--glow-rose);
}

body[data-catalogue-mode="map"] #map-panel .map-stage.is-country-focused .map-focus-stage {
  position: relative;
  inset: auto;
  min-height: auto;
  grid-template-columns: minmax(0, var(--map-focus-rail-width)) minmax(0, 1fr);
  grid-template-areas:
    "hud canvas"
    "hud inspector";
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
  padding: 0;
  gap: var(--map-focus-gap);
}

body[data-catalogue-mode="map"] #map-panel .map-preview-card {
  z-index: 8;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-canvas {
  min-height: auto;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-stage {
  min-height: auto;
  height: auto;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused > .map-inspector {
  display: none;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-focus-stage__hud {
  grid-area: hud;
  grid-row: 1 / span 2;
  align-self: start;
  max-width: var(--map-focus-rail-width);
  padding-top: 0.6rem;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-focus-stage__canvas {
  grid-area: canvas;
  align-self: start;
  width: 100%;
  height: clamp(20rem, 28vw, 28rem);
  min-height: clamp(18rem, 24vw, 22rem);
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-focus-stage__inspector-slot {
  grid-area: inspector;
  align-self: start;
  width: 100%;
  min-width: 0;
  margin-top: -0.15rem;
}

body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-focus-stage__inspector-slot .map-focus-rail {
  width: 100%;
}

/* ============================================================
   HERO DECORATIVE GRID LINES
   ============================================================ */

.catalogue-hero__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
  opacity: 0.7;
}

.catalogue-hero__deco span {
  border-right: 1px solid rgba(218, 27, 92, 0.04);
}

.catalogue-hero__deco span:last-child {
  border-right: none;
}

/* ============================================================
   SECTION DIVIDER — Diamond accent between sections
   ============================================================ */

.section-divider {
  /* Decorative line + rose dot removed at the client's request. */
  display: none;
}

/* The catalogue markup supplies explicit .section-divider__line elements, so
   suppress the ::before/::after line pseudo-elements inherited from shared.css
   (otherwise the divider renders 4 line segments instead of 2). */
.section-divider::before,
.section-divider::after {
  content: none;
}

.section-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 27, 92, 0.15), transparent);
}

.section-divider__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--color-accent-rose);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* reset the rotate(45deg) leaked from shared.css's .section-divider__dot;
     the diamond shape here comes from clip-path, not a transform. */
  transform: none;
  opacity: 0.6;
}

/* The shared footer (.footer-reveal, defined only in shared.css) consumes
   --max-content-width for its grid. The catalogue raises that token to 1240px
   for its own content, which would make the footer grid 40px wider here than on
   every other page. Pin the footer back to the site-wide 1200px so it matches,
   without touching the catalogue's intended content width. */
.footer-reveal {
  --max-content-width: 1200px;
}

/* ============================================================
   COUNTRY BROWSE SECTION — Atmospheric background
   ============================================================ */

#country-panel {
  position: relative;
}

#country-panel::before {
  content: "";
  position: absolute;
  top: -6rem;
  left: 0;
  right: 0;
  bottom: -6rem;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(218, 27, 92, 0.04), transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(219, 27, 92, 0.03), transparent 40%);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   STAGGERED CARD RHYTHM — Alternating visual weight
   ============================================================ */

/* Subtle left accent on every other card */
.card-grid .wine-card:nth-child(even):not(:first-child) {
  border-left: 2px solid rgba(219, 27, 92, 0.12);
}

.card-grid .wine-card:nth-child(even):not(:first-child):hover {
  border-left-color: rgba(219, 27, 92, 0.4);
}

/* Stagger only on multi-column grid */
@media (min-width: 768px) {
  .card-grid .wine-card:nth-child(3n+3):not(:first-child) {
    transform: translateY(1.5rem);
  }
  .card-grid .wine-card:nth-child(3n+3):not(:first-child):hover {
    transform: translateY(calc(1.5rem - 8px)) scale(1.01);
  }
}

/* ============================================================
   CATALOGUE SUMMARY — Editorial bar with accent line
   ============================================================ */

.catalogue-summary {
  position: relative;
  padding-top: var(--space-8);
  margin-top: var(--space-4);
}

.catalogue-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(4rem, 10vw, 8rem);
  height: 2px;
  background: linear-gradient(90deg, rgba(248, 241, 231, 0.2), transparent);
}

/* ============================================================
   REGION FILTER PILLS — Enhanced hover with rose glow
   ============================================================ */

.region-filter {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  position: relative;
  padding: var(--space-6);
  border: 1px solid rgba(219, 27, 92, 0.08);
  background:
    radial-gradient(ellipse at top left, rgba(219, 27, 92, 0.04), transparent 50%),
    rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
}

.region-chip.is-active {
  border-color: var(--color-accent-rose);
  background: rgba(219, 27, 92, 0.12);
  color: var(--color-cream);
  box-shadow: var(--glow-rose);
}

/* ============================================================
   CATALOGUE CTA — Cinematic closing section
   ============================================================ */

.catalogue-cta {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(218, 27, 92, 0.06);
}

.catalogue-cta__grain {
  position: absolute;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
  z-index: 1;
}

.catalogue-cta__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(218, 27, 92, 0.08), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(219, 27, 92, 0.05), transparent 40%);
  pointer-events: none;
}

.catalogue-cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-6);
  justify-items: center;
}

.catalogue-cta__rule {
  width: 1px;
  height: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, transparent, var(--color-accent-rose));
}

.catalogue-cta__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
  background: linear-gradient(160deg, #ffffff 30%, rgba(248, 241, 231, 0.65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.catalogue-cta__copy {
  max-width: 34rem;
  margin: 0;
  color: rgba(248, 241, 231, 0.6);
  font-size: var(--text-body-lg);
  line-height: 1.7;
}

.catalogue-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-4);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes mapPulse {
  0% {
    transform: scale(0.72);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* ============================================================
   DETAIL PAGE — Dark mode
   ============================================================ */

.detail-page {
  padding-bottom: var(--space-24);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: rgba(248, 241, 231, 0.45);
  font-size: var(--text-body-sm);
  letter-spacing: 0.02em;
}

.breadcrumb a {
  color: rgba(248, 241, 231, 0.6);
  text-decoration: none;
  transition: color 0.25s var(--ease-luxury);
}

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

.breadcrumb span:last-child {
  color: rgba(248, 241, 231, 0.9);
}

.detail-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9rem);
  color: var(--color-cream);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(219, 27, 92, 0.15), transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(218, 27, 92, 0.1), transparent 35%),
    linear-gradient(160deg, rgba(10, 10, 20, 0.98), rgba(28, 48, 93, 0.4));
}

.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
}

.detail-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.detail-hero__meta {
  display: grid;
  gap: var(--space-4);
}

.detail-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 30%, var(--color-accent-rose) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.detail-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  color: rgba(248, 241, 231, 0.6);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-intro {
  margin: 0;
  max-width: 40rem;
  color: rgba(248, 241, 231, 0.75);
  font-size: var(--text-body-lg);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.detail-hero__contact {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid rgba(218, 27, 92, 0.15);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.detail-grid {
  display: grid;
  gap: var(--space-8);
}

.detail-card {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid rgba(218, 27, 92, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.4s var(--ease-luxury),
    box-shadow 0.4s var(--ease-luxury),
    border-color 0.4s var(--ease-luxury);
}

.detail-card:hover {
  transform: translateY(-3px);
  border-color: rgba(218, 27, 92, 0.25);
  box-shadow: var(--glow-card);
}

.detail-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-cream);
}

.detail-card__copy {
  margin: var(--space-4) 0 0;
  color: rgba(248, 241, 231, 0.55);
}

.detail-specs {
  display: grid;
  gap: var(--space-4);
}

.detail-spec {
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(218, 27, 92, 0.08);
}

.detail-spec:last-child {
  border-bottom: 0;
}

.detail-spec__label {
  display: block;
  color: var(--color-accent-rose);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-spec__value {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-cream);
  font-size: 1.02rem;
}

.detail-notes {
  display: grid;
  gap: var(--space-4);
}

.detail-note {
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(218, 27, 92, 0.08);
  border-left: 3px solid var(--color-accent-rose);
  transition:
    transform 0.3s var(--ease-luxury),
    box-shadow 0.3s var(--ease-luxury);
}

.detail-note:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(219, 27, 92, 0.12);
}

.detail-note h3 {
  margin: 0;
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-rose);
  font-weight: 600;
}

.detail-note p {
  margin: var(--space-3) 0 0;
  color: rgba(248, 241, 231, 0.55);
}

/* ============================================================
   SCALE / PROFILE BARS
   ============================================================ */

.scale-grid {
  display: grid;
  gap: var(--space-4);
}

.scale-item {
  display: grid;
  gap: var(--space-2);
}

.scale-item__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-accent-rose);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scale-track {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.scale-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent-rose), var(--color-accent-rose));
  animation: scaleFillIn 1.2s var(--ease-luxury) forwards;
  animation-delay: 0.3s;
}

@keyframes scaleFillIn {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

.scale-fill.is-unavailable {
  width: 100%;
  opacity: 0.15;
  background: rgba(248, 241, 231, 0.3);
}

/* ============================================================
   TERROIR PANEL
   ============================================================ */

.terroir-panel {
  display: grid;
  gap: var(--space-6);
}

.terroir-map {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid rgba(218, 27, 92, 0.1);
  background:
    radial-gradient(circle at top left, rgba(219, 27, 92, 0.06), transparent 30%),
    rgba(10, 10, 20, 0.8);
}

.terroir-map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(218, 27, 92, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 27, 92, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.terroir-map__marker {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-accent-rose);
  box-shadow: 0 0 0 8px rgba(219, 27, 92, 0.15);
  animation: markerPulse 2s ease-in-out infinite;
}

@keyframes markerPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(219, 27, 92, 0.15); }
  50% { box-shadow: 0 0 0 16px rgba(219, 27, 92, 0.06), 0 0 0 4px rgba(218, 27, 92, 0.3); }
}

.terroir-map__caption {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  padding: var(--space-4);
  background: rgba(10, 10, 20, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(218, 27, 92, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.related-grid {
  display: grid;
  gap: var(--space-4);
}

/* ============================================================
   FOOTER — HIDDEN (replaced by footer-reveal)
   ============================================================ */

.footer {
  display: none;
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
}

.footer__tagline {
  margin: 0;
  color: var(--color-accent-rose);
  font-family: var(--font-serif);
  font-style: italic;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.footer__links a,
.footer__address,
.footer__copy {
  color: rgba(248, 241, 231, 0.6);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  /* harmonise with the site-wide toast layer (shared.css --z-toast:550):
     above the nav overlay, below the page-transition curtain */
  z-index: var(--z-toast, 550);
  display: grid;
  gap: var(--space-3);
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--color-accent-rose);
  background: rgba(10, 10, 20, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(218, 27, 92, 0.15);
  border-left: 3px solid var(--color-accent-rose);
  color: var(--color-cream);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateY(14px);
}

.toast__title {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-accent-rose);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   REVEAL ANIMATIONS & UTILITIES
   ============================================================ */

.reveal-up,
.reveal-fade,
.reveal-left,
.reveal-right {
  opacity: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE — TABLET (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) {
  .page-shell {
    width: min(calc(100% - 64px), var(--max-content-width));
  }

  .map-shell,
  .detail-grid,
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .country-filter__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid,
  .related-grid,
  .detail-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .detail-spec {
    border-bottom: 0;
    padding-block: 0;
  }
}

/* ============================================================
   RESPONSIVE — DESKTOP (min-width: 1024px)
   ============================================================ */

@media (min-width: 1024px) {
  .page-shell {
    width: min(calc(100% - 96px), var(--max-content-width));
  }

  /* Hero — Split editorial layout on desktop */
  .catalogue-hero {
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--space-16);
  }

  .catalogue-hero__stats-bar {
    grid-template-columns: 1fr;
    border-left: 3px solid rgba(218, 27, 92, 0.2);
    align-self: center;
    max-width: 20rem;
    justify-self: end;
  }

  .header-nav {
    display: flex;
  }

  .header-cta {
    display: inline-flex;
  }

  .country-filter__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .detail-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .scale-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   RESPONSIVE — MOBILE MAP MODE (max-width: 1023.98px)
   ============================================================ */

@media (max-width: 1023.98px) {
  body[data-catalogue-mode="map"] .mode-switch {
    bottom: 1.2rem;
    left: 1rem;
    top: auto;
    width: auto;
  }

  body[data-catalogue-mode="map"] #map-panel {
    margin-inline: calc(50% - 50vw);
  }

  body[data-catalogue-mode="map"] #map-panel .map-shell {
    gap: 0;
  }

  body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused {
    --map-focus-rail-width: 100%;
    --map-focus-gap: 1rem;
    padding: 5.4rem 1rem 1rem;
    gap: 1rem;
  }

  body[data-catalogue-mode="map"] #map-panel .map-canvas {
    min-height: 100svh;
  }

  body[data-catalogue-mode="map"] #map-panel .map-stage {
    min-height: 100svh;
    height: auto;
    overflow: visible;
  }

  /* World map on mobile: undistorted "cover" framing. The map fills the
     stage HEIGHT at its true 16:9 ratio (no more vertical squashing); the
     extra width overflows and is clipped by .map-world-stage, and the user
     pans left/right to reach the Americas / Oceania — like a full-screen
     Google-Maps view centred on the Europe/Africa heartland. */
  body[data-catalogue-mode="map"] #map-panel .map-world-figure {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body[data-catalogue-mode="map"] #map-panel .map-world-frame {
    position: relative;
    inset: auto;
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    flex: none;
  }

  /* Cinematic vignette + bottom scrim so the full-bleed map reads as a premium
     "map table" and the mode-switch pill stays legible over the map. */
  body[data-catalogue-mode="map"] #map-panel .map-stage:not(.is-country-focused)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
      radial-gradient(ellipse 78% 62% at 50% 42%, transparent 52%, rgba(8, 8, 20, 0.55) 100%),
      linear-gradient(180deg, rgba(8, 8, 20, 0.35) 0%, transparent 18% 78%, rgba(8, 8, 20, 0.6) 100%);
  }

  body[data-catalogue-mode="map"] #map-panel .map-inspector {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    margin-top: 0;
  }

  body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-focus-stage__inspector-slot .map-inspector:not(.is-collapsed) {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  body[data-catalogue-mode="map"] #map-panel .map-stage.is-country-focused .map-focus-stage {
    position: relative;
    grid-template-columns: 1fr;
    /* Map-first on mobile: the country canvas sits at the top (prominent, like
       a map app), the info HUD and the wine inspector stack below it. */
    grid-template-areas:
      "canvas"
      "hud"
      "inspector";
    align-content: start;
    min-height: auto;
    padding: 0;
    gap: 1rem;
  }

  /* Back button floats over the top-left of the map so it's always reachable
     even though the HUD it lives in is now below the canvas. */
  body[data-catalogue-mode="map"] #map-panel .map-stage.is-country-focused .map-focus-stage__back {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 6;
    margin: 0;
  }

  /* Reset the HUD's desktop `grid-row: 1 / span 2` (which makes it span the
     left column over two rows in the 2-column desktop layout). On the stacked
     mobile grid that span made the HUD cover the canvas row — hiding the
     country's blue fill so only its rose outline showed, and breaking the
     layout. Re-applying grid-area:hud pins it to its single row. */
  body[data-catalogue-mode="map"] #map-panel .map-shell.is-country-focused .map-focus-stage__hud {
    grid-area: hud;
    max-width: none;
  }

  body[data-catalogue-mode="map"] #map-panel .map-focus-stage__canvas {
    width: 100%;
    height: min(82vw, 32rem);
    min-height: min(82vw, 24rem);
  }

  body[data-catalogue-mode="map"] #map-panel .map-focus-stage__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-catalogue-mode="map"] #map-panel .map-inspector.is-collapsed {
    position: fixed;
    top: 50%;
    right: 1rem;
    width: 3.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    padding: 0;
    margin-top: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
  }

  /* World view on mobile: a TRUE full-screen, Google-Maps-style canvas. The
     stage is pinned to the whole viewport (position:fixed/inset:0) so it fills
     the page edge-to-edge regardless of surrounding layout; the user pans and
     pinches to navigate, and the fixed chrome (logo, nav orb, mode-switch pill)
     floats over it. Reverts to normal flow on country focus. */
  /* Neutralise the backdrop-filter / will-change on the map card: they create a
     containing block that would trap position:fixed inside the card instead of
     the viewport. */
  body[data-catalogue-mode="map"] #map-panel .map-canvas {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: auto;
    transform: none;
    contain: none;
  }

  body[data-catalogue-mode="map"] #map-panel .map-stage:not(.is-country-focused) {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
    z-index: 1;
  }

  /* Animating a 14px blur over the full-viewport world map is too expensive
     on phones (per-frame repaints during the focus transition) — use a cheap
     brightness/saturate dim instead. */
  .map-stage.is-country-focused .map-world-stage {
    filter: brightness(0.5) saturate(0.4);
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-panel::before {
    animation: none;
  }
}