/* ========================================================================== */
/*  STYLE.CSS — Renoma Auto                                                   */
/*  Uporządkowane pod przyszłe dzielenie (bez rozdrabniania na 100 plików):    */
/*  - Base: fonts / reset / zmienne / container / helpers                      */
/*  - Header: topbar + menu + submenu                                          */
/*  - Hero                                                                     */
/*  - Footer                                                                   */
/*  - Newsletter                                                               */
/*  - Callback                                                                 */
/*  - News                                                                     */
/*  - Brands                                                                   */
/* ========================================================================== */


/* ========================================================================== */
/*  FONTS (iOS Safari fix)                                                    */
/* ========================================================================== */

@font-face{
  font-family: "Montserrat";
  src:
    url("/assets/fonts/montserrat-regular.woff2") format("woff2"),
    url("/assets/fonts/montserrat-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Montserrat";
  src:
    url("/assets/fonts/montserrat-600.woff2") format("woff2"),
    url("/assets/fonts/montserrat-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Montserrat";
  src:
    url("/assets/fonts/montserrat-700.woff2") format("woff2"),
    url("/assets/fonts/montserrat-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ========================================================================== */
/*  BASE: RESET / ZMIENNE / GLOBAL                                             */
/* ========================================================================== */

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

html{
  scrollbar-gutter: stable;
  overflow-y: auto;
}

:root{
  /* ---------------- Kolory (przyjazne dla zmian) ---------------- */
  --color-text: #111;
  --color-bg: #fff;
  --color-muted: #666;
  --color-accent: #CD9D45;
  --color-info: #1571e2;
  --color-err: #e21515;
  --color-ok: #39a011;

  /* aliasy (kompatybilność z użyciem w kodzie) */
  --text: var(--color-text);
  --bg: var(--color-bg);
  --muted: var(--color-muted);
  --accent: var(--color-accent);

  /* Neutralne UI */
  --border: #e6e6e6;
  --border-strong: #d9d9d9;
  --surface: #fff;
  --surface-muted: #f7f7f7;

  /* Focus / ring (używany tam, gdzie chcesz „miękką poświatę”) */
  --ring: rgba(205,157,69,0.18);

  /* Promienie */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Spacing */
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-14: 14px;
  --s-16: 16px;
  --s-18: 18px;
  --s-24: 24px;
  --s-28: 28px;

  /* Container */
  --container-pad: 16px;
  --container-max: var(--style--global--wide-size, 1340px);

  /* Logo (desktop) */
  --logo-w: clamp(12rem, 24vw, 16rem);

  /* Topbar: kontrolowane klikalne wysokości */
  --mini-brand-size: 42px;
  --tap-h-sm: 42px;  /* mini-brand */
  --tap-h-md: 38px;  /* hamburger */

  /* Menu */
  --nav-item-h: 44px;
  --nav-font-size: 13px;
  --nav-line: 1.2;

  /* Dropdown caret */
  --caret-size: 18px;
  --caret-gap: 8px;

  /* ---------------- Formularze (DNA inputa jak w CALLBACK) ---------------- */
  --input-h: 44px;
  --input-r: 12px;
  --input-b: 1px solid rgba(0,0,0,0.18);
  --input-b-focus: rgba(0,0,0,0.45);
  --input-pad-x: 12px;
}

body{
  font-family:
    "Montserrat",
    system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);

  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display: block; }

button, input{ font: inherit; }

/* bazowo zdejmujemy outline, ale pilnujemy własnych focusów w komponentach */
:where(a, button, input, [tabindex]):focus-visible{ outline: none; }


/* ========================================================================== */
/*  LAYOUT: CONTAINER                                                         */
/* ========================================================================== */

.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* ========================================================================== */
/*  UI: BUTTON (baza)                                                         */
/* ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn--pill{ border-radius: var(--r-pill); }

.btn--accent{
  background: var(--accent);
  color: #fff;
}

.btn--accent:focus-visible{
  box-shadow: 0 0 0 3px var(--ring);
}


/* ========================================================================== */
/*  HEADER                                                                    */
/* ========================================================================== */

.site-header{
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}


/* ========================================================================== */
/*  TOPBAR                                                                    */
/* ========================================================================== */

.topbar{ padding: var(--s-12) 0; }

.topbar-row--primary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12);
  min-width: 0;
}

/* Brand */
.brand{
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
}

/* Logo */
.logo{ display: block; }

.logo--desktop{
  width: var(--logo-w);
  height: auto;
  border-radius: var(--r-sm);
}

.logo--mobile{ display: none; }

/* Linki */
.top-links{
  display: flex;
  gap: var(--s-12);
  flex: 0 0 auto;
  white-space: nowrap;
}

.top-link{
  display: inline-block;
  padding: var(--s-6) 0;
  font-size: 14px;
  color: var(--text);
}

.top-link:hover,
.top-link:focus-visible{ color: var(--accent); }

/* Search (layout + wygląd zgodny z callback input) */
.top-search{
  display: flex;
  align-items: center;

  min-width: 0;
  flex: 1 1 auto;

  height: var(--input-h);
  border-radius: var(--input-r);
  border: var(--input-b);
  padding: 0 var(--input-pad-x);
  background: #fff;
}

.top-search:focus-within{
  border-color: var(--input-b-focus);
  box-shadow: none;
}

.search-icon{
  border: 0;
  background: transparent;
  padding: 0;
  margin-right: var(--s-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  height: 100%;
}

.search-icon:focus-visible{
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--r-pill);
}

.search-icon-img{
  width: 18px;
  height: 18px;
  display: block;
}

.search-input{
  border: 0;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 15px;
  background: transparent;
  color: var(--text);
}

/* Prawa strona: mini brand + hamburger */
.top-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Mini brand */
.mini-brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--tap-h-sm);
  padding: 0 var(--s-10);

  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  white-space: nowrap;
}

.mini-brand img{
  width: var(--mini-brand-size);
  height: var(--mini-brand-size);
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Hamburger */
.hamburger{
  width: 42px;
  height: var(--tap-h-md);
  border-radius: var(--r-md);
  background: var(--accent);

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;

  padding: 0 10px;
  cursor: pointer;

  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;

  position: relative;
}

.hamburger:focus-visible{
  box-shadow: 0 0 0 3px var(--ring);
}

.hamburger-bar{
  width: 100%;
  height: 2px;
  background-color: #fff;
  display: block;
  border-radius: 2px;

  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease;
}

/* Hamburger -> X */
.hamburger.is-active .hamburger-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active .hamburger-bar:nth-child(2){
  opacity: 0;
}

.hamburger.is-active .hamburger-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Szacunek dla reduced motion */
@media (prefers-reduced-motion: reduce){
  .hamburger-bar{ transition: none; }
}

/* CTA */
.callback-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: var(--r-pill);

  background: var(--accent);
  color: #fff;

  font-weight: 700;
  font-size: 13px;
  text-align: center;
}

.callback-btn:focus-visible{
  box-shadow: 0 0 0 3px var(--ring);
}


/* ========================================================================== */
/*  HEADER — MOBILE (<= 767px)                                                */
/* ========================================================================== */

@media (max-width: 767px){
  .logo--desktop{ display: none; }
  .logo--mobile{
    display: block;
    height: 36px;
    width: auto;
  }

  .brand{ order: 1; }
  .top-links{ order: 2; }
  .top-actions{ order: 3; }
  .top-search{ flex: 1 1 100%; order: 6; }
  .callback-btn{ flex: 1 0 100%; order: 10; }

  .top-actions{ gap: 2px; }

  .mini-brand{
    padding: 0;
    transform: scale(0.8);
    transform-origin: left center;
  }
}


/* ========================================================================== */
/*  HEADER — DESKTOP (>= 768px)                                               */
/* ========================================================================== */

@media (min-width: 768px){
  .topbar-row--primary{ flex-wrap: wrap; }
  .top-links{ margin-left: var(--s-12); }

  .top-search{
    flex: 1 1 320px;
    max-width: none;
  }

  .callback-btn{
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 10px 16px;
  }

  .hamburger{ display: none; }
}

/* CTA – 2. linia, ale po prawej (865–1199px) */
@media (min-width: 865px) and (max-width: 1199px){
  .callback-btn{
    order: 10;
    flex: 0 0 100%;
    margin-left: auto;
    width: fit-content;
  }
}


/* ========================================================================== */
/*  MENU                                                                      */
/* ========================================================================== */

.mainnav{
  display: flex;
  gap: 12px 18px;
  padding: 10px 0 14px;
}

/* typografia */
.mainnav a{
  font-size: var(--nav-font-size);
  font-weight: 400;
  line-height: var(--nav-line);
  color: inherit;
}

/* elementy pierwszego poziomu */
.mainnav > a,
.mainnav > .nav-item > a{
  position: relative;
  padding: var(--s-6) 0;
}

/* hover/focus kolor */
.mainnav a:hover,
.mainnav a:focus-visible{ color: var(--accent); }

/* DESKTOP: underline na ::before (caret jest na ::after) */
@media (min-width: 768px){
  .mainnav{ align-items: center; }

  .mainnav > a::before,
  .mainnav > .nav-item > a::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--accent);
    opacity: 0;
    transform: scaleX(0.9);
    transform-origin: left;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }

  .mainnav > a:hover::before,
  .mainnav > a:focus-visible::before,
  .mainnav > .nav-item > a:hover::before,
  .mainnav > .nav-item > a:focus-visible::before{
    opacity: 1;
    transform: scaleX(1);
  }
}

/* MOBILE: menu zwijane + scroll w menu */
@media (max-width: 767px){
  .mainnav{
    flex-direction: column;
    gap: 0;

    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;

    overflow: hidden;
    pointer-events: none;
    padding: 0;
  }

  /* blokujemy tło (bez position:fixed) */
  body.menu-open{
    overflow: hidden;
    touch-action: none;
  }

  .mainnav.is-open{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--menu-top, 120px);
    bottom: 0;

    max-height: none;
    height: calc(100vh - var(--menu-top, 120px));

    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;

    padding: var(--s-6) var(--container-pad);
    margin-top: 0;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;
    touch-action: pan-y;
    will-change: transform;

    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 999;
  }

  /* bufor na końcu listy */
  .mainnav.is-open{
    padding-bottom: calc(var(--s-6) + 72px + env(safe-area-inset-bottom, 0px));
  }
  .mainnav.is-open::after{
    content: "";
    display: block;
    height: 1px;
  }

  /* każdy link jako wiersz */
  .mainnav.is-open a{
    display: flex;
    align-items: center;
    min-height: var(--nav-item-h);
    padding: 0;
    border-top: 1px solid var(--border);
  }

  .mainnav.is-open > a:first-child{
    border-top: 0;
  }
}


/* ========================================================================== */
/*  SUBMENU                                                                   */
/* ========================================================================== */

.nav-item{ position: relative; }

/* link z submenu ma caret na desktopie */
.has-submenu > .nav-toggle{
  display: flex;
  align-items: center;
  gap: var(--caret-gap);
  width: auto; /* desktop nie rozciąga w poziomie */
}

/* caret zawsze widoczny i bez layout shift */
.has-submenu > .nav-toggle::after{
  content: "▾";
  display: inline-block;
  width: 1.25em;
  text-align: center;
  font-size: var(--caret-size);
  line-height: 1;
  opacity: 0.95;
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease;
}

/* dropdown na desktopie */
.submenu{
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 0;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease;
  z-index: 20;
}

.submenu a{
  display: block;
  padding: 10px 14px;
  font-size: var(--nav-font-size);
  line-height: var(--nav-line);
  white-space: nowrap;
}

.submenu a:hover{ background: var(--surface-muted); }

@media (min-width: 768px){
  .has-submenu:hover > .submenu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .has-submenu:hover > .nav-toggle::after{
    transform: rotate(180deg);
  }
}

/* MOBILE: submenu jako zwykłe linki */
@media (max-width: 767px){
  .has-submenu > .nav-toggle{ width: 100%; }
  .has-submenu > .nav-toggle::after{ content: none; }

  .submenu{
    position: static;
    border: 0;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .submenu a{
    padding: 0;
    white-space: normal;
  }
}


/* ========================================================================== */
/*  HERO                                                                      */
/* ========================================================================== */

.hero{ padding: 14px 0 18px; }

.hero-split{
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;

  min-height: 420px;
}

.hero-panel{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  padding: var(--s-28) var(--s-18);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.hero-panel::before{
  content:"";
  position: absolute;
  inset: 0;
  background: #d9d9d9 center/cover no-repeat;
}

.hero-panel--peugeot::before{ background-image: url("../images/hero-peugeot.webp"); }
.hero-panel--citroen::before{ background-image: url("../images/hero-citroen.webp"); }

.hero-panel > *{ position: relative; z-index: 1; }

.hero-logo{
  display: block;
  max-width: 340px;
  width: 75%;
  height: auto;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: var(--r-pill);

  border: solid 1px black;
  color: black;

  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 13px;
}

.hero-btn2{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: var(--r-pill);

  border: solid 1px white;
  color: white;

  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 13px;
}

.hero-btn:focus-visible{ box-shadow: 0 0 0 3px var(--ring); }

@media (max-width: 767px){
  .hero-split{
    grid-template-columns: 1fr;
    min-height: 620px;
  }
  .hero-logo{
    max-width: 280px;
    width: 70%;
  }
}


/* ========================================================================== */
/*  FOOTER                                                                    */
/* ========================================================================== */

.site-footer{
  margin-top: 30px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 14px;
  color: #444;
}

/* --- WIERSZ 1: KOLUMNY --- */

.footer-row{
  padding: 36px 0;
}

.footer-row--primary{
  border-bottom: 1px solid var(--border);
}

.footer-row--columns{
  text-align: left;
}

.footer-columns{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer-col{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-heading{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
}

.footer-text{
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.footer-text p{
  margin: 0 0 14px;
}

.footer-text strong{
  font-weight: 600;
  color: var(--text);
}

.footer-placeholder{
  min-height: 40px;
}

/* --- WIERSZ 2: PRAWNE --- */

.footer-row--secondary{
  border-bottom: 1px solid var(--border);
  padding: var(--s-12) 0;
  text-align: center;
}

.footer-legal{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
}

.footer-legal a{
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover{
  text-decoration: underline;
}

/* --- WIERSZ 3: DÓŁ --- */

.footer-bottom{
  padding: var(--s-12) 0;
  font-size: 13px;
  text-align: center;
}

.footer-bottom a{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.footer-bottom a:hover{
  text-decoration: underline;
}

.footer-sep{
  margin: 0 6px;
}

/* --- PRZYDATNE INFORMACJE: linki nawigacyjne --- */

.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav__link{
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color .15s;
}

.footer-nav__link:hover{ color: var(--accent); }

/* --- ODWIEDŹ NAS W SIECI: social linki --- */

.footer-socials{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-social{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}

.footer-social:hover{ color: var(--accent); }

.footer-social__icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity .15s;
}

.footer-social:hover .footer-social__icon{ opacity: 1; }

/* --- AUTORYZOWANY DEALER: loga marek --- */

.footer-brands{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-brand{
  display: inline-flex;
}

.footer-brand__logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity .15s;
}

.footer-brand:hover .footer-brand__logo{ opacity: 1; }


/* ========================================================================== */
/*  RESPONSYWNOŚĆ                                                             */
/* ========================================================================== */

/* Tablet */
@media (max-width: 1024px){
  .footer-columns{
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* Mobile */
@media (max-width: 640px){
  .footer-columns{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-row{
    padding: 28px 0;
  }
}


/* ========================================================================== */
/*  NEWSLETTER                                                                */
/* ========================================================================== */

.newsletter{ padding: clamp(48px, 6vw, 90px) 0; }

.newsletter-inner{
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.newsletter-title{
  margin: 0 auto var(--s-18);
  max-width: 980px;
}

.newsletter-lead{
  margin: 0 auto 36px;
  max-width: 860px;
}

.newsletter-form{
  max-width: 720px;
  margin: 0 auto;
}

/* pole wyszukiwania w newsletterze (jak callback input) */
.newsletter-field--search{
  display: flex;
  align-items: center;
  gap: var(--s-8);

  width: 100%;
  max-width: 420px;

  margin-inline: auto;
  margin-bottom: var(--s-24);

  height: var(--input-h);
  border-radius: var(--input-r);
  border: var(--input-b);
  padding: 0 var(--input-pad-x);
  background: #fff;
}

.newsletter-field--search:focus-within{
  border-color: var(--input-b-focus);
  box-shadow: none;
}

.newsletter-input{
  border: 0;
  outline: none;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  padding: 0;
  min-width: 0;
}

.newsletter-input::placeholder{ opacity: 0.75; }

.newsletter-consents{
  margin: 0 auto;
  max-width: 560px;

  display: grid;
  gap: var(--s-12);

  justify-items: center;
}

.consent{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;

  column-gap: 8px;
  row-gap: 2px;

  width: 100%;
  text-align: left;

  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.consent-input{
  margin-top: 2px;
  accent-color: var(--accent);
}

.consent-link{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newsletter-note{
  margin: 4px auto 0;
  max-width: 560px;

  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  color: var(--muted);
}

.newsletter-actions{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.newsletter-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 0;

  background: var(--accent);
  color: #fff;

  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  cursor: pointer;
}

.newsletter-submit:focus-visible{
  box-shadow: 0 0 0 3px var(--ring);
}

.newsletter-msg{
  margin: var(--s-16) 0 0;
  min-height: 1em;
  color: var(--muted);
}

.newsletter-msg.is-err {
  background-color: var(--color-err);
  color: #fff;
  border-radius: var(--r-pill); 
  width: fit-content;
  margin: 0.5rem auto 0;
  padding: 0.5rem 1rem;
}

.newsletter-msg.is-ok {
  background-color: var(--color-ok);
  color: #fff;
  border-radius: var(--r-pill); 
  width: fit-content;
  margin: 0.5rem auto 0;
  padding: 0.5rem 1rem;
}


@media (max-width: 480px){
  .newsletter-lead{ margin-bottom: 28px; }
  .newsletter-consents{ gap: var(--s-10); }
}


/* ========================================================================== */
/*  CALLBACK (oddzwonimy)                                                     */
/*  Hybryda:                                                                  */
/*  - Desktop: popover wyrównany do .container                                */
/*  - Mobile: bottom-sheet                                                    */
/* ========================================================================== */

.cb{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;

  /* domyślnie nie przechwytuj klików (dopiero po .is-open) */
  pointer-events: none;
}

.cb.is-open{
  display: block;
  pointer-events: auto;
}

/* przy otwartym callbacku nie scrollujemy tła (kompat + poprawka selektora) */
.cb-open body,
body.cb-open{ overflow: hidden; }

.cb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* ---------------- Panel: baza wspólna ---------------- */

.cb-panel{
  position: absolute;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  /* bezpieczeństwo: panel nigdy nie wyjdzie poza viewport */
  width: min(520px, calc(100vw - (var(--container-pad) * 2)));
  max-height: calc(100vh - 32px);
  overflow: auto;

  padding: 18px 16px 16px;
}

/* ---------------- Desktop: wyrównanie do .container ---------------- */
/* Cel: prawy brzeg panelu = prawy brzeg treści w .container */
@media (min-width: 768px){
  .cb-panel{
    top: 120px;

    /* Wyrównanie do prawej krawędzi kontenera: używamy 100%, nie 100vw (scrollbar!) */
    right: max(
      var(--container-pad),
      calc((100% - var(--container-max)) / 2 + var(--container-pad))
    );

    transform: translateY(-6px);

    /* Bezpiecznik: nigdy poza viewport (też bez 100vw) */
    max-width: calc(100% - (var(--container-pad) * 2));
  }
}

/* ---------------- Mobile: bottom-sheet ---------------- */

@media (max-width: 767px){
  .cb-panel{
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;

    width: auto;
    border-radius: 18px;
    padding-bottom: 16px;

    animation: cbUp 180ms ease-out;
    transform: none;
  }

  @keyframes cbUp{
    from{ transform: translateY(14px); opacity: 0.8; }
    to{ transform: translateY(0); opacity: 1; }
  }
}

/* ---------------- UI elementy w panelu ---------------- */

.cb-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cb-title{
  margin: 0 36px 12px 0;
  font-size: 18px;
  font-weight: 700;
}

.cb-form{ display: block; }

.cb-row{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-label{
  display: block;
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  margin-bottom: 6px;
}

.cb-input{
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--input-pad-x);
  border-radius: var(--input-r);
  border: var(--input-b);
  outline: none;
}

.cb-input:focus{ border-color: var(--input-b-focus); }

.cb-submit{
  height: var(--input-h);
  padding: 0 16px;
  border: none;
  border-radius: var(--input-r);
  cursor: pointer;
  font-weight: 700;
  background: #000;
  color: #fff;
  width: 100%;
}

.cb-submit:disabled{ opacity: 0.6; cursor: not-allowed; }

.cb-info{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,0.6);
}

.cb-info a{ color: inherit; text-decoration: underline; }

.cb-msg{ margin: 10px 0 0; font-size: 13px; }
.cb-msg.is-ok{ color: #0a7a2f; }
.cb-msg.is-err{ color: #b00020; }

/* honeypot ukryty dla botów */
.cb-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}


/* ========================================================================== */
/*  NEWS: LISTA + SZCZEGÓŁ + SKELETON                                         */
/* ========================================================================== */

/* Grid */
.news-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-18);
  margin: var(--s-16) 0 var(--s-28);
}

@media (max-width: 1024px){
  .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .news-grid{ grid-template-columns: 1fr; }
}

/* Card */
.news-card{
  display: grid;
  gap: var(--s-10);
  padding: var(--s-14);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.news-card__img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-card__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.news-card__excerpt{ color: var(--muted); }
.news-card__excerpt p{ margin: 0; }

.news-card__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 40px;
  padding: 0 var(--s-16);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.news-card__link:hover{ border-color: var(--accent); }

/* Detail */
.news-detail{
  margin: var(--s-16) 0 var(--s-28);
}

.news-detail__title{
  margin: 0 0 var(--s-14);
}

.news-detail__hero{
  width: 100%;
  max-height: none;
  margin: 0 0 var(--s-18);
  object-fit: contain;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

/* Przyciski WP Block Editor — styl zgodny ze stroną */
.news-detail__content .wp-block-button__link,
.news-detail__content .wp-element-button,
#page-content .wp-block-button__link,
#page-content .wp-element-button{
  background-color: var(--color-accent);
  color: #fff !important;
  border: 2px solid var(--color-accent);
  border-radius: var(--r-sm);
  padding: 11px 28px;
  font-weight: 600;
  font-family: inherit;
  font-size: .95rem;
  text-decoration: none !important;
  display: inline-block;
  cursor: pointer;
  transition: opacity .2s;
}
.news-detail__content .wp-block-button__link:hover,
.news-detail__content .wp-element-button:hover,
#page-content .wp-block-button__link:hover,
#page-content .wp-element-button:hover{
  opacity: .85;
}
/* Wariant outline */
.news-detail__content .wp-block-button.is-style-outline .wp-block-button__link,
#page-content .wp-block-button.is-style-outline .wp-block-button__link{
  background-color: transparent;
  color: var(--color-accent) !important;
}
.news-detail__content .wp-block-button.is-style-outline .wp-block-button__link:hover,
#page-content .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color: var(--color-accent);
  color: #fff !important;
  opacity: 1;
}

.news-detail__content :where(p, ul, ol),
#page-content :where(p, ul, ol){
  margin: 0 0 var(--s-12);
}

/* Obrazki w treści CMS — wspólny layout */
.news-detail__content img,
#page-content img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--s-16) auto;
  object-fit: contain;
}

/* Aktualności: domyślnie zachowują ramkę */
.news-detail__content img{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

/* Podstrony CMS: ramka tylko po dodaniu klasy "ramka"
   (Gutenberg → blok Obraz → Ustawienia zaawansowane → Dodatkowe klasy CSS) */
#page-content figure.ramka img,
#page-content img.ramka{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}


/* Klikalne obrazki */
.lb-trigger{
  cursor: zoom-in;
  transition: opacity .2s, transform .2s;
}
.lb-trigger:hover{
  opacity: .9;
  transform: scale(1.01);
}

/* Galeria WP — masonry (CSS columns) */
/* !important — WP block library ustawia display:flex/grid na .wp-block-gallery */
.news-detail__content .wp-block-gallery,
#page-content .wp-block-gallery{
  display: block !important;
  columns: 3 !important;
  column-gap: 10px !important;
  gap: unset !important;
  margin: var(--s-16) 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.news-detail__content .wp-block-gallery .wp-block-image,
.news-detail__content .wp-block-gallery li,
.news-detail__content .wp-block-gallery figure,
#page-content .wp-block-gallery .wp-block-image,
#page-content .wp-block-gallery li,
#page-content .wp-block-gallery figure{
  break-inside: avoid;
  margin: 0 0 10px !important;
  padding: 0 !important;
  width: 100% !important;
  flex: unset !important;
}
.news-detail__content .wp-block-gallery .wp-block-image img,
.news-detail__content .wp-block-gallery li img,
.news-detail__content .wp-block-gallery figure img,
#page-content .wp-block-gallery .wp-block-image img,
#page-content .wp-block-gallery li img,
#page-content .wp-block-gallery figure img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.news-detail__content .wp-block-gallery figcaption,
#page-content .wp-block-gallery figcaption{
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
  padding: 0;
}

@media (max-width: 767px){
  .news-detail__content .wp-block-gallery,
  #page-content .wp-block-gallery{ columns: 2 !important; }
}

/* Lightbox overlay */
#lb-overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
#lb-overlay.lb-open{
  opacity: 1;
  pointer-events: auto;
}
.lb-img{
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--r-lg);
  object-fit: contain;
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
  transform: scale(.95);
  transition: transform .25s;
}
#lb-overlay.lb-open .lb-img{
  transform: scale(1);
}
.lb-close{
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-close::before,
.lb-close::after{
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.lb-close::before{ transform: rotate(45deg); }
.lb-close::after{  transform: rotate(-45deg); }

/* Strzałki nawigacji */
.lb-prev,
.lb-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-prev{ left: 20px; }
.lb-next{ right: 20px; }
.lb-prev:hover,
.lb-next:hover{ background: rgba(255,255,255,.3); }
.lb-prev::after,
.lb-next::after{
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.lb-prev::after{ transform: rotate(-135deg) translate(-2px, 2px); }
.lb-next::after{ transform: rotate(45deg)   translate(-2px, 2px); }

@media (max-width: 767px){
  .lb-prev{ left: 8px; }
  .lb-next{ right: 8px; }
}

.lb-lock{
  overflow: hidden;
}

/* Error */
.news-error{
  margin: var(--s-16) 0 var(--s-28);
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.news-error p{ margin: 0 0 var(--s-12); }

.news-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) var(--s-16);
  margin: var(--s-16) 0 var(--s-28);
}
.news-empty__icon{
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-16);
  color: var(--accent);
}
.news-empty__title{
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  margin: 0 0 var(--s-6);
}
.news-empty__desc{
  color: var(--muted);
  margin: 0;
  max-width: 360px;
}

/* Skeleton */
.sk{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-muted);
}

.sk::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: sk-shimmer 1.1s infinite;
}

@keyframes sk-shimmer{
  100%{ transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .sk::after{ animation: none; }
}

.sk-img{ aspect-ratio: 16 / 9; }
.sk-line{ height: 12px; border-radius: var(--r-pill); }
.sk-line--t{ height: 16px; }
.sk-line--short{ width: 65%; }
.sk-btn{ width: 140px; height: 40px; border-radius: var(--r-pill); }

.sk-title{
  width: min(720px, 92%);
  height: 30px;
  margin-bottom: var(--s-14);
  border-radius: var(--r-pill);
}

.sk-hero{
  aspect-ratio: 16 / 9;
  margin-bottom: var(--s-18);
  border-radius: var(--r-lg);
}


/* ========================================================================== */
/*  NEWS HERO (wyróżniona aktualność)                                         */
/* ========================================================================== */

.news-hero{ margin: 24px 0 32px; }

.news-hero__inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;

  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 24px;
}

/* LEFT */
.news-hero__content{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-hero__date{
  font-size: 13px;
  color: var(--muted);
}

.news-hero__title{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
}

.news-hero__excerpt{ color: var(--muted); }
.news-hero__excerpt p{ margin: 0; }

.news-hero__footer{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.news-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-weight: 600;
}

.news-hero__cta:hover{ border-color: var(--accent); }

/* SOCIALS */
.news-hero__socials{
  display: inline-flex;
  gap: 10px;
}

.news-hero__social{
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.news-hero__social--fb{ background-image: url("/assets/images/icon-fb.svg"); }
.news-hero__social--in{ background-image: url("/assets/images/icon-in.svg"); }
.news-hero__social--yt{ background-image: url("/assets/images/icon-yt.svg"); }

/* RIGHT */
.news-hero__media{ width: 100%; }

.news-hero__image{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* MOBILE */
@media (max-width: 767px){
  .news-hero__inner{
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .news-hero__media{ order: -1; }
  .news-hero{ margin: 16px 0 24px; }
}


/* ========================================================================== */
/*  PROMOCJE (moduł — reużywa .news-* + dodatki)                              */
/* ========================================================================== */

/* Zakładki kategorii */
.promo-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 20px;
}

.promo-tab{
  appearance: none;
  cursor: pointer;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  transition: border-color .15s, background .15s, color .15s;
}
.promo-tab:hover{ border-color: var(--accent); }
.promo-tab.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Plakietki (kategoria + ważna do) */
.promo-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}

.promo-badge{
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  line-height: 1.5;
}
.promo-badge--cat{
  background: var(--accent);
  color: #fff;
}
.promo-badge--date{
  background: #f3f3f3;
  color: #555;
}

.promo-card .promo-badges{ margin-top: 6px; }

/* Masonry (CSS columns) — banery dopasowane do szerokości, bez kadrowania */
.promo-grid{
  columns: 320px;
  column-gap: 20px;
}
.promo-grid .promo-card{
  break-inside: avoid;
  margin: 0 0 20px;
  width: 100%;
}
/* obrazek baneru w naturalnych proporcjach (kasujemy 16/9 cover z .news-card__img) */
.promo-grid .news-card__img{
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}
/* hero promocji też bez przycinania baneru */
.promo-hero .news-hero__image{
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.promo-detail__back{
  margin-top: 24px;
}
.promo-detail__back a{
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ========================================================================== */
/*  BRANDS (Nasze marki)                                                      */
/* ========================================================================== */

.brands-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
}

@media (max-width: 767px){
  .brands-grid{ grid-template-columns: 1fr; }
}

.brand-card{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.brand-card__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.brand-card__img{
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  object-fit: cover;
}

.brand-card__desc :where(p,ul,ol){ margin: 0 0 10px; }

.brand-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-weight: 600;
  width: fit-content;
}

.brand-card__btn:hover{ border-color: var(--accent); }


/* ========================================================================== */
/*  OFFERS — lista ofert z XML                                                */
/* ========================================================================== */

/* Sekcja oddzielona od CMS */
#offers-section{
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

/* Status / komunikaty */
.offers-status{
  padding: var(--s-16);
  color: var(--muted);
}

.offers-status--err{ color: var(--color-err); }

/* Licznik wyników */
.offers-count{
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 var(--s-16);
}

/* ── Filtry ─────────────────────────────────────────────────────────────── */

.offers-filter-form{
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-18) var(--s-18) var(--s-14);
  margin-bottom: var(--s-24);
}

.offers-filter-row{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-10) var(--s-12);
  margin-bottom: var(--s-14);
}

.offers-filter-group{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offers-filter-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.offers-filter-select,
.offers-filter-input{
  height: 38px;
  padding: 0 var(--s-10);
  border: var(--input-b);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  width: 100%;
}

.offers-filter-select:focus,
.offers-filter-input:focus{
  outline: none;
  border-color: var(--input-b-focus);
}

.offers-filter-group--checkbox{
  justify-content: flex-end;
}

.offers-filter-checkbox-label{
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 13px;
  cursor: pointer;
  height: 38px;
}

.offers-filter-checkbox-label input{
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.offers-filter-actions{
  display: flex;
  gap: var(--s-10);
  flex-wrap: wrap;
}

.offers-filter-btn{
  height: 38px;
  padding: 0 20px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.offers-filter-btn:hover{ opacity: 0.9; }

.offers-filter-reset{
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.offers-filter-reset:hover{ border-color: var(--accent); }

/* ── Grid kart ──────────────────────────────────────────────────────────── */

.offers-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-18);
  margin-bottom: var(--s-18);
}

@media (max-width: 1024px){
  .offers-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .offers-grid{ grid-template-columns: 1fr; }
}

/* ── Karta oferty ───────────────────────────────────────────────────────── */

.offer-card{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .18s ease, border-color .18s ease;
}

.offer-card:hover{
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.offer-card__media{
  position: relative;
  aspect-ratio: 4 / 3;        /* rezerwacja miejsca = brak skoków układu (CLS) */
  background: var(--surface-muted, #f0f0f0);
  overflow: hidden;
}

/* Shimmer „ładowania" widoczny dopóki zdjęcie się nie wczyta */
.offer-card__media::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ececec 25%, #e0e0e0 37%, #ececec 63%);
  background-size: 200% 100%;
  animation: rnm-shimmer 1.3s ease-in-out infinite;
}
.offer-card__media.is-loaded::before,
.offer-card__media--empty::before{ display: none; }

.offer-card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.offer-card__media.is-loaded .offer-card__img{ opacity: 1; }

/* Panorama szersza niż kadr 4:3 → pokaż całe auto (contain) zamiast ucinać boki.
   Klasę .is-wide dokłada offers.js po sprawdzeniu proporcji zdjęcia (próg 1.6).
   Wysokość kafelka się nie zmienia (kadr trzyma aspect-ratio) → zero CLS. */
.offer-card__media.is-wide{ background: #fff; }   /* białe paski letterbox zamiast szarych */
.offer-card__media.is-wide .offer-card__img{ object-fit: contain; }

/* ── Szkielet listy ofert (makieta, zanim dojdzie offers.json) ───────────── */
@keyframes rnm-shimmer{ to{ background-position: -200% 0; } }

.offer-card--skeleton{ pointer-events: none; }
.offer-card--skeleton .offer-card__body{ gap: 10px; padding-top: var(--s-14); }

.sk-line{
  height: 12px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #ececec 25%, #e0e0e0 37%, #ececec 63%);
  background-size: 200% 100%;
  animation: rnm-shimmer 1.3s ease-in-out infinite;
}
.sk-line--title{ height: 16px; width: 70%; }
.sk-line--sm{ width: 45%; }
.sk-line--price{ height: 18px; width: 35%; margin-top: 4px; }

@media (prefers-reduced-motion: reduce){
  .offer-card__media::before,
  .sk-line{ animation: none; }
}

.offer-card__body{
  padding: var(--s-14);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.offer-card__title{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.offer-card__version{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.offer-card__meta{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.offer-card__price{
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.offer-card__installment{
  display: block;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ── Przycisk Załaduj więcej ────────────────────────────────────────────── */

.offers-more-wrap{
  text-align: center;
  margin: var(--s-10) 0 var(--s-28);
}

.offers-load-more{
  height: 44px;
  padding: 0 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.offers-load-more:hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Szczegół oferty ────────────────────────────────────────────────────── */

.offer-detail__back{
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  margin-bottom: var(--s-18);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.offer-detail__back:hover{
  border-color: var(--accent);
  color: var(--accent);
}

.offer-detail__layout{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
  margin-bottom: var(--s-24);
}

@media (max-width: 767px){
  .offer-detail__layout{
    grid-template-columns: 1fr;
  }
}

.offer-detail__title{
  margin: 0 0 4px;
  font-size: clamp(22px, 2.2vw, 28px);
}

.offer-detail__version{
  margin: 0 0 var(--s-10);
  font-size: 15px;
  color: var(--muted);
}

.offer-detail__price{
  margin: 0 0 var(--s-8);
  font-size: 22px;
  font-weight: 700;
}

.offer-detail__installment{
  margin: 0 0 var(--s-16);
  font-size: 14px;
  color: var(--muted);
}

.offer-detail__desc{
  border-top: 1px solid var(--border);
  padding-top: var(--s-18);
  margin-top: var(--s-10);
}

.offer-detail__desc h3{
  margin: 0 0 var(--s-12);
  font-size: 18px;
}

.offer-detail__desc-body{
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.offer-detail__desc-body p{ margin: 0 0 var(--s-12); }

/* ── Galeria ────────────────────────────────────────────────────────────── */

.offer-gallery__stage{
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-10);
}

.offer-gallery__main{
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  cursor: zoom-in;
}

.offer-gallery__single{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: #fff;
  cursor: zoom-in;
}

.offer-gallery--empty{
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 14px;
  border: 1px solid var(--border);
}

.offer-gallery__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: none;
  background: rgba(255,255,255,0.85);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offer-gallery__arrow--prev{ left: 10px; }
.offer-gallery__arrow--next{ right: 10px; }

.offer-gallery__arrow:hover{
  background: var(--accent);
  color: #fff;
}

.offer-gallery__thumbs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-gallery__thumb{
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s, border-color .15s;
}

.offer-gallery__thumb.is-active,
.offer-gallery__thumb:hover{
  opacity: 1;
  border-color: var(--accent);
}

/* ── Parametry (tabela) ─────────────────────────────────────────────────── */

.offer-params{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-16);
}

.offer-params__item{
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.offer-params__item:nth-last-child(-n+2){
  border-bottom: none;
}

.offer-params__label{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.offer-params__value{
  font-weight: 600;
}

@media (max-width: 480px){
  .offer-params{
    grid-template-columns: 1fr;
  }
  .offer-params__item:nth-last-child(-n+2){
    border-bottom: 1px solid var(--border);
  }
  .offer-params__item:last-child{
    border-bottom: none;
  }
}


/* ── Opis oferty – zwijanie (Rozwiń opis) ──────────────────────────────── */

.offer-detail__desc-body{
  position: relative;
}

.offer-detail__desc-body.is-clamped{
  /* ~8 linijek przy line-height 1.7 i 15px */
  max-height: 13.6em;
  overflow: hidden;
}

.offer-detail__desc-body.is-clamped::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface, #fff));
  pointer-events: none;
}

.offer-detail__desc-toggle{
  margin-top: var(--s-10);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text);
}

.offer-detail__desc-toggle:hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Mini-formularz „Zapytaj o ofertę” ─────────────────────────────────── */

.offer-ask{
  margin-top: var(--s-16);
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offer-ask__title{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.offer-ask__id{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.offer-ask input{
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: #fff;
}

.offer-ask input:focus{
  outline: none;
  border-color: var(--accent);
}

.offer-ask__hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.offer-ask__btn{
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.offer-ask__btn:hover{ opacity: 0.9; }
.offer-ask__btn:disabled{ opacity: 0.6; cursor: default; }

.offer-ask__msg{
  margin: 0;
  font-size: 13px;
  min-height: 1em;
}

.offer-ask__msg.is-ok{ color: #1a7f37; }
.offer-ask__msg.is-err{ color: #c0392b; }

/* Zgody w formularzu „Zapytaj o ofertę" (reużywają klas .consent z newslettera) */
.offer-ask__consents{
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.offer-ask__consents .consent{ font-size: 12px; }
/* reset: checkbox nie ma być rozciągany przez regułę .offer-ask input */
.offer-ask input.consent-input{
  width: 18px;
  height: 18px;
  padding: 0;
}
.offer-ask__note{
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

/* ========================================================================== */
/*  HANDLOWCY / TEAM (strona Handlowcy + sekcja na szczególe oferty)          */
/* ========================================================================== */

.team-section{
  padding: var(--s-16) 0 var(--s-32);
}

.team-intro{
  text-align: center;
  margin-bottom: var(--s-16);
}

.team-intro h1,
.team-intro h2,
.team-intro h3{
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.team-intro p{
  color: var(--muted);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

.team-divider{
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin: 12px auto 0;
  border-radius: 2px;
}

.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.team-card{
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}

.team-card:hover{ box-shadow: 0 6px 28px rgba(0,0,0,.14); }

.team-card__top{
  background: #f5f5f5;
  padding: 32px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-card__photo{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #e6e6e6;
  margin-bottom: 16px;
}

.team-card__name{
  font-size: 1.15rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
  line-height: 1.3;
}

.team-card__role{
  font-size: .82rem;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.team-card__bottom{
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.team-card__contact-link{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: #333;
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: 9px 14px;
  background: #f7f7f7;
  border: 1px solid #eee;
  transition: background .15s, border-color .15s;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.team-card__contact-link:hover{
  background: #f0ece3;
  border-color: var(--accent);
}

.team-card__contact-link[href^="mailto:"]{
  font-size: .72rem;
  gap: 7px;
}

.team-card__contact-link[href^="mailto:"] svg{
  width: 13px;
  height: 13px;
}

.team-card__contact-link svg{
  flex-shrink: 0;
  color: var(--accent);
}

/* Sekcja handlowców na szczególe oferty */
.offer-detail__team{
  border-top: 1px solid var(--border);
  margin-top: var(--s-24);
  padding-top: var(--s-24);
}

@media (max-width: 767px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* ========================================================================== */
/*  SEARCH RESULTS                                                             */
/* ========================================================================== */

.sr-page-title{
  margin: var(--s-28) 0 0;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
}

.sr-count{
  font-size: 15px;
  color: var(--muted);
  margin: var(--s-16) 0 var(--s-28);
}

.sr-count strong{ color: var(--text); }

.sr-loading{
  color: var(--muted);
  margin: var(--s-28) 0;
}

.sr-empty{
  margin: var(--s-28) 0;
  font-size: 16px;
}

.sr-empty__hint{
  color: var(--muted);
  font-size: 14px;
  margin-top: var(--s-8);
}

.sr-empty__hint a{
  color: var(--accent);
  text-decoration: underline;
}

/* ── Sekcja ─────────────────────────────────────────────────────────────── */

.sr-section{
  margin-bottom: var(--s-28);
}

.sr-section__title{
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin: 0 0 var(--s-12);
  padding-bottom: var(--s-10);
  border-bottom: 2px solid var(--border);
}

.sr-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 1px 8px;
  min-width: 22px;
}

/* ── Lista wyników ───────────────────────────────────────────────────────── */

.sr-list{
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.sr-item{
  display: flex;
  gap: var(--s-16);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-16);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sr-item:hover,
.sr-item:focus-visible{
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Miniaturka */
.sr-item__img{
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: block;
}

.sr-item__img--placeholder{
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.sr-item__img--page{
  background: var(--surface-muted);
  border: 1px solid var(--border);
  position: relative;
}

/* Ikona dokumentu w placeholder strony */
.sr-item__img--page::after{
  content: "";
  position: absolute;
  inset: 20px;
  background: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z'/%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'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Treść */
.sr-item__body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.sr-item__tag{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.sr-item__title{
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: var(--text);
}

.sr-item:hover .sr-item__title{
  color: var(--accent);
}

.sr-item__excerpt{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-item__price{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px){
  .sr-item__img{
    width: 64px;
    height: 64px;
  }

  .sr-item{
    gap: var(--s-12);
    padding: var(--s-12);
  }

  .sr-item__title{
    font-size: 14px;
  }
}


/* ========================================================================== */
/*  COOKIE BANNER                                                              */
/* ========================================================================== */

/* ── Pasek dolny ──────────────────────────────────────────────────────────── */
.ck-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  box-shadow: 0 -4px 32px rgba(0,0,0,.1);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ck-bar.ck-visible{
  transform: translateY(0);
}
.ck-bar__inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-16) var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--s-18);
}
.ck-bar__text{ flex: 1; }
.ck-bar__title{
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--text);
}
.ck-bar__desc{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.ck-bar__desc a{
  color: var(--accent);
  text-decoration: underline;
}
.ck-bar__actions{
  display: flex;
  gap: var(--s-8);
  flex-shrink: 0;
  align-items: center;
}

/* ── Przyciski ────────────────────────────────────────────────────────────── */
.ck-btn{
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
  line-height: 1;
}
.ck-btn--accept{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ck-btn--accept:hover{
  background: #b8892e;
  border-color: #b8892e;
}
.ck-btn--reject{
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.ck-btn--reject:hover{
  border-color: var(--text);
}
.ck-btn--settings{
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding-inline: var(--s-12);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck-btn--settings:hover{ color: var(--text); }

/* ── Modal ustawień ───────────────────────────────────────────────────────── */
.ck-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0,0,0,.5);
  align-items: center;
  justify-content: center;
  padding: var(--s-18);
}
.ck-modal.ck-visible{
  display: flex;
}
.ck-modal__box{
  background: var(--surface);
  border-radius: var(--r-lg);
  max-width: 480px;
  width: 100%;
  padding: var(--s-24);
  box-shadow: 0 8px 48px rgba(0,0,0,.22);
}
.ck-modal__title{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 var(--s-16);
  color: var(--text);
}

/* ── Kategoria + toggle ───────────────────────────────────────────────────── */
.ck-category{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--border);
}
.ck-category:last-of-type{ border-bottom: none; }
.ck-category__info{ flex: 1; }
.ck-category__name{
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.ck-category__desc{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Toggle switch */
.ck-toggle{
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-left: var(--s-14);
  cursor: pointer;
}
.ck-toggle input{
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.ck-toggle__track{
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 24px;
  transition: background .2s;
}
.ck-toggle__track::after{
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ck-toggle input:checked + .ck-toggle__track{
  background: var(--accent);
}
.ck-toggle input:checked + .ck-toggle__track::after{
  transform: translateX(20px);
}
.ck-toggle input:disabled + .ck-toggle__track{
  opacity: .55;
  cursor: not-allowed;
}
.ck-toggle input:focus-visible + .ck-toggle__track{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ck-modal__actions{
  display: flex;
  gap: var(--s-8);
  margin-top: var(--s-18);
  justify-content: flex-end;
}

/* ── Link w stopce ────────────────────────────────────────────────────────── */
.ck-settings-link{
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck-settings-link:hover{ color: var(--text); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  .ck-bar__inner{
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-12);
  }
  .ck-bar__actions{
    flex-wrap: wrap;
  }
  .ck-btn--accept,
  .ck-btn--reject{
    flex: 1;
    text-align: center;
  }
  .ck-btn--settings{
    width: 100%;
    text-align: center;
    order: -1;
  }
}


/* ========================================================================== */
/*  AKORDEON (klasa .rozwijane z WordPressa)                                  */
/* ========================================================================== */

.acc-trigger{
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: 14px 44px 14px 18px;
  margin: 10px 0 0;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: background-color .15s, border-color .15s;
}

.acc-trigger:hover{
  background: #f1ede4;
  border-color: var(--accent);
}

.acc-trigger:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.acc-trigger::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: translateY(-75%) rotate(45deg);
  transition: transform .2s;
}

.acc-trigger[aria-expanded="true"]::after{
  transform: translateY(-25%) rotate(-135deg);
}

.acc-body{
  padding: 10px 18px 6px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin-top: -1px;
}

.acc-body--collapsed{ display: none; }