/* =========================================================
   CHOCOLATE TRIPZ™ — Consumer flagship extensions
   Layered on top of shell.css + page.css
   ========================================================= */

/* ───── AGE GATE ───── */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: radial-gradient(ellipse at center, rgba(12, 10, 8, 0.94), rgba(5, 5, 4, 0.985));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.age-gate[hidden] { display: none; }
body.age-locked { overflow: hidden; }

.age-card {
  max-width: 520px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--ct-rule-strong);
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.96), rgba(10, 10, 10, 0.98));
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-deep);
  position: relative;
  overflow: hidden;
}
.age-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ct-gold), transparent);
}
.age-card .emblem {
  width: 84px; height: 84px; margin: 0 auto var(--space-3);
  display: block; object-fit: contain;
}
.age-card h2, .age-card .age-title {
  font-family: 'Cinzel', serif;
  font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ct-cream);
  margin: 0 0 var(--space-1);
}
.age-card .tag {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: var(--ct-gold-warm); font-size: 18px; margin-bottom: var(--space-3);
}
.age-card p { color: var(--ct-cream-dim); font-size: 14px; max-width: 400px; margin: 0 auto var(--space-4); }
.age-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.age-actions .btn { min-width: 150px; }
.age-deny-note { display: none; margin-top: var(--space-3); color: #C79C9C; font-size: 13px; }
.age-gate.denied .age-deny-note { display: block; }
.age-fine { margin-top: var(--space-4); font-size: 12px; color: var(--ct-cream-dim); letter-spacing: 0.04em; }

/* ───── HERO — full-bleed cosmic (home) ───── */
.hero-cosmic {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--ct-rule);
}
.hero-cosmic .hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-cosmic .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.hero-cosmic .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,7,0.92) 0%, rgba(8,8,7,0.55) 55%, rgba(8,8,7,0.35) 100%),
    linear-gradient(0deg, rgba(8,8,7,0.95) 0%, transparent 45%);
}
.hero-cosmic .hero-inner { position: relative; z-index: 2; grid-template-columns: 1fr; }
.hero-cosmic .hero-text { max-width: 720px; }

/* ───── FLAVOR COIN GRID (flavors page + home teaser) ───── */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4) var(--space-3);
}
.coin-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-3) var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  position: relative;
}
.coin-card:hover {
  transform: translateY(-6px);
  border-color: var(--ct-rule);
  background: linear-gradient(180deg, rgba(27,24,20,0.5), rgba(15,13,11,0.2));
}
.coin-card:hover, .coin-card:hover:hover { border-bottom: 1px solid var(--ct-rule); }
.coin-wrap {
  position: relative; width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.coin-wrap::before {
  content: ''; position: absolute; width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle, var(--flavor-accent, var(--ct-gold)) 0%, transparent 68%);
  opacity: 0; transition: opacity 0.4s ease; filter: blur(26px);
}
.coin-card:hover .coin-wrap::before { opacity: 0.5; }
.coin-wrap img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.6)); transition: transform 0.4s ease; }
.coin-card:hover .coin-wrap img { transform: scale(1.05) rotate(-2deg); }
.coin-num {
  font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.14em;
  color: var(--flavor-accent, var(--ct-gold)); line-height: 1;
}
.coin-name {
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ct-cream); margin: 6px 0 4px; line-height: 1.2;
}
.coin-base {
  font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ct-cream-dim);
}
.coin-note {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px;
  color: var(--ct-gold-warm); margin-top: 8px; line-height: 1.4; min-height: 2.6em;
}

/* Base-family band header on flavors page */
.family-head {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--ct-rule);
}
.family-head .fh-num { font-family: 'Anton', sans-serif; font-size: 40px; color: rgba(201,169,110,0.35); line-height: 1; }
.family-head h2 { margin: 0; }
.family-head .fh-sub { color: var(--ct-cream-dim); font-size: 14px; margin-left: auto; }

/* ───── FLAVOR DETAIL PAGE ───── */
.flavor-hero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) 0 var(--space-5);
}
.flavor-hero-coin { position: relative; display: flex; align-items: center; justify-content: center; }
.flavor-hero-coin::before {
  content: ''; position: absolute; width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, var(--flavor-accent, var(--ct-gold)), transparent 70%);
  opacity: 0.32; filter: blur(50px);
}
.flavor-hero-coin img { width: 100%; max-width: 440px; position: relative; z-index: 1;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.7)); }
.flavor-hero-info .flavor-eyebrow {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--flavor-accent, var(--ct-gold)); display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--space-2);
}
.flavor-hero-info h1 {
  font-family: 'Anton', sans-serif; font-size: clamp(44px, 6vw, 78px); line-height: 0.98;
  text-transform: uppercase; margin: 0 0 var(--space-2); letter-spacing: 0.01em;
}
.flavor-hero-info .flavor-base-line {
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ct-cream-dim); margin-bottom: var(--space-3);
}
.tasting-notes { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--space-3) 0; }
.taste-chip {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 15px; border: 1px solid var(--ct-rule-strong); border-radius: 100px;
  color: var(--ct-cream); background: rgba(201,169,110,0.05);
}
.flavor-spec-row {
  display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--ct-rule);
}
.flavor-spec { display: flex; flex-direction: column; gap: 2px; }
.flavor-spec .n { font-family: 'Anton', sans-serif; font-size: 26px; color: var(--ct-gold); line-height: 1; }
.flavor-spec .l { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ct-cream-dim); }

/* Flavor gallery + lightbox thumbnails */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.gallery-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item {
  aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--ct-rule); cursor: zoom-in;
  position: relative; background: var(--ct-base);
  padding: 0; width: 100%; display: block; font: inherit; color: inherit;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* Related flavors strip */
.related-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

/* ───── LIGHTBOX ───── */
.lightbox {
  position: fixed; inset: 0; z-index: 9998; display: none;
  align-items: center; justify-content: center; padding: var(--space-4);
  background: rgba(5, 4, 3, 0.95); backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border: 1px solid var(--ct-rule-strong); box-shadow: var(--shadow-deep); }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ct-rule-strong); background: rgba(10,10,10,0.6); color: var(--ct-cream);
  font-size: 24px; cursor: pointer; line-height: 1;
}
.lightbox-close:hover { border-color: var(--ct-gold); color: var(--ct-gold); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ct-rule-strong);
  background: rgba(10,10,10,0.6); color: var(--ct-cream); font-size: 26px; cursor: pointer;
}
.lightbox-nav:hover { border-color: var(--ct-gold); color: var(--ct-gold); }
.lightbox-nav.prev { left: 22px; } .lightbox-nav.next { right: 22px; }

/* ───── IMAGE MEDIA BLOCKS ───── */
.media-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center;
}
.media-split.reverse .media-split-img { order: 2; }
.media-split-img {
  border: 1px solid var(--ct-rule-strong); overflow: hidden; background: var(--ct-base);
  box-shadow: var(--shadow-card);
}
.media-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.image-band {
  width: 100%; border-top: 1px solid var(--ct-rule); border-bottom: 1px solid var(--ct-rule);
  overflow: hidden; position: relative; background: var(--ct-black);
}
.image-band img { width: 100%; display: block; opacity: 0.92; }

/* ───── "WHAT'S INSIDE" spec strip ───── */
.inside-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.inside-card {
  border: 1px solid var(--ct-rule); background: linear-gradient(180deg, rgba(27,24,20,0.7), rgba(15,13,11,0.9));
  padding: var(--space-4); text-align: center;
}
.inside-card .big { font-family: 'Anton', sans-serif; font-size: 42px; color: var(--ct-gold); line-height: 1; }
.inside-card .lbl { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ct-cream); margin-top: 8px; }
.inside-card p { font-size: 13px; color: var(--ct-cream-dim); margin: 8px 0 0; }

/* Badge row (5 on-box badges) */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.box-badge {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 130px; text-align: center;
}
.box-badge .ring {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--ct-gold);
  display: flex; align-items: center; justify-content: center; background: rgba(201,169,110,0.05);
}
.box-badge .ring img { width: 34px; height: 34px; }
.box-badge .cap { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ct-cream-dim); line-height: 1.4; }

/* ───── NEWSLETTER ───── */
.newsletter {
  border: 1px solid var(--ct-rule-strong);
  background: linear-gradient(135deg, rgba(20,18,16,0.95), rgba(15,13,11,0.95));
  padding: var(--space-6); text-align: center; position: relative; overflow: hidden;
}
.newsletter::before { content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--ct-gold), transparent); }
.newsletter form { display: flex; gap: var(--space-2); max-width: 520px; margin: var(--space-3) auto 0; flex-wrap: wrap; }
.newsletter input[type=email] {
  flex: 1; min-width: 220px; background: rgba(10,10,10,0.6); border: 1px solid var(--ct-rule-strong);
  padding: 16px 18px; color: var(--ct-cream); font-family: 'DM Sans', sans-serif; font-size: 15px; outline: none;
}
.newsletter input[type=email]:focus { border-color: var(--ct-gold); }
.footer-newsletter { margin-top: var(--space-3); }
.footer-newsletter form { display: flex; gap: 8px; margin-top: 10px; }
.footer-newsletter input { flex: 1; background: rgba(10,10,10,0.6); border: 1px solid var(--ct-rule-strong);
  padding: 11px 13px; color: var(--ct-cream); font-size: 13px; outline: none; }
.footer-newsletter input:focus { border-color: var(--ct-gold); }
.footer-newsletter button { border: 1px solid var(--ct-gold); background: transparent; color: var(--ct-gold);
  padding: 0 16px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.footer-newsletter button:hover { background: var(--ct-gold); color: var(--ct-black); }

/* ───── PRESS / MEDIA KIT ───── */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.press-card {
  border: 1px solid var(--ct-rule); background: linear-gradient(180deg, rgba(27,24,20,0.7), rgba(15,13,11,0.9));
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
}
.press-card h3 { font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ct-cream); margin: 0; }
.press-card p { font-size: 14px; color: var(--ct-cream-dim); margin: 0; flex: 1; }
.press-card .btn { align-self: flex-start; margin-top: var(--space-1); }
.fact-list { list-style: none; padding: 0; margin: 0; }
.fact-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--ct-rule); }
.fact-list li:last-child { border-bottom: none; }
.fact-list .k { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ct-gold); }
.fact-list .v { color: var(--ct-cream); text-align: right; }

/* ───── WHERE TO BUY ───── */
.wtb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.wtb-steps { display: flex; flex-direction: column; gap: var(--space-3); }
.wtb-step { display: grid; grid-template-columns: 54px 1fr; gap: var(--space-2); align-items: start; }
.wtb-step .n { font-family: 'Anton', sans-serif; font-size: 34px; color: var(--ct-gold); line-height: 1; }
.wtb-step h3 { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ct-cream); margin: 0 0 4px; }
.wtb-step p { font-size: 14px; color: var(--ct-cream-dim); margin: 0; }

/* ───── PROSE (story / legal) ───── */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 17px; line-height: 1.8; color: var(--ct-cream-dim); }
.prose p.lead-para { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--ct-gold-warm); }

/* ───── ACCESSIBILITY ───── */
:focus-visible {
  outline: 2px solid var(--ct-gold);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ct-gold); color: var(--ct-black);
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 20px; border: none; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Three-blend grid on home — participates in the cascade so media queries win */
.inside-grid.blends-3 { grid-template-columns: repeat(3, 1fr); }

/* ───── RESPONSIVE ───── */
@media (max-width: 960px) {
  .coin-grid { grid-template-columns: repeat(2, 1fr); }
  .inside-grid.blends-3 { grid-template-columns: repeat(2, 1fr); }
  .flavor-hero { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
  .flavor-hero-coin img { max-width: 320px; }
  .flavor-eyebrow, .tasting-notes, .flavor-spec-row { justify-content: center; }
  .media-split { grid-template-columns: 1fr; }
  .media-split.reverse .media-split-img { order: 0; }
  .inside-grid { grid-template-columns: repeat(2, 1fr); }
  .press-grid { grid-template-columns: 1fr 1fr; }
  .related-strip { grid-template-columns: repeat(2, 1fr); }
  .wtb-grid { grid-template-columns: 1fr; }
  .gallery-grid.g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .coin-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-2); }
  .inside-grid { grid-template-columns: 1fr 1fr; }
  .inside-grid.blends-3 { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr; }
  .related-strip { grid-template-columns: 1fr 1fr; }
  .gallery-grid, .gallery-grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .newsletter, .age-card { padding: var(--space-4) var(--space-3); }
  .badge-row { gap: var(--space-2); }
  .box-badge { width: 96px; }
}