/* Cookie consent (vanilla-cookieconsent) in the brand look — the library's
   custom properties mapped onto the design tokens, loaded after tokens.css
   (WP) / with the :root token block (shop). Same file on both sides. */
#cc-main {
    --cc-font-family: var(--pp-font-body);
    --cc-modal-border-radius: var(--pp-radius);
    --cc-btn-border-radius: var(--pp-radius);
    --cc-pm-toggle-border-radius: 999px;
    --cc-bg: var(--pp-cream-card);
    --cc-primary-color: var(--pp-ink);
    --cc-secondary-color: var(--pp-muted);
    --cc-link-color: var(--pp-orange);
    --cc-btn-primary-bg: var(--pp-orange);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--pp-orange);
    --cc-btn-primary-hover-bg: var(--pp-orange-dark);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--pp-orange-dark);
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: var(--pp-olive);
    --cc-btn-secondary-border-color: var(--pp-olive);
    --cc-btn-secondary-hover-bg: var(--pp-olive);
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: var(--pp-olive);
    --cc-separator-border-color: var(--pp-border);
    --cc-toggle-on-bg: var(--pp-olive-accent);
    --cc-toggle-off-bg: var(--pp-border);
    --cc-toggle-readonly-bg: var(--pp-muted);
    --cc-cookie-category-block-bg: var(--pp-cream);
    --cc-cookie-category-block-border: var(--pp-border);
    --cc-cookie-category-block-hover-bg: var(--pp-cream);
    --cc-cookie-category-block-hover-border: var(--pp-border);
    --cc-cookie-category-expanded-block-bg: var(--pp-cream);
    --cc-cookie-category-expanded-block-hover-bg: var(--pp-cream);
    --cc-footer-bg: var(--pp-cream);
    --cc-footer-border-color: var(--pp-border);
    --cc-footer-color: var(--pp-muted);
    --cc-overlay-bg: rgba(0, 0, 0, 0.5);
    --cc-z-index: 1100;
}
#cc-main .cm,
#cc-main .pm {
    border: 1px solid var(--pp-border);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
}
#cc-main .cm__title,
#cc-main .pm__title {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
#cc-main .cm__desc,
#cc-main .pm__section-desc {
    line-height: 1.5;
}
/* CI buttons: uppercase, tracked, same padding as .pp-btn */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-size: var(--pp-btn-font-size);
    font-weight: var(--pp-btn-font-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: var(--pp-btn-padding-y) var(--pp-btn-padding-x);
}
#cc-main .cm__footer a,
#cc-main .pm__footer a {
    color: var(--pp-muted);
    text-decoration: none;
}
#cc-main .cm__footer a:hover,
#cc-main .pm__footer a:hover {
    color: var(--pp-ink);
}

/* Never taller than the viewport: on short screens (landscape phones,
   DevTools with a small height) the box would otherwise be cut off at the
   top — it is positioned from the bottom and the library does not scroll
   it. dvh follows the mobile browser chrome; vh is the fallback. */
#cc-main .cm {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}
/* phones: tighter box so it covers less of the page */
@media (max-width: 575.98px) {
    #cc-main .cm__body {
        padding: 1rem 1rem 0.75rem;
    }
    #cc-main .cm__desc {
        font-size: 0.875rem;
    }
    #cc-main .cm__btns {
        padding: 0.75rem 1rem;
    }
    #cc-main .cm__btn {
        padding: 0.75rem 1rem;
    }
    #cc-main .cm__footer {
        padding: 0.5rem 1rem;
    }
}