/* ==========================================================================
   Display Minis Hub — Klaro cookie-consent theme
   --------------------------------------------------------------------------
   Restyles Klaro's stock banner + "manage services" modal onto the DMH design
   system (warm cream surfaces, bronze primary, Fraunces + Inter). This file is
   LOADED AFTER the vendored `klaro.css` and never edits it — Klaro is themed
   the supported way: (1) remap Klaro's own CSS variables to DMH tokens, then
   (2) add custom rules on Klaro's markup hooks for the structural redesign.

   Token-only: colors come exclusively from design_tokens.css `var(--…)` tokens
   (plus rgba()/transparent). No hex literals — so it passes bin/check_design_system
   like any first-party stylesheet. Klaro's deep selectors are overridden with
   matching scope + `!important` where needed (standard for theming a third-party
   widget without forking its CSS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Klaro CSS-variable remap — flips the stock dark/green theme to DMH in one
   place. Klaro's own rules read these vars, so most colors update for free.
   -------------------------------------------------------------------------- */
.klaro {
  --font-family: var(--font-sans);
  --title-font-family: var(--font-display);
  --font-size: var(--fs-base);
  --border-radius: var(--radius-md);
  --border-style: solid;
  --border-width: 1px;

  /* Accent — links, slider-on, success buttons, focus ring */
  --green1: var(--accent-bronze);
  --green2: var(--accent-bronze);
  --green3: var(--accent-bronze-ring);

  /* Surfaces + borders (stock theme used these as dark fills) */
  --dark1: var(--paper);
  --dark2: var(--border-soft);
  --dark3: var(--fg-muted);

  /* Text + secondary borders (stock theme used these as light-on-dark) */
  --light1: var(--fg-1);
  --light2: var(--border-strong);
  --light3: var(--fg-subtle);

  /* Toggle track (off) + knob */
  --white2: var(--border-strong);
  --white3: var(--surface);

  --button-text-color: var(--fg-on-accent);

  /* Info buttons unused here; map defensively to ink */
  --blue1: var(--accent-ink);
  --blue2: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   2. Shared button spec — DMH `.btn` look. Default = secondary; only the
   "Accept all" buttons become bronze primary (change #1: balanced decline).
   -------------------------------------------------------------------------- */
/* Scoped under .cookie-notice/.cookie-modal to match Klaro's own (0,3,0)
   `.cm-btn { padding: 0.4em; font-size: 1em }` and win on source order —
   otherwise the buttons keep Klaro's cramped 0.4em padding and look tiny. */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  background: var(--surface);
  color: var(--fg-1);
  /* !important on the shorthand beats Klaro's `.cm-btn { border-style: none }`
     (otherwise the secondary buttons render borderless / invisible on paper). */
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 13px 22px;
  margin: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-modal .cm-btn:hover {
  background: var(--bg-warm);
  border-color: var(--border-warm) !important;
  color: var(--fg-1);
}

/* Primary — banner "Accept all" (the `ok` button) + modal "Accept all". */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all {
  background: var(--accent-bronze) !important;
  color: var(--fg-on-accent) !important;
  border-color: transparent !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover {
  background: var(--accent-bronze-hover) !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:active,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:active {
  background: var(--accent-bronze-press) !important;
}

/* Secondary — modal "Save my choices" (carries cm-btn-success/-info) + every
   "Decline all". Equal visual weight to the primary, never a faded ghost. */
.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cn-decline {
  background: var(--surface) !important;
  color: var(--fg-1) !important;
  border-color: var(--border-strong) !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-accept:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover {
  background: var(--bg-warm) !important;
  border-color: var(--border-warm) !important;
}

/* --------------------------------------------------------------------------
   3. Consent banner — compact bottom-right corner card.
   -------------------------------------------------------------------------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed;
  right: 20px;
  left: auto;
  bottom: 20px;
  top: auto;
  width: 380px;
  max-width: calc(100% - 32px);
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  z-index: 1000;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 24px;
  padding-top: 24px;
}

/* Title row: Fraunces heading with a leading bronze cookie glyph. */
.klaro .cookie-notice #id-cookie-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-vars);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.klaro .cookie-notice #id-cookie-title::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: var(--accent-bronze-press);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5Z'/%3E%3Cpath d='M8.5 9.5h.01M9.5 14.5h.01M14.5 15.5h.01M15 10h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5Z'/%3E%3Cpath d='M8.5 9.5h.01M9.5 14.5h.01M14.5 15.5h.01M15 10h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p#id-cookie-notice {
  margin: 0 0 20px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.klaro .cookie-notice a {
  color: var(--accent-ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.klaro .cookie-notice a:hover {
  color: var(--accent-ink-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Actions: two equal buttons in a row, "Let me choose" centered below. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  order: 1;
  display: flex;
  gap: 10px;
  margin: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
  flex: 1 1 auto;
  margin: 0;
}
.klaro .cookie-notice .cn-learn-more {
  order: 2;
  display: block;
  margin: 0;
  text-align: center;
  font-weight: var(--fw-semibold);
  color: var(--accent-ink);
}
.klaro .cookie-notice .cn-learn-more:hover {
  color: var(--accent-ink-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Manage-services modal — scrim + paper sheet.
   -------------------------------------------------------------------------- */
.klaro .cookie-modal .cm-bg {
  background: rgba(10, 9, 7, 0.6);
}
.klaro .cookie-modal .cm-modal.cm-klaro {
  background: var(--paper);
  color: var(--fg-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  max-width: 560px;
}

/* Head */
.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: 1px solid var(--border-soft);
  padding: 24px 24px 20px;
}
.klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-vars);
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 8px;
}
.klaro .cookie-modal .cm-modal .cm-header p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0;
  max-width: 52ch;
}
.klaro .cookie-modal a {
  color: var(--accent-ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.klaro .cookie-modal a:hover {
  color: var(--accent-ink-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Close (✕) */
.klaro .cookie-modal .cm-modal .hide {
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease-out);
}
.klaro .cookie-modal .cm-modal .hide:hover {
  background: var(--bg-warm);
}

/* Body + warm scrollbar */
.klaro .cookie-modal .cm-modal .cm-body {
  padding: 12px 24px;
}
.klaro .cookie-modal .cm-modal .cm-body::-webkit-scrollbar {
  width: 10px;
}
.klaro .cookie-modal .cm-modal .cm-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid var(--paper);
}

/* --------------------------------------------------------------------------
   5. Category groups, service rows + the per-category disclosure. Klaro stacks
   the toggle on the LEFT (absolute) with a left-padded row; move it to the right.
   -------------------------------------------------------------------------- */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes > li.cm-purpose {
  padding-left: 0;
  padding-right: 60px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes > li.cm-purpose + li.cm-purpose {
  border-top: 1px solid var(--border-soft);
}
.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service {
  border-bottom: 0;
}

/* Move every toggle (input overlay + switch) to the right edge of its row. */
.klaro .cookie-modal .cm-list-input,
.klaro .cookie-modal .cm-list-label .cm-switch {
  left: auto;
  right: 0;
}
/* …but toggles inside the bordered boxes (service cards + master row) inset
   from the border so they don't touch it — only the unbordered category-header
   toggles sit flush at the content edge. */
.klaro .cookie-modal li.cm-service .cm-list-input,
.klaro .cookie-modal li.cm-service .cm-list-label .cm-switch,
.klaro .cookie-modal li.cm-toggle-all .cm-list-input,
.klaro .cookie-modal li.cm-toggle-all .cm-list-label .cm-switch {
  right: 16px;
}

/* Category header label centres its (tall, icon-bearing) name so the inline
   "Show N service" disclosure aligns with it instead of dropping below centre. */
.klaro .cookie-modal ul.cm-purposes > li.cm-purpose > .cm-list-label {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.klaro .cookie-modal ul.cm-purposes > li.cm-purpose > .cm-services .cm-caret {
  vertical-align: middle;
}

/* Category name */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose > .cm-list-label span.cm-list-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* Category icon — keyed off Klaro's per-purpose title id (the only per-purpose
   hook it exposes): a cream tile with a token-coloured icon (Instagram for
   Social media, bar-chart for Analytics). The icon is a mask so its colour is a
   token; the tile is drawn with ::after so the mask doesn't clip it. The master
   "all services" row (disableAll) intentionally gets none. */
.klaro .cookie-modal #purpose-item-social-media-title,
.klaro .cookie-modal #purpose-item-analytics-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.klaro .cookie-modal #purpose-item-social-media-title::before,
.klaro .cookie-modal #purpose-item-analytics-title::before {
  content: "";
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background-color: var(--bg-cream);
}
/* icon glyph centred inside the tile via ::after (mask = token colour) */
.klaro .cookie-modal #purpose-item-social-media-title::after,
.klaro .cookie-modal #purpose-item-analytics-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: var(--fg-muted);
  -webkit-mask-size: 17px 17px;
  mask-size: 17px 17px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.klaro .cookie-modal #purpose-item-social-media-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.klaro .cookie-modal #purpose-item-analytics-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
}

/* Disclosure "Show/Hide N service" — Klaro renders the caret as a block BELOW
   the category name; pull it up INLINE next to the name. display:contents drops
   the .cm-services wrapper box, the empty purpose-description divs are hidden,
   and .cm-content's stock -40px indent is reset so the expanded list aligns. */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services {
  display: contents;
}
.klaro .cookie-modal #purpose-item-social-media-description,
.klaro .cookie-modal #purpose-item-analytics-description {
  display: none;
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content {
  margin-left: 0;
  /* Counteract li.cm-purpose's 60px right gutter (reserved for the category
     toggle) so the service cards span the full content width — matching the
     master row + dividers, and aligning the service toggles to the right edge. */
  margin-right: -60px;
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-caret {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
}
.klaro .cookie-modal .cm-caret a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--accent-bronze);
  text-decoration: none;
}
/* "Show "/"Hide " prefix; the ↓ glyph is forced first via flex order so the row
   reads "⌄ Show 1 service" → "⌄ Hide 1 service". */
.klaro .cookie-modal .cm-caret a::before {
  content: "Show";
  order: 0;
}
.klaro .cookie-modal .cm-caret a[aria-expanded="true"]::before {
  content: "Hide";
}
.klaro .cookie-modal .cm-caret a:hover {
  color: var(--accent-bronze-hover);
  text-decoration: none;
}
.klaro .cookie-modal .cm-caret a:focus-visible {
  outline: 2px solid var(--accent-bronze-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Replace the literal ↓ glyph with a bronze chevron mask that flips when open.
   The extra .cm-modal in the selector outranks Klaro's `.cm-body span {width:auto}`
   (0,4,1) — otherwise the chevron span collapses to 0 width and disappears. */
.klaro .cookie-modal .cm-modal .cm-caret a span {
  order: -1;
  flex: 0 0 auto;
  display: block;
  width: 13px;
  height: 13px;
  font-size: 0;
  background-color: currentColor;
  transition: transform var(--dur) var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.klaro .cookie-modal .cm-modal .cm-caret a[aria-expanded="true"] span {
  transform: rotate(180deg);
}

/* Service row → bordered card; the toggle stays right-aligned within it. */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service {
  margin-top: 8px;
  padding: 16px;
  padding-right: 60px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-list-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
/* "Purpose: …" → pill with a bronze dot. */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
}

/* Master "all services" row */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
  margin-top: 16px;
  padding: 16px;
  padding-right: 60px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  background: var(--bg-warm);
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all span.cm-list-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* --------------------------------------------------------------------------
   6. Toggle switch — DMH spec (44×26 track, white knob, bronze when on).
   -------------------------------------------------------------------------- */
/* Track height 26px (Klaro's stock 30px left the 20px knob bottom-aligned). The
   .cm-modal qualifier outranks Klaro's `.cm-switch { height: 30px }`; the slider
   fills it via top/bottom:0, and the knob centres at bottom:3 in a 26px track. */
.klaro .cookie-modal .cm-modal .cm-switch {
  height: 26px;
}
.klaro .cookie-modal .cm-list-input {
  width: 44px;
  height: 26px;
}
/* Anchor the track to the right edge of its (zero-width, right-aligned) switch
   so it grows leftward — otherwise a row flush with the modal edge overflows. */
.klaro .cookie-modal .cm-list-label .slider {
  left: auto;
  right: 0;
  width: 44px;
  background: var(--border-strong);
  box-shadow: none;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease-out);
}
.klaro .cookie-modal .cm-list-label .slider::before {
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(40, 28, 12, 0.3);
  transition: transform var(--dur) var(--ease-out);
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: var(--accent-bronze);
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-label input:checked + .slider::before {
  transform: translateX(18px);
}
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}

/* --------------------------------------------------------------------------
   7. Footer — Decline all · (spacer) · Save my choices · Accept all.
   -------------------------------------------------------------------------- */
.klaro .cookie-modal .cm-modal .cm-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 16px 24px 20px;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-decline {
  margin-right: auto;
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
  width: 100%;
  margin-top: 4px;
  text-align: right;
  font-size: var(--fs-xs);
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: var(--fg-subtle);
  font-weight: var(--fw-regular);
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a:hover {
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   8. Mobile — banner spans the bottom; modal becomes a bottom sheet.
   (Klaro's own breakpoints, not the site --breakpoint-md, so left untagged.)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}
@media (max-width: 659px) {
  .klaro .cookie-modal .cm-modal.cm-klaro {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 92%;
  }
  .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    flex: 1 1 100%;
  }
  .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-decline {
    margin-right: 0;
  }
}

/* Respect reduced-motion: kill the disclosure chevron animation. */
@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-modal .cm-caret a span {
    transition: none;
  }
}