/* ============================================
   AGE GATE
   ============================================ */

body.age-gate-active {
  overflow: hidden;
}

.age-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background-color: var(--main-bg-color);
}

/* Hidden by default (see the inline script in header.php) — only shown
   once JS confirms, from the visitor's own cookie, that they haven't
   verified their age yet. Never controlled by PHP, so page caching can't
   freeze it in the wrong state for a given visitor. */
body.age-gate-active .age-gate {
  display: flex;
}

.age-gate__logo-bg {
  position: absolute;
  z-index: 0;
  width: 120%;
  opacity: 0.15;
}

.age-gate__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: var(--padding-m) var(--padding-s);
  border-radius: 24px;
}

.age-gate__logo {
  height: 38px;
}

.age-gate__question-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.age-gate__actions {
  display: flex;
  gap: 16px;
}

.age-gate__button {
  min-width: 120px;
  justify-content: center;
}

.age-gate__legal {
  font-size: 16px;
  opacity: 0.6;
}

@media (min-width: 600px) {
  .age-gate__question {
    font-size: 28px;
  }
}