.consent-banner {
  align-items: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  bottom: 0;
  box-shadow: 0 -18px 46px -34px rgba(56, 38, 52, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  left: 0;
  padding: var(--space-3) max(var(--space-4), calc((100vw - var(--content-max)) / 2));
  position: fixed;
  transform: translateY(calc(100% + 2rem));
  transition: transform 200ms ease, visibility 200ms ease;
  visibility: hidden;
  width: 100%;
  z-index: 50;
}

.consent-banner.is-open {
  transform: translateY(0);
  visibility: visible;
}

.consent-banner p {
  color: var(--color-muted);
  max-width: 620px;
}

.consent-banner strong {
  color: var(--color-primary);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 720px) {
  .consent-banner {
    transform: translateY(calc(100% + 2rem));
  }

  .consent-banner.is-open {
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .consent-banner {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .consent-banner p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .consent-banner strong {
    font-size: 1rem;
  }

  .consent-actions .button {
    min-height: 40px;
    padding: 0.6rem 0.85rem;
  }
}