/* ─────────────────────────────────────────────────────────────
   gate.css — the 18+ age gate, and nothing else.

   ⚠ Its own file because js/gate.js runs on EVERY page. These rules
   originally went into legal.css, which only terms/privacy and the
   generated pages load — so on index, shop and product the gate
   rendered completely unstyled: position:fixed never applied and it
   flowed into the end of the document at width 0.

   Load this wherever gate.js is loaded. Always both, never one.
   ───────────────────────────────────────────────────────────── */

/* ── Overlay ────────────────────────────────────────────────────────
   Dead-calm zone: no motion, no transition, no spring. Matches the legal
   pages and the (now removed) checkout per the design system.

   Loaded from legal.css because gate.js is added to every page, and this
   file is already loaded everywhere the gate is. It styles a NEW class that
   nothing else uses, so it cannot affect existing layout. */

.agegate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(44, 10, 18, 0.94);
}

.agegate__panel {
  background: var(--bg, #faf7f2);
  border-radius: 24px;
  padding: 36px 28px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(20, 4, 9, 0.4);
}

.agegate__brand {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine, #5d1a26);
  margin: 0 0 18px;
  font-weight: 600;
}

.agegate__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink, #1f1d1a);
  margin: 0 0 14px;
  font-weight: 600;
}

.agegate__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted, #6f6a62);
  margin: 0 0 26px;
}

.agegate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.agegate__actions .pill {
  width: 100%;
  justify-content: center;
}

.agegate__no {
  background: none;
  border: 0;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--muted, #6f6a62);
  text-decoration: underline;
  cursor: pointer;
}

.agegate__no:hover {
  color: var(--ink, #1f1d1a);
}

/* The health warning is not fine print here — it is the reason for the gate. */
.agegate__warn {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #6f6a62);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(111, 106, 98, 0.18);
}

@media (min-width: 960px) {
  .agegate__panel {
    padding: 44px 40px 32px;
    max-width: 460px;
  }
  .agegate__title {
    font-size: 34px;
  }
}