/* All presentation is scoped; the existing header, cards and checkout are untouched. */
#cm-age-gate {
 background: var(--age-background, #111) var(--age-background-image, none) center / cover no-repeat;
 color: var(--age-text, #fff);
 font-family: var(--age-font, system-ui, sans-serif);
 font-size: min(var(--age-font-size, 18px), 5vw);
 font-weight: var(--age-weight, 600);
 letter-spacing: var(--age-tracking, 0px);
 line-height: 1.6;
 text-align: center;
 overscroll-behavior: contain;
 align-items: safe center;
}
#cm-age-gate::backdrop { background: #111; }
#cm-age-gate .cm-age-panel {
 box-sizing: border-box;
 width: min(var(--age-width, 100%), calc(100% - min(var(--age-margin-left, 24px), 8vw) - min(var(--age-margin-right, 24px), 8vw)));
 max-width: var(--age-max-width, 600px);
 margin: min(var(--age-margin-top, 24px), 10vh) min(var(--age-margin-right, 24px), 8vw) min(var(--age-margin-bottom, 24px), 10vh) min(var(--age-margin-left, 24px), 8vw);
 padding: min(var(--age-padding-top, 36px), 10vh) min(var(--age-padding-right, 36px), 8vw) min(var(--age-padding-bottom, 36px), 10vh) min(var(--age-padding-left, 36px), 8vw);
 background: var(--age-background, #111);
 border: 1px solid currentColor;
 border-radius: var(--age-radius, 24px);
 overflow-wrap: anywhere;
 min-width: 0;
}
#cm-age-gate .cm-age-logo { margin: 0 0 var(--age-logo-gap, 28px); }
#cm-age-gate .cm-age-logo img { display: block; width: var(--age-logo-width, 200px); max-width: 100%; height: auto; margin: auto; object-fit: contain; }
#cm-age-gate h2 { font: inherit; font-size: min(var(--age-title-size, 36px), 9vw); line-height: 1.2; margin: 0 0 20px; color: inherit; }
#cm-age-gate p { margin: 0 0 24px; color: inherit; }
#cm-age-gate .cm-age-actions { display: grid; justify-items: center; gap: 12px; }
#cm-age-gate button {
 box-sizing: border-box;
 width: var(--age-button-width, 100%);
 max-width: 100%;
 min-height: var(--age-button-height, 56px);
 height: auto;
 padding: 12px;
 border: 2px solid transparent;
 border-radius: var(--age-button-radius, 6px);
 font: inherit;
 line-height: 1.4;
 white-space: normal;
 overflow-wrap: anywhere;
 cursor: pointer;
 transition: color .15s, background-color .15s, border-color .15s;
}
#cm-age-gate button:disabled { cursor: default; }
#cm-age-gate .cm-age-yes { background: var(--age-yes-background, #bef600); color: var(--age-yes-text, #111); }
#cm-age-gate .cm-age-no { background: var(--age-no-background, #111); color: var(--age-no-text, #fff); border-color: var(--age-no-border, #fff); }
#cm-age-gate .cm-age-yes:focus-visible { background: var(--age-yes-hover-background, #e50068); color: var(--age-yes-hover-text, #fff); }
#cm-age-gate .cm-age-no:focus-visible { background: var(--age-no-hover-background, #fff); color: var(--age-no-hover-text, #111); border-color: var(--age-no-hover-border, #fff); }
#cm-age-gate a { display: flex; justify-content: center; align-items: center; width: fit-content; max-width: 100%; padding: 8px 0; margin: 16px auto 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; }
#cm-age-gate :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
#cm-age-gate h2:focus, #cm-age-denied:focus { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover:hover) and (pointer:fine) {
 #cm-age-gate .cm-age-yes:hover { background: var(--age-yes-hover-background, #e50068); color: var(--age-yes-hover-text, #fff); }
 #cm-age-gate .cm-age-no:hover { background: var(--age-no-hover-background, #fff); color: var(--age-no-hover-text, #111); border-color: var(--age-no-hover-border, #fff); }
}
@media (prefers-reduced-motion:reduce) { #cm-age-gate button { transition: none; } }