/* Consent strip pinned to the bottom of the viewport. While it is visible the page
   gets a bottom inset of --cookie-banner-height (measured by cookie-consent.js:
   strip height plus its offset from the viewport bottom), so it never covers the
   last block, buttons or focused fields. --cookie-banner-fallback is only used
   before the deferred script has measured the strip (or without JS). */
:root { --cookie-banner-fallback: 72px; }
.cookie-consent { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; box-sizing: border-box; width: 100%; margin: 0; padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; border-top: 1px solid var(--sf-border, #d8d8d2); background: var(--sf-surface, #fafaf7); color: var(--sf-ink, #242422); box-shadow: 0 -4px 16px rgba(36, 36, 34, .08); font: 15px/1.4 system-ui, sans-serif; }
.cookie-consent[hidden] { display: none; }
.cookie-consent p { margin: 0; }
.cookie-consent a { color: var(--sf-action, #16638a); text-decoration: underline; }
.cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-consent button { min-width: 44px; min-height: 44px; padding: 8px 20px; border: 1px solid currentColor; border-radius: 2px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cookie-consent button:hover { background: var(--sf-canvas, #efefeb); }
.cookie-consent button:focus-visible, .cookie-consent a:focus-visible, [data-cookie-settings]:focus-visible { outline: 2px solid var(--sf-action, #16638a); outline-offset: 3px; }
[data-cookie-settings] { cursor: pointer; background: transparent; border: 0; color: inherit; font: inherit; text-decoration: underline; min-height: 44px; padding: 8px 0; }

/* Page inset. The JS attribute is the primary switch; :has() covers the first paint
   before the deferred script runs. Kept as separate rules: an unsupported :has()
   must not invalidate the attribute rules. Full-height side rails (cabinet sidebar,
   legacy dashboard rail, auth visual) are shortened so their bottom controls stay
   above the strip. */
html[data-cookie-banner-open] { scroll-padding-bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html[data-cookie-banner-open] body { padding-bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html[data-cookie-banner-open] body[data-cabinet-shell] .cabinet-sidebar { height: calc(100vh - var(--cookie-banner-height, var(--cookie-banner-fallback))); }
html[data-cookie-banner-open] body:is([data-page="dashboard"], [data-page="profile"]) .site-header { bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html[data-cookie-banner-open] body[data-auth-flow] .auth-visual { bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html:has(.cookie-consent:not([hidden])) { scroll-padding-bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html:has(.cookie-consent:not([hidden])) body { padding-bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html:has(.cookie-consent:not([hidden])) body[data-cabinet-shell] .cabinet-sidebar { height: calc(100vh - var(--cookie-banner-height, var(--cookie-banner-fallback))); }
html:has(.cookie-consent:not([hidden])) body:is([data-page="dashboard"], [data-page="profile"]) .site-header { bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
html:has(.cookie-consent:not([hidden])) body[data-auth-flow] .auth-visual { bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }

/* Phone: text on one row, both buttons side by side on the next. */
@media (max-width: 600px) {
  :root { --cookie-banner-fallback: 112px; }
  .cookie-consent { gap: 6px 8px; font-size: 14px; }
  .cookie-consent p { flex: 1 1 100%; text-align: center; }
  .cookie-consent__actions { flex: 1 1 100%; flex-wrap: nowrap; }
  .cookie-consent__actions > button { flex: 1 1 0; padding: 8px 12px; }
}

/* Cabinet on phones pins its own navigation to the bottom (cabinet.css): the strip
   sits right above it; the measured inset (strip + its bottom offset) covers both. */
@media (max-width: 820px) {
  body[data-cabinet-shell] { --cookie-banner-fallback: 136px; }
  body[data-cabinet-shell] .cookie-consent { bottom: calc(var(--cabinet-mobile-nav-height, 64px) + env(safe-area-inset-bottom)); padding-bottom: 8px; }
  html[data-cookie-banner-open] body[data-site="storefront"][data-cabinet-shell] { padding-bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
  html:has(.cookie-consent:not([hidden])) body[data-site="storefront"][data-cabinet-shell] { padding-bottom: var(--cookie-banner-height, var(--cookie-banner-fallback)); }
}
@media (max-width: 600px) {
  body[data-cabinet-shell] { --cookie-banner-fallback: 180px; }
}