.cookie-notice[hidden] { display: none !important; }
.cookie-notice {
  position: fixed;
  z-index: 50;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 42rem;
  margin-left: auto;
  padding: 1.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 1.25rem;
  background: #fff;
  color: #171717;
  box-shadow: 0 4px 12px rgb(0 0 0 / .04), 0 16px 48px rgb(0 0 0 / .08);
}
.cookie-notice__copy { min-width: 0; flex: 1; }
.cookie-notice__title { margin: 0 0 .375rem; font-size: .9375rem; font-weight: 600; }
.cookie-notice__text { margin: 0; font-size: .875rem; line-height: 1.5; color: #525252; text-wrap: pretty; }
.cookie-notice__text a { color: #171717; text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice__button {
  min-height: 44px;
  flex-shrink: 0;
  padding: .625rem 1.25rem;
  border: 0;
  border-radius: .75rem;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms, transform 150ms;
}
.cookie-notice__button:hover { background: #262626; }
.cookie-notice__button:active { transform: scale(.96); }
.cookie-notice :is(a, button):focus-visible { outline: 2px solid #000; outline-offset: 4px; }
body.has-cookie-notice { padding-bottom: var(--cookie-notice-space, 180px); }
@media (max-width: 480px) {
  .cookie-notice { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookie-notice__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-notice__button { transition: none; }
  .cookie-notice__button:active { transform: none; }
}