@layer components {
  .c-cookie-notice {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-modal);
    max-block-size: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4);
    background: linear-gradient(transparent, var(--cookie-shade));
    color: var(--cookie-text);
    font-family: var(--cookie-font-family);
    font-size: var(--cookie-font-size);
    line-height: var(--leading-normal);
    letter-spacing: normal;
    text-transform: none;
  }
  .c-cookie-notice__panel {
    --card-bg: var(--cookie-surface);
    --card-border: var(--border-1) solid var(--cookie-border);
    --card-radius: var(--cookie-radius);
    --card-shadow: var(--cookie-shadow);
    --card-container: normal;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    max-inline-size: var(--cookie-panel-width);
    margin-inline: auto;
    padding: var(--space-4);
  }
  .c-cookie-notice__copy { min-inline-size: 0; flex: 1 1 var(--cookie-copy-width); }
  .c-cookie-notice__title {
    margin: 0 0 var(--space-2);
    font-size: var(--cookie-title-size);
    line-height: var(--leading-snug);
    color: var(--cookie-text);
  }
  .c-cookie-notice__text,
  .c-cookie-notice__description { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
  .c-cookie-notice__privacy { color: var(--cookie-accent); font-weight: 600; }
  .c-cookie-notice__settings { display: grid; gap: var(--space-4); margin-block-start: var(--space-4); }
  .c-cookie-notice__group { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .c-cookie-notice__group + .c-cookie-notice__group { border-block-start: var(--border-1) solid var(--cookie-border); padding-block-start: var(--space-4); }
  .c-cookie-notice__label { color: var(--cookie-text); font-size: var(--cookie-font-size); font-weight: 700; margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
  .c-cookie-notice__description { color: var(--cookie-muted); }
  .c-cookie-notice__required { color: var(--cookie-muted); font-weight: 600; }
  .c-cookie-notice__choices { --cluster-gap: var(--space-2); margin-block-start: var(--space-2); }
  .c-cookie-notice__choice {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-1) solid var(--cookie-border); border-radius: var(--cookie-radius); cursor: pointer;
  }
  .c-cookie-notice__choice input { accent-color: var(--cookie-accent); }
  .c-cookie-notice__choice:has(input:checked) { border-color: var(--cookie-accent); background: var(--cookie-soft); }
  .c-cookie-notice__choice:has(input:focus-visible) { outline: var(--border-2) solid var(--cookie-accent); outline-offset: var(--space-1); }
  .c-cookie-notice__actions { --cluster-gap: var(--space-2); flex: 1 1 var(--cookie-actions-width); min-inline-size: 0; justify-content: flex-end; }
  .c-cookie-notice.is-settings .c-cookie-notice__actions { flex-direction: column; align-items: stretch; }
  .c-cookie-notice__button {
    --btn-bg: var(--cookie-surface); --btn-fg: var(--cookie-text); --btn-border: var(--cookie-border);
    --btn-bg-hover: var(--cookie-soft); --btn-radius: var(--cookie-radius); --btn-pad-x: var(--space-3); --btn-pad-y: var(--space-2);
    font-family: var(--cookie-font-family); font-size: var(--cookie-font-size); white-space: normal;
  }
  .c-cookie-notice__button { flex: 1 1 auto; }
  .c-cookie-notice__button--primary {
    --btn-bg: var(--cookie-accent); --btn-fg: var(--cookie-surface); --btn-border: var(--cookie-accent); --btn-bg-hover: var(--cookie-accent-hover);
  }
  .c-cookie-notice__status { margin-block: var(--space-3) 0; padding: var(--space-3); background: var(--cookie-danger-soft); color: var(--cookie-danger); }
  .c-cookie-notice[hidden], .c-cookie-notice [hidden] { display: none; }
}