/* The head flag is set before the catalogue or account content can paint. */
html[data-luna-age="pending"],
html[data-luna-age="pending"] body { overflow: hidden; }
html[data-luna-age="pending"] body > :not([data-age-gate]):not(script):not(style):not(link):not(noscript) { visibility: hidden; }
html[data-luna-age="pending"] body::before { content: ""; position: fixed; inset: 0; z-index: 999; background: #f0efea; }

.luna-age-gate { display: none; position: fixed; inset: 0; width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 36px 40px 30px; overflow: auto; border: 1px solid var(--line, #dcd9d1); border-radius: 30px; background: var(--perla, #f0efea); color: var(--tinta, #262423); text-align: center; box-shadow: 0 34px 100px -45px rgba(38, 36, 35, .45); }
html[data-luna-age="pending"] .luna-age-gate,
.luna-age-gate[open] { display: block; visibility: visible; }
html[data-luna-age="pending"] .luna-age-gate:not([open]) { z-index: 1000; }
.luna-age-gate::backdrop { background: #f0efea; }
.luna-age-logo { width: auto; height: 104px; margin: 0 auto 22px; }
.luna-age-eyebrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; color: var(--luna-deep, #b52f72); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.luna-age-eyebrow > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 28px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: 0; }
.luna-age-title { margin: 0 0 16px; font-family: var(--font-display, ui-monospace, monospace); font-size: clamp(25px, 3vw, 31px); font-weight: 700; line-height: 1.13; letter-spacing: -.035em; }
.luna-age-gate > p:not(.luna-age-eyebrow) { max-width: 39ch; margin-inline: auto; color: var(--texto-2, #5f5a56); }
.luna-age-actions { display: grid; gap: 14px; margin-top: 26px; }
.luna-age-confirm { width: 100%; min-height: 52px; }
.luna-age-exit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; color: var(--texto-2, #5f5a56); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.luna-age-gate .luna-age-memory { margin-top: 18px; font-size: 12px; line-height: 1.6; }
.luna-age-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 1.6; }
.luna-age-footer > span { display: inline-flex; align-items: center; min-height: 26px; padding-inline: 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; }
.luna-age-noscript { position: relative; z-index: 1; margin: 0; padding: 16px max(20px, calc((100vw - 1000px) / 2)); border-block: 1px solid #dcd9d1; background: #f8f7f3; color: #262423; font: 15px/1.6 var(--font-text, sans-serif); text-align: center; }
.luna-age-noscript strong { display: block; }
.luna-age-noscript a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 540px) {
  .luna-age-gate { padding: 28px 24px 24px; border-radius: 24px; }
  .luna-age-logo { height: 86px; margin-bottom: 18px; }
  .luna-age-eyebrow { margin-bottom: 14px; font-size: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .luna-age-gate[open] { animation: luna-age-in .2s ease-out; }
  @keyframes luna-age-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
