/*
Theme Name: Czop
Theme URI: https://www.meblopartner.pl/
Author: Meblopartner.pl
Description: Klasyczny, samowystarczalny motyw strony meblopartner.pl.
Version: 1.0.0
Requires at least: 5.4
Requires PHP: 7.4
Text Domain: czop
*/

@font-face{font-family:"Bitter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/bitter-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bitter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/bitter-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/roboto-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/roboto-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/roboto-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/roboto-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/roboto-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/roboto-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/roboto-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/roboto-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Role semantyczne rdzenia oraz aliasy skóry Czopu (--czop-*).
   To jedyny blok wartości kolorów; poza nim skóra używa wyłącznie var(). */
:root{
  --czop-grafit:#282828;
  --czop-pomarancz:#ff8000;
  --czop-papier:#faf8f5;
  --kolor-tla:var(--czop-papier);
  --kolor-tla-alternatywnego:#f1ede6;
  --kolor-tla-trzeciego:#e4ded3;
  --kolor-tla-kontrastowego:var(--czop-grafit);
  --kolor-karty:#ffffff;
  --kolor-karty-kontrastowej:#1f1f1f;
  --kolor-tekstu:#1f1f1f;
  --kolor-tekstu-wtornego:#3a3a3a;
  --kolor-metadanych:#5f5f5f;
  --kolor-ui-nietekstowego:#8a8a8a;
  --kolor-obwodki:#8a8a8a;
  --kolor-tekstu-na-kontrascie:#ffffff;
  --kolor-tekstu-wtornego-na-kontrascie:#d9d9d9;
  --kolor-tekstu-trzeciego-na-kontrascie:#b8b8b8;
  --kolor-tekstu-na-akcencie:var(--kolor-tla-kontrastowego);
  --kolor-akcentu:var(--czop-pomarancz);
  --kolor-akcentu-hover:#e06f00;
  --kolor-linku:#a85400;
  --kolor-linku-hover:#8f4a00;
  --kolor-linku-na-kontrascie:var(--kolor-akcentu);
  --kolor-bieli-technicznej:#ffffff;
  --kolor-czerni-technicznej:#000000;
  --kolor-obwodki-druku:#999999;
  --kolor-przezroczysty:rgba(0,0,0,0);
  --kolor-linii:rgba(31,31,31,.12);
  --kolor-linii-mocnej:var(--kolor-ui-nietekstowego);
  --kolor-linii-na-kontrascie:var(--kolor-ui-nietekstowego);
  --kolor-menu-polprzezroczysty:rgba(255,255,255,.08);
  --kolor-nakladki-poczatek:rgba(31,31,31,0);
  --kolor-nakladki-srodek:rgba(31,31,31,.5);
  --kolor-nakladki-koniec:rgba(31,31,31,.8);
  --kolor-akcentu-delikatny:rgba(255,128,0,.10);
  --kolor-akcentu-podkreslenie:rgba(255,128,0,.5);
  --kolor-cienia-1a:rgba(31,31,31,.05);
  --kolor-cienia-2a:rgba(31,31,31,.06);
  --kolor-cienia-2b:rgba(31,31,31,.10);
  --kolor-cienia-3a:rgba(31,31,31,.09);
  --kolor-cienia-3b:rgba(31,31,31,.14);
  --cien-1:0 1px 2px var(--kolor-cienia-1a),0 2px 8px var(--kolor-cienia-1a);
  --cien-2:0 2px 6px var(--kolor-cienia-2a),0 14px 34px var(--kolor-cienia-2b);
  --cien-3:0 4px 14px var(--kolor-cienia-3a),0 26px 60px var(--kolor-cienia-3b);
  --font-wyrozniajacy:"Bitter",Georgia,"Times New Roman","Liberation Serif",serif;
  --font-podstawowy:"Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --rozmiar-mikro:.75rem;
  --rozmiar-meta:.8125rem;
  --rozmiar-maly:.9375rem;
  --rozmiar-tekstu:1.0625rem;
  --rozmiar-lead:clamp(1.0625rem,1rem + .4vw,1.3rem);
  --rozmiar-h3:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --rozmiar-h2:clamp(1.6rem,1.2rem + 1.9vw,2.6rem);
  --rozmiar-marki:clamp(1.05rem,.95rem + .5vw,1.3rem);
  --interlinia-tekstu:1.7;
  --szerokosc-tekstu:35em;
  --odstep-kontenera:clamp(1.15rem,4vw,3rem);
  --szerokosc-kontenera:1180px;
  --odstep-sekcji:clamp(2.75rem,6vw,5rem);
  --czop-odstep-luki:clamp(1.25rem,2.4vw,2rem);
  --promien-maly:4px;
  --promien-duzy:10px;
  --grubosc-sygnatury:4px;
  --czas-przejscia:.22s cubic-bezier(.2,.6,.25,1);
  --wysokosc-naglowka:4.5rem;
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--kolor-tla-kontrastowego);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  min-height:100vh;margin:0;background:var(--kolor-tla);color:var(--kolor-tekstu-wtornego);
  display:flex;flex-direction:column;
  font-family:var(--font-podstawowy);font-size:var(--rozmiar-tekstu);line-height:var(--interlinia-tekstu);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
body>main{flex:1 0 auto}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,blockquote,ul,ol,table{margin:0}
ul,ol{padding:0}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:target{scroll-margin-top:calc(var(--wysokosc-naglowka) + 1.5rem)}
a,button,input,textarea,summary,[tabindex]{scroll-margin-top:calc(var(--wysokosc-naglowka) + 1rem)}

/* ---------------------------------------------------------- 3. TYPOGRAFIA */
h1,h2,h3{font-family:var(--font-wyrozniajacy);color:var(--kolor-tekstu);font-weight:600;line-height:1.22;text-wrap:balance}
h2{font-size:var(--rozmiar-h2)}
h3{font-size:var(--rozmiar-h3)}
p{text-wrap:pretty}
strong,b{font-weight:700;color:var(--kolor-tekstu)}
.lead{font-size:var(--rozmiar-lead);color:var(--kolor-tekstu-wtornego)}
.proza a:not(.przycisk),.stopka a,.panel a{
  color:var(--kolor-linku);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  overflow-wrap:break-word;transition:color var(--czas-przejscia);
}
.proza a:not(.przycisk):hover,.panel a:hover{color:var(--kolor-linku-hover)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--kolor-tla-kontrastowego);outline-offset:2px;border-radius:2px;
  box-shadow:0 0 0 8px var(--kolor-karty);
}
.belka a:focus-visible,.belka summary:focus-visible,.stopka a:focus-visible{
  outline-color:var(--kolor-tekstu-na-kontrascie);box-shadow:0 0 0 5px var(--kolor-tla-kontrastowego);
}
.belka .menu-mobilne__panel a:focus-visible{
  outline-color:var(--kolor-tla-kontrastowego);box-shadow:0 0 0 8px var(--kolor-karty);
}
.pominienie{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--kolor-tla-kontrastowego);color:var(--kolor-tekstu-na-kontrascie);
  padding:.85rem 1.25rem;border-radius:0 0 var(--promien-maly) 0;font-weight:700;
}
.pominienie:focus{left:0}
.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap;
}
.screen-reader-text:focus{
  top:5px;left:5px;z-index:100000;width:auto;height:auto;margin:0;padding:.75rem 1rem;
  clip:auto;clip-path:none;background:var(--kolor-karty);color:var(--kolor-tekstu);
}

/* ------------------------------------------------------------- 4. UKŁAD */
.kontener{width:100%;max-width:var(--szerokosc-kontenera);margin-inline:auto;padding-inline:var(--odstep-kontenera)}
.sekcja{padding-block:var(--odstep-sekcji)}
.sekcja--biel{background:var(--kolor-karty)}
.proza>*+*{margin-top:1.05em}
.proza{max-width:var(--szerokosc-tekstu)}
.proza blockquote{
  border-left:var(--grubosc-sygnatury) solid var(--kolor-akcentu);
  background:var(--kolor-tla-alternatywnego);border-radius:0 var(--promien-maly) var(--promien-maly) 0;
  padding:1.05rem 1.25rem;font-style:italic;color:var(--kolor-tekstu-wtornego);
}
.uklad{display:grid;gap:clamp(1.75rem,3vw,2.75rem);align-items:start}
@media (min-width:1024px){.uklad{grid-template-columns:minmax(0,1fr) 300px}}
.uklad>*{min-width:0}

/* nagłówek sekcji: pomarańczowa kreska pod tytułem (sygnatura) */
.naglowek-sekcji{text-align:center;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.naglowek-sekcji h2{text-transform:uppercase;letter-spacing:.04em}
.naglowek-sekcji h2::after{
  content:"";display:block;width:64px;height:var(--grubosc-sygnatury);margin:.75rem auto 0;
  background:var(--kolor-akcentu);border-radius:2px;
}
.naglowek-sekcji p{margin-top:1rem;color:var(--kolor-metadanych)}

/* ------------------------------------------------------------- 5. BELKA */
.belka{
  position:sticky;top:0;z-index:50;background:var(--kolor-tla-kontrastowego);
  color:var(--kolor-tekstu-na-kontrascie);box-shadow:var(--cien-1);
}
.belka__rzad{display:flex;align-items:center;gap:.6rem 1.25rem;flex-wrap:wrap;
  min-height:var(--wysokosc-naglowka);padding-block:.7rem}
.marka{margin:0;font-size:var(--rozmiar-marki);display:flex;align-items:center;min-width:0;flex:1 1 0;color:var(--kolor-tekstu-na-kontrascie)}
.marka a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;text-decoration:none}
.marka img{width:auto;max-width:min(240px,44vw);height:auto}
@media (max-width:520px){
  .belka__rzad{min-height:0;padding-block:.55rem;gap:.5rem}
  .belka__fb{width:44px;height:44px;flex:0 0 44px}
  .menu-mobilne>summary{padding:.4rem .75rem}
}
.menu{display:none;margin-left:auto}
.menu ul{display:flex;flex-wrap:wrap;justify-content:flex-end;list-style:none;gap:.15rem;margin:0}
.menu a{
  display:inline-flex;align-items:center;min-height:44px;padding:.35rem .85rem;
  text-decoration:none;font-size:var(--rozmiar-maly);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--kolor-tekstu-wtornego-na-kontrascie);
  border-radius:var(--promien-maly);position:relative;transition:color var(--czas-przejscia);
}
.menu a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:2px;
  background:var(--kolor-akcentu);transform:scaleX(0);transform-origin:left;transition:transform var(--czas-przejscia);
}
.menu a:hover{color:var(--kolor-tekstu-na-kontrascie)}
.menu a:hover::after{transform:scaleX(1)}
.menu a[aria-current]{color:var(--kolor-tekstu-na-kontrascie)}
.menu a[aria-current]::after{transform:scaleX(1)}
.belka__fb{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--kolor-linii-na-kontrascie);border-radius:50%;color:var(--kolor-tekstu-na-kontrascie);
  transition:background var(--czas-przejscia),color var(--czas-przejscia);
}
.belka__fb svg{width:19px;height:19px}
.belka__fb:hover{background:var(--kolor-akcentu);color:var(--kolor-tla-kontrastowego);border-color:var(--kolor-akcentu)}
.menu-mobilne{position:relative;margin-left:auto}
.menu-mobilne>summary{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .9rem;
  border:1px solid var(--kolor-linii-na-kontrascie);border-radius:var(--promien-maly);
  background:var(--kolor-menu-polprzezroczysty);color:var(--kolor-tekstu-na-kontrascie);
  font-size:var(--rozmiar-maly);font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;list-style:none;
}
.menu-mobilne>summary::-webkit-details-marker{display:none}
.menu-mobilne>summary svg{width:19px;height:14px}
.menu-mobilne[open]>summary{background:var(--kolor-karty-kontrastowej)}
.menu-mobilne__panel{
  position:absolute;right:0;top:calc(100% + .55rem);z-index:60;
  min-width:min(18rem,calc(100vw - 2 * var(--odstep-kontenera)));
  background:var(--kolor-karty);border-radius:var(--promien-duzy);box-shadow:var(--cien-3);padding:.5rem;
}
.menu-mobilne__panel ul{list-style:none;margin:0}
.menu-mobilne__panel a{
  display:flex;align-items:center;min-height:44px;padding:.5rem .75rem;border-radius:var(--promien-maly);
  text-decoration:none;font-size:var(--rozmiar-maly);font-weight:500;color:var(--kolor-tekstu-wtornego);
  text-transform:uppercase;letter-spacing:.04em;
}
.menu-mobilne__panel a:hover{background:var(--kolor-tla-alternatywnego);color:var(--kolor-tekstu)}
.menu-mobilne__panel a[aria-current]{color:var(--kolor-linku);background:var(--kolor-tla-alternatywnego)}
.menu-mobilne__panel li+li{border-top:1px solid var(--kolor-linii)}
@media (min-width:820px){.menu{display:block}.menu-mobilne{display:none}}

/* ---------------------------------------------------------------- 6. HERO
   Zdjęcie realizacji jest najlepszym, co ten serwis ma — dostaje więc tyle miejsca,
   ile się da, przy MINIMALNYM kadrowaniu. Wysokość to mniejsza z dwóch wartości:
   88vh (żeby zawsze zostało widać, że strona ma ciąg dalszy) i 66,9vw, czyli
   naturalna proporcja pliku 1900 x 1271 — powyżej tej wartości nie ma już czego
   kadrować. Na wąskim ekranie dochodzi dolny próg 20rem, żeby przyciski miały
   na czym stanąć. Kadr jest wyśrodkowany, więc ewentualne ucięcie rozkłada się
   po równo na górę i dół. */
.hero{position:relative;min-height:20rem;background:var(--kolor-tla-kontrastowego);isolation:isolate}
.hero__foto{
  width:100%;
  height:max(20rem,min(88vh,66.9vw));
  max-width:min(100%,var(--czop-hero-max-width,100%));max-height:var(--czop-hero-max-height,none);margin-inline:auto;
  object-fit:cover;object-position:var(--czop-hero-pozycja,center center);
}
.hero__nakladka{
  background:var(--kolor-karty);border-bottom:1px solid var(--kolor-linii);
  padding-block:clamp(1.15rem,2.5vw,1.6rem);
}
@media (min-width:640px){
  /* na szerszym ekranie przyciski wchodzą NA zdjęcie — na wąskim zasłoniłyby je prawie w całości */
  .hero__nakladka{
    position:absolute;left:0;right:0;bottom:0;z-index:1;border-bottom:0;
    padding-block:clamp(1.5rem,4vw,3rem);
    background:linear-gradient(180deg,var(--kolor-nakladki-poczatek) 0%,var(--kolor-nakladki-srodek) 45%,var(--kolor-nakladki-koniec) 100%);
  }
}
.pas-akcji__rzad{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;
}
/* zapasowy pas pod zdjęciem — używany tylko tam, gdzie nakładka nie ma sensu */
.pas-akcji{background:var(--kolor-karty);border-bottom:1px solid var(--kolor-linii)}
.pas-akcji .pas-akcji__rzad{padding-block:clamp(1.25rem,2.5vw,1.85rem)}

/* ------------------------------------------------------------ 7. PRZYCISKI */
.przycisk{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.75rem 1.75rem;border:2px solid var(--kolor-przezroczysty);border-radius:var(--promien-maly);
  font-family:var(--font-podstawowy);font-weight:700;font-size:var(--rozmiar-tekstu);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background var(--czas-przejscia),color var(--czas-przejscia),border-color var(--czas-przejscia),transform var(--czas-przejscia);
}
.przycisk svg{width:20px;height:20px;flex:0 0 20px}
.przycisk--pomarancz{background:var(--kolor-akcentu);color:var(--kolor-tla-kontrastowego);border-color:var(--kolor-akcentu)}
.przycisk--pomarancz:hover{background:var(--kolor-akcentu-hover);border-color:var(--kolor-akcentu-hover);transform:translateY(-1px)}
.przycisk--obrys{background:var(--kolor-przezroczysty);color:var(--kolor-tekstu);border-color:var(--kolor-linii-mocnej)}
.przycisk--obrys:hover{border-color:var(--kolor-tla-kontrastowego);background:var(--kolor-karty)}
/* przycisk NA ZDJĘCIU: pełne tło, żeby kontrast nie zależał od fotografii */
.przycisk--biel{background:var(--kolor-karty);color:var(--kolor-tekstu);border-color:var(--kolor-karty)}
.przycisk--biel:hover{background:var(--kolor-tla-alternatywnego);border-color:var(--kolor-tla-alternatywnego);transform:translateY(-1px)}
@media (max-width:639px){
  /* pod zdjęciem pas jest biały — biały przycisk musi dostać widoczną obwódkę */
  .przycisk--biel{background:var(--kolor-przezroczysty);color:var(--kolor-tekstu);border-color:var(--kolor-linii-mocnej)}
  .przycisk--biel:hover{background:var(--kolor-tla-alternatywnego);border-color:var(--kolor-tla-kontrastowego)}
}

/* --------------------------------------------------------- 8. KARTY ATUTÓW */
.telefon-glowny{
  text-align:center;font-family:var(--font-wyrozniajacy);font-weight:600;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.65rem);color:var(--kolor-tekstu);
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.telefon-glowny a{display:inline-flex;align-items:center;min-height:44px}
.atuty{display:grid;gap:var(--czop-odstep-luki)}
@media (min-width:760px){.atuty{grid-template-columns:repeat(3,minmax(0,1fr))}}
.atut{
  background:var(--kolor-karty);border-radius:var(--promien-duzy);padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--cien-1);text-align:center;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.8rem;
  transition:transform var(--czas-przejscia),box-shadow var(--czas-przejscia);
}
.atut::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--grubosc-sygnatury);
  background:var(--kolor-akcentu);transform:scaleX(0);transform-origin:left;transition:transform var(--czas-przejscia);
}
.atut:hover{transform:translateY(-3px);box-shadow:var(--cien-2)}
.atut:hover::before{transform:scaleX(1)}
/* Ikona jest elementem nietekstowym WCAG 1.4.11. Używa roli linku o kontraście
   ponad 3:1 zamiast jaśniejszej powierzchni akcentowej. */
.atut__ikona{
  width:56px;height:56px;margin:0 auto .35rem;color:var(--kolor-linku);
  display:grid;place-items:center;
}
.atut__ikona svg{width:100%;height:100%}
.atut h3{font-size:var(--rozmiar-h3)}
.atut p{color:var(--kolor-tekstu-wtornego);font-size:var(--rozmiar-maly)}

/* --------------------------------------------------------- 9. KARTA TREŚCI */
.karta-tresci{
  background:var(--kolor-karty);border-radius:var(--promien-duzy);
  padding:clamp(1.35rem,3vw,2.75rem);box-shadow:var(--cien-1);
  border-top:var(--grubosc-sygnatury) solid var(--kolor-akcentu);
}
.karta-tresci .proza{max-width:none}
.karta-tresci .proza>p,.karta-tresci .proza>blockquote,.karta-tresci .proza>ul{max-width:var(--szerokosc-tekstu)}
.tytul-strony{margin-bottom:clamp(1.25rem,2.5vw,1.9rem)}
.tytul-strony h2{position:relative;padding-bottom:.75rem}
.tytul-strony h2::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:var(--grubosc-sygnatury);
  background:var(--kolor-akcentu);border-radius:2px;
}

/* ------------------------------------------------------- 10. PANEL BOCZNY */
.panel{display:grid;gap:clamp(1.25rem,2.4vw,1.75rem)}
.widget{background:var(--kolor-karty);border-radius:var(--promien-duzy);box-shadow:var(--cien-1);overflow:hidden}
.widget__wnetrze{padding:1.15rem}
.szukajka{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap}
.szukajka__pole{
  flex:1 1 9rem;min-width:0;border:1px solid var(--kolor-obwodki);border-radius:var(--promien-maly);
  padding:.6rem .85rem;font-size:var(--rozmiar-maly);background:var(--kolor-karty);min-height:48px;
}
.szukajka__pole::placeholder{color:var(--kolor-metadanych)}
.szukajka__guzik{
  flex:0 0 auto;min-height:48px;padding:.6rem 1.15rem;border:2px solid var(--kolor-tla-kontrastowego);
  background:var(--kolor-tla-kontrastowego);color:var(--kolor-tekstu-na-kontrascie);border-radius:var(--promien-maly);
  font-weight:700;font-size:var(--rozmiar-maly);cursor:pointer;transition:background var(--czas-przejscia);
}
.szukajka__guzik:hover{background:var(--kolor-akcentu);border-color:var(--kolor-akcentu);color:var(--kolor-tla-kontrastowego)}
.reklama{display:block;border-radius:var(--promien-maly);overflow:hidden;background:var(--kolor-tla-trzeciego)}
.reklama img{width:100%;height:auto}

/* ---------------------------------------------------------- 11. STOPKA */
.stopka{background:var(--kolor-tla-kontrastowego);color:var(--kolor-tekstu-wtornego-na-kontrascie);border-top:var(--grubosc-sygnatury) solid var(--kolor-akcentu)}
.stopka__rzad{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-block:clamp(1.75rem,3.5vw,2.5rem);font-size:var(--rozmiar-maly);
}
.stopka a{color:var(--kolor-linku-na-kontrascie);text-decoration-color:var(--kolor-akcentu-podkreslenie)}
.stopka a:hover{color:var(--kolor-tekstu-na-kontrascie)}
.stopka strong,.stopka b{color:var(--kolor-tekstu-na-kontrascie)}
.do-gory{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--kolor-linii-na-kontrascie);border-radius:var(--promien-maly);color:var(--kolor-tekstu-na-kontrascie);
  transition:background var(--czas-przejscia),color var(--czas-przejscia);flex:0 0 44px;
}
.do-gory svg{width:20px;height:20px}
.stopka .do-gory:hover{background:var(--kolor-akcentu);color:var(--kolor-tla-kontrastowego);border-color:var(--kolor-akcentu)}

/* --------------------------------------------------------- 12. SPECIMEN */
.probka{display:grid;gap:1rem;margin-block:1.5rem}
@media (min-width:640px){.probka--kolory{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}}
.probka-kolor{border-radius:var(--promien-maly);overflow:hidden;background:var(--kolor-karty);box-shadow:var(--cien-1)}
.probka-kolor__plama{height:66px}
.probka-kolor__opis{padding:.7rem .85rem;font-size:var(--rozmiar-meta);color:var(--kolor-metadanych)}
.probka-kolor__opis b{display:block;color:var(--kolor-tekstu);font-size:var(--rozmiar-maly)}
.tabelka{width:100%;border-collapse:collapse;font-size:var(--rozmiar-maly)}
.tabelka th,.tabelka td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--kolor-linii);vertical-align:top}
.tabelka th{color:var(--kolor-tekstu);font-weight:700}
.tabela-otoczka{overflow-x:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.9em;background:var(--kolor-tla-alternatywnego);padding:.1em .35em;border-radius:3px}

/* -------------------------------------------------------- 13. UDOGODNIENIA */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{
  .belka,.stopka,.menu-mobilne,.szukajka,.reklama,.do-gory{display:none !important}
  body{background:var(--kolor-bieli-technicznej);color:var(--kolor-czerni-technicznej);font-size:11pt}
  .hero__foto{max-height:8cm}
  .atut,.karta-tresci,.widget{box-shadow:none;border:1px solid var(--kolor-obwodki-druku);break-inside:avoid}
  a{text-decoration:underline}
}

/* ---------------------------------------------------- 14. INTEGRACJA WORDPRESS */
.marka__logo{width:auto;max-width:min(240px,44vw);height:auto}
.karty-uslug__wewnatrz{width:100%}
.karty-uslug__tytul,.karty-uslug__nazwa{font-family:var(--font-wyrozniajacy)}
.karty-uslug__tresc{margin:0}
.slot-reklamowy__wnetrze{display:grid;padding:0;place-items:center}
.slot-reklamowy__link,.slot-reklamowy__zawartosc{
  display:grid;width:100%;max-width:300px;aspect-ratio:300/250;place-items:center;overflow:hidden;
  border-radius:var(--promien-maly);background:var(--kolor-karty);
}
.slot-reklamowy__obraz{
  width:100%;height:100%;max-width:min(100%,var(--czop-slot-max-width,100%));max-height:min(100%,var(--czop-slot-max-height,100%));
  object-fit:cover;
}
.zalacznik figure{display:grid;place-items:center}
.zalacznik__obraz{width:auto;max-width:100%;height:auto;margin-inline:auto}
.zalacznik .proza{margin-top:var(--czop-odstep-luki)}
.kontener--waski{max-width:52rem}
.naglowek-widoku{margin-bottom:var(--czop-odstep-luki)}
.naglowek-widoku h2{position:relative;padding-bottom:.75rem}
.naglowek-widoku h2::after{
  position:absolute;bottom:0;left:0;width:64px;height:var(--grubosc-sygnatury);
  border-radius:2px;background:var(--kolor-akcentu);content:"";
}
.lista-wynikow{display:grid;gap:var(--czop-odstep-luki)}
.karta-wyniku h3 a{text-decoration:none}
.stan-pusty,.stan-404{max-width:44rem}
.navigation.pagination{margin-top:var(--czop-odstep-luki)}
.nav-links{display:flex;flex-wrap:wrap;gap:.5rem}
.page-numbers{display:grid;min-width:44px;min-height:44px;padding:.35rem;place-items:center}
.stopka .do-gory{color:var(--kolor-akcentu)}
.alignleft{float:left;margin:0 var(--czop-odstep-luki) var(--czop-odstep-luki) 0}
.alignright{float:right;margin:0 0 var(--czop-odstep-luki) var(--czop-odstep-luki)}
.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text{color:var(--kolor-metadanych);font-size:var(--rozmiar-maly)}

@media (min-width:783px){.admin-bar .belka{top:32px}}
@media (max-width:782px){.admin-bar .belka{top:46px}}