/*! * pf-platform-core — storefront consent banner (PDPL, 2026-09-23). RTL-first (logical properties only), * theme-token-driven with neutral fallbacks, no web fonts. Bottom-fixed at z-index 99996 — the stacking the * pf-fomo bar had, which pf-blocks' header cart drawer is raised above. "Accept all" and "Refuse * non-essential" share ONE rule: same size, same colours, same weight (equal prominence, no nudging). */ .pf-consent { --pf-consent-bg: var( --wp--preset--color--contrast, #11181c ); --pf-consent-fg: var( --wp--preset--color--base, #ffffff ); position: fixed; /* Physical fallback first: a browser without logical insets (Safari < 14.1) would otherwise leave the banner — now FIRST in — sitting over the header instead of at the bottom. */ bottom: 0; left: 0; right: 0; inset-block-end: 0; inset-inline: 0; z-index: 99996; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 14px 16px; background: var( --pf-consent-bg ); color: var( --pf-consent-fg ); font-family: inherit; font-size: 14px; line-height: 1.6; box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.18 ); } .pf-consent *, .pf-consent *::before, .pf-consent *::after { box-sizing: border-box; } .pf-consent__text { flex: 1 1 420px; max-inline-size: 760px; } .pf-consent__title { display: block; font-size: 15px; margin-block-end: 2px; } .pf-consent__policy { color: inherit; text-decoration: underline; white-space: nowrap; } .pf-consent__choices { display: none; flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: 8px 20px; } .pf-consent.is-custom .pf-consent__choices { display: flex; } .pf-consent__choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .pf-consent__choice input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: currentColor; } .pf-consent__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } /* EQUAL PROMINENCE: accept, refuse and save are the same button. */ .pf-consent__btn { font: inherit; font-weight: 600; min-inline-size: 140px; min-block-size: 44px; padding: 10px 18px; border: 1px solid var( --pf-consent-fg ); border-radius: var( --pf-radius-md, 8px ); background: var( --pf-consent-fg ); color: var( --pf-consent-bg ); cursor: pointer; } .pf-consent__save { display: none; } .pf-consent.is-custom .pf-consent__save { display: inline-block; } .pf-consent__more { font: inherit; min-block-size: 44px; padding: 10px 8px; border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; } .pf-consent.is-custom .pf-consent__more { display: none; } .pf-consent__btn:focus-visible, .pf-consent__more:focus-visible, .pf-consent__choice input:focus-visible, .pf-consent__policy:focus-visible { outline: 3px solid var( --wp--preset--color--primary, #1f6feb ); outline-offset: 2px; } /* Phones: the two answers side by side at full width, still equal. */ @media ( max-width: 520px ) { .pf-consent { padding: 12px; font-size: 13px; } .pf-consent__btns { inline-size: 100%; } .pf-consent__btn { flex: 1 1 0; min-inline-size: 0; } .pf-consent__more { flex: 1 1 100%; } } /* * NOTHING STAYS HIDDEN UNDER THE BANNER (review 2026-09-23: at 375px it covered about a third of the screen, * including the cart's sticky checkout button). While it is on screen the runtime publishes its height as * --pf-consent-h and appends this spacer, so the page can scroll its last content clear of it; WooCommerce * Blocks' mobile sticky checkout bar (fixed to the bottom, below our stacking) is lifted above it. With no * banner the variable is unset and both fall back to 0. */ .pf-consent-spacer { display: block; block-size: var( --pf-consent-h, 0px ); pointer-events: none; } .wc-block-cart .wc-block-cart__submit-container--sticky { bottom: var( --pf-consent-h, 0px ); } .pf-consent:focus { outline: none; } .pf-consent:focus-visible { outline: 3px solid var( --wp--preset--color--primary, #1f6feb ); outline-offset: -3px; } /* The footer's "privacy settings" link: quiet, always there. */ .pf-consent-link-wrap { margin: 8px 0 0; text-align: center; } .pf-consent-link { font: inherit; font-size: 13px; padding: 4px 6px; border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; opacity: 0.85; } .pf-consent-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media ( prefers-reduced-motion: no-preference ) { .pf-consent { animation: pf-consent-in 0.2s ease-out; } @keyframes pf-consent-in { from { transform: translateY( 12px ); opacity: 0; } to { transform: none; opacity: 1; } } }