html.age-gate-pending,
html.age-gate-pending body {
    overflow: hidden;
}

html.age-gate-pending #site-content {
    filter: blur(12px);
    pointer-events: none;
    user-select: none;
}

.age-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(17, 17, 21, .55);
    overscroll-behavior: contain;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #111115;
}

html:not(.age-gate-pending) .age-gate {
    display: none;
}

.age-gate-card {
    width: 100%;
    max-width: 540px;
    margin: auto;
    padding: 36px;
    border: 1px solid #FFEAD8;
    border-radius: 28px;
    background: #FAFAFA;
    box-shadow: 0 30px 90px rgba(17, 17, 21, .25);
    text-align: center;
}

.age-gate-badge {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #FF5E1A, #FFB800);
    box-shadow: 0 12px 24px -10px rgba(255, 94, 26, .5);
    color: white;
    font: 900 30px 'Outfit', sans-serif;
}

.age-gate-brand {
    margin: 0 0 10px;
    color: #9B360D;
    font: 700 13px 'Outfit', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.age-gate h2 {
    margin: 0 0 16px;
    font: 800 clamp(26px, 5vw, 34px)/1.15 'Outfit', sans-serif;
    letter-spacing: -.025em;
}

.age-gate-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #44444F;
}

.age-gate-actions {
    display: grid;
    gap: 12px;
    margin: 26px 0 18px;
}

.age-gate-yes,
.age-gate-no {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    font: 700 16px/1.5 'Outfit', sans-serif;
    cursor: pointer;
    text-decoration: none;
}

.age-gate-yes {
    border: 0;
    color: white;
    background: linear-gradient(135deg, #FF5E1A, #FF8C00, #FFB800);
    box-shadow: 0 8px 20px -8px rgba(255, 94, 26, .5);
}

.age-gate-yes:hover { background: #E94C10; }
.age-gate-yes:disabled { opacity: .6; cursor: default; }
.age-gate-no { border: 1px solid #E4CBB9; background: white; color: #111115; }
.age-gate-no:hover { background: #FFEAD8; }
.age-gate :is(button, a):focus-visible { outline: 3px solid #111115; outline-offset: 4px; }
.age-gate-remember { margin: 0; font-size: 13px; line-height: 1.6; color: #44444F; }
.age-gate-parents { margin-top: 24px; padding-top: 20px; border-top: 1px solid #E5E5E8; }
.age-gate-parents a { color: #96320B; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 14px; line-height: 1.6; }
.age-gate-storage { margin-top: 12px; color: #44444F; font-size: 13px; line-height: 1.6; }
.age-gate [hidden] { display: none; }

@media (max-width: 480px) {
    .age-gate { padding: 16px; }
    .age-gate-card { padding: 28px 22px; border-radius: 24px; }
}

.age-gate-legal { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.age-gate-legal a { color: #96320B; font-size: 13px; line-height: 1.6; text-underline-offset: 3px; }
