/* ═══════════════════════════════════════════════════════════════════════════
   Klaro consent manager — full custom stylesheet
   Uses klaro-no-css.js → zero default Klaro styles to fight.
   All selectors verified against actual DOM structure.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Per-site banner anchor ──────────────────────────────────────────────────
   MBRCNC.com (the brand site) anchors the banner to the BOTTOM-RIGHT — the
   CSS fallbacks in .cookie-notice already give us right:24px / left:auto, so
   this block is intentionally empty. It documents intent and matches the
   shape of the commercial sites' overrides for diff-friendliness. */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --kl-white:      #ffffff;
  --kl-cream:      #f7f5f0;
  --kl-border:     #e8e5de;
  --kl-text:       #0d0d0d;
  --kl-muted:      #3d3d3d;
  --kl-label:      #6b6b6b;
  --kl-blue:       #2659d6;
  --kl-blue-h:     #0956b8;
  --kl-blue-soft:  rgba(11, 100, 214, 0.09);
  --kl-shadow:     0 20px 60px rgba(8,16,31,.16), 0 4px 16px rgba(8,16,31,.07);
  --kl-r:          18px;
  --kl-font:       'Inter', system-ui, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
.klaro, .klaro * {
  box-sizing: border-box;
  font-family: var(--kl-font);
  -webkit-font-smoothing: antialiased;
}

/* Non-blocking UX: Klaro's root may span the viewport; only the banner/modal capture clicks */
#klaro {
  pointer-events: none;
}
#klaro .cookie-notice,
#klaro .cookie-modal {
  pointer-events: auto;
}

/* ── Backdrop ────────────────────────────────────────────────────────────── */
.klaro .cookie-modal .cm-bg {
  position: fixed;
  inset: 0;
  background: rgba(8,16,31,.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9990;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL SHELL
   ═══════════════════════════════════════════════════════════════════════════ */
.klaro .cookie-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  position: relative;
  z-index: 10000;
  background: var(--kl-white);
  border-radius: var(--kl-r);
  border: 1px solid var(--kl-border);
  box-shadow: var(--kl-shadow);
  width: 100%;
  max-width: 500px;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--kl-text);
  animation: kl-in .26s cubic-bezier(.34,1.1,.64,1) both;
}

@keyframes kl-in {
  from { opacity:0; transform:scale(.96) translateY(8px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
/* Structure: ::before(logo) + h1.title + p(description) */
.klaro .cm-modal .cm-header {
  background: var(--kl-cream);
  border-bottom: 1px solid var(--kl-border);
  padding: 18px 20px 16px;
  flex-shrink: 0;
  /* Wrap: logo+title in row 1, description in row 2 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* Logo mark */
.klaro .cm-modal .cm-header::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: url('/favicon.svg') center/contain no-repeat;
}

/* Title — fills remaining first row */
.klaro .cm-modal .cm-header h1,
.klaro .cm-modal .cm-header .title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--kl-text);
  line-height: 1.3;
}

/* Description — full width second row */
.klaro .cm-modal .cm-header > p {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kl-muted);
}

.klaro .cm-modal .cm-header > p a {
  color: var(--kl-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.klaro .cm-modal .cm-body {
  /* No flex:1 — let content drive modal height naturally.
     On mobile (bottom sheet) a max-height + overflow is applied below. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Purpose / service rows ──────────────────────────────────────────────── */
/* li.cm-purpose is one row per category (Notwendig, Analytik…) */
.klaro .cm-modal .cm-purpose {
  list-style: none;
  border-top: 1px solid var(--kl-border);
  padding: 0;
  margin: 0;
}

/* label wraps: span.cm-list-title + span.cm-required + span.cm-switch */
.klaro .cm-modal .cm-list-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  width: 100%;
  user-select: none;
}

/* Service name */
.klaro .cm-modal .cm-list-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--kl-text);
  line-height: 1.4;
}

/* "(immer aktiv)" badge */
.klaro .cm-modal .cm-required,
.klaro .cm-modal .cm-opt-out {
  font-size: 10px;
  font-weight: 500;
  color: var(--kl-label);
  background: white;
  border: 1px solid var(--kl-border);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide expand caret "↓ 1 servicio" */
.klaro .cm-modal .cm-caret { display: none; }
.klaro .cm-modal .cm-content { display: none; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
/* Structure: span.cm-switch > div.slider.round[.active] */
.klaro .cm-modal .cm-switch {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}

.klaro .cm-modal .slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 11px;
  cursor: pointer;
  transition: background .18s ease;
}

.klaro .cm-modal .slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .18s ease;
}

/* ON state — driven by input:checked (NOT by .active class which Klaro
   applies to all sliders regardless of checked state) */
.klaro .cm-modal .cm-list-input:checked ~ .cm-list-label .slider {
  background: var(--kl-blue);
}
.klaro .cm-modal .cm-list-input:checked ~ .cm-list-label .slider::before {
  transform: translateX(16px);
}

/* Locked required toggle — slightly muted blue */
.klaro .cm-modal .cm-list-input.required ~ .cm-list-label .slider {
  background: rgba(11, 100, 214, 0.35);
  cursor: not-allowed;
}
/* Required is always checked so the knob stays right */
.klaro .cm-modal .cm-list-input.required ~ .cm-list-label .slider::before {
  transform: translateX(16px);
}

/* Focus ring */
.klaro .cm-modal .cm-list-input:focus-visible ~ .cm-list-label .slider {
  outline: 2px solid var(--kl-blue);
  outline-offset: 2px;
}

/* Hide the actual checkbox input */
.klaro .cm-modal .cm-list-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.klaro .cm-modal .cm-footer {
  border-top: 1px solid var(--kl-border);
  padding: 14px 20px;
  background: var(--kl-white);
  flex-shrink: 0;
}

.klaro .cm-modal .cm-footer-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Hide "Realizado con Klaro" */
.klaro .cm-powered-by { display: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.klaro .cm-btn {
  font-family: var(--kl-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s cubic-bezier(.34,1.2,.64,1), box-shadow .15s;
}
.klaro .cm-btn:hover  { transform: translateY(-1px); }
.klaro .cm-btn:active { transform: translateY(0) scale(.98); }

/* "Alle akzeptieren" — .cm-btn-accept-all (always only has this extra class) */
.klaro .cm-btn.cm-btn-accept-all {
  background: var(--kl-blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(11,100,214,.28);
  margin-left: auto;
}
.klaro .cm-btn.cm-btn-accept-all:hover {
  background: var(--kl-blue-h);
  box-shadow: 0 5px 16px rgba(11,100,214,.36);
}

/* "Auswahl speichern" — .cm-btn-info.cm-btn-accept (NOT cm-btn-accept-all) */
.klaro .cm-btn.cm-btn-info.cm-btn-accept {
  background: var(--kl-blue-soft);
  color: var(--kl-blue);
  box-shadow: none;
}
.klaro .cm-btn.cm-btn-info.cm-btn-accept:hover {
  background: rgba(11,100,214,.15);
}

/* "Ablehnen" — .cm-btn-decline / .cn-decline */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline {
  background: transparent;
  color: var(--kl-label);
  border: 1px solid var(--kl-border);
  box-shadow: none;
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cn-decline:hover {
  background: var(--kl-cream);
  color: var(--kl-text);
  border-color: #c9c6bf;
}

/* ── Focus rings ─────────────────────────────────────────────────────────── */
.klaro .cm-btn:focus-visible {
  outline: 2px solid var(--kl-blue);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COOKIE NOTICE / BANNER — floating island (bottom-right corner)
   - max ~1/3 of viewport width on desktop
   - rounded corners, soft shadow
   - drops to a near-full-width strip on small phones
   ═══════════════════════════════════════════════════════════════════════════ */
.klaro .cookie-notice {
  position: fixed;
  bottom: 24px;
  /* Per-site positioning: commercial sites override --klaro-side-left to flip
     the island to the left edge. Default is bottom-right (MBRCNC.com). */
  right: var(--klaro-side-right, 24px);
  left: var(--klaro-side-left, auto);
  /* Up to 1/3 of viewport, with sane min/max so it stays readable */
  width: clamp(320px, 33vw, 460px);
  max-width: calc(100vw - 32px);
  margin: 0;
  transform: none;
  z-index: 9998;
  background: var(--kl-white);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r);
  box-shadow: var(--kl-shadow);
  padding: 22px 24px;
  animation: kl-up .28s cubic-bezier(.34,1.1,.64,1) both;
}

@keyframes kl-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Body copy — short and crisp; no scroll needed in island mode */
.klaro .cookie-notice .cn-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.klaro .cookie-notice .cn-body p { font-size:13px; line-height:1.55; color:var(--kl-muted); margin:0; }
.klaro .cookie-notice .cn-body strong { display:block; font-size:14.5px; font-weight:700; color:var(--kl-text); letter-spacing:-.02em; margin-bottom:2px; }
.klaro .cookie-notice .cn-body a { color:var(--kl-blue); text-decoration:underline; text-underline-offset:2px; }

/* Action stack: Accept all (primary, full width) → Reject + Customize (row) */
.klaro .cookie-notice .cn-ok {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
.klaro .cookie-notice .cn-buttons {
  display: contents;
}

/* Primary: Accept all — full width, prominent */
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  order: 1;
  width: 100%;
  margin: 0;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  background: var(--kl-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(11, 100, 214, 0.35);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
  background: var(--kl-blue-h);
  box-shadow: 0 6px 18px rgba(11, 100, 214, 0.42);
}

/* Secondary row: Reject + Customize side by side */
.klaro .cookie-notice .cm-btn.cn-decline {
  order: 2;
  flex: 1;
  margin: 0;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 13px;
  color: var(--kl-label);
  background: #f5f4f1;
  border: 1px solid var(--kl-border);
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.klaro .cookie-notice .cm-btn.cn-decline:hover {
  background: #ebe8e2;
  color: var(--kl-muted);
  border-color: #dcd9d3;
}
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a.cm-link.cn-learn-more {
  order: 3;
  flex: 1;
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kl-blue);
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice a.cm-link.cn-learn-more:hover {
  color: var(--kl-blue-h);
  background: var(--kl-blue-soft);
  text-decoration: none;
}

/* Wrap the secondary buttons (decline + learn-more) into one row using a flex sibling.
   Klaro emits them as siblings inside .cn-ok, so we use order + flex to lay out:
     row 1: cm-btn-accept-all (full width)
     row 2: cn-decline + cn-learn-more (50/50) */
.klaro .cookie-notice .cn-ok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  grid-column: 1 / -1;
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .klaro .cm-modal, .klaro .cookie-notice,
  .klaro .cm-btn, .klaro .slider, .klaro .slider::before {
    animation: none; transition: none;
  }
  .klaro .cookie-notice {
    transform: none;
  }
}

/* ── Mobile — bottom sheet ───────────────────────────────────────────────── */
@media (max-width: 540px) {
  .klaro .cookie-modal { padding: 0; align-items: flex-end; }

  .klaro .cookie-modal .cm-modal.cm-klaro {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    /* min-height forces the modal open so flex:1 body gets real space */
    min-height: min(420px, 82dvh);
    max-height: 88dvh;
  }
  .klaro .cm-modal .cm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .klaro .cm-footer-buttons {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .klaro .cm-btn {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }
  .klaro .cm-btn.cm-btn-accept-all { margin-left: 0; }

  /* Mobile: island anchors to bottom edges and uses near-full width */
  .klaro .cookie-notice {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    border-radius: 14px;
    padding: 18px 18px 16px;
  }
  .klaro .cookie-notice .cn-body {
    margin-bottom: 14px;
  }
  /* Stack all action buttons full-width on mobile for thumb-reachability */
  .klaro .cookie-notice .cn-ok {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .klaro .cookie-notice .cm-btn.cm-btn-accept-all,
  .klaro .cookie-notice .cm-btn.cn-decline,
  .klaro .cookie-notice .cn-learn-more,
  .klaro .cookie-notice a.cm-link.cn-learn-more {
    width: 100%;
    text-align: center;
  }
  .klaro .cookie-notice .cn-learn-more,
  .klaro .cookie-notice a.cm-link.cn-learn-more {
    order: 2;
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* ── Compact mode: very short viewport (e.g. landscape phone, small preview) */
@media (max-height: 480px) {
  /* Collapse header description to keep modal usable */
  .klaro .cm-modal .cm-header > p { display: none; }
  .klaro .cm-modal .cm-header { padding: 12px 20px; }

  /* Keep buttons in a row (override the column-reverse stacking) */
  .klaro .cm-footer-buttons {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .klaro .cm-btn {
    width: auto !important;
    flex: 1;
    font-size: 12px !important;
    padding: 9px 12px !important;
  }
  .klaro .cm-btn.cm-btn-accept-all { margin-left: 0 !important; }

  /* Keep cookie banner actions full-width (scroll area + buttons layout unchanged) */
  @media (max-width: 540px) {
    .klaro .cookie-notice .cm-btn {
      width: 100% !important;
    }
  }
}

/* ── iOS safe area (content clears home indicator; box still sits on screen edge) ─ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .klaro .cookie-notice {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  @media (max-width: 540px) {
    .klaro .cm-modal .cm-footer {
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT BANNER — target height ≈ 2–3 cm at every viewport
   ──────────────────────────────────────────────────────────────────────────
   Bug fixes baked in:
   1. Anchor BOTTOM-LEFT, not bottom-right — the ContactFab owns bottom-right.
   2. Klaro emits the primary button as `.cm-btn-success` (current versions),
      not `.cm-btn-accept-all` as the older selectors assumed. Style both so
      the brand-blue CTA renders regardless of Klaro version.
   3. Two `<strong>` elements in the German consent description ("Cookies und
      Datenschutz" + "mbrcnc.de") — show only the first as the title.
   4. DOM order is [Anpassen, Ablehnen, Alle akzeptieren] but visual order
      should be [Alle akzeptieren | Ablehnen | Anpassen]. Use flex + `order`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Banner anchor: bottom-LEFT so the ContactFab (bottom-right at all
       breakpoints) is never covered. Override the `right: 24px` from the
       base block above. */
.klaro .cookie-notice {
  right: auto;
  left: 24px;
}

/* Padding + size — compact at every viewport */
.klaro .cookie-notice {
  padding: 10px 14px;
}

/* (3) GDPR "clear information": the first layer must state the purposes and
       link to the privacy policy. Show a concise description + links — title
       as a small heading, body text small but legible. */
.klaro .cookie-notice .cn-body {
  margin-bottom: 10px;
  /* Match the 8px inter-button gap so text→buttons rhythm is homogeneous. */
  gap: 8px;
}
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body p span {
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
  color: var(--kl-muted);
}
.klaro .cookie-notice .cn-body p strong:first-of-type,
.klaro .cookie-notice .cn-body span strong:first-of-type {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--kl-text);
  margin-bottom: 6px;
}
.klaro .cookie-notice .cn-body a {
  color: var(--kl-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* (4) Action row: flex with explicit order (DOM is learn-more, decline, accept;
       visual is accept | decline | learn-more). `display: flex !important`
       overrides the earlier `display: grid` from the base cookie-notice block. */
.klaro .cookie-notice .cn-ok {
  display: flex !important;
  flex-direction: column;   /* Hostinger-style: full-width stacked actions */
  align-items: stretch;
  gap: 8px;
  grid-template-columns: none;
}
.klaro .cookie-notice .cn-buttons {
  display: contents;     /* let inner buttons flow into the flex parent */
}

/* (2) Primary button — match BOTH the current Klaro class (.cm-btn-success)
       AND the legacy one (.cm-btn-accept-all) so the brand-blue CTA always
       renders. */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  order: 1;
  width: 100%;
  flex: none;
  background: var(--kl-blue);
  color: #fff;
  border: 1.5px solid var(--kl-blue);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(11, 100, 214, 0.25);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
  background: var(--kl-blue-h);
  border-color: var(--kl-blue-h);
  box-shadow: 0 4px 14px rgba(11, 100, 214, 0.35);
}

/* GDPR equal prominence: "Decline" carries the same visual weight as "Accept"
   — equal width + size + a solid treatment (not a muted grey/borderless link).
   "Customize" stays a tertiary text link on its own row. */
.klaro .cookie-notice .cm-btn.cn-decline {
  order: 2;
  width: 100%;
  flex: none;
  background: transparent;
  color: var(--kl-blue);
  border: 1.5px solid var(--kl-blue);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}
.klaro .cookie-notice .cm-btn.cn-decline:hover {
  background: var(--kl-blue-soft);
}
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a.cm-link.cn-learn-more {
  order: 3;
  width: 100%;
  flex: none;
  text-align: center;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kl-blue);
}

/* Mobile: keep all three actions on ONE row so the banner stays ≤ 3 cm.
   Override the legacy `width: 100%` rules from the earlier mobile block —
   they otherwise force each button onto its own row (banner = 4 cm). */
@media (max-width: 540px) {
  .klaro .cookie-notice {
    bottom: 12px;
    left: 12px;
    right: auto;
    width: auto;
    max-width: calc(100vw - 24px);
    padding: 10px 12px;
    border-radius: 14px;
  }
  .klaro .cookie-notice .cn-body { margin-bottom: 6px; }

  /* Defeat the legacy `width:100%; text-align:center` from the original
     mobile bottom-sheet rules so flex sizing actually applies. The legacy
     rules use 4-class specificity (.klaro .cookie-notice .cm-btn.cm-btn-…),
     so we match that with `!important` rather than chase specificity. */
  /* Hostinger-style: full-width stacked actions on mobile too. */
  .klaro .cookie-notice .cm-btn.cm-btn-success,
  .klaro .cookie-notice .cm-btn.cm-btn-accept-all,
  .klaro .cookie-notice .cm-btn.cn-decline {
    width: 100% !important;
    flex: none;
    padding: 11px 14px;
    font-size: 14px;
  }
  .klaro .cookie-notice .cn-learn-more,
  .klaro .cookie-notice a.cm-link.cn-learn-more {
    width: 100% !important;
    flex: none;
    padding: 8px 8px;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE POLISH (brief): flush edge-to-edge banner + no focus-ring glow
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kill the browser's default blue focus ring on the programmatically-focused
   notice container — it reads as an "outer glow" and competes with the primary
   CTA. The container is non-interactive; button/link focus rings are untouched. */
.klaro .cookie-notice:focus,
.klaro .cookie-notice:focus-visible {
  outline: none;
}

@media (max-width: 540px) {
  /* Flush bottom sheet: full width, flat against the bottom + side edges,
     no border, no floating-island shadow — only a soft top lift. */
  .klaro .cookie-notice {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px rgba(8, 16, 31, 0.10);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP + TABLET (≥541px): full-width thin bar with row layout
   ──────────────────────────────────────────────────────────────────────────
   Placed AFTER the Hostinger stacked block above so the row layout wins the
   cascade for wider viewports. The bottom-left island anchor + column actions
   used everywhere else are mobile-appropriate; on desktop they shrink to a
   thin full-width bar with text on the left and actions on the right.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 541px) {
  /* Positioning: flat full-width bar pinned to the bottom edge. */
  .klaro .cookie-notice {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 14px 24px;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(8, 16, 31, 0.08);
    box-shadow: 0 -4px 16px rgba(8, 16, 31, 0.08);
  }
  /* Body stacks vertically: title + description + links on top, action group
     below — all left-aligned, full-width. Klaro emits .cn-ok INSIDE .cn-body
     (not as a sibling), so the column layout lives on .cn-body itself. */
  .klaro .cookie-notice .cn-body {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    margin-bottom: 0;
  }
  .klaro .cookie-notice .cn-body > p {
    flex: none;
    width: 100%;
    margin: 0;
  }
  /* Action group sits below the copy, buttons inline in a row, left-aligned. */
  .klaro .cookie-notice .cn-ok {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    grid-template-columns: none;
    width: 100%;
  }
  /* Buttons: content-sized, not full-width. */
  .klaro .cookie-notice .cm-btn.cm-btn-success,
  .klaro .cookie-notice .cm-btn.cm-btn-accept-all,
  .klaro .cookie-notice .cm-btn.cn-decline {
    width: auto;
    padding: 9px 18px;
    font-size: 13px;
  }
  .klaro .cookie-notice .cn-learn-more,
  .klaro .cookie-notice a.cm-link.cn-learn-more {
    width: auto;
    padding: 4px 8px;
    font-size: 13px;
  }
}