#age-gate-modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.95);z-index: 10001;display: none;justify-content: center;align-items: center;color: var(--text-main);font-family: 'Open Sans',sans-serif;padding: 1rem} #age-gate-modal.show{display: flex} .age-gate-content{background: var(--bg-light);padding: 1.5rem;border-radius: 8px;border: 1px solid rgba(215,181,109,0.3);width: 100%;max-width: 650px;max-height: 90vh;overflow-y: auto;text-align: center} .age-gate-content h2{font-family: 'Playfair Display',serif;color: var(--accent);font-size: 1.5rem;margin-bottom: 1rem} .age-gate-content p{margin-bottom: 1.5rem;line-height: 1.6;color: var(--text-muted);font-size: 0.9rem} .age-gate-content ul{list-style: none;padding: 0;margin-bottom: 2rem;text-align: left;margin-left: auto;margin-right: auto} .age-gate-content ul li{margin-bottom: 1rem;padding-left: 1.5rem;position: relative;font-size: 0.9rem} .age-gate-content ul li::before{content: '•';color: var(--accent);font-size: 1.5rem;position: absolute;left: 0;top: -0.4rem} .age-gate-buttons{display: flex;flex-direction: column;justify-content: center;gap: 0.75rem} .age-gate-buttons .cta{min-width: 150px} .age-gate-buttons .cta-primary{background-color: var(--accent);color: var(--bg-dark)} .age-gate-buttons .cta-primary:hover{background-color: #fff;border-color: #fff} @media (min-width: 768px){.age-gate-content{padding: 2.5rem 3rem} .age-gate-content h2{font-size: 2rem} .age-gate-content p,.age-gate-content ul li{font-size: 1rem} .age-gate-buttons{flex-direction: row;gap: 1rem} }