/* ==== TYPOGRAFIA: system docelowy ====
   Zrodlo: audyt-typografii/typografia.css (skill framer-typografia)
   Nie edytuj recznie. Zmieniasz typografia.yml i przeliczasz. */
/* Euroser - typografia RWD */
/* RATIO 1.333 | kompresja 107/92/78/66 */

/* Poziom bazowy: szerokosc >= 1200px */
:root {
  --fs-h2: 3.375rem;                  /* 54px */
  --fs-h3: 2.5rem;                    /* 40px */
  --fs-h4: 1.8125rem;                 /* 29px */
  --fs-h5: 1.5625rem;                 /* 25px */
  --fs-h6: 1.375rem;                  /* 22px */
  --fs-body-lead: 1.25rem;            /* 20px */
  --fs-body: 1rem;                    /* 16px */
  --fs-body-bold: 1rem;               /* 16px */
  --fs-button: 0.875rem;              /* 14px */
  --fs-body-sm: 0.875rem;             /* 14px */
  --fs-caption: 0.8125rem;            /* 13px */
  --fs-eyebrow: 0.75rem;              /* 12px */
  --fs-h1: 4.5625rem;                 /* 73px */
  --fs-lead: 1.25rem;                 /* 20px */
  --fs-stat: 4.5625rem;               /* 73px */
  --lh-h2: 1.0em;
  --lh-h3: 1.0em;
  --lh-h4: 1.3em;
  --lh-h5: 1.4em;
  --lh-h6: 1.4em;
  --lh-body-lead: 1.5em;
  --lh-body: 1.5em;
  --lh-body-bold: 1.5em;
  --lh-button: 1.4em;
  --lh-body-sm: 1.5em;
  --lh-caption: 1.5em;
  --lh-eyebrow: 1.5em;
  --lh-h1: 1.0em;
  --lh-lead: 1.25em;
  --lh-stat: 1.0em;
  --ls-h2: -0.025em;
  --ls-h3: -0.025em;
  --ls-h4: -0.02em;
  --ls-h5: -0.02em;
  --ls-h6: -0.02em;
  --ls-body-lead: -0.02em;
  --ls-body: -0.02em;
  --ls-body-bold: -0.02em;
  --ls-button: 0.01em;
  --ls-body-sm: 0.01em;
  --ls-caption: 0.02em;
  --ls-eyebrow: 0.25em;
  --ls-h1: -0.03em;
  --ls-lead: -0.01em;
  --ls-stat: -0.02em;
}

/* breakpoint 1024px: dziala od 1199.98px w dol */
@media (max-width: 1199.98px) {
  :root {
    --fs-h2: 2.9375rem;                 /* 47px */
    --fs-h3: 2.25rem;                   /* 36px */
    --fs-h4: 1.6875rem;                 /* 27px */
    --fs-h5: 1.5rem;                    /* 24px */
    --fs-h6: 1.3125rem;                 /* 21px */
    --fs-h1: 3.8125rem;                 /* 61px */
    --fs-stat: 3.8125rem;               /* 61px */
  }
}

/* breakpoint 768px: dziala od 1023.98px w dol */
@media (max-width: 1023.98px) {
  :root {
    --fs-h2: 2.5rem;                    /* 40px */
    --fs-h3: 2rem;                      /* 32px */
    --fs-h4: 1.5625rem;                 /* 25px */
    --fs-h5: 1.4375rem;                 /* 23px */
    --fs-h6: 1.25rem;                   /* 20px */
    --fs-body-lead: 1.1875rem;          /* 19px */
    --fs-h1: 3.1875rem;                 /* 51px */
    --fs-lead: 1.1875rem;               /* 19px */
    --fs-stat: 3.1875rem;               /* 51px */
  }
}

/* breakpoint 390px: dziala od 767.98px w dol */
@media (max-width: 767.98px) {
  :root {
    --fs-h2: 2.1875rem;                 /* 35px */
    --fs-h3: 1.8125rem;                 /* 29px */
    --fs-h4: 1.5rem;                    /* 24px */
    --fs-h5: 1.375rem;                  /* 22px */
    --fs-h1: 2.6875rem;                 /* 43px */
    --fs-stat: 2.6875rem;               /* 43px */
  }
}

/* Benning Cheese (Euroser) - wspolny arkusz stylow prototypu.
   Wspolna baza design systemu (naglowek, stopka, przyciski, typografia, komponenty).
   Reguly rozne dla danej strony (np. nav nad hero, kolory hero) zostaja w jej <style>. */

:root{--cream:#FFFFFF;--paper:#FFFFFF;--stone:#F3F3F4;--ink:#1A1F33;--muted:#5B6280;--line:#E5E5E8;--wine:#242F65;--wine-deep:#1A2249;--wine-soft:#E9EBF3;--gold:#efc86f;--gold-deep:#e0b24d;--gold-soft:#f6ebc5;--serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--maxw:1280px;--gold-band:color-mix(in srgb,var(--gold-soft) 34%,#fff);--gold-grad:linear-gradient(155deg,#F2DEA6 0%,var(--gold-soft) 38%,var(--gold-band) 100%);}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--wine);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.bg-gold{background:var(--gold-grad)}
@media(max-width:1023.98px){.wrap{padding:0 24px}}
@media(max-width:767.98px){.wrap{padding:0 20px}}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:4px}
/* Nagłówki biorą wszystko ze skali: rozmiar, wagę, interlinię i światło. Bez wartości z palca -
   zmiana idzie z typografia.yml przez style.css. Znacznik mapuje się na krok skali tak, jak
   w design systemie: h1 w treści = krok H2, h2 = H3, niżej analogicznie. Hero nadpisuje h1 na --fs-h1. */
h1,h2,h3,h4,h5,h6{font-family:var(--serif);margin:0;text-wrap:balance}
/* Blok nagłówka sekcji: jedna szerokość dla całego serwisu. Przy kroku H2 (54 px)
   węższe kontenery łamały tytuły na sieroty - stąd 860 px i wyważone łamanie. */
.sec-head{max-width:860px}
.sec-head .lead,.sec-head.center .lead{max-width:62ch;text-wrap:pretty}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
h1{font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h2{font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h4);font-weight:500;line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
h4{font-size:var(--fs-h5);font-weight:500;line-height:var(--lh-h5);letter-spacing:var(--ls-h5)}
h5{font-size:var(--fs-h6);font-weight:500;line-height:var(--lh-h6);letter-spacing:var(--ls-h6)}
h6{font-size:var(--fs-h6);font-weight:500;line-height:var(--lh-h6);letter-spacing:var(--ls-h6)}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:11px;padding:14px 26px;font-weight:600;font-size:var(--fs-button);letter-spacing:.005em;cursor:pointer;border:1.5px solid transparent;transition:.18s}
.btn-primary{background:var(--wine);color:#fff}
.btn-primary:hover{background:var(--wine-deep)}
.btn-gold{background:var(--gold);color:var(--wine);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--wine)}
/* Złota obwódka -> hover: złote wypełnienie z granatowym tekstem */
.btn-gold-outline{background:transparent;border-color:var(--gold);color:var(--gold-deep)}
.btn-gold-outline:hover{background:var(--gold);border-color:var(--gold);color:var(--wine)}
/* Anuluj w modalu RFQ zostaje neutralny (nie złoty) - to akcja drugorzędna */
.btn-ghost[data-close]{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-ghost[data-close]:hover{background:var(--stone);border-color:var(--line);color:var(--ink)}
.btn-sm{padding:10px 16px;font-size:var(--fs-button);border-radius:10px}
/* Flaga kraju (baza images/flags/*.svg) */
.flag{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(20,24,40,.12);flex:none;display:inline-block;vertical-align:middle}
.with-flag{display:inline-flex;align-items:center;gap:8px}
/* Karta produktu (siatka): czytelna linia specyfikacji - Format (mocny) + SKU (wyszarzony) */
.pcard .cecha{display:flex;flex-direction:column;gap:2px}
.pcard .c-fmt{color:var(--ink);font-weight:600;font-size:var(--fs-caption);line-height:1.35}
.pcard .c-sku{color:var(--muted);font-size:var(--fs-eyebrow);letter-spacing:.03em}
/* Profil smaku (uwagi klienta 07.09.2026) - w miejscu kodu EAN, dwa słowa */
.pcard .c-smak{color:var(--muted);font-size:var(--fs-caption);font-style:italic}
.lnk{font-weight:600;color:var(--wine);display:inline-flex;gap:6px;align-items:center}
.lnk:hover{gap:10px}
header.nav{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--line);transition:transform .35s ease,background .3s ease,border-color .3s ease}
header.nav.hide{transform:translateY(-100%)}
/* Podstrony z ciemnym hero: przezroczysty nagłówek nad hero (białe logo pionowe), solidny po scrollu - jak na stronie głównej */
body:has(.heroslider) header.nav,body:has(.bhero) header.nav{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent}
body:has(.heroslider) header.nav.scrolled,body:has(.bhero) header.nav.scrolled{background:var(--cream);border-bottom:1px solid var(--line)}
body:has(.heroslider) header.nav:not(.scrolled) .logo,body:has(.bhero) header.nav:not(.scrolled) .logo,body:has(.heroslider) header.nav:not(.scrolled) .logo small,body:has(.bhero) header.nav:not(.scrolled) .logo small,body:has(.heroslider) header.nav:not(.scrolled) nav.menu a,body:has(.bhero) header.nav:not(.scrolled) nav.menu a,body:has(.heroslider) header.nav:not(.scrolled) .mega-trigger,body:has(.bhero) header.nav:not(.scrolled) .mega-trigger{color:#fff}
body:has(.heroslider) header.nav:not(.scrolled) .logo-default,body:has(.bhero) header.nav:not(.scrolled) .logo-default{display:none}
body:has(.heroslider) header.nav:not(.scrolled) .logo-white,body:has(.bhero) header.nav:not(.scrolled) .logo-white{display:none}
body:has(.heroslider) header.nav:not(.scrolled) .logo-vert,body:has(.bhero) header.nav:not(.scrolled) .logo-vert{display:block}
body:has(.heroslider) header.nav:not(.scrolled) nav.menu a:hover,body:has(.bhero) header.nav:not(.scrolled) nav.menu a:hover{color:#fff}
body:has(.heroslider) header.nav:not(.scrolled) .lang,body:has(.bhero) header.nav:not(.scrolled) .lang{border-color:rgba(255,255,255,.5)}
body:has(.heroslider) header.nav:not(.scrolled) .lang button,body:has(.bhero) header.nav:not(.scrolled) .lang button{color:rgba(255,255,255,.8)}
body:has(.heroslider) header.nav:not(.scrolled) .lang button.on,body:has(.bhero) header.nav:not(.scrolled) .lang button.on{background:#fff;color:var(--wine)}
body:has(.heroslider) header.nav:not(.scrolled) .search,body:has(.bhero) header.nav:not(.scrolled) .search{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.85)}
body:has(.heroslider) header.nav:not(.scrolled) .search input,body:has(.bhero) header.nav:not(.scrolled) .search input,body:has(.heroslider) header.nav:not(.scrolled) .search .ic,body:has(.bhero) header.nav:not(.scrolled) .search .ic{color:#fff}
body:has(.heroslider) header.nav:not(.scrolled) .search input::placeholder,body:has(.bhero) header.nav:not(.scrolled) .search input::placeholder{color:#fff;opacity:.92}
body:has(.heroslider) header.nav:not(.scrolled) nav.menu .mega a,body:has(.bhero) header.nav:not(.scrolled) nav.menu .mega a{color:var(--wine)}
body:has(.heroslider) header.nav:not(.scrolled) nav.menu .mega a:hover,body:has(.bhero) header.nav:not(.scrolled) nav.menu .mega a:hover{color:var(--wine-deep)}
body:has(.heroslider) header.nav:not(.scrolled) nav.menu .mega .lnk,body:has(.bhero) header.nav:not(.scrolled) nav.menu .mega .lnk{color:var(--wine)}
/* Wyższy pasek na starcie (większe logo pionowe), węższy po scrollu - home + podstrony z hero */
body:has(.heroslider) header.nav:not(.scrolled) .nav-in,body:has(.bhero) header.nav:not(.scrolled) .nav-in{height:96px}
body:has(.heroslider) header.nav:not(.scrolled) .logo-vert,body:has(.bhero) header.nav:not(.scrolled) .logo-vert{height:clamp(56px,7vw,80px)}
body:has(.bhero) .bhero .crumb{padding-top:110px}
/* Mobile: niższa nawigacja + mniejsze logo pionowe, mniejsze paddingi */
@media(max-width:767.98px){
  body:has(.heroslider) header.nav:not(.scrolled) .nav-in,body:has(.bhero) header.nav:not(.scrolled) .nav-in{height:76px}
  body:has(.heroslider) header.nav:not(.scrolled) .logo-vert,body:has(.bhero) header.nav:not(.scrolled) .logo-vert{height:50px}
  body:has(.bhero) .bhero .crumb{padding-top:84px;padding-bottom:24px}
}
.nav-in{display:flex;align-items:center;gap:26px;height:72px}
.logo{display:inline-flex;align-items:center;font-family:var(--serif);font-size:var(--fs-h5);font-weight:500}
.logo img{height:56px;width:auto;aspect-ratio:305.4/207.2;display:block}
.logo .logo-white{display:none}
.logo .logo-vert{display:none;height:clamp(54px,7vw,88px);width:auto;aspect-ratio:auto}
.logo small{display:block;font-family:var(--sans);font-size:var(--fs-eyebrow);letter-spacing:.2em;color:var(--muted);font-weight:700;text-transform:uppercase;margin-top:1px}
@media(max-width:767.98px){.logo img{height:56px}}
nav.menu{display:flex;gap:24px;font-size:var(--fs-body);font-weight:500}
nav.menu a{padding:4px 0}
nav.menu a:hover,nav.menu a.on{color:var(--wine)}
/* Menu główne: złota kreska pod pozycją po najechaniu (ten sam motyw co wyróżnienie w mega) */
nav.menu>a,nav.menu .mega-trigger{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .2s,color .18s}
nav.menu>a:hover,nav.menu>a.on,.has-mega:hover>.mega-trigger,.has-mega:focus-within>.mega-trigger{text-decoration-color:var(--gold-deep)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
/* Szukaj (uwagi klienta 07.09.2026): mocniejszy kontrast - granatowa ramka, jasne tło, granatowa ikona i placeholder.
   Zostaje w prawym górnym rogu: to standardowe miejsce, którego użytkownicy szukają w pierwszej kolejności. */
.search{position:relative;display:flex;align-items:center;gap:9px;border:1.5px solid var(--wine);border-radius:9px;padding:8px 13px;background:var(--stone);min-width:240px}
.search .ic{color:var(--wine);display:inline-flex;align-items:center;flex:none}
.search input{border:0;background:transparent;outline:none;font:inherit;font-size:var(--fs-body-sm);width:100%;color:var(--ink)}
.search input::placeholder{color:var(--wine);opacity:.78}
/* Szukaj: złota obwódka na hover i gdy pole jest aktywne (także nad ciemnym hero) */
header.nav .nav-right .search{transition:border-color .18s,box-shadow .18s,background .18s}
header.nav .nav-right .search:hover,header.nav .nav-right .search:focus-within{border-color:var(--gold-deep);background:var(--paper);box-shadow:0 0 0 3px rgba(224,178,77,.28)}
header.nav .nav-right .search:hover .ic,header.nav .nav-right .search:focus-within .ic{color:var(--gold-deep)}
header.nav .nav-right .search:hover input,header.nav .nav-right .search:focus-within input{color:var(--ink)}
header.nav .nav-right .search:hover input::placeholder,header.nav .nav-right .search:focus-within input::placeholder{color:var(--muted);opacity:1}
.search input:focus-visible{outline:none}
.mm-search input:hover,.mm-search input:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(224,178,77,.28)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang button{background:transparent;border:0;padding:7px 11px;font:inherit;font-size:var(--fs-button);font-weight:700;color:var(--muted);cursor:pointer;transition:color .15s}
.lang button:not(.on):hover{color:var(--wine)}
.lang button.on{background:var(--wine);color:#fff}
/* Hamburger (uwagi klienta 07.09.2026): kontrastowy - granatowy kafel z białymi kreskami; nad hero biały obrys */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:46px;border-radius:11px;background:var(--gold);border:1.5px solid var(--gold);cursor:pointer;padding:0;flex:none}
.burger span{width:22px;height:2.5px;background:var(--wine);border-radius:2px}
/* Zakres 941-1200px: pełne menu bywa ciasne - blokada łamania + zwężenie odstępów i wyszukiwarki, by wszystko się mieściło */
header.nav nav.menu a{white-space:nowrap}
@media(max-width:1199.98px){
  header.nav .nav-in{gap:18px}
  header.nav nav.menu{gap:18px}
  header.nav .search{min-width:140px}
}
@media(max-width:1199.98px){
  header.nav .nav-in{gap:14px}
  header.nav nav.menu{gap:14px;font-size:var(--fs-body-sm)}
  header.nav .search{min-width:120px}
}
.mmenu{display:none;background:var(--paper);border-bottom:1px solid var(--line);max-height:calc(100vh - 72px);overflow-y:auto}
.mmenu.open{display:block}
.mm-search{display:flex;gap:8px;padding:14px 28px;border-top:1px solid var(--line)}
.mm-search input{flex:1;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:inherit;background:var(--paper);outline:none}
.mmenu a{display:block;padding:15px 28px;font-weight:600;border-top:1px solid var(--line)}
.mm-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 28px;border-top:1px solid var(--line)}
.mm-lang>span{font-weight:600;color:var(--ink)}
.mm-lang .lang{flex:none;overflow:hidden}
.mm-lang .lang button+button{border-left:1px solid var(--line)}
/* selektor po #mm (ID) wygrywa nad regulami przezroczystego naglowka, ktore robily bialy tekst */
#mm .lang{border:1px solid var(--line);border-radius:9px}
#mm .lang button{padding:10px 20px;font-size:var(--fs-button);font-weight:700;color:var(--muted)}
#mm .lang button.on{background:var(--gold);color:var(--wine)}
/* Przełącznik języka: reguła .lang{display:none} na mobile ukrywa też stopkę i menu - odsłaniamy je z powrotem */
@media(max-width:1199.98px){.lang.lang-ft{display:inline-flex}.mmenu .lang{display:inline-flex}}
.has-mega{position:relative;display:flex;align-items:center}
.mega-trigger{display:flex;align-items:center;gap:7px}
.mega-trigger::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.45}
.mega{position:absolute;left:0;right:auto;top:100%;width:min(660px,92vw);padding-top:14px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:55}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
/* Mega menu: lewa kolumna (lead + opis) na jasnoszarym podlewie od krawędzi do krawędzi (uwaga Łukasza 07.09.2026) */
.mega-in{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(20,24,40,.20);padding:0;display:grid;gap:0;overflow:hidden}
.mega-in .col{padding:26px 24px 28px}
.mega-in .col:first-child{background:var(--stone);padding:26px 30px 28px}
.mega-in .col:last-child{padding-right:34px}
.mega--cat{width:min(720px,92vw)}
.mega--cat .mega-in{grid-template-columns:1fr 1.7fr}
.mega--cat .mega-in .col:last-child{padding-left:34px;padding-right:44px}
.mega--seg{width:min(800px,94vw)}
.mega--seg .mega-in{grid-template-columns:1.2fr .68fr 1.05fr}
.seg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mega .col a.seg-tile{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:10px;color:var(--ink)}
.mega .col a.seg-tile:hover{background:color-mix(in srgb,var(--wine) 6%,var(--paper))}
.mega .col a.seg-tile:hover h5{color:var(--wine)}
.seg-tile .ic{flex:none;width:44px;height:44px;border-radius:10px;border:1px dashed var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:var(--fs-eyebrow);text-transform:uppercase;color:var(--muted)}
.seg-tile h5{font-family:var(--sans);font-weight:700;font-size:var(--fs-body);margin:2px 0 4px}
.seg-tile p{font-size:var(--fs-caption);color:var(--muted);line-height:1.45;margin:0}
.link-grid{columns:2;column-gap:44px}
.link-grid a{break-inside:avoid}
.mega .lead{font-family:var(--serif);font-size:var(--fs-lead);margin:0 0 16px}
.mega-desc{font-size:var(--fs-body-sm);color:var(--muted);line-height:1.55;margin:0 0 16px}
.mega h4{font-family:var(--sans);font-size:var(--fs-eyebrow);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
/* Pozycje w mega menu: złote podświetlenie po najechaniu - ten sam efekt co w podpowiedziach wyszukiwarki (uwaga Łukasza 07.09.2026) */
.mega .col a{display:block;padding:7px 10px;margin:0 -10px;border-radius:8px;font-weight:600;font-size:var(--fs-body);color:var(--wine);transition:background .15s,color .15s}
.mega .col a:hover{background:var(--gold-soft);color:var(--wine)}
.mega .col a.lnk{display:inline-flex;padding:7px 10px}
.mega .col a.lnk:hover{background:var(--gold-soft)}
.mega-search{display:flex;gap:8px;background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 14px;margin-bottom:16px}
.mega-search input{flex:1;border:0;background:transparent;outline:none;font:inherit;font-size:var(--fs-body-sm)}
/* Wyróżnienie Private Label w menu (uwagi klienta 01.09.2026): pogrubienie + złoty znacznik */
.mega .col a.mega-hl,.mmenu a.mm-hl{text-decoration:underline;text-decoration-color:var(--gold-deep);text-decoration-thickness:2px;text-underline-offset:4px}
.mega .col a.mega-hl:hover{text-decoration-color:var(--wine)}
/* Mega "O nas" - węższe, 2 kolumny */
.mega--firma{width:min(560px,92vw)}
.mega--firma .mega-in{grid-template-columns:1.1fr 1fr}
@media(max-width:1023.98px){.mega{display:none}}
.crumb{padding:22px 0 0;font-size:var(--fs-caption);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumb a:hover{color:var(--wine)}
.crumb .sep{opacity:.5}
.crumb b{color:var(--ink);font-weight:600}
.mhead{padding:80px 0;max-width:720px}
.mhead h1{margin:12px 0 0}
.mhead p{color:var(--muted);font-size:var(--fs-body);margin:16px 0 0}
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:20px}
.bcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;border-radius:18px;overflow:hidden;border:0;padding:28px;color:#fff;transition:transform .3s,box-shadow .3s}
.bcard:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(20,24,40,.22)}
.bcard .g{position:absolute;inset:0;background:var(--g,linear-gradient(150deg,#242F65,#141A33 58%,#0D1220));transition:transform .6s}
.bcard:hover .g{transform:scale(1.05)}
.bcard .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,36,.12) 28%,rgba(16,20,36,.74))}
.bcard .badge{position:absolute;top:18px;right:18px;z-index:2;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;font-size:var(--fs-eyebrow);font-weight:700}
.bcard .body{position:relative;z-index:2}
.bcard h3{font-family:var(--serif);font-weight:500;font-size:var(--fs-h4);color:#fff;margin:0 0 8px;letter-spacing:-.01em}
.bcard p{color:rgba(255,255,255,.85);font-size:var(--fs-body-sm);margin:0 0 14px;line-height:var(--lh-body-sm);max-width:32ch}
.bcard .go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-body-sm);color:#fff;border-bottom:2px solid rgba(255,255,255,.4);padding-bottom:2px;transition:gap .2s,border-color .2s}
.bcard:hover .go{gap:12px;border-color:#fff}
.mnote{margin-top:34px;color:var(--muted);font-size:var(--fs-body-sm)}
footer.ft{background:var(--wine-deep);color:#A6ABC4;padding:60px 0 30px}
.ftgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px}
footer.ft h4{color:#fff;font-family:var(--sans);font-size:var(--fs-eyebrow);letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
footer.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:var(--fs-body-sm)}
footer.ft a{transition:color .18s}
footer.ft a:hover{color:var(--gold)}
.ft-brand .logo{color:#fff}
.ft-brand p{font-size:var(--fs-body-sm);max-width:34ch;margin:14px 0 0}
.ft-logo{display:inline-block}
.ft-logo img{height:140px;width:auto;display:block}
.ft-brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:48px}
.ft-bottom{padding-top:22px;font-size:var(--fs-caption);color:#868BA8;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ft-social{display:flex;gap:12px}
.ft-social a{width:38px;height:38px;border-radius:50%;border:1px solid #3a3a2a;display:flex;align-items:center;justify-content:center;color:var(--gold-deep);transition:color .2s,border-color .2s,background .2s}
footer.ft .ft-social a:hover{color:var(--wine);border-color:var(--gold-deep);background:var(--gold-deep)}
.ft-social svg{width:18px;height:18px}

.ln{display:flex;gap:20px;flex-wrap:wrap}
.ln b{color:#fff}
.ft-real{white-space:nowrap}
@media(max-width:1199.98px){nav.menu,.search,.lang{display:none}.burger{display:flex}.brands{grid-template-columns:1fr 1fr}.ftgrid{grid-template-columns:1fr 1fr}}
@media(max-width:767.98px){.brands{grid-template-columns:1fr}.ftgrid{grid-template-columns:1fr 1fr;gap:28px 20px}.ft-brand{grid-column:1/-1;text-align:center;order:0}.ft-logo img{height:90px;margin:0 auto}
  /* Kolejność na mobile (uwaga klienta 11.09.2026): Rozwiązania przed Ofertą */
  .ftgrid>div:nth-child(2){order:2}
  .ftgrid>div:nth-child(3){order:1}
  .ftgrid>div:nth-child(4){order:3}
  .ftgrid>div:nth-child(5){order:4}
}
.lang-ft{margin-top:0;border-color:#363B57;flex:none}
.lang-ft button{color:#A6ABC4}
.lang-ft button.on{background:var(--gold-deep);color:var(--wine)}
.lang-ft button:not(.on):hover{color:var(--gold-deep)}

/* H1 w hero podstron - jedna reguła dla całego serwisu. Arkusze per strona miały 18 kopii,
   które się rozjechały (Katalog i Certyfikaty na H1, reszta na nieistniejącym już stylu Display).
   Uwaga klienta 17.09.2026. Wyjątki: oferta pracy (H2, długie nazwy stanowisk). */
.bhero h1{color:#fff;font-family:var(--serif);font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);margin:14px 0 0}

/* Wspólne zdjęcie w tle granatowych hero podstron (jak na aktualności): rozmyte + przyciemnione + gradient.
   Wyjątki: .bhero-photo (własne zdjęcie, aktualność), .bhero--own (własne zdjęcie, strona marki).
   Selektor z "body" wygrywa z regułami .bhero .kv w arkuszach per strona. */
body .bhero:not(.bhero-photo):not(.bhero--own) .kv{background-image:url(images/bg-top.webp);background-size:cover;background-position:center;filter:blur(16px) brightness(.68) saturate(1.06);transform:scale(1.14)}
body .bhero:not(.bhero-photo):not(.bhero--own) .kv::after{display:none}
body .bhero:not(.bhero-photo):not(.bhero--own) .ov{background:linear-gradient(90deg,rgba(10,13,26,.74),rgba(10,13,26,.40) 55%,rgba(10,13,26,.12)),linear-gradient(0deg,rgba(10,13,26,.82),rgba(10,13,26,.22) 46%,rgba(10,13,26,0) 76%)}

/* Wspólny modal zapytania ofertowego (RFQ) */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(16,20,36,.5);backdrop-filter:blur(2px)}
.modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 36px));max-height:calc(100vh - 40px);overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.32);padding:34px}
.modal-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--cream);font-size:var(--fs-body-lead);line-height:1;cursor:pointer;color:var(--muted)}
.modal-x:hover{color:var(--wine);border-color:var(--wine)}
.modal-box h3{font-size:var(--fs-h5);margin:8px 0 0;font-family:var(--serif)}
.modal-box form label{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--ink);margin-top:12px}
.modal-box form input,.modal-box form textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:inherit;font-size:var(--fs-body-sm);background:var(--paper);outline:none}
.modal-box form input:focus,.modal-box form textarea:focus{border-color:var(--wine)}
.rfq-ctx{background:var(--gold-soft);color:var(--wine);border-radius:10px;padding:11px 14px;font-size:var(--fs-body-sm);font-weight:600;margin:16px 0 20px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rfq-actions{display:flex;gap:12px;margin-top:16px}
.rfq-note{font-size:var(--fs-body-sm);color:var(--muted);margin:14px 0 0}
.modal-box form label.fcheck{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--muted);font-size:var(--fs-caption);cursor:pointer;margin-top:14px}
.modal-box form label.fcheck input{width:auto;margin:2px 0 0;flex:none}
.rfq-ok{text-align:center;padding:16px 0 6px}
.rfq-ok .ok-ic{width:60px;height:60px;border-radius:50%;background:var(--wine-soft);color:var(--wine);font-size:var(--fs-h4);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
@media(max-width:767.98px){.frow2{grid-template-columns:1fr}.modal-box{padding:26px 22px}}

/* ===== Baner cookie - kompaktowa karta w rogu (RODO + Consent Mode v2) ===== */
.cookie-banner{position:fixed;right:20px;bottom:20px;z-index:120;width:380px;max-width:calc(100vw - 32px);background:#fff;color:var(--wine-deep);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 54px rgba(16,20,36,.22);padding:22px 22px 18px;animation:cookieUp .35s ease}
.cookie-banner[hidden]{display:none}
@keyframes cookieUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cookie-title{display:block;font-family:var(--serif);font-weight:500;font-size:var(--fs-lead);margin-bottom:8px;color:var(--wine-deep)}
.cookie-desc{margin:0 0 16px;font-size:var(--fs-caption);line-height:1.55;color:rgba(26,34,73,.72)}
.cookie-desc a{color:var(--wine);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:10px}
.cookie-btn{flex:1;justify-content:center;padding:11px 16px;font-size:var(--fs-body-sm);border-radius:10px;white-space:nowrap}
.cookie-reject{background:var(--wine-deep);border-color:var(--wine-deep);color:#fff}
.cookie-reject:hover{background:var(--wine);border-color:var(--wine)}
.cookie-accept{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--wine-deep)}
.cookie-accept:hover{background:var(--gold);border-color:var(--gold)}
.cookie-settings{display:block;width:100%;margin-top:12px;background:transparent;border:0;color:var(--wine);font-weight:600;font-size:var(--fs-caption);text-decoration:underline;text-underline-offset:3px;text-align:center;cursor:pointer}
.cookie-settings:hover{color:var(--wine-deep)}
/* Panel kategorii (rozwijany linkiem „Ustawienia zaawansowane”) */
.cookie-prefs{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:14px}
.cookie-prefs[hidden]{display:none}
.cookie-cat{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.cookie-cat input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--wine-deep);cursor:pointer}
.cookie-cat input:disabled{cursor:not-allowed;opacity:.6}
.cookie-cat strong{display:block;font-size:var(--fs-body-sm);color:var(--wine-deep);margin-bottom:1px}
.cookie-cat em{font-style:normal;font-size:var(--fs-eyebrow);line-height:1.4;color:rgba(26,34,73,.62)}
.cookie-prefs-actions{margin-top:2px}
.cookie-save{width:100%;justify-content:center;background:var(--wine-deep);border-color:var(--wine-deep);color:#fff;border-radius:10px;padding:11px 16px}
.cookie-save:hover{background:var(--wine);border-color:var(--wine)}
@media(max-width:767.98px){.cookie-banner{right:12px;left:12px;bottom:12px;width:auto;padding:20px 18px 16px}}

/* ==== Podpowiedzi wyszukiwarki (uwagi klienta 07.09.2026) - dropdown pod polem Szukaj, kategorie / marki / produkty ==== */
.sugg{position:absolute;top:calc(100% + 8px);right:0;width:min(440px,calc(100vw - 40px));background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(20,24,40,.20);padding:8px;z-index:80;display:none;text-align:left;max-height:min(70vh,560px);overflow-y:auto}
.sugg.open{display:block}
.sugg-h{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
.sugg-i{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:var(--fs-body-sm);font-weight:500;line-height:1.3}
.sugg-i:hover,.sugg-i.act{background:var(--gold-soft);color:var(--wine)}
.sugg-i img{width:44px;height:44px;object-fit:contain;flex:none;background:#fff;border-radius:8px;border:1px solid var(--line);mix-blend-mode:multiply}
.sugg-ic{width:44px;height:44px;flex:none;border-radius:8px;background:var(--stone);display:flex;align-items:center;justify-content:center;color:var(--wine);font-size:var(--fs-body)}
.sugg-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sugg-t small{font-size:var(--fs-eyebrow);color:var(--muted);font-weight:500}
.sugg mark{background:none;color:var(--gold-deep);font-weight:700}
.sugg-empty{padding:14px 12px;font-size:var(--fs-body-sm);color:var(--muted)}
.sugg-all{display:block;margin:6px 4px 2px;padding:11px 12px;border-top:1px solid var(--line);font-size:var(--fs-body-sm);font-weight:700;color:var(--wine)}
.sugg-all:hover{color:var(--wine-deep)}
.mm-search{position:relative;flex-wrap:wrap}
.mm-search .sugg{position:static;width:100%;flex-basis:100%;box-shadow:none;margin-top:4px;max-height:50vh}

/* Menu mobilne: pozycje w rozwiniętych panelach podświetlają się na złoto (spójnie z mega i podpowiedziami) */
#mm .mm-panel a{transition:background .15s,color .15s}
#mm .mm-panel a:hover,#mm .mm-panel a:active{background:var(--gold-soft);color:var(--wine)}