/* ==========================================================================
   css/chrome.css - shared site chrome, v5 (2026-11-02)

   Loaded by EVERY public page, last. Owns: design tokens (--dx-*), the Geist
   faces, the header + mobile drawer (partials/header.php, .sh*), the footer
   (partials/footer.php, .sf*) and the quick-contact layer
   (partials/wa-cta.php, .qc*) and the cookie consent UI (.notice-*).

   Rules of this file:
   - Self-contained. It must render correctly on top of the legacy stack
     (style.css + design-system.css + site.css) on not-yet-migrated pages AND
     on its own on v5 pages (index). So every selector here uses a namespace
     those files never used, and resets what they might leak into it.
   - No backdrop-filter, no fixed background layers, no infinite animations:
     the site has to stay smooth on old phones (owner brief 2026-11-02) and
     calm (memory/feedback_visual_calm.md).
   - Neutral greys. The light theme previously mixed warm beige (#f1eee8)
     with cool grey and a warm hero scrim, which read brown ("cacaniu").
     Yellow is an action colour only: the one CTA, the active-link tick.
   ========================================================================== */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Geist-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Geist-Bold.woff2') format('woff2'); }

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --dx-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --dx-bg:      #ffffff;
  --dx-bg-2:    #f5f5f6;   /* alternate band */
  --dx-surface: #ffffff;   /* cards */
  --dx-field:   #f5f5f6;   /* inputs */
  --dx-ink:     #0d0d0f;
  --dx-ink-2:   #3a3a40;
  --dx-mute:    #67676f;   /* 5.4:1 on white */
  --dx-line:    #e7e7ea;
  --dx-line-2:  #d6d6db;

  --dx-yellow:  #ffcc00;
  --dx-on-yellow: #0d0d0f;
  --dx-wa:      #128c4a;   /* WhatsApp action green, white text 4.6:1 */
  --dx-wa-hover:#0f7a40;

  --dx-shadow-sm: 0 1px 2px rgba(13,13,15,.05), 0 1px 1px rgba(13,13,15,.03);
  --dx-shadow:    0 1px 2px rgba(13,13,15,.04), 0 8px 24px -8px rgba(13,13,15,.10);
  --dx-shadow-lg: 0 2px 4px rgba(13,13,15,.04), 0 24px 48px -16px rgba(13,13,15,.18);

  --dx-r-sm: 8px;
  --dx-r:    14px;
  --dx-r-lg: 20px;
  --dx-pill: 999px;

  --dx-wrap: 1240px;
  --dx-gutter: clamp(16px, 4vw, 32px);
  --dx-ease: cubic-bezier(.22, 1, .36, 1);

  --sh-h: 72px;
}
[data-theme="dark"] {
  --dx-bg:      #0c0c0e;
  --dx-bg-2:    #121215;
  --dx-surface: #17171b;
  --dx-field:   #1f1f24;
  --dx-ink:     #f4f4f5;
  --dx-ink-2:   #cfcfd5;
  --dx-mute:    #9d9da6;
  --dx-line:    #26262c;
  --dx-line-2:  #36363e;
  --dx-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --dx-shadow:    0 1px 2px rgba(0,0,0,.35), 0 10px 28px -10px rgba(0,0,0,.6);
  --dx-shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 28px 56px -18px rgba(0,0,0,.7);
}
@media (max-width: 1080px) { :root { --sh-h: 64px; } }

/* ---- Shared atoms ---------------------------------------------------------- */
/* No grey/blue tap flash on Android/iOS (owner 2026-11-02, every page).
   Elements that are tapped get their own :active state instead. */
html { -webkit-tap-highlight-color: transparent; }
.sh__link:active, .sh__shop:active, .sh__iconbtn:active { background: var(--dx-bg-2); }
.sh-drawer__link:active { opacity: .6; }
.sh-drawer__btn:active, .qc-bar a:active { transform: scale(.98); }
.sf a:active { opacity: .6; }
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Isolation from the legacy stack (it styles bare a / ul / button / nav). */
.sh, .sh *, .sf, .sf *, .qc-float, .qc-float *, .qc-bar, .qc-bar * { box-sizing: border-box; }
.sh ul, .sf ul { list-style: none; margin: 0; padding: 0; }
.sh li, .sf li { margin: 0; padding: 0; }
.sh li::before, .sf li::before { content: none; }
.sh a, .sf a, .qc-float, .qc-bar a { text-decoration: none; }
.sh button, .sf button { font: inherit; letter-spacing: inherit; text-transform: none; background: none; border: 0; margin: 0; cursor: pointer; }
.sh img, .sf img { max-width: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.sh {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--sh-h);
  font-family: var(--dx-font); font-size: 15px; line-height: 1.2;
  letter-spacing: 0; text-transform: none;
  color: var(--dx-ink);
  background: var(--dx-bg);
  border-bottom: 1px solid var(--dx-line);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  view-transition-name: dbx-header;
}
.sh__in {
  height: 100%;
  max-width: var(--dx-wrap); margin: 0 auto; padding: 0 var(--dx-gutter);
  display: flex; align-items: center; gap: 28px;
}

/* Logo: both variants are in the markup, CSS shows one. */
.sh__logo { display: flex; align-items: center; flex: none; height: 40px; }
.sh__logo-img { height: 38px; width: auto; display: block; }
.sh__logo-img--white { display: none; }
[data-theme="dark"] .sh__logo-img--ink { display: none; }
[data-theme="dark"] .sh__logo-img--white { display: block; }

/* Desktop links */
.sh__nav { margin-left: auto; }
.sh__links { display: flex; align-items: center; gap: 4px; }
.sh__link {
  position: relative; display: block;
  padding: 10px 12px; border-radius: var(--dx-r-sm);
  color: var(--dx-ink-2); font-weight: 500; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.sh__link:hover { color: var(--dx-ink); background: var(--dx-bg-2); }
.sh__link.is-active { color: var(--dx-ink); }
.sh__link.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--dx-yellow);
}

/* Right-hand actions */
.sh__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sh__shop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--dx-r-sm);
  color: var(--dx-ink-2); font-weight: 500; white-space: nowrap;
}
.sh__shop .ic { font-size: 14px; opacity: .8; }
.sh__shop:hover { color: var(--dx-ink); background: var(--dx-bg-2); }
.sh__iconbtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--dx-pill);
  color: var(--dx-ink-2); font-size: 16px;
  transition: color .15s ease, background-color .15s ease;
}
.sh__iconbtn:hover { color: var(--dx-ink); background: var(--dx-bg-2); }

/* Theme toggle: the three glyphs are in the markup, theme.js sets the state. */
.sh__ti { display: none; }
.sh__theme:not([data-theme-state]) .sh__ti--auto,
.sh__theme[data-theme-state="auto"] .sh__ti--auto,
.sh__theme[data-theme-state="light"] .sh__ti--light,
.sh__theme[data-theme-state="dark"] .sh__ti--dark { display: block; }

.sh__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 20px; margin-left: 6px;
  border-radius: var(--dx-pill);
  background: var(--dx-yellow); color: var(--dx-on-yellow) !important;
  font-weight: 600; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.sh__cta:hover { background: #ffd633; }
.sh__cta:active { transform: translateY(1px); }

.sh__call, .sh__burger { display: none; }
.sh__bi--close { display: none; }

/* Over a dark photo hero (body.hx-darkhero) until the page scrolls. */
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) {
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  border-bottom-color: transparent;
  color: #fff;
}
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__logo-img--ink { display: none; }
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__logo-img--white { display: block; }
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__link,
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__shop,
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__iconbtn { color: rgba(255,255,255,.86); }
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__link:hover,
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__link.is-active,
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__shop:hover,
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__iconbtn:hover { color: #fff; background: rgba(255,255,255,.12); }
.hx-darkhero .sh:not(.is-scrolled):not(.is-open) .sh__link.is-active { background: transparent; }

/* Tablet + phone: drawer */
@media (max-width: 1080px) {
  .sh__in { gap: 12px; }
  .sh__nav, .sh__shop, .sh__actions > .sh__theme { display: none; }
  .sh__actions { margin-left: auto; gap: 4px; }
  .sh__call, .sh__burger { display: inline-grid; width: 44px; height: 44px; font-size: 18px; }
  .sh__cta { height: 40px; padding: 0 16px; font-size: 14px; margin-left: 0; }
  .sh.is-open .sh__bi--open { display: none; }
  .sh.is-open .sh__bi--close { display: block; }
}
@media (max-width: 420px) {
  .sh__logo-img { height: 32px; }
  .sh__cta { display: none; } /* phone: the drawer + bottom bar carry the actions */
}

.sh-drawer { display: none; }
@media (max-width: 1080px) {
  .sh-drawer {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; top: var(--sh-h); bottom: 0;
    padding: 4px var(--dx-gutter) calc(14px + env(safe-area-inset-bottom));
    background: var(--dx-bg); color: var(--dx-ink);
    border-top: 1px solid var(--dx-line);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .sh.is-open .sh-drawer {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  /* Must fit WITHOUT scrolling from 360x640 visible (Galaxy S-class phone in
     Brave with URL + tab bars) up: row padding and type scale with the
     viewport height (vh fallback, then svh = the height with the browser
     bars showing). overflow-y stays on only as a last resort (landscape). */
  .sh-drawer__nav li { border-bottom: 1px solid var(--dx-line); }
  .sh-drawer__link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: clamp(6px, 1.5vh, 15px) 2px;
    padding: clamp(6px, 1.5svh, 15px) 2px;
    color: var(--dx-ink);
    font-size: clamp(1.0625rem, 2.7vh, 1.3rem); font-size: clamp(1.0625rem, 2.7svh, 1.3rem);
    font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  }
  .sh-drawer__link.is-active::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dx-yellow);
  }
  .sh-drawer__actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: clamp(14px, 2.6vh, 24px); margin-top: clamp(14px, 2.6svh, 24px);
  }
  .sh-drawer__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; padding: 0 10px; border-radius: var(--dx-pill);
    font-weight: 600; font-size: 1rem; white-space: nowrap;
    color: var(--dx-ink); border: 1px solid var(--dx-line-2);
  }
  .sh-drawer__btn--wa { background: var(--dx-wa); border-color: var(--dx-wa); color: #fff; }
  .sh-drawer__btn .ic { font-size: 1.15em; }
  .sh-drawer__foot {
    margin-top: auto; padding-top: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    color: var(--dx-mute); font-size: .9375rem;
  }
  .sh-drawer__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--dx-ink-2); }
  .sh-drawer__foot .sh__iconbtn { display: inline-grid; border: 1px solid var(--dx-line); }
}
@media (max-width: 359px) {
  .sh-drawer__actions { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 1080px) {
  .sh-drawer__nav, .sh-drawer__actions, .sh-drawer__foot { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
}

html.sh-lock, html.sh-lock body { overflow: hidden; }
/* an open menu sits above the cookie banner (1100) and the offer popup (1150) */
.sh.is-open { z-index: 1300; }
html.vt-closing .sh-drawer { transition: none !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sf {
  font-family: var(--dx-font); font-size: 15px; line-height: 1.55;
  letter-spacing: 0; text-transform: none;
  color: var(--dx-ink-2); background: var(--dx-bg-2);
  border-top: 1px solid var(--dx-line);
}
.sf__in { max-width: var(--dx-wrap); margin: 0 auto; padding: 64px var(--dx-gutter) 28px; }
.sf__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 40px; }
.sf__logo { display: inline-block; }
.sf__logo-img { height: 40px; width: auto; display: block; }
.sf__logo-img--white { display: none; }
[data-theme="dark"] .sf__logo-img--ink { display: none; }
[data-theme="dark"] .sf__logo-img--white { display: block; }
.sf__tagline { margin: 18px 0 6px; color: var(--dx-ink); font-weight: 500; }
.sf__desc { margin: 16px 0 0; max-width: 34ch; color: var(--dx-mute); font-size: 14px; }
.sf__social { display: flex; gap: 8px; margin-top: 20px; }
.sf__social a {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--dx-pill); border: 1px solid var(--dx-line-2);
  color: var(--dx-ink-2); font-size: 16px;
  transition: color .15s ease, border-color .15s ease;
}
.sf__social a:hover { color: var(--dx-ink); border-color: var(--dx-ink-2); }
.sf__h {
  margin: 4px 0 16px; padding: 0;
  font-family: var(--dx-font); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--dx-ink);
}
.sf__h::before, .sf__h::after { content: none; }
.sf__col li + li { margin-top: 10px; }
.sf__col a, .sf .sf__linkbtn { color: var(--dx-ink-2); font-size: 14px; padding: 0; text-align: left; }
.sf__col a:hover, .sf .sf__linkbtn:hover { color: var(--dx-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf__contact li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.sf__contact .ic { margin-top: 3px; color: var(--dx-mute); font-size: 14px; }
.sf__contact span { color: var(--dx-ink-2); }
.sf__contact a { word-break: break-word; }
.sf__bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--dx-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13px; color: var(--dx-mute);
}
.sf__bottom p { margin: 0; }
@media (max-width: 980px) {
  .sf__grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .sf__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sf__in { padding-top: 44px; padding-bottom: 24px; }
  /* Pagini + Legal side by side: the stacked lists made the phone footer 1270px */
  .sf__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .sf__contact { grid-column: 1 / -1; }
  .sf__col li + li { margin-top: 12px; }
  .sf__bottom { margin-top: 32px; }
}

/* ==========================================================================
   QUICK CONTACT (partials/wa-cta.php) - revealed by js/chrome.js
   ========================================================================== */
.qc-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 16px; border-radius: var(--dx-pill);
  background: var(--dx-wa); color: #fff !important;
  font-family: var(--dx-font); font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease;
}
.qc-float .ic { font-size: 22px; }
.qc-float:hover { background: var(--dx-wa-hover); }
.qc-float.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s, background-color .15s ease; }

.qc-bar { display: none; }
@media (max-width: 720px) {
  .qc-float { display: none; }
  .qc-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--dx-bg); border-top: 1px solid var(--dx-line);
    box-shadow: 0 -6px 20px -10px rgba(0,0,0,.25);
    font-family: var(--dx-font);
    transform: translateY(110%); visibility: hidden;
    transition: transform .22s var(--dx-ease), visibility 0s linear .22s;
  }
  .qc-bar.is-visible { transform: none; visibility: visible; transition: transform .22s var(--dx-ease), visibility 0s; }
  .qc-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: var(--dx-pill);
    font-size: 16px; font-weight: 600;
  }
  .qc-bar .ic { font-size: 1.15em; }
  .qc-bar__call { color: var(--dx-ink) !important; border: 1px solid var(--dx-line-2); }
  .qc-bar__wa { color: #fff !important; background: var(--dx-wa); }
  /* No body padding needed: the bar hides itself while the footer is on
     screen (js/chrome.js), so it can never cover the last footer line, and
     toggling padding on scroll would shift the layout. */
  .qc-on .notice-prefs-btn { display: none !important; }
}

/* ==========================================================================
   COOKIE CONSENT - single source for EVERY page (2026-11-02)
   js/site-prefs.js toggles .shown on #siteNotice, #siteNoticeModal and
   #noticePrefsBtn. Was: css/site-prefs.css (dark-only) + 26 light overrides
   in design-system.css + a third copy in core.css. Those are gone; the
   banner markup (partial or the inline copies on legacy pages) is untouched.

   Consent rule: "Refuza" is exactly as prominent as "Accepta tot" (same
   size, same weight) - refusing must be as easy as accepting. Preferences
   are the quieter third action.
   ========================================================================== */
.notice-bar, .notice-bar *, .notice-modal, .notice-modal *, .notice-prefs-btn { box-sizing: border-box; }
.notice-bar, .notice-modal, .notice-prefs-btn { font-family: var(--dx-font); letter-spacing: 0; text-transform: none; }
.notice-bar p, .notice-modal p, .notice-modal h2, .notice-modal h3 { margin: 0; font-family: var(--dx-font); letter-spacing: 0; text-transform: none; }
.notice-bar button, .notice-modal button, .notice-prefs-btn { font-family: var(--dx-font); cursor: pointer; }

.notice-bar {
  position: fixed; left: 20px; bottom: 20px; z-index: 1100;
  width: min(420px, calc(100vw - 40px));
  background: var(--dx-surface); color: var(--dx-ink);
  border: 1px solid var(--dx-line); border-radius: var(--dx-r-lg);
  box-shadow: var(--dx-shadow-lg); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.notice-bar::before { /* the site's tape, as a thin edge */
  content: ""; display: block; height: 4px;
  background: repeating-linear-gradient(-45deg, var(--dx-yellow) 0 7px, #0d0d0f 7px 14px);
}
.notice-bar.shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.notice-bar__inner { display: grid; gap: 16px; padding: 18px 20px 20px; }
.notice-bar__inner::before { content: none !important; }
.notice-bar__text { font-size: .9375rem; line-height: 1.5; }
.notice-bar__text strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 600; color: var(--dx-ink); }
.notice-bar__text p { color: var(--dx-ink-2); font-size: .875rem; line-height: 1.55; }
.notice-bar__text a, .notice-modal__footer a { color: var(--dx-ink); text-decoration: underline; text-underline-offset: 3px; }

.notice-bar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px; border-radius: var(--dx-pill);
  border: 1px solid var(--dx-ink); background: var(--dx-ink); color: var(--dx-bg);
  font-size: .9375rem; font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: none; text-shadow: none; transform: none;
  transition: opacity .15s ease;
}
/* Accept and Decline: identical weight. */
.notice-bar__actions #noticeAcceptAll { order: 2; }
.notice-bar__actions #noticeDecline   { order: 1; }
.notice-bar__actions #noticePrefs {
  order: 3; grid-column: 1 / -1; height: 32px;
  background: transparent; border-color: transparent; color: var(--dx-ink-2);
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.notice-btn--outline { background: transparent; color: var(--dx-ink); border-color: var(--dx-line-2); }
@media (hover: hover) { .notice-btn:hover { opacity: .88; } }
.notice-btn:active { opacity: .8; }

@media (max-width: 560px) {
  .notice-bar { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--dx-r-lg) var(--dx-r-lg) 0 0; border-bottom: 0; }
  .notice-bar__inner { padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
}

/* Preferences modal */
.notice-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
.notice-modal.shown { visibility: visible; opacity: 1; transition: opacity .2s ease, visibility 0s; }
.notice-modal__overlay { position: absolute; inset: 0; background: rgba(8,8,10,.6); }
.notice-modal__box {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 28px; background: var(--dx-surface); color: var(--dx-ink);
  border: 1px solid var(--dx-line); border-radius: var(--dx-r-lg); box-shadow: var(--dx-shadow-lg);
}
.notice-modal__close { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--dx-ink-2); }
@media (hover: hover) { .notice-modal__close:hover { background: var(--dx-bg-2); } }
.notice-modal__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; padding-right: 40px; color: var(--dx-ink); }
.notice-modal__desc { margin-top: 8px !important; color: var(--dx-ink-2); font-size: .9375rem; }
.notice-cat { margin-top: 16px; padding: 16px; border: 1px solid var(--dx-line); border-radius: 12px; background: transparent; }
.notice-cat__hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notice-cat__info h3 { font-size: 1rem; font-weight: 600; color: var(--dx-ink); }
.notice-cat__info p { margin-top: 4px !important; font-size: .875rem; color: var(--dx-ink-2); }
.notice-always-on { flex: none; font-size: .8125rem; font-weight: 600; color: var(--dx-mute); }
.notice-toggle { position: relative; flex: none; width: 46px; height: 26px; }
.notice-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.notice-toggle__slider { position: absolute; inset: 0; border-radius: 999px; background: var(--dx-line-2); transition: background-color .15s ease; }
.notice-toggle__slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease; }
.notice-toggle input:checked + .notice-toggle__slider { background: var(--dx-wa); }
.notice-toggle input:checked + .notice-toggle__slider::before { transform: translateX(20px); }
.notice-toggle input:focus-visible + .notice-toggle__slider { outline: 2px solid var(--dx-yellow); outline-offset: 2px; }
.notice-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.notice-modal__footer { margin-top: 16px !important; font-size: .8125rem; color: var(--dx-mute); }
@media (max-width: 560px) {
  .notice-modal__actions { grid-template-columns: 1fr; }
  .notice-modal__box { padding: 22px 18px; }
}

/* Re-open button (after a choice). Desktop only; phones use the footer link
   "Preferinte cookie" so nothing floats over the content. */
.notice-prefs-btn {
  position: fixed; left: 16px; bottom: 16px; z-index: 800;
  display: none; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--dx-pill);
  border: 1px solid var(--dx-line); background: var(--dx-surface); color: var(--dx-ink-2);
  font-size: .8125rem; font-weight: 500; box-shadow: var(--dx-shadow-sm);
}
.notice-prefs-btn.shown { display: inline-flex; }
.notice-prefs-btn svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .notice-prefs-btn.shown { display: none; } }
@media (prefers-reduced-motion: reduce) { .notice-bar, .notice-modal { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .sh, .sh-drawer, .qc-float, .qc-bar { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sh { view-transition-name: none; }
}