/* ═══════════════════════════════════════════════════
   THE COLLECTION — barsss.club
   Speakeasy / private club aesthetic
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Josefin+Sans:wght@200;300;400;500;600&family=DM+Serif+Display&display=swap');

:root {
  --black:         #070403;
  --midnight:      #0d0806;
  --shadow:        #120a06;
  --charcoal:      #1a110b;

  --leather:       #241611;
  --leather-2:     #2e1e17;
  --mahogany:      #3a261c;
  --walnut:        #4a3125;

  --gold:          #d4a84a;
  --gold-bright:   #e8c170;
  --gold-deep:     #a07828;
  --gold-shadow:   #5c4315;

  --amber:         #c8903a;
  --oxblood:       #6b1f14;

  --cream:         #f0e4ce;
  --cream-dim:     #d4c4a0;
  --parchment:     #c8b890;
  --dim:           #8a7456;
  --faint:         #5c4d38;
  --whisper:       #3a3024;

  --ok:            #6b8a4f;
  --err:           #a83c2a;

  /* Chapter accent system — different tones for different content types */
  --c-story-bg:     linear-gradient(155deg, rgba(74, 49, 37, 0.22), rgba(20, 11, 7, 0.6));
  --c-story-border: #a07828;
  --c-story-glow:   0 0 50px -18px rgba(212, 168, 74, 0.3);

  --c-provenance-bg:     linear-gradient(150deg, rgba(58, 38, 28, 0.35), rgba(14, 9, 6, 0.7));
  --c-provenance-border: #7a5a2a;

  --c-tasting-bg:     linear-gradient(160deg, rgba(107, 31, 20, 0.12), rgba(20, 11, 7, 0.65));
  --c-tasting-border: #8b4a2e;
  --c-tasting-glow:   0 0 60px -20px rgba(168, 60, 42, 0.2);

  --c-summary-bg:     linear-gradient(170deg, rgba(74, 49, 37, 0.5), rgba(10, 6, 4, 0.85));
  --c-summary-border: #d4a84a;
  --c-summary-glow:   0 0 80px -22px rgba(212, 168, 74, 0.4);

  --c-notable-bg:     linear-gradient(155deg, rgba(92, 67, 21, 0.24), rgba(14, 9, 6, 0.78));
  --c-notable-border: #8a6b1f;
  --c-notable-glow:   0 0 70px -24px rgba(212, 168, 74, 0.28);

  --c-jazz-bg:     linear-gradient(155deg, rgba(28, 45, 75, 0.35), rgba(10, 8, 12, 0.82));
  --c-jazz-border: #3d5a85;
  --c-jazz-glow:   0 0 70px -22px rgba(70, 110, 165, 0.28);

  --c-cigar-pair-bg:     linear-gradient(155deg, rgba(74, 42, 28, 0.32), rgba(16, 10, 6, 0.78));
  --c-cigar-pair-border: #9a5a2a;

  --c-snack-bg:     linear-gradient(155deg, rgba(60, 78, 45, 0.22), rgba(12, 10, 6, 0.82));
  --c-snack-border: #6b8a4f;

  --c-setting-bg:     linear-gradient(155deg, rgba(45, 40, 55, 0.28), rgba(10, 8, 12, 0.82));
  --c-setting-border: #6a5a85;

  --c-tip-bg:     linear-gradient(155deg, rgba(107, 75, 20, 0.35), rgba(20, 11, 6, 0.82));
  --c-tip-border: #d4a84a;
  --c-tip-glow:   0 0 45px -12px rgba(212, 168, 74, 0.5);

  --font-display:  'DM Serif Display', Georgia, serif;
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-body:     'Josefin Sans', sans-serif;

  --shadow-sm:     0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.7);
  --shadow-xl:     0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(212,168,74,0.1);
  --shadow-chapter: 0 24px 60px -20px rgba(0,0,0,0.85), 0 1px 0 rgba(212,168,74,0.06) inset, 0 0 0 1px rgba(212,168,74,0.04);
  --glow-gold:     0 0 24px rgba(212,168,74,0.15);
  --glow-gold-lg:  0 0 40px rgba(212,168,74,0.2), 0 0 80px rgba(212,168,74,0.08);
  --inset-top:     inset 0 1px 0 rgba(212,168,74,0.08);

  --radius-sm:     3px;
  --radius-md:     6px;
  --radius-lg:     12px;

  --transition:    all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-quick: all 0.15s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* Video background */
.video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #1a0f08 0%, var(--black) 65%);
}
.video-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.08;
  filter: sepia(0.7) brightness(0.35) contrast(1.2);
}
.video-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 10%, var(--black) 75%),
    linear-gradient(to bottom, rgba(7,4,3,0.3), transparent 40%, transparent 60%, rgba(7,4,3,0.7));
}

/* ═══════════════════════════════════════════════════
   TOP STRIP — the door into the club
   ═══════════════════════════════════════════════════ */
.top-strip {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(7,4,3,0.98), rgba(13,8,6,0.92));
  border-bottom: 1px solid var(--gold-shadow);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.6);
}
.top-strip::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.5;
}
.strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.strip-brand {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold-bright);
  letter-spacing: 0.05em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 0 20px rgba(212,168,74,0.3);
}
.brand-mark {
  color: var(--gold);
  font-size: 10px;
  text-shadow: 0 0 12px var(--gold);
}
.strip-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: 12px;
}
.strip-link {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 4px 0;
}
.strip-link::before {
  display: none;
}
.strip-link.active { color: var(--gold-bright); }
.strip-count {
  font-size: 9px;
  background: rgba(212,168,74,0.08);
  color: var(--gold);
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid var(--gold-shadow);
  letter-spacing: 0.12em;
}
.strip-meta {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold-bright);
}
.meta-label {
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   SECTIONS — the rooms
   ═══════════════════════════════════════════════════ */
.section {
  max-width: 1440px;
  margin: 40px auto;
  padding: 56px 48px 72px;
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

#cigars {
  background:
    radial-gradient(ellipse at top, rgba(60,30,15,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(107,31,20,0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(13,8,6,0.4), rgba(7,4,3,0.6));
}
#cigars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, rgba(212,168,74,0.02) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(212,168,74,0.015) 40px, rgba(212,168,74,0.015) 80px);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

#bar {
  background:
    radial-gradient(ellipse at top right, rgba(40,25,15,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(212,168,74,0.05) 0%, transparent 45%),
    linear-gradient(180deg, rgba(13,8,6,0.5), rgba(7,4,3,0.7));
}
#bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(245deg, rgba(232,193,112,0.025) 0%, transparent 40%);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Section header */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--walnut);
  position: relative;
}
.section-head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 140px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}
.head-left { flex: 1; }
.head-eyebrow {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}
.head-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gold);
}
.head-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1;
}
.head-title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-bright);
  font-weight: 300;
  text-shadow: 0 0 30px rgba(212,168,74,0.2);
}
.count-display {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  padding: 10px 20px;
  background: rgba(7,4,3,0.5);
  border: 1px solid var(--gold-shadow);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 16px 20px;
  background: rgba(13,8,6,0.6);
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), var(--inset-top);
  backdrop-filter: blur(8px);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 16px;
  margin-right: 8px;
  border-right: 1px solid var(--walnut);
}
.filter-group:last-child { border-right: none; }
.filter-label {
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
  font-weight: 600;
}
.brands-group { flex-wrap: wrap; }
.brand-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid var(--walnut);
  background: rgba(13,8,6,0.4);
  color: var(--parchment);
  font-family: var(--font-body);
  font-weight: 400;
  transition: var(--transition-quick);
  white-space: nowrap;
}
/* Per-chip count preview — appended after the label */
.chip .chip-count {
  color: var(--gold);
  opacity: 0.85;
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-left: 3px;
  font-feature-settings: 'tnum';
  font-weight: 500;
}
.chip.active .chip-count {
  opacity: 1;
  color: inherit;
}
/* Dim chips that would result in zero matches if added */
.chip.chip-empty {
  opacity: 0.42;
}
.chip.chip-empty:hover {
  opacity: 0.6;
}
.chip:hover {
  border-color: var(--gold-deep);
  color: var(--cream);
  background: rgba(212,168,74,0.05);
  box-shadow: 0 0 12px rgba(212,168,74,0.1);
}
.chip.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--black);
  border-color: var(--gold-bright);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(212,168,74,0.3), var(--inset-top);
}

.search-wrap {
  margin-left: auto;
  position: relative;
}
.search-wrap input {
  background: rgba(7,4,3,0.6);
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  padding: 9px 16px 9px 38px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cream);
  width: 200px;
  letter-spacing: 0.05em;
  transition: var(--transition);
}
.search-wrap input::placeholder { color: var(--faint); font-style: italic; }
.search-wrap input:focus {
  outline: none;
  border-color: var(--gold-deep);
  width: 260px;
  background: rgba(7,4,3,0.85);
  box-shadow: 0 0 0 1px var(--gold-shadow), var(--glow-gold);
}
.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  font-size: 14px;
  pointer-events: none;
}

.loading {
  grid-column: 1/-1;
  color: var(--faint);
  font-size: 13px;
  padding: 60px 0;
  letter-spacing: 0.15em;
  text-align: center;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   CIGAR CARDS
   ═══════════════════════════════════════════════════ */
.cigar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
.cigar-card {
  background: linear-gradient(160deg, var(--leather-2), var(--leather));
  border: 1px solid var(--walnut);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  box-shadow: var(--shadow-md), var(--inset-top);
  display: flex;
  flex-direction: column;
}
.cigar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(212,168,74,0.06));
  border-radius: var(--radius-lg);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition);
  z-index: 1;
}
.cigar-card:hover {
  border-color: var(--gold-deep);
  box-shadow: var(--glow-gold), var(--inset-top);
}
.cigar-card:hover::before { opacity: 1; }

.card-img {
  height: 190px;
  overflow: hidden;
  position: relative;
  background: var(--black);
}
.card-img img, .card-img object {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the "table" surface (bottom of each Gemini render) to the bottom
     of the card so cigar bases align across the grid regardless of how
     much black margin the AI placed above the subject. */
  object-position: center bottom;
  display: block;
  transition: transform 0.5s ease;
}
.cigar-card:hover .card-img img,
.cigar-card:hover .card-img object { transform: scale(1.06); }

.card-rating {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(7,4,3,0.92);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 15px;
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid var(--gold-shadow);
  letter-spacing: 0.02em;
  z-index: 2;
  box-shadow: var(--shadow-sm), var(--glow-gold);
}
.card-vintage {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(7,4,3,0.85);
  color: var(--parchment);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid var(--walnut);
  z-index: 2;
  font-weight: 500;
}
.card-img-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(7,4,3,0.95) 0%, rgba(7,4,3,0.4) 70%, transparent);
  padding: 28px 12px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 2;
}
.card-img-country {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment);
  font-weight: 500;
}
.card-img-time {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--gold);
  font-weight: 500;
}

.card-body {
  padding: 18px;
  position: relative;
  z-index: 2;
}
.card-brand {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 600;
}
.card-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.card-tagline {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--parchment);
  margin-bottom: 14px;
  line-height: 1.5;
  min-height: 40px;
}
.card-specs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.spec-badge {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--black);
  border: 1px solid var(--walnut);
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 500;
}
.card-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--walnut), transparent);
  margin: 10px 0;
}
.card-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.note-tag {
  font-size: 9px;
  color: var(--gold);
  background: rgba(212,168,74,0.06);
  border: 1px solid rgba(212,168,74,0.18);
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}
.card-delete-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(13,8,6,0.5);
  border: 1px solid var(--walnut);
  color: var(--faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-quick);
  font-family: sans-serif;
  padding: 0;
}
.card-delete-btn:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--cream);
  box-shadow: 0 0 12px rgba(107,31,20,0.4);
}

/* ═══════════════════════════════════════════════════
   DIVIDER BETWEEN SECTIONS
   ═══════════════════════════════════════════════════ */
.section-divider {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--walnut), var(--gold-shadow), var(--walnut), transparent);
}
.divider-ornament {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-shadow: 0 0 12px var(--gold);
}

/* ═══════════════════════════════════════════════════
   SECTION FOOTER (total count)
   ═══════════════════════════════════════════════════ */
.section-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--walnut);
  display: flex;
  justify-content: center;
}
.footer-stat {
  text-align: center;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.footer-stat-n {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold-bright);
  line-height: 1;
}
.footer-stat-l {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   DETAIL OVERLAY
   ═══════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  background: rgba(7,4,3,0.85);
  backdrop-filter: blur(12px);
  padding: 40px 24px;
  overflow-y: auto;
}
.overlay.open {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.overlay-panel {
  background: linear-gradient(180deg, var(--leather-2), var(--charcoal));
  border: 1px solid var(--gold-shadow);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 920px;
  overflow: hidden;
  position: relative;
  animation: slideUp 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow: var(--shadow-xl), var(--glow-gold-lg);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(7,4,3,0.85);
  border: 1px solid var(--gold-shadow);
  color: var(--gold-bright);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.overlay-close:hover {
  background: var(--gold);
  color: var(--black);
  transform: rotate(90deg);
  box-shadow: var(--glow-gold);
}

.overlay-hero {
  height: 320px;
  overflow: hidden;
  position: relative;
}
.overlay-hero img, .overlay-hero object {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.overlay-hero.bottle-hero {
  height: 400px;
  background: var(--black);
}
/* Legacy single-image bottle hero: contain-fit with padding. Scoped to
   DIRECT children so we don't accidentally letterbox the thumbnails in
   the new multi-image hero gallery. */
.overlay-hero.bottle-hero > img,
.overlay-hero.bottle-hero > object {
  object-fit: contain;
  padding: 20px 0;
}
/* When the bottle-hero is the multi-image gallery, drop the legacy
   fixed-height + padding so the gallery stage (aspect-ratio: 16/10) can
   do its own thing. */
.overlay-hero.bottle-hero.hero-gallery { height: auto; padding: 0; }
.overlay-hero-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to top, var(--leather-2) 0%, rgba(36,22,17,0.7) 40%, transparent);
  pointer-events: none;
}

/* ── Hero gallery (multi-image with caption + thumbnails) ─────────────── */
.overlay-hero.hero-gallery {
  height: auto;          /* let the stage + caption + thumbs decide height */
  overflow: visible;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.overlay-hero.hero-gallery .hero-gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;     /* generous landscape — maps + bottles both look right */
  background:
    radial-gradient(ellipse at center, rgba(36, 22, 17, 0.55), var(--leather-2) 75%),
    var(--black);
  overflow: hidden;
}
.overlay-hero.hero-gallery .hero-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  /* Match the slower card fade. */
  transition: opacity 1.4s ease-in-out;
  display: block;
}
.overlay-hero.hero-gallery .hero-gallery-img.active { opacity: 1; }
.overlay-hero.hero-gallery .hero-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 74, 0.4);
  background: rgba(10, 6, 4, 0.7);
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.overlay-hero.hero-gallery .hero-gallery-nav:hover {
  background: rgba(212, 168, 74, 0.18);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.overlay-hero.hero-gallery .hero-gallery-nav.prev { left: 18px; }
.overlay-hero.hero-gallery .hero-gallery-nav.next { right: 18px; }
.overlay-hero.hero-gallery .hero-gallery-caption {
  background: linear-gradient(180deg, rgba(36, 22, 17, 0.95), rgba(20, 12, 8, 0.92));
  border-top: 1px solid rgba(212, 168, 74, 0.18);
  padding: 14px 28px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  /* Lock to a fixed height so swapping between long and short captions
     doesn't make the page jump. Long captions scroll inside this box. */
  height: 118px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 168, 74, 0.28) transparent;
  box-sizing: border-box;
}
.overlay-hero.hero-gallery .hero-gallery-caption::-webkit-scrollbar {
  width: 6px;
}
.overlay-hero.hero-gallery .hero-gallery-caption::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 74, 0.28);
  border-radius: 3px;
}
@media (max-width: 720px) {
  .overlay-hero.hero-gallery .hero-gallery-caption {
    height: 140px;
    padding: 12px 18px 10px;
  }
}
.overlay-hero.hero-gallery .hero-gallery-caption-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--cream);
  line-height: 1.4;
  flex: 1 1 auto;
}
.overlay-hero.hero-gallery .hero-gallery-caption-credit {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim, #8a7456);
  white-space: nowrap;
}
.overlay-hero.hero-gallery .hero-gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px 18px 14px;
  background: rgba(10, 6, 4, 0.85);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 168, 74, 0.3) transparent;
}
.overlay-hero.hero-gallery .hero-gallery-thumb {
  flex: 0 0 auto;
  width: 86px;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(212, 168, 74, 0.18);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(36, 22, 17, 0.4);
  padding: 0;
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.overlay-hero.hero-gallery .hero-gallery-thumb:hover { opacity: 0.9; border-color: var(--gold); }
.overlay-hero.hero-gallery .hero-gallery-thumb.active {
  opacity: 1;
  border-color: var(--gold-bright, #e8c170);
  box-shadow: 0 0 12px -3px rgba(212, 168, 74, 0.5);
}
.overlay-hero.hero-gallery .hero-gallery-thumb img,
.overlay-hero.bottle-hero.hero-gallery .hero-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  display: block;
}
@media (max-width: 600px) {
  .overlay-hero.hero-gallery .hero-gallery-nav { width: 38px; height: 38px; font-size: 24px; }
  .overlay-hero.hero-gallery .hero-gallery-caption { padding: 12px 18px 10px; font-size: 14px; }
  .overlay-hero.hero-gallery .hero-gallery-caption-text { font-size: 14px; }
  .overlay-hero.hero-gallery .hero-gallery-thumb { width: 72px; }
}

.overlay-body {
  padding: 32px 44px 48px;
}

/* ── Producer history (rendered inside the Provenance section) ────────── */
.provenance-part .producer-relationships {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(192, 168, 120, 0.20);
}
.producer-relationships .relationships-label {
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold, #e8c170);
  margin-bottom: 10px;
  font-weight: 600;
}
.producer-relationships .relationship-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.relationship-chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(192, 168, 120, 0.32);
  border-radius: 20px;
  background: rgba(232, 193, 112, 0.04);
  color: rgba(245, 232, 200, 0.85);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.16s ease;
}
.relationship-chip:hover {
  border-color: var(--gold, #e8c170);
  background: rgba(232, 193, 112, 0.12);
  color: var(--gold, #e8c170);
  transform: translateY(-1px);
}

.overlay-eyebrow {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.overlay-eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--gold);
}
.overlay-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 8px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.overlay-tagline {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--gold-bright);
  margin-bottom: 20px;
  line-height: 1.4;
}
.overlay-meta {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--walnut);
  margin-bottom: 32px;
  font-weight: 500;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 40px;
  padding: 20px;
  background: rgba(7,4,3,0.5);
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  box-shadow: var(--inset-top);
}
.stat-box {
  text-align: center;
  padding: 6px 2px;
}
.stat-label {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
  font-weight: 600;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold-bright);
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(212,168,74,0.2);
}
.stat-bar {
  height: 2px;
  background: var(--walnut);
  border-radius: 100px;
  overflow: hidden;
  margin: 0 auto;
  width: 75%;
}
.stat-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold-deep), var(--gold-bright));
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(212,168,74,0.4);
}

/* ═══════════════════════════════════════════════════
   REVIEW SECTIONS
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   SECTION ACCENT COLORS — each room its own signature
   ═══════════════════════════════════════════════════ */
.review-section {
  --accent: var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-bright: var(--gold-bright);
  --accent-shadow: rgba(212,168,74,0.15);
  --accent-wash: rgba(212,168,74,0.06);
}

.review-section[data-accent="gold"] {
  --accent: #d4a84a;
  --accent-deep: #a07828;
  --accent-bright: #e8c170;
  --accent-shadow: rgba(212,168,74,0.15);
  --accent-wash: rgba(212,168,74,0.06);
}
.review-section[data-accent="copper"] {
  --accent: #b07845;
  --accent-deep: #7a5230;
  --accent-bright: #d09868;
  --accent-shadow: rgba(176,120,69,0.18);
  --accent-wash: rgba(176,120,69,0.07);
}
.review-section[data-accent="moss"] {
  --accent: #8a9a5a;
  --accent-deep: #5a6838;
  --accent-bright: #a8b878;
  --accent-shadow: rgba(138,154,90,0.18);
  --accent-wash: rgba(138,154,90,0.06);
}
.review-section[data-accent="tobacco"] {
  --accent: #a07838;
  --accent-deep: #6a5020;
  --accent-bright: #c49858;
  --accent-shadow: rgba(160,120,56,0.18);
  --accent-wash: rgba(160,120,56,0.06);
}
.review-section[data-accent="saffron"] {
  --accent: #c88a3a;
  --accent-deep: #8a5e1e;
  --accent-bright: #e0a858;
  --accent-shadow: rgba(200,138,58,0.18);
  --accent-wash: rgba(200,138,58,0.07);
}
.review-section[data-accent="sienna"] {
  --accent: #b06030;
  --accent-deep: #7a4020;
  --accent-bright: #d48858;
  --accent-shadow: rgba(176,96,48,0.2);
  --accent-wash: rgba(176,96,48,0.07);
}
.review-section[data-accent="amber"] {
  --accent: #c8903a;
  --accent-deep: #8a6020;
  --accent-bright: #e0ae58;
  --accent-shadow: rgba(200,144,58,0.18);
  --accent-wash: rgba(200,144,58,0.07);
}
.review-section[data-accent="indigo"] {
  --accent: #7888b8;
  --accent-deep: #4a5a80;
  --accent-bright: #9aa8d0;
  --accent-shadow: rgba(120,136,184,0.18);
  --accent-wash: rgba(120,136,184,0.07);
}
.review-section[data-accent="rose"] {
  --accent: #b07878;
  --accent-deep: #7a5050;
  --accent-bright: #d09898;
  --accent-shadow: rgba(176,120,120,0.2);
  --accent-wash: rgba(176,120,120,0.07);
}
.review-section[data-accent="bronze"] {
  --accent: #a07838;
  --accent-deep: #6a5020;
  --accent-bright: #c09858;
  --accent-shadow: rgba(160,120,56,0.2);
  --accent-wash: rgba(160,120,56,0.06);
}
.review-section[data-accent="sage"] {
  --accent: #8aa098;
  --accent-deep: #5a6a68;
  --accent-bright: #a8c0b8;
  --accent-shadow: rgba(138,160,152,0.18);
  --accent-wash: rgba(138,160,152,0.06);
}
.review-section[data-accent="pearl"] {
  --accent: #c8b890;
  --accent-deep: #8a7a58;
  --accent-bright: #e0d0a8;
  --accent-shadow: rgba(200,184,144,0.18);
  --accent-wash: rgba(200,184,144,0.06);
}
.review-section[data-accent="slate"] {
  --accent: #7890a0;
  --accent-deep: #4a5a68;
  --accent-bright: #98b0c0;
  --accent-shadow: rgba(120,144,160,0.18);
  --accent-wash: rgba(120,144,160,0.06);
}

/* Apply accents to section elements */
.review-section[data-accent] .review-section-title {
  color: var(--accent);
}
.review-section[data-accent] .review-section-title::before {
  color: var(--accent-deep);
}
.review-section[data-accent] .fact-bullet {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 0 4px var(--accent-wash);
}
.review-section[data-accent] .fact-title {
  color: var(--cream);
}
.review-section[data-accent] .pairing-title {
  color: var(--accent-bright);
}
.review-section[data-accent] .pairing-item.clickable .pairing-title {
  text-decoration-color: var(--accent-deep);
}
.review-section[data-accent] .pairing-item.clickable:hover .pairing-title {
  text-decoration-color: var(--accent);
}
.review-section[data-accent] .pairing-item.clickable:hover {
  background: linear-gradient(to right, var(--accent-wash), transparent 60%);
}
.review-section[data-accent] .tap-hint {
  color: var(--accent);
}
.review-section[data-accent] .flavor-tag.primary {
  background: var(--accent-wash);
  color: var(--accent-bright);
  border-color: var(--accent-shadow);
}
.review-section[data-accent] .third-label {
  color: var(--accent);
}
.review-section[data-accent] .third-card::before {
  background: linear-gradient(to right, transparent, var(--accent-deep), transparent);
}
.review-section[data-accent] .review-text strong {
  color: var(--accent);
}

/* Narrative override for The Story */
.review-section[data-accent="gold"].narrative .review-text,
.review-section.narrative .review-text {
  border-left-color: var(--accent-deep);
  box-shadow: inset 3px 0 0 var(--accent-wash);
}
.review-section.narrative .review-text::first-letter {
  color: var(--accent-bright);
  text-shadow: 0 0 20px var(--accent-shadow);
}

.review-section {
  margin-bottom: 36px;
  position: relative;
}
.review-section-title {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.review-section-title::before {
  content: '◆';
  color: var(--gold-deep);
  font-size: 7px;
}
.review-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--walnut), transparent);
}
.review-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--cream-dim);
  font-weight: 300;
}
.review-text strong { color: var(--gold); font-weight: 500; }

/* Paragraph spacing inside review-text */
.review-text p {
  margin: 0 0 1em 0;
}
.review-text p:last-child {
  margin-bottom: 0;
}
.review-text p + p {
  margin-top: 0.9em;
}

/* The Story — hero treatment */
.review-section.narrative .review-text {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2.05;
  color: var(--cream);
  padding: 22px 26px 22px 30px;
  background: rgba(7,4,3,0.5);
  border-left: 3px solid var(--accent-deep, var(--gold-deep));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: inset 3px 0 0 var(--accent-wash, rgba(212,168,74,0.08));
}
/* Drop-cap applies only to the first paragraph's first letter */
.review-section.narrative .review-text p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 52px;
  float: left;
  line-height: 0.9;
  margin: 4px 12px 0 0;
  color: var(--accent-bright, var(--gold-bright));
  font-weight: 400;
  text-shadow: 0 0 20px var(--accent-shadow, rgba(212,168,74,0.3));
}

/* ═══════════════════════════════════════════════════
   PAIRING LIST — stacked layout (no wrap issues)
   ═══════════════════════════════════════════════════ */
.pairing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pairing-item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--walnut);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.pairing-item:last-child { border-bottom: none; }
.pairing-item.clickable {
  cursor: pointer;
  transition: var(--transition-quick);
  padding-left: 0;
}
.pairing-item.clickable:hover {
  padding-left: 14px;
  background: linear-gradient(to right, rgba(212,168,74,0.04), transparent 60%);
  border-radius: var(--radius-sm);
}
.pairing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pairing-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-bright);
  font-weight: 400;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  letter-spacing: -0.01em;
}
.pairing-item.clickable .pairing-title {
  text-decoration: underline;
  text-decoration-color: var(--gold-shadow);
  text-underline-offset: 4px;
  transition: var(--transition-quick);
}
.pairing-item.clickable:hover .pairing-title {
  text-decoration-color: var(--gold);
}
.pairing-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  white-space: nowrap;
}
.pairing-why {
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.75;
  font-family: var(--font-body);
  font-weight: 300;
}
.tap-hint {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
  margin-top: -2px;
}

/* ═══════════════════════════════════════════════════
   FLAVOR TAGS
   ═══════════════════════════════════════════════════ */
.flavor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.flavor-tag {
  font-size: 11px;
  color: var(--parchment);
  background: rgba(212,168,74,0.05);
  border: 1px solid rgba(212,168,74,0.15);
  padding: 5px 12px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.flavor-tag.primary {
  background: rgba(212,168,74,0.12);
  color: var(--gold-bright);
  border-color: rgba(212,168,74,0.3);
}
.flavor-group {
  margin-bottom: 12px;
}
.flavor-group-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   EVOLUTION THIRDS
   ═══════════════════════════════════════════════════ */
.thirds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.third-card {
  background: linear-gradient(180deg, var(--charcoal), var(--shadow));
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm), var(--inset-top);
  position: relative;
}
.third-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}
.third-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 600;
}
.third-text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--cream-dim);
}

.evolution-phase {
  margin: 16px 0;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--charcoal), var(--shadow));
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  position: relative;
}
.evolution-phase::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}
.evolution-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   INTERESTING FACTS
   ═══════════════════════════════════════════════════ */
.fact-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--walnut);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  align-items: start;
}
.fact-item:last-child { border-bottom: none; }
.fact-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 9px;
  margin-left: 4px;
  box-shadow: 0 0 12px var(--gold), 0 0 0 4px rgba(212,168,74,0.1);
}
.fact-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cream);
  margin-bottom: 4px;
  line-height: 1.3;
  font-weight: 400;
}
.fact-context {
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════
   CATEGORY TABS
   ═══════════════════════════════════════════════════ */
.cat-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 14px 18px;
  background: rgba(13,8,6,0.6);
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), var(--inset-top);
}
.cat-tab {
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--walnut);
  background: transparent;
  color: var(--parchment);
  font-family: var(--font-body);
  font-weight: 500;
  transition: var(--transition-quick);
}
.cat-tab:hover {
  border-color: var(--gold-deep);
  color: var(--cream);
  background: rgba(212,168,74,0.04);
}
.cat-tab.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--black);
  border-color: var(--gold-bright);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(212,168,74,0.3), var(--inset-top);
}

/* ═══════════════════════════════════════════════════
   BAR CARDS
   ═══════════════════════════════════════════════════ */
.bar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.bar-card {
  background: linear-gradient(165deg, var(--leather-2), var(--charcoal));
  border: 1px solid var(--walnut);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-md), var(--inset-top);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bar-card-img {
  /* Fixed aspect-ratio (not fixed height) so cards align across iPad / iPhone /
     desktop without the bottle getting clipped. 4:5 is tall enough to show a
     full bottle, short enough that landscape gallery images (maps, etc.) don't
     leave huge gaps. */
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at center 65%, rgba(36, 22, 17, 0.7), var(--leather-2) 80%),
    var(--black);
}
.bar-card-img img,
.bar-card-img object {
  width: 100%;
  height: 100%;
  /* `contain` so the full bottle shows from top to bottom — was `cover` which
     cropped the tall bottle photos heavily on iPad/iPhone. */
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
}
.bar-card:hover .bar-card-img img,
.bar-card:hover .bar-card-img object { transform: scale(1.03); }
.bar-card-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--leather-2), transparent);
  pointer-events: none;
}

/* Multi-image gallery: stacked images that cross-fade on hover. Only active
   when the bottle has .has-gallery (≥2 images). Uses `contain` so bottle,
   map, distillery and founder photos all show in their entirety.
   `!important` on the transition is required because several other rules
   (atmosphere.css, bar-theme.css) declare a plain `transition: transform`
   on every img inside `.bar-card-img`, which would otherwise stomp the
   opacity fade. */
.bar-card-img.has-gallery .bar-card-image,
.bar-card-img.has-gallery img.bar-card-image {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Default for gallery images: COVER the container so map / farm / founder
     fill the card edge-to-edge. The primary bottle photo (.primary) is an
     exception below — it uses CONTAIN so the whole bottle is visible. */
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  opacity: 0;
  /* Slow, smooth cross-fade. */
  transition: opacity 1.6s ease-in-out, transform 0.6s ease !important;
  /* Force a stable GPU layer with high-quality rendering so Safari doesn't
     show a low-quality downsample mid-transition. translateZ promotes the
     image to a 3D compositor layer; will-change keeps it there persistently
     so the browser allocates a high-res texture once and reuses it. */
  transform: translateZ(0);
  will-change: opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.bar-card-img.has-gallery .bar-card-image.primary {
  object-fit: contain !important;
}
.bar-card-img.has-gallery .bar-card-image.active { opacity: 1 !important; }
/* Hover zoom: ONLY on the primary (bottle) image. Map / farm / founder
   cycle through at natural size. Keep translateZ to stay on the GPU layer. */
.bar-card:hover .bar-card-img.has-gallery .bar-card-image.active.primary {
  transform: scale(1.02) translateZ(0);
}

/* Cigar card image area — base layout (used to be inline style:scale(1.35)
   which over-cropped on iPad). Now aspect-locked and contain-fit. */
.cigar-card .card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(ellipse at center, rgba(36, 22, 17, 0.55), rgba(20, 12, 8, 0.85) 80%),
    var(--leather-2);
  overflow: hidden;
  position: relative;
  display: block;
}
.cigar-card .card-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
}
.cigar-card:hover .card-img > img { transform: scale(1.03); }

/* Founder portraits — must come AFTER the generic cigar-card-image /
   bar-card-image cover rules below so the cascade picks contain. The
   high-specificity tag + class + attribute chain wins against the
   plain `.cigar-card .card-img.has-gallery .cigar-card-image` rule. */
.cigar-card .card-img.has-gallery img.cigar-card-image[data-kind="founder"],
.bar-card .bar-card-img.has-gallery img.bar-card-image[data-kind="founder"],
.overlay-hero.hero-gallery img.hero-gallery-img[data-kind="founder"],
.overlay-hero.hero-gallery .hero-gallery-thumb img[data-kind="founder"] {
  object-fit: contain !important;
  object-position: center 25% !important;
  background: #0f0a07;
}

.cigar-card .card-img.has-gallery .cigar-card-image,
.cigar-card .card-img.has-gallery img.cigar-card-image {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Default: cover (fill card). The cigar photo (.primary) overrides
     with contain below. */
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  opacity: 0;
  /* Slow, smooth cross-fade — match bar-card-img timing. */
  transition: opacity 1.6s ease-in-out, transform 0.6s ease !important;
  /* Force a stable GPU layer. Without this, Safari/iOS downsamples the
     huge source images (up to 2048×1280) to a low-res texture during the
     opacity transition, then re-uploads at full quality after — which
     looks like a "low-res flash" right before the fade. */
  transform: translateZ(0);
  will-change: opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.cigar-card .card-img.has-gallery .cigar-card-image.primary {
  object-fit: contain !important;
}
.cigar-card .card-img.has-gallery .cigar-card-image.active { opacity: 1 !important; }
/* Hover zoom: only on the primary (cigar) image. */
.cigar-card:hover .card-img.has-gallery .cigar-card-image.active.primary {
  transform: scale(1.02) translateZ(0);
}

.card-image-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.bar-card:hover .card-image-dots { opacity: 1; }
.card-image-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s;
}
.card-image-dots span.active { background: var(--gold, #d4a84a); }

.bar-card-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.bar-card-body .card-body-top {
  flex: 0 0 auto;
}
.bar-card-body .card-specs {
  margin-top: auto;
  padding-top: 14px;
}
.bar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
  opacity: 0;
  transition: var(--transition);
}
.bar-card:hover {
  border-color: var(--gold-deep);
  box-shadow: var(--glow-gold);
}
.bar-card:hover::before { opacity: 1; }

.bar-card-category {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 600;
}
.bar-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--cream);
  margin-bottom: 6px;
  line-height: 1.25;
  font-weight: 400;
}
.bar-card-tagline {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--parchment);
  margin-bottom: 16px;
  line-height: 1.5;
  min-height: 38px;
}
.bar-stats {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--walnut);
}
.bar-stat {
  text-align: center;
  flex: 1;
}
.bar-stat-n {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--gold-bright);
  line-height: 1;
  margin-bottom: 4px;
}
.bar-stat-l {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   PAGE FOOTER
   ═══════════════════════════════════════════════════ */
.page-footer {
  border-top: 1px solid var(--walnut);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 40px auto 0;
  position: relative;
}
.page-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-text {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .strip-inner { padding: 0 20px; height: 56px; gap: 20px; }
  .strip-nav { gap: 20px; margin-left: 0; }
  .strip-link { font-size: 9px; gap: 6px; }
  .strip-meta { display: none; }
  .section { padding: 40px 24px 56px; margin: 20px auto; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .head-title { font-size: 32px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .thirds-grid { grid-template-columns: 1fr; }
  .overlay-body { padding: 24px; }
  .overlay-title { font-size: 30px; }
  .overlay-hero { height: 220px; }
  .filter-bar { padding: 12px; }
  .filter-group { padding-right: 10px; margin-right: 4px; }
  .pairing-head { flex-direction: column; gap: 4px; }
  .pairing-sub { white-space: normal; }
  .page-footer { padding: 32px 24px; flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
  .cigar-grid, .bar-grid { grid-template-columns: 1fr; }
  .strip-brand .brand-word { display: none; }
}

/* ═══════════════════════════════════════════════════
   LUXURY DETAIL LAYOUT (v2)
   ═══════════════════════════════════════════════════ */

/* Refined header block with metadata grid */
.detail-header {
  padding: 44px 48px 36px;
  background: linear-gradient(180deg, var(--leather-2) 0%, var(--charcoal) 85%);
  border-bottom: 1px solid var(--walnut);
  position: relative;
  overflow: hidden;
}
.detail-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
  opacity: 0.5;
}
.detail-eyebrow {
  font-family: var(--font-sans, inherit);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 600;
}
.detail-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.05;
  margin: 0 0 14px 0;
  letter-spacing: -0.015em;
}
.detail-tagline {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--gold-bright);
  margin: 0 0 24px 0;
  line-height: 1.45;
  max-width: 640px;
}
.detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(160, 120, 40, 0.18);
}
.detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.meta-k {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.meta-v {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--cream);
  line-height: 1.2;
}
.meta-v .meta-denom {
  font-size: 11px;
  color: var(--dim);
  margin-left: 2px;
}

/* Section spacing rhythm — more generous */
.overlay-body > .review-section {
  margin-bottom: 52px;
}
.overlay-body > .review-section:last-child {
  margin-bottom: 0;
}

/* Provenance block — visually grouped multi-part narrative */
.provenance-block .provenance-part {
  padding: 22px 0;
  border-top: 1px solid rgba(58, 46, 34, 0.6);
}
.provenance-block .provenance-part:first-of-type {
  border-top: none;
  padding-top: 0;
}
.provenance-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  font-weight: 600;
  margin-bottom: 14px;
}

/* Tasting journey — chapters with marker dots */
.tasting-journey {
  position: relative;
}
.tasting-chapter {
  padding: 22px 0 22px 32px;
  position: relative;
  border-top: 1px solid rgba(58, 46, 34, 0.6);
}
.tasting-chapter:first-of-type { border-top: none; padding-top: 0; }
.tasting-chapter::before {
  content: '';
  position: absolute;
  left: 0; top: 28px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--gold-deep));
  box-shadow: 0 0 0 3px var(--charcoal), 0 0 0 4px rgba(160, 120, 40, 0.3);
}
.tasting-chapter:first-of-type::before { top: 6px; }
.tasting-chapter-label {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent-bright, var(--gold-bright));
  margin-bottom: 10px;
  font-weight: 400;
}

/* Evolution grid — side-by-side cards */
.evolution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.evolution-grid .evolution-phase {
  margin: 0;
}

/* Tasting summary — hero treatment, the climax */
.tasting-summary .review-text {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.95;
  color: var(--cream);
  padding: 36px 40px;
  background: linear-gradient(165deg, rgba(60, 42, 26, 0.45), rgba(20, 14, 10, 0.7));
  border-left: 3px solid var(--accent, var(--gold));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: inset 3px 0 0 var(--accent-wash, rgba(212,168,74,0.08)),
              0 8px 24px -12px rgba(0,0,0,0.6);
}

/* Inline note — the "With Water" section, smaller and indented */
.inline-note {
  padding-left: 24px;
  border-left: 2px solid var(--accent-deep, var(--gold-deep));
  opacity: 0.92;
}
.inline-note .review-text {
  font-size: 14px;
  font-style: italic;
  color: var(--cream-dim);
}

/* Notable facts — magazine-style numbered callouts */
.notable-facts {
  background: rgba(20, 14, 10, 0.5);
  border: 1px solid var(--walnut);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  position: relative;
}
.notable-facts::before {
  content: '';
  position: absolute;
  top: 0; left: 36px; right: 36px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.notable-facts-grid {
  display: grid;
  gap: 24px;
}
.notable-fact {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(58, 46, 34, 0.8);
}
.notable-fact:last-child { border-bottom: none; padding-bottom: 0; }
.notable-number {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  color: var(--accent, var(--gold-deep));
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-align: right;
}
.notable-headline {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  color: var(--cream);
  font-weight: 400;
  margin-bottom: 8px;
}
.notable-context {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 300;
}

/* Pairings block — grouped sub-sections */
.pairings-block .pairings-sub {
  margin-top: 28px;
}
.pairings-block .pairings-sub:first-of-type { margin-top: 0; }
.pairings-sub-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(160, 120, 40, 0.2);
}

/* Closing cards — side-by-side summary cards */
.closing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.closing-card {
  padding: 22px 26px;
  background: linear-gradient(180deg, var(--charcoal), var(--shadow));
  border: 1px solid var(--walnut);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--inset-top);
}
.closing-card.tip {
  background: linear-gradient(180deg, rgba(60, 42, 26, 0.4), var(--shadow));
  border-color: var(--accent-deep, var(--gold-deep));
}
.closing-card-label {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  font-weight: 600;
  margin-bottom: 10px;
}
.closing-card .review-text {
  font-size: 14px;
  line-height: 1.8;
}
.closing-card.tip .review-text {
  font-style: italic;
  color: var(--cream);
}

/* Retrohale quote — pull-quote style */
.retrohale-quote {
  margin-top: 22px;
  padding: 16px 22px;
  background: rgba(7, 4, 3, 0.4);
  border-left: 2px solid var(--accent-deep, var(--gold-deep));
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-style: italic;
  color: var(--cream);
  line-height: 1.8;
}
.retrohale-quote p { margin: 0 0 0.8em 0; }
.retrohale-quote p:last-child { margin-bottom: 0; }

/* Construction note — small caption below thirds */
.construction-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(58, 46, 34, 0.5);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--faint);
  font-style: italic;
}
.construction-note p { margin: 0 0 0.5em 0; }
.construction-note p:last-child { margin-bottom: 0; }

/* Mobile adjustments */
@media (max-width: 700px) {
  .detail-header { padding: 32px 24px 24px; }
  .detail-title { font-size: 30px; }
  .detail-tagline { font-size: 16px; }
  .detail-meta-line { gap: 18px; }
  .overlay-body > .review-section { margin-bottom: 36px; }
  .notable-facts { padding: 24px 20px; }
  .notable-fact { grid-template-columns: 48px 1fr; gap: 12px; }
  .notable-number { font-size: 28px; }
  .notable-headline { font-size: 16px; }
  .tasting-summary .review-text { padding: 22px 24px; font-size: 16px; }
  .closing-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   CHAPTER-STYLE ELEVATED SECTIONS (v3 polish)
   Each major section gets its own chamber with its own color tone.
   ═══════════════════════════════════════════════════ */

/* Give the overlay body more breathing room */
.overlay-body {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.overlay-body > .review-section,
.overlay-body > section.review-section {
  margin-bottom: 44px;
  position: relative;
}

/* Elevated chapter container — wraps major sections in a raised card */
.overlay-body > .review-section.chapter,
.overlay-body > section.review-section[data-chapter] {
  padding: 34px 38px;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(30, 20, 14, 0.6), rgba(10, 6, 4, 0.85));
  border: 1px solid var(--walnut);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(212, 168, 74, 0.06),
    0 0 0 1px rgba(212, 168, 74, 0.04);
  position: relative;
  overflow: hidden;
}

/* Subtle top-edge highlight on chapter cards */
.overlay-body > .review-section.chapter::before,
.overlay-body > section.review-section[data-chapter]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.3), transparent);
  pointer-events: none;
}

/* ═══ Story chapter — drop-cap treatment (already partly there) ═══ */
.overlay-body > .review-section.narrative[data-chapter="story"],
.overlay-body > section.review-section.narrative {
  background: linear-gradient(155deg, rgba(95, 62, 28, 0.52), rgba(22, 12, 6, 0.92));
  border: 1px solid rgba(212, 168, 74, 0.45);
  box-shadow:
    0 32px 80px -22px rgba(0, 0, 0, 0.92),
    0 0 90px -18px rgba(232, 193, 112, 0.42),
    inset 0 1px 0 rgba(232, 193, 112, 0.2),
    0 0 0 1px rgba(212, 168, 74, 0.14);
  padding: 40px 44px 42px;
}
.overlay-body > .review-section.narrative::before {
  background: linear-gradient(to right, transparent, var(--gold-bright), transparent) !important;
  height: 2px !important;
  left: 44px !important;
  right: 44px !important;
}
.overlay-body > .review-section.narrative .review-section-title {
  color: var(--gold-bright) !important;
}
.overlay-body > .review-section.narrative .review-text {
  padding: 0;
  background: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-serif);
  font-size: 19.5px;
  line-height: 1.92;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: 0.003em;
}
/* Signature drop-cap on The Story */
.overlay-body > .review-section.narrative .review-text p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 62px;
  float: left;
  line-height: 0.82;
  margin: 10px 16px 0 0;
  color: var(--gold-bright);
  text-shadow: 0 0 28px rgba(232, 193, 112, 0.55);
  font-weight: 400;
}

/* ═══ Provenance — COOL archival tone, visually distinct from Story ═══ */
.overlay-body > .review-section.provenance-block {
  background: linear-gradient(160deg, rgba(28, 32, 42, 0.78), rgba(8, 10, 14, 0.96));
  border: 1px solid rgba(98, 110, 130, 0.28);
  box-shadow:
    0 26px 66px -22px rgba(0, 0, 0, 0.92),
    inset 0 1px 0 rgba(168, 184, 204, 0.08),
    0 0 0 1px rgba(98, 110, 130, 0.05);
  padding: 36px 40px;
}
.overlay-body > .review-section.provenance-block::before {
  background: linear-gradient(to right, transparent, rgba(168, 184, 204, 0.4), transparent) !important;
}
.overlay-body > .review-section.provenance-block .review-section-title {
  color: #a8b8cc !important;
  letter-spacing: 0.48em !important;
}
.overlay-body > .review-section.provenance-block .review-section-title::before {
  color: #7890a0 !important;
}
.provenance-block .provenance-part {
  padding: 24px 0;
  border-top: 1px solid rgba(98, 110, 130, 0.18);
}
.provenance-block .provenance-part:first-of-type {
  border-top: none;
  padding-top: 0;
}
.provenance-block .provenance-label {
  position: relative;
  padding-left: 18px;
  color: #9aacc0 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.38em !important;
}
.provenance-block .provenance-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: #7890a0;
  opacity: 0.8;
}
.provenance-block .review-text {
  color: #c8d0dc;
  line-height: 1.85;
  font-weight: 300;
}

/* ═══ Tasting journey — burgundy/warm undertone ═══ */
.overlay-body > .review-section.tasting-journey {
  background: linear-gradient(160deg, rgba(107, 31, 20, 0.14), rgba(20, 11, 7, 0.88));
  border-color: rgba(139, 74, 46, 0.35);
  box-shadow:
    0 28px 70px -22px rgba(0, 0, 0, 0.9),
    0 0 80px -30px rgba(168, 60, 42, 0.25),
    inset 0 1px 0 rgba(212, 144, 108, 0.08);
}
.overlay-body > .review-section.tasting-journey::before {
  background: linear-gradient(to right, transparent, rgba(212, 144, 108, 0.35), transparent) !important;
}
.tasting-chapter::before {
  background: var(--accent-bright, var(--gold-bright)) !important;
  box-shadow:
    0 0 0 3px var(--shadow),
    0 0 0 4px rgba(212, 144, 108, 0.35),
    0 0 16px rgba(212, 144, 108, 0.4) !important;
}
.tasting-chapter-label {
  font-size: 22px;
  letter-spacing: 0.01em;
}

/* ═══ Tasting summary — the climax, richest treatment ═══ */
.overlay-body > .review-section.tasting-summary {
  background: linear-gradient(170deg, rgba(74, 49, 37, 0.55), rgba(10, 6, 4, 0.95));
  border: 1px solid var(--gold-deep);
  box-shadow:
    0 32px 80px -22px rgba(0, 0, 0, 0.95),
    0 0 90px -22px rgba(212, 168, 74, 0.45),
    inset 0 1px 0 rgba(232, 193, 112, 0.15),
    0 0 0 1px rgba(212, 168, 74, 0.08);
}
.overlay-body > .review-section.tasting-summary::before {
  background: linear-gradient(to right, transparent, rgba(232, 193, 112, 0.6), transparent) !important;
  height: 2px !important;
}
.overlay-body > .review-section.tasting-summary .review-text {
  padding: 16px 4px;
  background: none;
  border: none;
  box-shadow: none;
  font-family: var(--font-serif);
  font-size: 19.5px;
  line-height: 1.92;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.overlay-body > .review-section.tasting-summary .review-text p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 58px;
  float: left;
  line-height: 0.85;
  margin: 8px 14px 0 0;
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(232, 193, 112, 0.4);
  font-weight: 400;
}

/* ═══ Notable facts — museum placard aesthetic ═══ */
.overlay-body > .review-section.notable-facts {
  background: linear-gradient(155deg, rgba(92, 67, 21, 0.28), rgba(14, 9, 6, 0.92));
  border-color: rgba(138, 107, 31, 0.5);
  padding: 38px 42px !important;
  box-shadow:
    0 28px 70px -22px rgba(0, 0, 0, 0.9),
    0 0 70px -24px rgba(212, 168, 74, 0.3),
    inset 0 1px 0 rgba(232, 193, 112, 0.12);
}
.overlay-body > .review-section.notable-facts::before {
  background: linear-gradient(to right, transparent, var(--gold-bright), transparent) !important;
  height: 2px !important;
}
.notable-facts-grid {
  gap: 6px;
}
.notable-fact {
  padding: 22px 0;
  grid-template-columns: 72px 1fr;
  gap: 24px;
}
.notable-number {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--gold-deep);
  text-align: right;
  line-height: 0.8;
  opacity: 0.85;
  transition: all 0.3s;
}
.notable-fact:hover .notable-number {
  color: var(--gold-bright);
  opacity: 1;
  text-shadow: 0 0 16px rgba(232, 193, 112, 0.3);
}
.notable-headline {
  font-size: 20px;
  line-height: 1.38;
  color: var(--cream);
  margin-bottom: 10px;
}
.notable-context {
  font-size: 14px;
  line-height: 1.78;
  color: var(--cream-dim);
  letter-spacing: 0.003em;
}

/* ═══ Pairings block — split per-type with distinct color tones ═══ */
.overlay-body > .review-section.pairings-block {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 !important;
}
.overlay-body > .review-section.pairings-block::before {
  display: none;
}
.overlay-body > .review-section.pairings-block > .review-section-title {
  padding-left: 4px;
  margin-bottom: 20px;
}
.pairings-block .pairings-sub {
  padding: 28px 32px;
  border-radius: 12px;
  border: 1px solid;
  position: relative;
  margin-top: 16px;
  overflow: hidden;
  box-shadow:
    0 16px 42px -18px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.pairings-block .pairings-sub::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  opacity: 0.5;
}
.pairings-block .pairings-sub:first-of-type { margin-top: 0; }

/* Cigar pairings (inside bottle) — warm ember */
.pairings-block .pairings-sub:has(.pairings-sub-label:first-child) {
  /* fallback for browsers without :has — overridden below */
}

/* Target specific pairing types by adjacent label text */
.pairings-sub[data-kind="cigars"],
.pairings-sub[data-kind="bar"] {
  background: linear-gradient(155deg, rgba(74, 42, 28, 0.42), rgba(16, 10, 6, 0.88));
  border-color: rgba(154, 90, 42, 0.45);
}
.pairings-sub[data-kind="cigars"]::before,
.pairings-sub[data-kind="bar"]::before {
  background: linear-gradient(to right, transparent, rgba(212, 144, 88, 0.5), transparent);
}
.pairings-sub[data-kind="cigars"] .pairings-sub-label,
.pairings-sub[data-kind="bar"] .pairings-sub-label {
  color: #d49060;
  border-bottom-color: rgba(212, 144, 88, 0.25);
}

/* Jazz pairings — midnight blue */
.pairings-sub[data-kind="jazz"] {
  background: linear-gradient(155deg, rgba(28, 45, 75, 0.45), rgba(10, 8, 12, 0.92));
  border-color: rgba(94, 130, 180, 0.4);
  box-shadow:
    0 16px 42px -18px rgba(0, 0, 0, 0.85),
    0 0 70px -28px rgba(94, 130, 180, 0.3),
    inset 0 1px 0 rgba(154, 178, 220, 0.08);
}
.pairings-sub[data-kind="jazz"]::before {
  background: linear-gradient(to right, transparent, rgba(154, 178, 220, 0.5), transparent);
}
.pairings-sub[data-kind="jazz"] .pairings-sub-label {
  color: #9ab2dc;
  border-bottom-color: rgba(154, 178, 220, 0.22);
  letter-spacing: 0.35em;
}
.pairings-sub[data-kind="jazz"] .pairing-item {
  border-bottom-color: rgba(94, 130, 180, 0.18);
}
.pairings-sub[data-kind="jazz"] .pairing-title {
  color: #b8c8e4;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
}
.pairings-sub[data-kind="jazz"] .pairing-sub {
  color: #7088b0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pairings-sub[data-kind="jazz"] .pairing-why {
  color: #c8d4e8;
  font-weight: 300;
}

/* Snacks — moss/olive */
.pairings-sub[data-kind="snacks"],
.pairings-sub[data-kind="coffee"] {
  background: linear-gradient(155deg, rgba(60, 78, 45, 0.28), rgba(12, 10, 6, 0.92));
  border-color: rgba(110, 138, 82, 0.4);
}
.pairings-sub[data-kind="snacks"]::before,
.pairings-sub[data-kind="coffee"]::before {
  background: linear-gradient(to right, transparent, rgba(168, 184, 120, 0.45), transparent);
}
.pairings-sub[data-kind="snacks"] .pairings-sub-label,
.pairings-sub[data-kind="coffee"] .pairings-sub-label {
  color: #a8b878;
  border-bottom-color: rgba(168, 184, 120, 0.22);
}

/* ═══ Closing cards — three-up, distinct per card ═══ */
.overlay-body > .review-section.closing-cards {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.overlay-body > .review-section.closing-cards::before { display: none; }
.closing-card {
  padding: 26px 28px;
  background: linear-gradient(155deg, rgba(30, 20, 14, 0.7), rgba(10, 6, 4, 0.9));
  border: 1px solid var(--walnut);
  border-radius: 12px;
  box-shadow:
    0 14px 36px -16px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(212, 168, 74, 0.05);
  position: relative;
  overflow: hidden;
}
.closing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.2), transparent);
}

/* Ideal Setting — plum undertone */
.closing-card[data-kind="setting"] {
  background: linear-gradient(155deg, rgba(45, 40, 55, 0.42), rgba(10, 8, 12, 0.92));
  border-color: rgba(106, 90, 133, 0.4);
}
.closing-card[data-kind="setting"]::before {
  background: linear-gradient(to right, transparent, rgba(170, 148, 200, 0.35), transparent);
}
.closing-card[data-kind="setting"] .closing-card-label {
  color: #b8a8d4;
}

/* Glassware — neutral cool */
.closing-card[data-kind="glass"] {
  background: linear-gradient(155deg, rgba(35, 40, 48, 0.42), rgba(8, 10, 14, 0.92));
  border-color: rgba(120, 144, 160, 0.35);
}
.closing-card[data-kind="glass"]::before {
  background: linear-gradient(to right, transparent, rgba(168, 188, 204, 0.35), transparent);
}
.closing-card[data-kind="glass"] .closing-card-label {
  color: #a8bcc8;
}

/* Connoisseur's Tip — rich gold, stands out */
.closing-card.tip,
.closing-card[data-kind="tip"] {
  background: linear-gradient(155deg, rgba(107, 75, 20, 0.5), rgba(20, 11, 6, 0.92));
  border: 1px solid var(--gold);
  box-shadow:
    0 18px 48px -18px rgba(0, 0, 0, 0.85),
    0 0 48px -14px rgba(212, 168, 74, 0.55),
    inset 0 1px 0 rgba(232, 193, 112, 0.18);
}
.closing-card.tip::before,
.closing-card[data-kind="tip"]::before {
  background: linear-gradient(to right, transparent, var(--gold-bright), transparent) !important;
  height: 2px;
}
.closing-card.tip .closing-card-label,
.closing-card[data-kind="tip"] .closing-card-label {
  color: var(--gold-bright);
  letter-spacing: 0.35em;
}
.closing-card.tip .review-text,
.closing-card[data-kind="tip"] .review-text {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--cream);
  line-height: 1.82;
}

/* ═══ Refine review-section-title for chapter cards ═══ */
.overlay-body > .review-section[class*="chapter"] .review-section-title,
.overlay-body > .review-section.narrative .review-section-title,
.overlay-body > .review-section.provenance-block .review-section-title,
.overlay-body > .review-section.tasting-journey .review-section-title,
.overlay-body > .review-section.tasting-summary .review-section-title,
.overlay-body > .review-section.notable-facts .review-section-title {
  font-size: 10.5px;
  letter-spacing: 0.45em;
  margin-bottom: 24px;
  font-weight: 600;
}

/* Ornamental diamond for chapter titles */
.overlay-body > .review-section.narrative .review-section-title::before,
.overlay-body > .review-section.provenance-block .review-section-title::before,
.overlay-body > .review-section.tasting-journey .review-section-title::before,
.overlay-body > .review-section.tasting-summary .review-section-title::before,
.overlay-body > .review-section.notable-facts .review-section-title::before {
  content: '◈';
  font-size: 9px;
  color: var(--gold);
  margin-right: 4px;
  opacity: 0.85;
}

/* Stats grid — raised */
.overlay-body .stats-grid {
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.55), rgba(10, 6, 4, 0.8));
  border: 1px solid var(--walnut);
  border-radius: 10px;
  box-shadow:
    0 10px 28px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(212, 168, 74, 0.05);
  margin-bottom: 44px;
}

/* Flavor profile — small elevated */
.overlay-body > .review-section:not(.chapter):has(.flavor-tags) {
  padding: 24px 28px;
  background: linear-gradient(155deg, rgba(30, 20, 14, 0.35), rgba(10, 6, 4, 0.7));
  border: 1px solid rgba(74, 49, 37, 0.6);
  border-radius: 10px;
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.6);
}

/* Evolution grid cards — raised */
.evolution-grid .evolution-phase {
  padding: 20px 22px;
  background: linear-gradient(175deg, rgba(30, 20, 14, 0.72), rgba(10, 6, 4, 0.9));
  border: 1px solid var(--walnut);
  border-radius: 10px;
  box-shadow:
    0 12px 32px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(212, 168, 74, 0.05);
  position: relative;
}
.evolution-grid .evolution-phase::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.25), transparent);
}
.evolution-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Third cards (cigar evolution) — same raised treatment */
.thirds-grid .third-card {
  padding: 20px 22px;
  background: linear-gradient(175deg, rgba(30, 20, 14, 0.72), rgba(10, 6, 4, 0.9));
  border: 1px solid var(--walnut);
  border-radius: 10px;
  box-shadow:
    0 12px 32px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(212, 168, 74, 0.05);
  position: relative;
  overflow: hidden;
}
.thirds-grid .third-card::before {
  background: linear-gradient(to right, transparent, var(--accent-deep, var(--gold-deep)), transparent) !important;
  height: 1px !important;
  top: 0 !important;
  left: 20px !important;
  right: 20px !important;
}

/* ═══ Mobile breakpoint ═══ */
@media (max-width: 700px) {
  .overlay-body {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .overlay-body > .review-section.chapter,
  .overlay-body > section.review-section[data-chapter],
  .overlay-body > .review-section.narrative,
  .overlay-body > .review-section.provenance-block,
  .overlay-body > .review-section.tasting-journey,
  .overlay-body > .review-section.tasting-summary,
  .overlay-body > .review-section.notable-facts {
    padding: 26px 22px;
    border-radius: 10px;
  }
  .overlay-body > .review-section.narrative .review-text { font-size: 16px; }
  .overlay-body > .review-section.tasting-summary .review-text { font-size: 16.5px; }
  .overlay-body > .review-section.tasting-summary .review-text p:first-child::first-letter { font-size: 46px; }
  .notable-facts { padding: 26px 20px !important; }
  .notable-fact { grid-template-columns: 52px 1fr; gap: 14px; padding: 18px 0; }
  .notable-number { font-size: 34px; }
  .notable-headline { font-size: 17px; }
  .pairings-block .pairings-sub { padding: 22px 20px; }
  .closing-card { padding: 22px 20px; }
}

/* ═══════════════════════════════════════════════════
   CHAPTER DIFFERENTIATION (v4)
   Each major section gets its OWN visual signature:
   - unique surface treatment
   - unique header typography
   - unique ornamental device
   - unique color story
   ═══════════════════════════════════════════════════ */

/* ─── FLAVOR PROFILE — illuminated manuscript treatment ─── */
/* Warm parchment-tone card with hairline frame, distinct from Evolution */
.overlay-body > .review-section:has(> .flavor-tags),
.overlay-body > .review-section:has(> .flavor-group),
.overlay-body .review-section.flavor-profile {
  padding: 32px 36px 36px !important;
  background:
    radial-gradient(ellipse at top left, rgba(212, 168, 74, 0.08), transparent 70%),
    linear-gradient(165deg, rgba(40, 28, 18, 0.65), rgba(14, 9, 6, 0.92)) !important;
  border: 1px solid rgba(160, 120, 40, 0.32) !important;
  border-radius: 14px !important;
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(232, 193, 112, 0.12),
    inset 0 0 0 1px rgba(212, 168, 74, 0.05) !important;
  position: relative;
  overflow: hidden;
}
/* Illuminated corner flourishes — parchment manuscript feel */
.overlay-body > .review-section:has(> .flavor-tags)::before,
.overlay-body > .review-section:has(> .flavor-group)::before {
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  width: 18px; height: 18px;
  border-top: 1px solid rgba(212, 168, 74, 0.4);
  border-left: 1px solid rgba(212, 168, 74, 0.4);
  background: none !important;
  opacity: 0.7;
}
.overlay-body > .review-section:has(> .flavor-tags)::after,
.overlay-body > .review-section:has(> .flavor-group)::after {
  content: '';
  position: absolute;
  bottom: 14px; right: 14px;
  width: 18px; height: 18px;
  border-bottom: 1px solid rgba(212, 168, 74, 0.4);
  border-right: 1px solid rgba(212, 168, 74, 0.4);
  opacity: 0.7;
}
.overlay-body > .review-section:has(> .flavor-tags) .review-section-title,
.overlay-body > .review-section:has(> .flavor-group) .review-section-title {
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: 0.5em;
  margin-bottom: 24px;
}
.overlay-body > .review-section:has(> .flavor-tags) .review-section-title::before,
.overlay-body > .review-section:has(> .flavor-group) .review-section-title::before {
  content: '❦';
  color: var(--gold);
  font-size: 10px;
  opacity: 0.8;
}

/* Flavor group labels — emphasize the primary/secondary/finish distinction */
.flavor-group {
  margin-bottom: 18px;
}
.flavor-group:last-child {
  margin-bottom: 0;
}
.flavor-group-label {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
  padding-left: 14px;
  position: relative;
}
.flavor-group-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--gold-deep);
}

/* Refined tags with warm depth */
.flavor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.flavor-tag {
  display: inline-block;
  padding: 7px 14px;
  background: linear-gradient(180deg, rgba(58, 38, 28, 0.7), rgba(20, 12, 8, 0.85));
  border: 1px solid rgba(122, 90, 42, 0.35);
  border-radius: 100px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-style: italic;
  color: var(--cream-dim);
  letter-spacing: 0.005em;
  transition: all 0.2s;
}
.flavor-tag.primary {
  background: linear-gradient(180deg, rgba(107, 75, 20, 0.32), rgba(30, 18, 8, 0.88));
  border-color: rgba(212, 168, 74, 0.4);
  color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(232, 193, 112, 0.15),
    0 2px 6px -2px rgba(0, 0, 0, 0.5);
}
.flavor-tag:hover {
  border-color: rgba(212, 168, 74, 0.6);
  color: var(--gold-bright);
  transform: translateY(-1px);
}

/* Retrohale quote inside flavor profile — pull-quote treatment */
.retrohale-quote {
  margin-top: 28px;
  padding: 22px 28px;
  background: linear-gradient(170deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  border: none;
  border-top: 1px solid rgba(160, 120, 40, 0.25);
  border-bottom: 1px solid rgba(160, 120, 40, 0.25);
  position: relative;
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-style: italic;
  color: var(--cream);
  line-height: 1.85;
  text-align: center;
}
.retrohale-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--charcoal);
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
}

/* ─── EVOLUTION — scientific / chronometer treatment ─── */
/* Each phase as a distinct instrument reading */
.overlay-body > .review-section:has(> .evolution-grid),
.overlay-body > .review-section:has(> .thirds-grid) {
  padding: 34px 36px !important;
  background: linear-gradient(180deg, rgba(22, 18, 14, 0.88), rgba(10, 8, 6, 0.96)) !important;
  border: 1px solid rgba(90, 78, 62, 0.35) !important;
  border-radius: 14px !important;
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(200, 184, 144, 0.06) !important;
  position: relative;
}
/* Chronometer tick marks across the top */
.overlay-body > .review-section:has(> .evolution-grid)::before,
.overlay-body > .review-section:has(> .thirds-grid)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 36px;
  right: 36px;
  height: 8px;
  background:
    linear-gradient(to right, transparent, rgba(200, 184, 144, 0.3), transparent),
    repeating-linear-gradient(to right, transparent 0, transparent 38px, rgba(200, 184, 144, 0.4) 38px, rgba(200, 184, 144, 0.4) 39px);
  background-size: 100% 1px, 100% 6px;
  background-position: top, 3px;
  background-repeat: no-repeat, repeat-x;
  opacity: 0.5;
}
.overlay-body > .review-section:has(> .evolution-grid) .review-section-title,
.overlay-body > .review-section:has(> .thirds-grid) .review-section-title {
  color: var(--parchment);
  font-size: 10px;
  letter-spacing: 0.48em;
  font-family: var(--font-body);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.overlay-body > .review-section:has(> .evolution-grid) .review-section-title::before,
.overlay-body > .review-section:has(> .thirds-grid) .review-section-title::before {
  content: '◐';
  color: var(--gold);
  font-size: 11px;
  opacity: 0.9;
}

/* Evolution phase cards — each a discrete chapter */
.evolution-grid .evolution-phase,
.thirds-grid .third-card {
  padding: 20px 22px 22px !important;
  background: linear-gradient(170deg, rgba(35, 24, 16, 0.75), rgba(8, 5, 3, 0.92)) !important;
  border: 1px solid rgba(90, 78, 62, 0.4) !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 28px -12px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(200, 184, 144, 0.06) !important;
  transition: all 0.3s ease;
}
.evolution-grid .evolution-phase:hover,
.thirds-grid .third-card:hover {
  border-color: rgba(160, 120, 40, 0.5) !important;
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -14px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(232, 193, 112, 0.1);
}
/* Phase index — large serif numeral in the corner */
.evolution-grid .evolution-phase::before,
.thirds-grid .third-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20px !important;
  right: 20px !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.45), transparent) !important;
}
/* Numeric phase indicator — add via nth-child */
.evolution-grid .evolution-phase::after,
.thirds-grid .third-card::after {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 38px;
  color: rgba(160, 120, 40, 0.2);
  line-height: 0.8;
  pointer-events: none;
  letter-spacing: -0.03em;
}
.evolution-grid .evolution-phase:nth-child(1)::after { content: 'I'; }
.evolution-grid .evolution-phase:nth-child(2)::after { content: 'II'; }
.evolution-grid .evolution-phase:nth-child(3)::after { content: 'III'; }
.thirds-grid .third-card:nth-child(1)::after { content: 'I'; }
.thirds-grid .third-card:nth-child(2)::after { content: 'II'; }
.thirds-grid .third-card:nth-child(3)::after { content: 'III'; }

.evolution-label,
.thirds-grid .third-label {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  padding-right: 40px;
  font-weight: 400;
}
.evolution-grid .evolution-phase .review-text,
.thirds-grid .third-card .third-text {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--cream-dim);
}

/* Construction note below thirds — elegant caption */
.construction-note {
  margin-top: 24px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.35);
  border-left: 2px solid rgba(160, 120, 40, 0.5);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--parchment);
  font-style: italic;
  letter-spacing: 0.005em;
}

/* ─── STATS GRID — instrument panel aesthetic ─── */
.overlay-body .stats-grid {
  padding: 22px 26px !important;
  background:
    linear-gradient(180deg, rgba(28, 20, 14, 0.7), rgba(12, 8, 6, 0.9)) !important;
  border: 1px solid rgba(90, 78, 62, 0.4) !important;
  border-radius: 12px !important;
  box-shadow:
    0 14px 32px -14px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(200, 184, 144, 0.06),
    inset 0 0 0 1px rgba(90, 78, 62, 0.1) !important;
  margin-bottom: 44px;
  position: relative;
}
.overlay-body .stats-grid::before {
  content: '';
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.3), transparent);
}
.stat-box {
  padding: 12px 8px !important;
  background: none !important;
  border: none !important;
  border-right: 1px solid rgba(90, 78, 62, 0.25) !important;
  border-radius: 0 !important;
  text-align: center;
}
.stat-box:last-child {
  border-right: none !important;
}
.stat-label {
  font-size: 9px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--faint) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.stat-value {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  color: var(--gold-bright) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 4px 0 8px !important;
}
.stat-bar {
  height: 2px !important;
  background: rgba(90, 78, 62, 0.3) !important;
  border-radius: 100px !important;
  overflow: hidden;
  margin-top: 6px;
}
.stat-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 8px rgba(212, 168, 74, 0.5);
  border-radius: 100px;
}

/* ─── TASTING SUMMARY — magazine pull-spread treatment ─── */
.overlay-body > .review-section.tasting-summary {
  padding: 48px 52px !important;
}
.overlay-body > .review-section.tasting-summary::after {
  content: '❦';
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 16px;
  color: rgba(212, 168, 74, 0.45);
}
.overlay-body > .review-section.tasting-summary {
  padding-bottom: 62px !important;
}

/* ─── NOTABLE FACTS — refine & add decorative rule between each ─── */
.notable-fact {
  position: relative;
  padding-right: 8px !important;
}
.notable-fact:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 96px;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(160, 120, 40, 0.25), transparent 70%);
  border-bottom: none !important;
}

/* ─── PAIRINGS — deepen per-kind distinction ─── */

/* Jazz — midnight blue with crescent moon ornament */
.pairings-sub[data-kind="jazz"] {
  padding: 30px 34px !important;
}
.pairings-sub[data-kind="jazz"] .pairings-sub-label {
  padding-bottom: 10px;
  margin-bottom: 16px;
  position: relative;
}
.pairings-sub[data-kind="jazz"] .pairings-sub-label::after {
  content: '☽';
  position: absolute;
  right: 0;
  top: -2px;
  color: rgba(154, 178, 220, 0.5);
  font-size: 18px;
  line-height: 1;
}
.pairings-sub[data-kind="jazz"] .pairing-item {
  padding: 16px 0 !important;
  border-bottom-color: rgba(94, 130, 180, 0.15) !important;
}
.pairings-sub[data-kind="jazz"] .pairing-item:last-child {
  border-bottom: none !important;
}

/* Cigars/Bar — amber with leaf/ember ornament */
.pairings-sub[data-kind="cigars"],
.pairings-sub[data-kind="bar"] {
  padding: 30px 34px !important;
}
.pairings-sub[data-kind="cigars"] .pairings-sub-label::after,
.pairings-sub[data-kind="bar"] .pairings-sub-label::after {
  content: '❋';
  position: absolute;
  right: 0;
  top: -2px;
  color: rgba(212, 144, 88, 0.5);
  font-size: 16px;
  line-height: 1;
}
.pairings-sub[data-kind="cigars"] .pairings-sub-label,
.pairings-sub[data-kind="bar"] .pairings-sub-label {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* Snacks/Coffee — moss with sprig ornament */
.pairings-sub[data-kind="snacks"],
.pairings-sub[data-kind="coffee"] {
  padding: 30px 34px !important;
}
.pairings-sub[data-kind="snacks"] .pairings-sub-label,
.pairings-sub[data-kind="coffee"] .pairings-sub-label {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.pairings-sub[data-kind="snacks"] .pairings-sub-label::after,
.pairings-sub[data-kind="coffee"] .pairings-sub-label::after {
  content: '❧';
  position: absolute;
  right: 0;
  top: -2px;
  color: rgba(168, 184, 120, 0.5);
  font-size: 18px;
  line-height: 1;
}

/* Pairing list items — refined */
.pairings-sub .pairing-item {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(160, 120, 40, 0.15);
}
.pairings-sub .pairing-item:last-child { border-bottom: none; }
.pairings-sub .pairing-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}
.pairings-sub .pairing-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--cream);
  font-weight: 400;
}
.pairings-sub .pairing-sub {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 4px;
}
.pairings-sub .pairing-why {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 300;
  margin-top: 6px;
}
.pairings-sub .pairing-item.clickable {
  cursor: pointer;
  transition: all 0.15s;
  margin: 0 -14px;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-radius: 6px;
}
.pairings-sub .pairing-item.clickable:hover {
  background: rgba(212, 168, 74, 0.04);
}
.pairings-sub .tap-hint {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gold-deep);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}
.pairings-sub .pairing-item.clickable:hover .tap-hint {
  opacity: 1;
}

/* ─── DETAIL HEADER — add decorative flourish ─── */
.detail-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* Scroll-driven elegance — entrance animation for chapters */
@keyframes chapterRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.overlay.open .review-section {
  animation: chapterRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.overlay.open .review-section:nth-of-type(1) { animation-delay: 0.05s; }
.overlay.open .review-section:nth-of-type(2) { animation-delay: 0.12s; }
.overlay.open .review-section:nth-of-type(3) { animation-delay: 0.18s; }
.overlay.open .review-section:nth-of-type(4) { animation-delay: 0.24s; }
.overlay.open .review-section:nth-of-type(5) { animation-delay: 0.30s; }
.overlay.open .review-section:nth-of-type(6) { animation-delay: 0.36s; }
.overlay.open .review-section:nth-of-type(7) { animation-delay: 0.42s; }
.overlay.open .review-section:nth-of-type(8) { animation-delay: 0.48s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .overlay.open .review-section {
    animation: none;
  }
}

/* Mobile refinements */
@media (max-width: 700px) {
  .overlay-body > .review-section:has(> .flavor-tags),
  .overlay-body > .review-section:has(> .flavor-group),
  .overlay-body > .review-section:has(> .evolution-grid),
  .overlay-body > .review-section:has(> .thirds-grid) {
    padding: 24px 20px !important;
  }
  .overlay-body .stats-grid { padding: 16px 18px !important; }
  .stat-value { font-size: 22px !important; }
  .overlay-body > .review-section.tasting-summary { padding: 30px 22px 44px !important; }
}

/* ═══════════════════════════════════════════════════
   v5 — CATALOG REFINEMENT + CHAPTER POLISH
   ═══════════════════════════════════════════════════ */

/* ─── FIX: coffee vs snacks — coffee gets espresso-brown chamber ─── */
.pairings-sub[data-kind="coffee"] {
  background: linear-gradient(155deg, rgba(58, 32, 18, 0.62), rgba(14, 8, 4, 0.94)) !important;
  border-color: rgba(150, 88, 42, 0.38) !important;
  box-shadow:
    0 16px 42px -18px rgba(0, 0, 0, 0.85),
    0 0 50px -28px rgba(168, 108, 60, 0.3),
    inset 0 1px 0 rgba(200, 138, 82, 0.08) !important;
}
.pairings-sub[data-kind="coffee"]::before {
  background: linear-gradient(to right, transparent, rgba(200, 138, 82, 0.45), transparent) !important;
}
.pairings-sub[data-kind="coffee"] .pairings-sub-label {
  color: #c8925a !important;
  border-bottom-color: rgba(200, 138, 82, 0.22) !important;
}
.pairings-sub[data-kind="coffee"] .pairings-sub-label::after {
  content: '◉' !important;
  color: rgba(200, 138, 82, 0.55) !important;
  font-size: 14px !important;
}
.pairings-sub[data-kind="coffee"] .pairing-title {
  color: #e0b892;
}
.pairings-sub[data-kind="coffee"] .pairing-why {
  color: #d4b89c;
}
.pairings-sub[data-kind="coffee"] .pairing-item {
  border-bottom-color: rgba(150, 88, 42, 0.15) !important;
}

/* Snacks — distinctly green/moss, make it pop more */
.pairings-sub[data-kind="snacks"] {
  background: linear-gradient(155deg, rgba(40, 58, 28, 0.48), rgba(8, 10, 6, 0.94)) !important;
  border-color: rgba(120, 148, 82, 0.4) !important;
  box-shadow:
    0 16px 42px -18px rgba(0, 0, 0, 0.85),
    0 0 50px -28px rgba(120, 148, 82, 0.22),
    inset 0 1px 0 rgba(168, 188, 120, 0.08) !important;
}
.pairings-sub[data-kind="snacks"]::before {
  background: linear-gradient(to right, transparent, rgba(168, 188, 120, 0.5), transparent) !important;
}
.pairings-sub[data-kind="snacks"] .pairings-sub-label {
  color: #b0c878 !important;
}

/* ─── CATALOG GRID — elevate to editorial-grade ─── */

/* Card wrapper — raised, with subtle inner-light feel */
.cigar-card, .bar-card {
  background:
    linear-gradient(175deg, rgba(35, 24, 16, 0.85), rgba(14, 9, 6, 0.96)) !important;
  border: 1px solid var(--walnut) !important;
  border-radius: 14px !important;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s,
              box-shadow 0.35s;
  box-shadow:
    0 14px 36px -18px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(212, 168, 74, 0.06);
  position: relative;
}

/* Hairline top highlight — the "liquid" edge */
.cigar-card::before, .bar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.4), transparent);
  z-index: 3;
  pointer-events: none;
}

/* Hover: ONLY exterior glow + border-color shift. No interior tint, no
   inner highlight, no card surface change — the card content (image,
   chips, text) stays visually identical when the cursor enters. */
.cigar-card:hover, .bar-card:hover {
  border-color: var(--gold-deep) !important;
  box-shadow:
    0 0 0 1px rgba(212, 168, 74, 0.35),
    0 0 50px -10px rgba(212, 168, 74, 0.55),
    0 8px 32px -8px rgba(0, 0, 0, 0.55) !important;
}
/* Suppress the inner gold-gradient overlay (::before) on hover — it was
   tinting the card surface. Card stays exactly the same on the inside. */
.cigar-card:hover::before, .bar-card:hover::before {
  opacity: 0 !important;
}
.cigar-card:hover .card-img img,
.bar-card:hover .card-img img {
  transform: scale(1.04);
}

/* Card image area — add vignette + cleaner overlay */
.cigar-card .card-img, .bar-card .card-img {
  position: relative;
  overflow: hidden;
  background: var(--shadow);
}
.cigar-card .card-img::after, .bar-card .card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, transparent 55%, rgba(14, 9, 6, 0.75));
  pointer-events: none;
  z-index: 1;
}
.cigar-card .card-img img, .bar-card .card-img img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rating badge — refined medallion */
.card-rating {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--gold-bright) !important;
  background: linear-gradient(180deg, rgba(20, 12, 6, 0.92), rgba(8, 5, 3, 0.98)) !important;
  border: 1px solid rgba(212, 168, 74, 0.55) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(232, 193, 112, 0.25) !important;
  letter-spacing: -0.02em;
}

/* Vintage badge — elegant stamp */
.card-vintage {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  background: rgba(8, 5, 3, 0.82);
  border: 1px solid rgba(212, 168, 74, 0.35);
  padding: 4px 10px;
  border-radius: 100px;
}

/* Bottom image bar — country + time */
.card-img-bar {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 500;
}
.card-img-time {
  background: rgba(8, 5, 3, 0.7);
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid rgba(212, 168, 74, 0.25);
  letter-spacing: 0.15em;
}

/* Card body — tighter editorial rhythm */
.cigar-card .card-body, .bar-card .card-body {
  padding: 18px 20px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.card-brand {
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2px;
}
.card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.card-tagline {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--gold-bright);
  line-height: 1.45;
  margin-bottom: 10px;
  opacity: 0.9;
  /* Clamp to 2 lines so cards stay uniform */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Specs row — refined chips */
.card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.spec-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(90, 78, 62, 0.5);
  border-radius: 100px;
  color: var(--parchment);
  font-weight: 500;
}

.card-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(160, 120, 40, 0.25), transparent);
  margin: 6px -4px 10px;
}

.card-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.note-tag {
  font-family: var(--font-serif);
  font-size: 11.5px;
  font-style: italic;
  color: var(--cream-dim);
  padding: 2px 8px;
  background: rgba(58, 38, 28, 0.5);
  border: 1px solid rgba(122, 90, 42, 0.28);
  border-radius: 100px;
  letter-spacing: 0.005em;
}

/* Delete button — tucked elegant */
.card-delete-btn {
  background: transparent;
  border: 1px solid rgba(90, 78, 62, 0.3);
  color: var(--faint);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.cigar-card:hover .card-delete-btn,
.bar-card:hover .card-delete-btn {
  opacity: 1;
}
.card-delete-btn:hover {
  background: rgba(168, 60, 42, 0.3);
  border-color: rgba(210, 80, 60, 0.6);
  color: #f0a898;
}

/* Staggered entrance animation for catalog cards */
@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cigar-card, .bar-card {
  animation: cardRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cigar-card:nth-child(1),  .bar-card:nth-child(1)  { animation-delay: 0.00s; }
.cigar-card:nth-child(2),  .bar-card:nth-child(2)  { animation-delay: 0.04s; }
.cigar-card:nth-child(3),  .bar-card:nth-child(3)  { animation-delay: 0.08s; }
.cigar-card:nth-child(4),  .bar-card:nth-child(4)  { animation-delay: 0.12s; }
.cigar-card:nth-child(5),  .bar-card:nth-child(5)  { animation-delay: 0.16s; }
.cigar-card:nth-child(6),  .bar-card:nth-child(6)  { animation-delay: 0.20s; }
.cigar-card:nth-child(n+7),
.bar-card:nth-child(n+7) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .cigar-card, .bar-card {
    animation: none;
  }
}

/* ─── REFINED FILTER BAR — catalog page ─── */
.filter-bar {
  position: relative;
}
.filter-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.15), transparent);
}
.filter-chip {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.filter-chip.active {
  box-shadow:
    0 4px 12px rgba(212, 168, 74, 0.2),
    inset 0 1px 0 rgba(232, 193, 112, 0.25);
}
.filter-chip:hover:not(.active) {
  border-color: rgba(212, 168, 74, 0.5) !important;
  color: var(--gold) !important;
}

/* ─── OVERLAY REFINEMENTS ─── */

/* Close button treatment */
.overlay-close {
  transition: all 0.25s ease;
}
.overlay-close:hover {
  transform: rotate(90deg);
  background: rgba(212, 168, 74, 0.15) !important;
  border-color: var(--gold) !important;
  color: var(--gold-bright) !important;
}

/* Gentle parallax-style image treatment on overlay hero */
.overlay-hero img {
  transition: transform 0.8s ease-out;
}
.overlay.open .overlay-hero img {
  animation: heroSettle 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroSettle {
  from {
    transform: scale(1.08);
    filter: brightness(0.9);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* ─── TASTING CHAPTER — more distinct phases ─── */
.tasting-chapter {
  position: relative;
}
.tasting-chapter-label {
  font-family: var(--font-display) !important;
  font-size: 23px !important;
  color: var(--gold-bright) !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}
/* Enhance the marker dots with a timeline connector */
.tasting-journey {
  position: relative;
}
.tasting-journey::after {
  content: '';
  position: absolute;
  left: calc(34px + 4px);
  top: 90px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(212, 168, 74, 0.25) 10%,
    rgba(212, 168, 74, 0.25) 90%,
    transparent);
  pointer-events: none;
}

/* ─── CLOSING CARDS — icon-style ornaments ─── */
.closing-card {
  position: relative;
}
.closing-card::after {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 20px;
  opacity: 0.35;
  pointer-events: none;
  line-height: 1;
}
.closing-card[data-kind="setting"]::after { content: '✧'; color: #b8a8d4; }
.closing-card[data-kind="glass"]::after { content: '◇'; color: #a8bcc8; }
.closing-card[data-kind="tip"]::after { content: '✦'; color: var(--gold-bright); opacity: 0.5; }

.closing-card:hover {
  transform: translateY(-2px);
  transition: transform 0.25s ease;
}
.closing-card:hover::after {
  opacity: 0.7;
  transition: opacity 0.3s;
}

/* ─── META LINE ENHANCEMENT — refined dividers ─── */
.detail-meta-line .detail-meta-item:not(:last-child) {
  position: relative;
}
.detail-meta-line .detail-meta-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(212, 168, 74, 0.2), transparent);
}

/* ─── PROVENANCE — enhance with watermark text ─── */
.overlay-body > .review-section.provenance-block {
  position: relative;
}
.overlay-body > .review-section.provenance-block::after {
  content: 'Archivum';
  position: absolute;
  top: 30px;
  right: 40px;
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.4em;
  color: rgba(168, 184, 204, 0.25);
  pointer-events: none;
}

/* ─── STORY — signature mark ─── */
.overlay-body > .review-section.narrative {
  position: relative;
}
.overlay-body > .review-section.narrative::after {
  content: 'The Story';
  position: absolute;
  bottom: 26px;
  right: 44px;
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.4em;
  color: rgba(232, 193, 112, 0.25);
  pointer-events: none;
  text-transform: uppercase;
}

/* ─── KEYBOARD HINT ─── */
.kb-hint .kbd {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(212, 168, 74, 0.12);
  border: 1px solid rgba(212, 168, 74, 0.35);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--gold-bright);
  min-width: 14px;
  text-align: center;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
@keyframes kbHintFadeOut {
  0%, 70% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════════
   V5 — CATALOG GRID OVERHAUL + FIXES + NEW IDEAS
   ═══════════════════════════════════════════════════ */

/* ─── Fix: Coffee gets its own color (copper/caramel brown), separate from snacks (moss) ─── */
.pairings-sub[data-kind="coffee"] {
  background: linear-gradient(155deg, rgba(92, 54, 28, 0.35), rgba(18, 10, 6, 0.92)) !important;
  border-color: rgba(184, 120, 68, 0.38) !important;
  box-shadow:
    0 16px 42px -18px rgba(0, 0, 0, 0.85),
    0 0 60px -24px rgba(184, 120, 68, 0.22),
    inset 0 1px 0 rgba(220, 160, 108, 0.1) !important;
}
.pairings-sub[data-kind="coffee"]::before {
  background: linear-gradient(to right, transparent, rgba(220, 160, 108, 0.48), transparent) !important;
}
.pairings-sub[data-kind="coffee"] .pairings-sub-label {
  color: #dca074 !important;
  border-bottom-color: rgba(220, 160, 108, 0.25) !important;
}
.pairings-sub[data-kind="coffee"] .pairings-sub-label::after {
  content: '☕' !important;
  color: rgba(220, 160, 108, 0.55) !important;
  font-size: 14px !important;
}
.pairings-sub[data-kind="coffee"] .pairing-item {
  border-bottom-color: rgba(184, 120, 68, 0.15) !important;
}
.pairings-sub[data-kind="coffee"] .pairing-title {
  color: #e8c09a !important;
}
.pairings-sub[data-kind="coffee"] .pairing-why {
  color: #d8c4a8 !important;
}

/* Snacks keeps its moss ornament but re-emphasize clear distinction */
.pairings-sub[data-kind="snacks"] .pairings-sub-label::after {
  content: '❧' !important;
  color: rgba(168, 184, 120, 0.55) !important;
}

/* ═══════════════════════════════════════════════════
   CATALOG GRID — museum plate display
   ═══════════════════════════════════════════════════ */

/* Cards: taller, more elevated, with gold-leaf edge treatment */
.cigar-grid, .bar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  padding: 0 4px;
}

.cigar-card, .bar-card {
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.72), rgba(10, 6, 4, 0.92));
  border: 1px solid var(--walnut);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease;
  box-shadow:
    0 14px 32px -14px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(212, 168, 74, 0.05);
  will-change: transform;
}
.cigar-card::before, .bar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.25), transparent);
  pointer-events: none;
  z-index: 5;
}
.cigar-card::after, .bar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(232, 193, 112, 0.0) 0%, rgba(232, 193, 112, 0.0) 50%, rgba(232, 193, 112, 0.12) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cigar-card:hover, .bar-card:hover {
  border-color: rgba(212, 168, 74, 0.5);
  box-shadow:
    0 0 60px -20px rgba(212, 168, 74, 0.45),
    inset 0 1px 0 rgba(232, 193, 112, 0.15);
}
.cigar-card:hover::after, .bar-card:hover::after {
  opacity: 1;
}

/* Card image — taller, dramatic */
.card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, var(--leather-2), var(--black));
}
.card-img img, .card-img .svg-wrap {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cigar-specific: landscape images fill a 3:2 container (slight crop top/bottom of photo
   but no gradient bleed, and enough height for the rating/time overlays to breathe). */
.cigar-card .card-img {
  aspect-ratio: 3 / 2;
  background: #000;
  overflow: hidden;
}
/* Legacy baseline crop for AI-generated cigar photos — Gemini bakes wide black
   margins into every render, so we 1.35× zoom into the center. Excluded from
   gallery images (.cigar-card-image), which are real photographs at their
   native resolution and would lose quality if upscaled. */
.cigar-card .card-img img:not(.cigar-card-image) {
  object-fit: cover;
  transform: scale(1.35);
  transform-origin: center center;
}
.cigar-card:hover .card-img img:not(.cigar-card-image) {
  transform: scale(1.42);
}
.bar-card:hover .card-img img:not(.bar-card-image) {
  transform: scale(1.06);
}
/* Rating and overlays at their normal size — 3:2 has enough room */
.cigar-card .card-rating {
  top: 12px; right: 12px;
  width: 42px; height: 42px;
  font-size: 16px;
}
.cigar-card .card-vintage {
  top: 12px; left: 12px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
}
.cigar-card .card-img-bar {
  padding: 8px 14px 10px;
  font-size: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
}
.cigar-card .card-img-country { font-size: 12px; }
.cigar-card .card-img-time { padding: 3px 9px; font-size: 10px; }
.card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%),
    linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 20%);
  pointer-events: none;
}

/* Rating as a MEDALLION — circular, embossed */
.card-rating {
  position: absolute;
  top: 14px; right: 14px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(232, 193, 112, 0.35), transparent 60%),
    linear-gradient(145deg, rgba(74, 49, 37, 0.95), rgba(14, 9, 6, 0.95));
  border: 1px solid rgba(212, 168, 74, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-bright);
  font-weight: 400;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(232, 193, 112, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  z-index: 3;
  letter-spacing: -0.01em;
  transition: transform 0.4s ease;
}
.cigar-card:hover .card-rating,
.bar-card:hover .card-rating {
  transform: scale(1.08) rotate(-4deg);
}

/* Vintage as an ENGRAVED PLATE — rectangular brass badge */
.card-vintage {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 12px;
  background: linear-gradient(180deg, rgba(92, 67, 21, 0.85), rgba(20, 12, 8, 0.9));
  border: 1px solid rgba(212, 168, 74, 0.45);
  border-radius: 3px;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold-bright);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(232, 193, 112, 0.2);
  z-index: 3;
  font-weight: 500;
}

/* Bottom image bar — country/time ribbon */
.card-img-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.card-img-country {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  color: var(--gold-bright);
}
.card-img-time {
  padding: 3px 10px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212, 168, 74, 0.3);
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

/* Card body — generous, flex column so the specs row anchors at a consistent
   vertical position across cards in the same row regardless of tagline length. */
.card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.card-body-top {
  /* The brand/name/tagline group — grows/shrinks freely. */
  flex: 0 0 auto;
}
.card-body .card-specs {
  /* Anchor the specs row by pushing everything above it up. So all cards
     in the same row have specs at the same Y from the top regardless of
     how many lines the tagline took. */
  margin-top: auto;
  padding-top: 14px;
}
/* Pencil/edit note icon — anchored to bottom-right of the entire card */
.cigar-card, .bar-card {
  position: relative;
}
.cigar-card .card-note-btn,
.bar-card .card-note-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(20,12,8,0.85);
  border: 1px solid rgba(212,168,74,0.45);
  color: #c8b878;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px);
  transition: all 0.15s;
  opacity: 0.55;
}
.cigar-card .card-note-btn:hover,
.bar-card .card-note-btn:hover {
  opacity: 1;
  background: rgba(212,168,74,0.22);
  border-color: var(--gold-bright, #e8c170);
  color: var(--gold-bright, #e8c170);
  transform: scale(1.08);
}
/* Pencil button has notes attached → fully visible (not faded), clear pop */
.cigar-card .card-note-btn.has-notes,
.bar-card .card-note-btn.has-notes {
  opacity: 1;
  background: rgba(212,168,74,0.18);
  border-color: rgba(212,168,74,0.7);
  color: var(--gold-bright, #e8c170);
}
/* Count badge — gold pill on the top-right of the pencil button */
.note-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--gold-bright, #e8c170), var(--gold, #d4a84a));
  color: var(--midnight, #0d0806);
  font-size: 10px;
  font-weight: 700;
  font-family: Georgia, serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  border: 1.5px solid rgba(20, 13, 8, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.card-brand {
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.card-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.card-tagline {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-style: italic;
  color: var(--gold-bright);
  line-height: 1.5;
  margin-bottom: 16px;
  opacity: 0.88;
}

/* Delete button — tiny gold corner */
.card-delete-btn {
  background: transparent;
  border: 1px solid var(--walnut);
  border-radius: 50%;
  width: 24px; height: 24px;
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-delete-btn:hover {
  background: rgba(168, 60, 42, 0.2);
  border-color: rgba(168, 60, 42, 0.5);
  color: #e06858;
}

/* Spec badges — high-contrast facts row */
.card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  align-items: center;
}
.spec-badge {
  padding: 5px 11px;
  background: rgba(20, 13, 8, 0.85);
  border: 1px solid rgba(160, 130, 70, 0.55);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cream-dim, #d4c4a0);
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
/* Vitola — the most prominent: gold-edged, slightly brighter text */
.spec-badge.spec-vitola {
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.18), rgba(160, 120, 40, 0.10));
  border-color: rgba(232, 193, 112, 0.7);
  color: var(--gold-bright, #e8c170);
  font-weight: 600;
  letter-spacing: 0.12em;
}
/* Time — subtler accent, icon-led */
.spec-badge.spec-time {
  border-color: rgba(160, 130, 70, 0.45);
  color: var(--cream, #f0e4ce);
}
.spec-badge .spec-icon {
  color: var(--gold, #d4a84a);
  font-size: 11px;
  margin-right: 1px;
}
/* Stat (Str / Body) — k:v with subtle key */
.spec-badge.spec-stat {
  padding-left: 8px;
  padding-right: 11px;
  gap: 6px;
}
.spec-badge.spec-stat .spec-k {
  color: rgba(200, 184, 144, 0.7);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.spec-badge.spec-stat .spec-v {
  color: var(--cream, #f0e4ce);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  font-family: Georgia, serif;
  text-transform: none;
  line-height: 1;
}

/* Card divider — gold hairline */
.card-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(160, 120, 40, 0.35), transparent);
  margin: 14px 0;
}

/* Note tags — italic serif, minimal */
.card-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.note-tag {
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-style: italic;
  color: var(--cream-dim);
  letter-spacing: 0.005em;
  position: relative;
  padding-right: 10px;
}
.note-tag:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: 0;
  color: var(--gold-deep);
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════
   BAR CARD VARIATIONS — different visual weight
   ═══════════════════════════════════════════════════ */

.bar-card .card-img {
  aspect-ratio: 1 / 1.2;
  background: linear-gradient(180deg, rgba(28, 18, 12, 0.4), rgba(10, 6, 4, 0.7));
}
.bar-card .card-img img {
  object-fit: contain;
  padding: 14px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
}
.bar-card .card-name {
  font-size: 20px;
}

/* Category badge instead of brand */
.bar-card .card-category {
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Bar stats (inline numerals) */
.bar-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(90, 78, 62, 0.3);
}
.bar-stat {
  text-align: center;
  padding: 4px 2px;
}
.bar-stat-n {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold-bright);
  line-height: 1;
  margin-bottom: 3px;
}
.bar-stat-l {
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   FILTER BAR — elegant sticky
   ═══════════════════════════════════════════════════ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  padding: 20px 24px;
  margin: 20px 0 32px;
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.65), rgba(14, 9, 6, 0.85));
  border: 1px solid var(--walnut);
  border-radius: 14px;
  box-shadow:
    0 12px 28px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(212, 168, 74, 0.05);
  position: sticky;
  top: 72px;
  z-index: 30;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.filter-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.3), transparent);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.filter-group:not(:last-child):not(.brands-group)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(90, 78, 62, 0.4);
}
.filter-label {
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.chip {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(90, 78, 62, 0.5);
  border-radius: 100px;
  color: var(--cream-dim);
  font-size: 12.5px;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  position: relative;
}
.chip:hover {
  border-color: rgba(212, 168, 74, 0.4);
  color: var(--cream);
  background: rgba(212, 168, 74, 0.05);
}
.chip.active {
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.9), rgba(160, 120, 40, 0.95));
  border-color: var(--gold);
  color: var(--midnight);
  font-weight: 600;
  box-shadow:
    0 4px 14px rgba(212, 168, 74, 0.35),
    inset 0 1px 0 rgba(255, 220, 150, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.chip.active:hover {
  background: linear-gradient(180deg, rgba(232, 193, 112, 0.95), rgba(180, 140, 50, 1));
  transform: translateY(-1px);
}

.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Search input — elegant */
.search-wrap {
  position: relative;
  margin-left: auto;
  min-width: 200px;
}
.search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  font-size: 16px;
  pointer-events: none;
}
.search-wrap input {
  width: 100%;
  padding: 9px 16px 9px 36px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(90, 78, 62, 0.5);
  border-radius: 100px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
}
.search-wrap input:focus {
  outline: none;
  border-color: rgba(212, 168, 74, 0.6);
  background: rgba(20, 11, 7, 0.7);
  box-shadow:
    0 0 0 3px rgba(212, 168, 74, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.search-wrap input::placeholder {
  color: var(--faint);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   SECTION HEADERS — chapter-opening gravitas
   ═══════════════════════════════════════════════════ */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 60px 0 36px;
  border-bottom: none;
  position: relative;
  margin-bottom: 0;
}
.section-head::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep) 20%, var(--gold) 50%, var(--gold-deep) 80%, transparent);
  opacity: 0.6;
}
.head-left {
  position: relative;
}
.head-eyebrow {
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
  padding-left: 34px;
  position: relative;
}
.head-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--gold-deep);
}
.head-title {
  font-family: var(--font-display);
  font-size: 62px;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}
.head-title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-bright);
  font-weight: 400;
}

.head-right .count-display {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--gold-deep);
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.85;
  position: relative;
}
.head-right .count-display::after {
  content: 'items';
  position: absolute;
  right: 0;
  top: -14px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.45em;
  color: var(--faint);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Section divider between cigars/bar */
.section-divider {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 80px 0;
  position: relative;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep) 40%, var(--gold-deep) 60%, transparent);
  opacity: 0.55;
}
.divider-ornament {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1.4em;
  color: var(--gold);
  padding-left: 1.4em;
  text-shadow: 0 0 12px rgba(212, 168, 74, 0.4);
}

/* Section footer — elegant stat */
.section-footer {
  display: flex;
  justify-content: center;
  padding: 48px 0 32px;
  border-top: 1px solid rgba(90, 78, 62, 0.3);
  margin-top: 64px;
}
.footer-stat {
  text-align: center;
}
.footer-stat-n {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--gold-bright);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.footer-stat-l {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   TOP HEADER STRIP — refined brass ribbon
   ═══════════════════════════════════════════════════ */

.top-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.96), rgba(20, 11, 7, 0.92));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(160, 120, 40, 0.35);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(212, 168, 74, 0.08) inset;
}
.top-strip::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 193, 112, 0.35) 50%, transparent);
}
.strip-inner {
  display: flex;
  align-items: center;
  padding: 16px 28px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 28px;
}

/* Brand mark — monogram with glow */
.strip-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-bright);
  text-decoration: none;
  font-family: var(--font-display);
  transition: transform 0.3s ease;
}
.strip-brand:hover {
  transform: translateX(-2px);
}
.strip-brand .brand-mark {
  font-size: 20px;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(212, 168, 74, 0.5);
  transition: transform 0.6s ease;
}
.strip-brand:hover .brand-mark {
  transform: rotate(180deg);
}
.strip-brand .brand-word {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--cream);
  font-weight: 400;
}

/* Strip nav — tabs with animated underline */
.strip-nav {
  display: flex;
  gap: 36px;
  margin-left: 20px;
}
.strip-link {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.strip-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.strip-link:hover {
  color: var(--cream);
}
.strip-link.active {
  color: var(--gold-bright);
}
.strip-link.active::after {
  transform: scaleX(0.7);
}
.strip-link:hover::after {
  transform: scaleX(0.5);
}
.strip-count {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0;
  padding: 1px 8px;
  background: rgba(212, 168, 74, 0.1);
  border: 1px solid rgba(212, 168, 74, 0.25);
  border-radius: 100px;
  font-weight: 400;
}

.strip-meta {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
}
.strip-meta #stat-rating {
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: -0.02em;
}
.strip-meta .meta-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

/* Page needs top padding for fixed header */
body { padding-top: 64px; }
.section { padding: 0 32px; max-width: 1400px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════
   CATEGORY TABS (bar section)
   ═══════════════════════════════════════════════════ */

.cat-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  margin: 20px 0 24px;
  background: linear-gradient(180deg, rgba(20, 11, 7, 0.65), rgba(10, 6, 4, 0.85));
  border: 1px solid var(--walnut);
  border-radius: 100px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow:
    0 8px 20px -8px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(212, 168, 74, 0.06);
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-radius: 100px;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
}
.cat-tab:hover {
  color: var(--cream);
  background: rgba(212, 168, 74, 0.06);
}
.cat-tab.active {
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.9), rgba(160, 120, 40, 0.95));
  color: var(--midnight);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 150, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(212, 168, 74, 0.3);
}

/* ═══════════════════════════════════════════════════
   MICRO-INTERACTIONS — the bells and whistles
   ═══════════════════════════════════════════════════ */

/* Card entrance — grid items fade in on load */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.cigar-card, .bar-card {
  animation: cardEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cigar-card:nth-child(1), .bar-card:nth-child(1) { animation-delay: 0.05s; }
.cigar-card:nth-child(2), .bar-card:nth-child(2) { animation-delay: 0.08s; }
.cigar-card:nth-child(3), .bar-card:nth-child(3) { animation-delay: 0.11s; }
.cigar-card:nth-child(4), .bar-card:nth-child(4) { animation-delay: 0.14s; }
.cigar-card:nth-child(5), .bar-card:nth-child(5) { animation-delay: 0.17s; }
.cigar-card:nth-child(6), .bar-card:nth-child(6) { animation-delay: 0.20s; }
.cigar-card:nth-child(7), .bar-card:nth-child(7) { animation-delay: 0.23s; }
.cigar-card:nth-child(8), .bar-card:nth-child(8) { animation-delay: 0.26s; }
.cigar-card:nth-child(n+9), .bar-card:nth-child(n+9) { animation-delay: 0.29s; }

/* Keyboard focus rings — gold */
.chip:focus-visible,
.cat-tab:focus-visible,
.cigar-card:focus-visible,
.bar-card:focus-visible,
.card-delete-btn:focus-visible,
.strip-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 100px;
}
.cigar-card:focus-visible,
.bar-card:focus-visible {
  border-radius: 14px;
}

/* Smooth scroll across the page */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* ═══════════════════════════════════════════════════
   OVERLAY OPEN CHOREOGRAPHY
   ═══════════════════════════════════════════════════ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 3, 2, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.overlay.open {
  display: block;
  opacity: 1;
}
.overlay-panel {
  max-width: 900px;
  margin: 40px auto;
  height: calc(100vh - 80px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--midnight) 100%);
  border: 1px solid var(--walnut);
  border-radius: 18px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(212, 168, 74, 0.1),
    inset 0 1px 0 rgba(212, 168, 74, 0.08);
  position: relative;
  transform: translateY(30px) scale(0.97);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.overlay.open .overlay-panel {
  transform: translateY(0) scale(1);
}

.overlay-close {
  position: fixed;
  top: 28px; right: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.9), rgba(10, 6, 4, 0.95));
  border: 1px solid rgba(212, 168, 74, 0.35);
  color: var(--gold-bright);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(232, 193, 112, 0.2);
  transition: all 0.3s ease;
}
.overlay-close:hover {
  border-color: var(--gold);
  transform: rotate(90deg);
  background: linear-gradient(180deg, rgba(60, 42, 26, 0.95), rgba(20, 11, 7, 0.98));
}

/* Hide old page footer if present, add new one below cards */
.page-footer {
  padding: 60px 32px;
  text-align: center;
  border-top: 1px solid rgba(90, 78, 62, 0.3);
  margin-top: 60px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.footer-brand {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 20px;
  margin-bottom: 10px;
}
.footer-brand .brand-mark {
  text-shadow: 0 0 16px rgba(212, 168, 74, 0.4);
  margin-right: 8px;
}
.footer-text {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

/* Loading state */
.loading {
  grid-column: 1 / -1;
  padding: 80px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.loading::after {
  content: '…';
  display: inline-block;
  width: 20px;
  text-align: left;
  animation: dots 1.4s infinite;
}
@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '…'; }
}

/* ═══════════════════════════════════════════════════
   MOBILE REFINEMENTS
   ═══════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .strip-nav { gap: 18px; }
  .strip-link { font-size: 10.5px; letter-spacing: 0.22em; }
  .strip-brand .brand-word { display: none; }
  .head-title { font-size: 42px; }
  .head-right .count-display { font-size: 38px; }
  .section-divider { padding: 50px 0; }
  .divider-ornament { font-size: 12px; letter-spacing: 1em; padding-left: 1em; }
  .section { padding: 0 18px; }
  .cigar-grid, .bar-grid { grid-template-columns: 1fr; gap: 20px; }
  .filter-bar { padding: 14px 16px; gap: 10px 14px; position: static; }
  .filter-group:not(:last-child):not(.brands-group)::after { display: none; }
  .search-wrap { width: 100%; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════
   V6 — iPad-FIRST OPTIMIZATIONS & NEW ELEMENTS
   ═══════════════════════════════════════════════════ */

/* ─── KILL hover on touch devices, add tap-press feedback ─── */
@media (hover: none), (pointer: coarse) {
  .cigar-card:hover, .bar-card:hover {
    transform: none;
    box-shadow:
      0 14px 32px -14px rgba(0, 0, 0, 0.75),
      inset 0 1px 0 rgba(212, 168, 74, 0.05);
    border-color: var(--walnut);
  }
  .cigar-card:hover::after, .bar-card:hover::after { opacity: 0; }
  .cigar-card:hover .card-img img,
  .bar-card:hover .card-img img { transform: none; }
  .cigar-card:hover .card-rating,
  .bar-card:hover .card-rating { transform: none; }
  .chip:hover { border-color: rgba(90, 78, 62, 0.5); color: var(--cream-dim); background: transparent; }
  .strip-link:hover { color: var(--dim); }
  .strip-link:hover::after { transform: scaleX(0); }
  .strip-brand:hover { transform: none; }
  .strip-brand:hover .brand-mark { transform: none; }
  .overlay-close:hover { transform: none; border-color: rgba(212, 168, 74, 0.35); }
  
  /* Active/pressed states for touch */
  .cigar-card:active, .bar-card:active {
    transform: scale(0.985);
    transition: transform 0.15s ease;
  }
  .chip:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  .cat-tab:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  .card-delete-btn:active {
    transform: scale(0.9);
  }
  .strip-link:active {
    opacity: 0.6;
  }
}

/* Minimum touch targets per Apple HIG — 44pt */
.chip {
  min-height: 36px;
  padding: 9px 18px;
  font-size: 13.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.cat-tab {
  min-height: 40px;
  padding: 12px 24px;
}
.strip-link {
  min-height: 44px;
  padding: 0 4px;
}
.card-delete-btn {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  font-size: 20px;
}
.search-wrap input {
  min-height: 42px;
  font-size: 14px;
}
.filter-group {
  gap: 8px;
  row-gap: 10px;
}

/* Region group: country labels visually break up the chip clusters */
.region-group {
  flex-wrap: wrap;
  align-items: flex-start;
}
.region-country-label {
  flex-basis: 100%;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 168, 74, 0.55);
  margin: 6px 0 2px;
  font-family: Georgia, serif;
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid rgba(74, 49, 37, 0.25);
}
.region-country-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ═══════════════════════════════════════════════════
   ACTIVE-FILTER TRAIL — shows what's filtered
   ═══════════════════════════════════════════════════ */
.filter-trail {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  margin: -24px 0 28px;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.55), rgba(20, 11, 7, 0.75));
  border: 1px solid rgba(160, 120, 40, 0.25);
  border-radius: 12px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  position: relative;
}
.filter-trail.has-filters {
  display: flex;
}
.filter-trail::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 74, 0.35), transparent);
}
.filter-trail-label {
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-right: 4px;
  padding-left: 2px;
}
.filter-token {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.18), rgba(160, 120, 40, 0.22));
  border: 1px solid rgba(212, 168, 74, 0.4);
  border-radius: 100px;
  color: var(--gold-bright);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 30px;
}
.filter-token:active {
  transform: scale(0.94);
}
.filter-token .token-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: var(--gold);
  transition: all 0.15s ease;
}
.filter-token:active .token-x {
  background: rgba(168, 60, 42, 0.5);
  color: #e06858;
}
.filter-trail-clear {
  margin-left: auto;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid rgba(168, 60, 42, 0.3);
  border-radius: 100px;
  color: #d8887a;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
  transition: all 0.2s ease;
}
.filter-trail-clear:active {
  background: rgba(168, 60, 42, 0.15);
  transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════
   RESULT SUMMARY — animated count of matches
   ═══════════════════════════════════════════════════ */
.result-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.result-count {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--cream-dim);
  font-style: italic;
  letter-spacing: 0.01em;
}
.result-count-n {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-bright);
  font-style: normal;
  letter-spacing: -0.02em;
  margin-right: 6px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-count.updating .result-count-n {
  transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════
   SORT CONTROL — elegant pill dropdown
   ═══════════════════════════════════════════════════ */
.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 18px;
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.65), rgba(10, 6, 4, 0.8));
  border: 1px solid var(--walnut);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 36px;
  position: relative;
}
.sort-control:active {
  transform: scale(0.97);
  border-color: rgba(212, 168, 74, 0.5);
}
.sort-label {
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.sort-value {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}
.sort-caret {
  color: var(--gold-deep);
  font-size: 10px;
  transition: transform 0.25s ease;
}
.sort-control.open .sort-caret {
  transform: rotate(180deg);
}

.sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(30, 20, 14, 0.97), rgba(14, 9, 6, 0.98));
  border: 1px solid rgba(212, 168, 74, 0.3);
  border-radius: 14px;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.85),
    0 0 40px -16px rgba(212, 168, 74, 0.3),
    inset 0 1px 0 rgba(232, 193, 112, 0.08);
  z-index: 9999;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.sort-control.open .sort-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* When the menu has been reparented to <body> (detached), it carries
   .detached-open instead of relying on .sort-control.open .sort-menu */
.sort-menu.detached-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--cream-dim);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
  min-height: 40px;
}
.sort-option:active {
  background: rgba(212, 168, 74, 0.12);
  color: var(--gold-bright);
}
.sort-option.selected {
  color: var(--gold-bright);
  font-weight: 500;
}
.sort-option.selected::after {
  content: '✓';
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════
   DENSITY TOGGLE — grid mode switch (cozy / compact)
   ═══════════════════════════════════════════════════ */
.density-toggle {
  display: inline-flex;
  padding: 3px;
  background: linear-gradient(180deg, rgba(20, 11, 7, 0.6), rgba(10, 6, 4, 0.8));
  border: 1px solid var(--walnut);
  border-radius: 100px;
  gap: 2px;
}
.density-btn {
  width: 38px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  color: var(--faint);
  transition: all 0.2s ease;
}
.density-btn:active {
  transform: scale(0.92);
}
.density-btn.active {
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.9), rgba(160, 120, 40, 0.95));
  color: var(--midnight);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 150, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.density-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
  fill: none;
  stroke: currentColor;
}

/* Compact grid variant */
.cigar-grid.compact, .bar-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.cigar-grid.compact .card-img, .bar-grid.compact .card-img {
  aspect-ratio: 4 / 3;
}
.cigar-grid.compact .card-body, .bar-grid.compact .card-body {
  padding: 14px 16px 16px;
}
.cigar-grid.compact .card-name, .bar-grid.compact .card-name {
  font-size: 17px;
  margin-bottom: 6px;
}
.cigar-grid.compact .card-tagline, .bar-grid.compact .card-tagline {
  font-size: 12.5px;
  margin-bottom: 10px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cigar-grid.compact .card-specs, .bar-grid.compact .card-specs {
  margin-bottom: 10px;
}
.cigar-grid.compact .card-divider, .bar-grid.compact .card-divider {
  margin: 10px 0;
}
.cigar-grid.compact .card-rating, .bar-grid.compact .card-rating {
  width: 38px; height: 38px;
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════
   CONTROL ROW — wraps result count + sort + density
   ═══════════════════════════════════════════════════ */
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.control-row-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}
.control-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════
   FEATURED CARD — "curator's pick" at grid top
   ═══════════════════════════════════════════════════ */
.featured-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, 42%) 1fr;
  gap: 0;
  min-height: 320px;
  background: linear-gradient(120deg, rgba(30, 20, 14, 0.85), rgba(14, 9, 6, 0.92));
  border: 1px solid rgba(160, 120, 40, 0.45);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow:
    0 28px 70px -22px rgba(0, 0, 0, 0.9),
    0 0 80px -22px rgba(212, 168, 74, 0.3),
    inset 0 1px 0 rgba(232, 193, 112, 0.12);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.featured-card:active {
  transform: scale(0.995);
}
.featured-card::before {
  content: '';
  position: absolute;
  top: 0; left: 40px; right: 40px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold-bright), transparent);
  z-index: 5;
}
.featured-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 6px 14px 6px 12px;
  background: linear-gradient(180deg, rgba(107, 75, 20, 0.95), rgba(20, 11, 6, 0.98));
  border: 1px solid rgba(232, 193, 112, 0.55);
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
  z-index: 5;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(232, 193, 112, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.featured-badge::before {
  content: '★';
  font-size: 11px;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212, 168, 74, 0.6);
}
.featured-img {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--leather-2), var(--black));
}
.featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.featured-img::after {
  content: '';
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 120px;
  background: linear-gradient(to right, transparent, var(--charcoal));
  pointer-events: none;
}
.featured-body {
  padding: 36px 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.featured-brand {
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}
.featured-name {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.featured-tagline {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--gold-bright);
  line-height: 1.55;
  margin-bottom: 22px;
  opacity: 0.92;
}
.featured-meta {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(90, 78, 62, 0.4);
  flex-wrap: wrap;
}
.featured-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.featured-meta-k {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.featured-meta-v {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--cream);
}

@media (max-width: 700px) {
  .featured-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .featured-img { aspect-ratio: 16 / 10; }
  .featured-img::after { display: none; }
  .featured-body { padding: 24px 22px; }
  .featured-name { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════
   EMPTY STATE — elegant "no matches"
   ═══════════════════════════════════════════════════ */
.empty-state {
  grid-column: 1 / -1;
  padding: 80px 40px;
  text-align: center;
  border: 1px dashed rgba(90, 78, 62, 0.4);
  border-radius: 16px;
  background: rgba(14, 9, 6, 0.3);
}
.empty-ornament {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold-deep);
  letter-spacing: 1.2em;
  padding-left: 1.2em;
  opacity: 0.6;
  margin-bottom: 18px;
}
.empty-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--cream);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.empty-message {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-style: italic;
  color: var(--dim);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 22px;
}
.empty-reset {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(212, 168, 74, 0.4);
  border-radius: 100px;
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: all 0.25s ease;
}
.empty-reset:active {
  transform: scale(0.96);
  background: rgba(212, 168, 74, 0.1);
}

/* ═══════════════════════════════════════════════════
   SCROLL-TO-TOP — floating elegance
   ═══════════════════════════════════════════════════ */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(232, 193, 112, 0.35), transparent 60%),
    linear-gradient(145deg, rgba(74, 49, 37, 0.95), rgba(14, 9, 6, 0.98));
  border: 1px solid rgba(212, 168, 74, 0.45);
  color: var(--gold-bright);
  font-size: 18px;
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.7),
    0 0 24px -8px rgba(212, 168, 74, 0.4),
    inset 0 1px 0 rgba(232, 193, 112, 0.3);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(10px);
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:active {
  transform: translateY(0) scale(0.92);
}
.scroll-top::before {
  content: '';
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, 2px);
}

/* ═══════════════════════════════════════════════════
   SEARCH WITH CLEAR X
   ═══════════════════════════════════════════════════ */
.search-wrap {
  min-width: 240px;
}
.search-clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(160, 120, 40, 0.3);
  border: none;
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.search-wrap.has-value .search-clear {
  display: flex;
}
.search-clear:active {
  transform: translateY(-50%) scale(0.85);
  background: rgba(168, 60, 42, 0.4);
}

/* ═══════════════════════════════════════════════════
   SHIMMER ACCENT on active chips — subtle gold sparkle
   ═══════════════════════════════════════════════════ */
.chip.active::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 100px;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  animation: chipShimmer 2.5s ease-in-out infinite;
}
@keyframes chipShimmer {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(100%); }
}
.chip {
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .chip.active::after { animation: none; }
}

/* ═══════════════════════════════════════════════════
   HEADER "AVG RATING" dial refresh
   ═══════════════════════════════════════════════════ */
.strip-meta {
  position: relative;
  padding-left: 16px;
}
.strip-meta::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: rgba(90, 78, 62, 0.5);
}

/* iPad landscape optimization */
@media (min-width: 1024px) and (max-width: 1366px) {
  .cigar-grid, .bar-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
  }
}

/* iPad portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  .cigar-grid, .bar-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
  .filter-bar { padding: 16px 20px; gap: 12px 20px; }
  .head-title { font-size: 52px; }
  .featured-card { grid-template-columns: minmax(240px, 40%) 1fr; }
  .featured-name { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════
   TOUCH FEEDBACK — subtle ripple on card tap
   ═══════════════════════════════════════════════════ */
.cigar-card, .bar-card, .featured-card {
  position: relative;
}
.cigar-card::after {
  /* already exists, keeping */
}
@keyframes tapGlow {
  0% { opacity: 0; }
  30% { opacity: 0.6; }
  100% { opacity: 0; }
}
.tap-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--tap-x, 50%) var(--tap-y, 50%), rgba(232, 193, 112, 0.3), transparent 60%);
  animation: tapGlow 0.6s ease-out forwards;
}

/* ═══════════════════════════════════════════════════
   V7 — Flavor Profile vs Evolution CONTRAST
   ═══════════════════════════════════════════════════ */

/* ─── FLAVOR PROFILE — botanical / apothecary aesthetic ─── */
/* Move from warm parchment to a cooler greenish-amber pharmacy tone */
.overlay-body > .review-section:has(> .flavor-tags),
.overlay-body > .review-section:has(> .flavor-group) {
  background:
    radial-gradient(ellipse at 85% 10%, rgba(138, 154, 90, 0.09), transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(212, 168, 74, 0.06), transparent 50%),
    linear-gradient(155deg, rgba(28, 32, 22, 0.78), rgba(14, 12, 6, 0.95)) !important;
  border: 1px solid rgba(138, 154, 90, 0.3) !important;
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(180, 200, 130, 0.08),
    inset 0 0 0 1px rgba(138, 154, 90, 0.05) !important;
}
/* Update corner flourishes to sage-gold */
.overlay-body > .review-section:has(> .flavor-tags)::before,
.overlay-body > .review-section:has(> .flavor-group)::before {
  border-top-color: rgba(168, 184, 120, 0.4) !important;
  border-left-color: rgba(168, 184, 120, 0.4) !important;
}
.overlay-body > .review-section:has(> .flavor-tags)::after,
.overlay-body > .review-section:has(> .flavor-group)::after {
  border-bottom-color: rgba(168, 184, 120, 0.4) !important;
  border-right-color: rgba(168, 184, 120, 0.4) !important;
}
.overlay-body > .review-section:has(> .flavor-tags) .review-section-title,
.overlay-body > .review-section:has(> .flavor-group) .review-section-title {
  color: #b8c890 !important;
}
.overlay-body > .review-section:has(> .flavor-tags) .review-section-title::before,
.overlay-body > .review-section:has(> .flavor-group) .review-section-title::before {
  content: '❋' !important;
  color: #8aa858 !important;
}
.flavor-group-label {
  color: #a8c078 !important;
  font-family: var(--font-serif);
  font-style: italic;
}
.flavor-group-label::before {
  background: #8aa858 !important;
}
/* Flavor tags: redesigned as botanical labels */
.flavor-tag {
  background: linear-gradient(180deg, rgba(40, 48, 30, 0.7), rgba(18, 20, 10, 0.85)) !important;
  border-color: rgba(120, 138, 78, 0.35) !important;
  color: #c8d8a8 !important;
}
.flavor-tag.primary {
  background: linear-gradient(180deg, rgba(90, 110, 42, 0.3), rgba(30, 38, 14, 0.88)) !important;
  border-color: rgba(168, 192, 100, 0.45) !important;
  color: #d4e2a8 !important;
  box-shadow:
    inset 0 1px 0 rgba(200, 224, 140, 0.15),
    0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
}
.flavor-tag:hover {
  border-color: rgba(168, 192, 100, 0.6) !important;
  color: #dae8b8 !important;
}

/* Retrohale quote — re-tuned for the botanical chamber */
.retrohale-quote {
  border-top-color: rgba(138, 154, 90, 0.28) !important;
  border-bottom-color: rgba(138, 154, 90, 0.28) !important;
}
.retrohale-quote::before {
  color: #a8c078 !important;
}

/* ─── EVOLUTION — stays instrument/chronometer but deeper ─── */
/* Push further into the mechanical direction — dark with copper accents */
.overlay-body > .review-section:has(> .evolution-grid),
.overlay-body > .review-section:has(> .thirds-grid) {
  background:
    linear-gradient(180deg, rgba(16, 14, 11, 0.92), rgba(6, 5, 4, 0.98)) !important;
  border: 1px solid rgba(140, 95, 58, 0.32) !important;
  box-shadow:
    0 22px 56px -18px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(200, 140, 90, 0.08) !important;
}
/* Chronometer strip — deepened with copper tone */
.overlay-body > .review-section:has(> .evolution-grid)::before,
.overlay-body > .review-section:has(> .thirds-grid)::before {
  background:
    linear-gradient(to right, transparent, rgba(200, 140, 90, 0.35), transparent),
    repeating-linear-gradient(to right, transparent 0, transparent 38px, rgba(200, 140, 90, 0.5) 38px, rgba(200, 140, 90, 0.5) 39px) !important;
}
.overlay-body > .review-section:has(> .evolution-grid) .review-section-title,
.overlay-body > .review-section:has(> .thirds-grid) .review-section-title {
  color: #d8a578 !important;
  letter-spacing: 0.52em !important;
}
.overlay-body > .review-section:has(> .evolution-grid) .review-section-title::before,
.overlay-body > .review-section:has(> .thirds-grid) .review-section-title::before {
  content: '◐' !important;
  color: #c89058 !important;
}
/* Phase cards — copper accents */
.evolution-grid .evolution-phase,
.thirds-grid .third-card {
  background: linear-gradient(170deg, rgba(30, 22, 16, 0.82), rgba(5, 3, 2, 0.95)) !important;
  border: 1px solid rgba(140, 95, 58, 0.4) !important;
}
.evolution-grid .evolution-phase::before,
.thirds-grid .third-card::before {
  background: linear-gradient(to right, transparent, rgba(200, 140, 90, 0.45), transparent) !important;
}
.evolution-grid .evolution-phase::after,
.thirds-grid .third-card::after {
  color: rgba(140, 95, 58, 0.28) !important;
}
.evolution-grid .evolution-phase:hover,
.thirds-grid .third-card:hover {
  border-color: rgba(200, 140, 90, 0.55) !important;
  box-shadow:
    0 16px 36px -14px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(220, 160, 108, 0.12) !important;
}
.evolution-label,
.thirds-grid .third-label {
  color: #e0a878 !important;
}

/* Construction note in copper tone */
.construction-note {
  border-left-color: rgba(200, 140, 90, 0.45) !important;
  color: #c89a78 !important;
}

/* ═══════════════════════════════════════════════════
   V7 — Other refinements
   ═══════════════════════════════════════════════════ */

/* Kill the animated dots on loading (was janky in some browsers) */
.loading::after {
  content: '…';
  animation: none;
}

/* Featured card CSS still lives in v5 but won't be rendered now — leave the CSS since removing it doesn't help anything */

/* ═══════════════════════════════════════════════════
   V7 — Filter chip counts (small number inside each chip)
   ═══════════════════════════════════════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--gold);
  background: rgba(212, 168, 74, 0.12);
  border-radius: 100px;
  letter-spacing: 0;
  font-weight: 400;
  transition: all 0.25s ease;
}
.chip.active .chip-count {
  background: rgba(20, 11, 7, 0.35);
  color: var(--midnight);
  font-weight: 600;
}
.chip-count.zero {
  opacity: 0.3;
}
.chip.disabled {
  opacity: 0.4;
  /* still tappable — pointer-events:none was making rating chips unreachable on mobile */
}

/* ═══════════════════════════════════════════════════
   V8 — ALBUM OVERLAY
   Clickable jazz pairings → album detail layer
   ═══════════════════════════════════════════════════ */

/* Tap hint on jazz items */
.jazz-tap-hint {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(154, 178, 220, 0.55);
  font-weight: 600;
  transition: color 0.2s ease;
}
.jazz-item.clickable:active .jazz-tap-hint {
  color: #9ab2dc;
}
.jazz-item.clickable {
  position: relative;
}

/* ─── Album overlay container ─── */
.album-overlay {
  z-index: 300;
  background: rgba(3, 2, 2, 0.92);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.album-panel {
  max-width: 840px;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(94, 130, 180, 0.08), transparent 55%),
    linear-gradient(180deg, #0c0a10 0%, #060508 100%);
  border: 1px solid rgba(94, 130, 180, 0.18);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(94, 130, 180, 0.08),
    inset 0 1px 0 rgba(154, 178, 220, 0.1);
}

/* ─── Hero section ─── */
.album-hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  padding: 48px 48px 40px;
  border-bottom: 1px solid rgba(94, 130, 180, 0.15);
  position: relative;
  align-items: center;
}
.album-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 48px; right: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(154, 178, 220, 0.4), transparent);
}

/* Album cover */
.album-cover {
  width: 260px;
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, #181c28, #070810);
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.9),
    0 0 40px -16px rgba(94, 130, 180, 0.35),
    0 0 0 1px rgba(154, 178, 220, 0.15);
  position: relative;
}
.album-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #15192a, #05060d);
}

/* Vinyl disc placeholder (when no cover art loads) */
.vinyl-disc {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #2a2a3a 0%, #111118 40%, #000000 75%, #0a0a12 100%);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(94, 130, 180, 0.12),
    inset 0 2px 16px rgba(0, 0, 0, 0.7);
}
.vinyl-disc::before,
.vinyl-disc::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(94, 130, 180, 0.08);
}
.vinyl-disc::before {
  inset: 18px;
}
.vinyl-disc::after {
  inset: 32px;
}
.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3d5a85, #1c2d4b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  color: #d4dde8;
  border: 1px solid rgba(154, 178, 220, 0.3);
  box-shadow: 0 0 0 4px #000;
}

/* Hero body */
.album-hero-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.album-eyebrow {
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #9ab2dc;
  font-weight: 600;
}
.album-title {
  font-family: var(--font-display);
  font-size: 38px;
  color: var(--cream);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.album-artist {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  color: #b8c8e4;
  line-height: 1.3;
}
.album-mood {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid rgba(94, 130, 180, 0.15);
}
.mood-label {
  font-size: 9.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #7088b0;
  font-weight: 600;
}
.mood-value {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: #d4e2f4;
}

/* ─── Chapter sections within the album overlay ─── */
.album-chapter {
  padding: 36px 48px;
  border-bottom: 1px solid rgba(94, 130, 180, 0.1);
  position: relative;
}
.album-chapter:last-child {
  border-bottom: none;
}
.album-chapter-label {
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #9ab2dc;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.album-chapter-label::before {
  content: '♬';
  font-size: 12px;
  color: #7088b0;
  opacity: 0.85;
}
.album-chapter-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(94, 130, 180, 0.2), transparent);
}

/* ─── The Album (description) ─── */
.description-chapter .album-description {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.88;
  color: #d8dee8;
}
.description-chapter .album-description p {
  margin: 0 0 1em 0;
}
.description-chapter .album-description p:last-child {
  margin-bottom: 0;
}
.recording-context {
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(14, 16, 24, 0.6);
  border-left: 2px solid rgba(94, 130, 180, 0.4);
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #a8b8d0;
  font-style: italic;
}

/* ─── Tracks list ─── */
.tracks-chapter {
  background: linear-gradient(180deg, rgba(14, 16, 24, 0.4), rgba(6, 8, 14, 0.6));
}
.tracks-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.track-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px dashed rgba(94, 130, 180, 0.12);
  align-items: start;
}
.track-row:last-child {
  border-bottom: none;
}
.track-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: rgba(94, 130, 180, 0.55);
  line-height: 1;
  text-align: right;
  letter-spacing: -0.02em;
}
.track-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 4px;
}
.track-note {
  font-size: 13px;
  line-height: 1.7;
  color: #98a8c0;
  font-style: italic;
}

/* ─── Artist section ─── */
.artist-chapter {
  background: linear-gradient(180deg, rgba(22, 18, 30, 0.55), rgba(8, 6, 12, 0.85));
}
.artist-chapter .album-chapter-label::before {
  content: '♡';
}
.artist-bio {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.85;
  color: #d0d8e4;
  margin-bottom: 28px;
}
.artist-bio p {
  margin: 0 0 1em 0;
}
.artist-bio p:last-child {
  margin-bottom: 0;
}
.artist-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 20px;
  border-top: 1px solid rgba(94, 130, 180, 0.12);
}
.artist-fact {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(94, 130, 180, 0.1);
  align-items: start;
}
.artist-fact:last-child {
  border-bottom: none;
}
.artist-fact-num {
  font-family: var(--font-display);
  font-size: 24px;
  color: rgba(168, 140, 210, 0.5);
  line-height: 1;
  text-align: right;
  letter-spacing: -0.02em;
}
.artist-fact-headline {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  color: var(--cream);
  margin-bottom: 6px;
}
.artist-fact-context {
  font-size: 13px;
  line-height: 1.7;
  color: #a8b0c4;
}

/* ─── Why / source callback ─── */
.why-chapter {
  background: linear-gradient(165deg, rgba(70, 50, 30, 0.3), rgba(10, 8, 12, 0.85));
}
.why-chapter .album-chapter-label::before {
  content: '↻';
  color: var(--gold);
}
.why-source {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(160, 120, 40, 0.2);
  border-radius: 8px;
  margin-bottom: 18px;
}
.why-source-label {
  font-size: 9.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.why-source-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-style: italic;
  color: var(--gold-bright);
}
.why-text {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.85;
  color: #d8d0c4;
  font-style: italic;
}

/* ─── Related ─── */
.related-chapter {
  padding-bottom: 44px;
}
.related-chapter .album-chapter-label::before {
  content: '✧';
  color: #c8a8dc;
}
.related-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-dim);
  margin-bottom: 16px;
  font-style: italic;
}
.related-sub {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7088b0;
  font-weight: 600;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(94, 130, 180, 0.12);
}
.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.related-album {
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(14, 16, 24, 0.8), rgba(6, 8, 14, 0.9));
  border: 1px solid rgba(94, 130, 180, 0.25);
  border-radius: 100px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-style: italic;
  color: #b8c8e4;
  letter-spacing: 0.005em;
}
.related-album-clickable {
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  position: relative;
  padding-right: 30px;
}
.related-album-clickable::after {
  content: '→';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(184, 200, 228, 0.4);
  font-style: normal;
  transition: color 0.2s, transform 0.2s;
  font-family: var(--font-sans);
}
.related-album-clickable:hover {
  background: linear-gradient(180deg, rgba(26, 34, 52, 0.92), rgba(14, 20, 36, 0.95));
  border-color: rgba(140, 180, 220, 0.55);
  color: #e4ecf8;
  transform: translateY(-1px);
}
.related-album-clickable:hover::after {
  color: #e4ecf8;
  transform: translateY(-50%) translateX(3px);
}
.related-album-clickable:active {
  transform: translateY(0);
}
.related-album-clickable:focus-visible {
  outline: 2px solid rgba(140, 180, 220, 0.7);
  outline-offset: 3px;
}

/* ─── Mobile breakpoint ─── */
@media (max-width: 700px) {
  .album-hero {
    grid-template-columns: 1fr;
    padding: 32px 24px 28px;
    gap: 24px;
    text-align: center;
    justify-items: center;
  }
  .album-cover { width: 220px; height: 220px; }
  .album-title { font-size: 30px; }
  .album-artist { font-size: 19px; }
  .album-chapter { padding: 28px 24px; }
  .description-chapter .album-description { font-size: 16px; }
  .album-mood { justify-content: center; }
}

/* Focus rings */
.album-overlay .overlay-close:focus-visible {
  outline: 2px solid #9ab2dc;
  outline-offset: 3px;
}

/* Entrance choreography for album overlay sections */
@keyframes albumRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.album-overlay.open .album-chapter {
  animation: albumRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.album-overlay.open .album-chapter:nth-of-type(1) { animation-delay: 0.08s; }
.album-overlay.open .album-chapter:nth-of-type(2) { animation-delay: 0.14s; }
.album-overlay.open .album-chapter:nth-of-type(3) { animation-delay: 0.20s; }
.album-overlay.open .album-chapter:nth-of-type(4) { animation-delay: 0.26s; }
.album-overlay.open .album-chapter:nth-of-type(5) { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .album-overlay.open .album-chapter { animation: none; }
}

/* ═══════════════════════════════════════════════════
   V9 — COLLAPSIBLE FILTER BAR
   Default: only 2 primary filter groups + search visible.
   "More filters" button reveals the rest.
   ═══════════════════════════════════════════════════ */

/* Compact default: filter bar tighter */
.filter-bar {
  padding: 14px 20px;
  margin: 16px 0 20px;
  gap: 10px 18px;
  row-gap: 10px;
  align-items: center;
}

/* Chips & labels stay same size but less vertical padding overall */
.filter-bar .filter-group {
  row-gap: 6px;
}

/* All filter groups always visible (collapse system removed). */

/* Hide any leftover More filters button if it somehow exists in old cached HTML */
.filter-more-btn { display: none !important; }

/* Standalone search bar — always visible, lives outside .filter-bar */
.search-bar-standalone {
  margin: -16px 0 24px;
  padding: 0;
}
.search-bar-standalone .search-wrap {
  width: 100%;
  margin: 0;
}
.search-bar-standalone .search-wrap input {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Touch device tap targets ─── */
/* On phones/tablets, chips need to be at least ~36px tall to be reliably tappable.
   The default 6px×14px padding makes them too small — fingers slip onto the cigar
   below. Increase padding and add invisible spacing between chips. */
@media (hover: none), (pointer: coarse) {
  .chip {
    padding: 11px 16px !important;
    font-size: 12px !important;
    min-height: 38px !important;
    line-height: 1.1;
  }
  .filter-group {
    gap: 10px !important;
    padding-bottom: 4px;
  }
  /* Space between chip rows so wrapped chips don't crowd */
  .filter-bar {
    gap: 14px 14px !important;
  }
  /* Sort menu must always sit above the cigar grid */
  .control-row {
    position: relative;
    z-index: 50;
  }
  .sort-control.open {
    z-index: 100;
  }
  .sort-menu {
    z-index: 100 !important;
  }
  .sort-option {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}

/* "More filters" toggle button */
.filter-more-btn {
  padding: 8px 16px 8px 14px;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.7), rgba(14, 9, 6, 0.85));
  border: 1px solid rgba(160, 120, 40, 0.35);
  border-radius: 100px;
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  white-space: nowrap;
  transition: all 0.25s ease;
  position: relative;
}
.filter-more-btn:active {
  transform: scale(0.96);
}
.filter-more-btn .caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}
.filter-bar.expanded .filter-more-btn .caret {
  transform: translateY(1px) rotate(-135deg);
}
.filter-more-btn .active-count {
  display: none;
  background: var(--gold);
  color: var(--midnight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 2px 7px;
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
  line-height: 1.3;
}
.filter-more-btn.has-hidden-active .active-count {
  display: inline-block;
}

/* When expanded, shimmer the newly-visible chips in */
@keyframes filterGroupIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.filter-bar.expanded .filter-group:nth-of-type(n+3) {
  animation: filterGroupIn 0.3s ease both;
}
.filter-bar.expanded .filter-group:nth-of-type(3) { animation-delay: 0.02s; }
.filter-bar.expanded .filter-group:nth-of-type(4) { animation-delay: 0.05s; }
.filter-bar.expanded .filter-group:nth-of-type(5) { animation-delay: 0.08s; }
.filter-bar.expanded .filter-group:nth-of-type(6) { animation-delay: 0.11s; }
.filter-bar.expanded .filter-group:nth-of-type(7) { animation-delay: 0.14s; }
.filter-bar.expanded .filter-group:nth-of-type(8) { animation-delay: 0.17s; }
.filter-bar.expanded .filter-group:nth-of-type(9) { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
  .filter-bar.expanded .filter-group:nth-of-type(n+3) { animation: none; }
}

/* Mobile — keep the collapse behavior but tighten spacing more */
@media (max-width: 700px) {
  .filter-bar { padding: 12px 14px; }
  .filter-more-btn { padding: 6px 12px; font-size: 10px; letter-spacing: 0.22em; }
}

/* ═════════════════════════════════════════════════════════════
   FINAL OVERRIDE: card hover — outside glow ONLY, no card tint.
   Placed at end of file so it beats the cascade. The inset shadow
   strip and the ::after gold-gradient overlay used to bleed yellow
   onto the card surface; both are killed here. !important is used
   intentionally because earlier rules in this file (lines 3637+)
   re-introduce them with the same specificity.
   ════════════════════════════════════════════════════════════ */
.cigar-card:hover, .bar-card:hover {
  border-color: var(--gold-deep) !important;
  box-shadow:
    0 0 0 1px rgba(212, 168, 74, 0.4),
    0 0 50px -10px rgba(212, 168, 74, 0.55),
    0 8px 32px -8px rgba(0, 0, 0, 0.55) !important;
}
.cigar-card:hover::before,
.bar-card:hover::before,
.cigar-card:hover::after,
.bar-card:hover::after {
  opacity: 0 !important;
}