.hh-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; } .hh-consent .box { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--card, #fff); color: var(--ink, #111); border: 2px solid var(--line, #111); border-radius: var(--radius, 6px); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.25)); padding: 16px 18px; font-family: var(--font, 'Archivo', system-ui, sans-serif); font-size: 15px; line-height: 1.45; } .hh-consent h2 { margin: 0 0 6px; font-family: var(--hfont, 'Archivo Black', 'Archivo', system-ui, sans-serif); font-size: 17px; } .hh-consent p { margin: 0 0 12px; color: var(--ink, #111); } .hh-consent p a { color: inherit; } .hh-consent .btns { display: flex; gap: 10px; flex-wrap: wrap; } .hh-consent .btns button { flex: 1 1 180px; min-height: 44px; padding: 10px 16px; font: inherit; font-weight: 600; font-size: 15px; border-radius: var(--radius, 6px); cursor: pointer; border: 2px solid var(--line, #111); } .hh-consent .btns .yes { background: var(--accent, #f26522); color: var(--on-accent, #111); } .hh-consent .btns .no { background: var(--card, #fff); color: var(--ink, #111); } .hh-consent .btns button:focus-visible { outline: 3px solid var(--pin-hot, #1f5f8b); outline-offset: 2px; } .hh-cookies { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 8999; font: 600 12px/1 var(--font, 'Archivo', system-ui, sans-serif); color: var(--ink, #111); background: var(--card, #fff); border: 1px solid var(--line, #111); border-radius: 999px; padding: 7px 10px; cursor: pointer; opacity: .75; } .hh-cookies:hover, .hh-cookies:focus-visible { opacity: 1; } @media (max-width: 480px) { .hh-consent { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); } .hh-consent .box { padding: 14px; } } @media print { .hh-consent, .hh-cookies { display: none; } }