/* =========================================================================
   EL-SKLEP — system projektowy v5 (od zera)
   Kolorystyka: zielony / szary / czarny / bialy

   Caly widoczny uklad (naglowek, nawigacja, wyszukiwarka, strona glowna,
   siatka produktow, stopka) to wlasny markup + ten arkusz. Style motywu
   classic pracuja tylko pod spodem stron systemowych (koszyk, konto).

   Spis:
     0. Font Poppins (lokalny)
     1. Tokeny
     2. Baza
     3. Szkielet strony (szerokosci)
     4. Przyciski
     5. Naglowek: topbar / glowny / nawigacja / szuflada mobilna
     6. Hero + dekoracja techniczna
     7. Kategorie
     8. Pasek zaufania
     9. Sekcje produktowe + siatka
    10. Karta produktu
    11. Pas CTA
    12. Stopka
    13. Podstrony systemowe (listingi, produkt, formularze)
    14. Animacje
    15. Dostepnosc i responsywnosc
   ========================================================================= */

/* ---------- 0. FONT ---------- */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-ext-400-normal.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:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-400-normal.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:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-ext-600-normal.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:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-600-normal.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:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-ext-700-normal.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:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-700-normal.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:"Poppins"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-ext-800-normal.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:"Poppins"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/themes/elsklep/assets/fonts/poppins-latin-800-normal.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; }

/* ---------- 1. TOKENY ---------- */
:root {
    --g:        #12925F;   /* zielen glowna */
    --g-dark:   #0E7A4F;
    --g-deep:   #0B6E47;
    --g-neon:   #22C989;   /* zielen jasna, akcent */
    --g-50:     #ECF8F2;
    --g-100:    #D3EFE2;

    --k:        #0A0C0F;   /* czern */
    --k-950:    #101318;
    --k-900:    #171B21;
    --k-800:    #22272F;
    --k-700:    #333944;

    --s-600:    #4A5160;   /* szarosci */
    --s-500:    #6B7280;
    --s-400:    #98A0AC;
    --s-300:    #C6CCD4;
    --s-200:    #E2E7EC;
    --s-100:    #EFF2F5;
    --s-50:     #F6F8FA;
    --w:        #FFFFFF;

    --red:      #DC3A4C;

    --r-sm:  10px;
    --r:     16px;
    --r-lg:  22px;
    --r-xl:  30px;
    --pill:  999px;

    --sh-1: 0 1px 2px rgba(10,12,15,.05), 0 2px 8px rgba(10,12,15,.06);
    --sh-2: 0 8px 22px rgba(10,12,15,.10);
    --sh-3: 0 22px 52px rgba(10,12,15,.17);
    --sh-g: 0 10px 28px rgba(18,146,95,.35);

    --tf: 150ms cubic-bezier(.22,.61,.36,1);
    --tm: 260ms cubic-bezier(.22,.61,.36,1);
    --ts: 450ms cubic-bezier(.22,.61,.36,1);

    --shell: 1520px;   /* maks. szerokosc tresci */
    --pad: 40px;

    --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. BAZA ---------- */
/* poziomy clip na html i body — przycina pelnoszerokosciowe sekcje (50vw)
   oraz wysunieta szuflade mobilna. Skok modala rozwiazany osobno w JS
   (blokada body position:fixed na czas podgladu), wiec clip tu nie szkodzi. */
html, body { overflow-x: clip; }
body {
    background: var(--s-50);
    color: var(--k-700);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3 { color: var(--k-900); font-family: var(--font); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
a { color: var(--g-deep); transition: color var(--tf); }
a:hover, a:focus { color: var(--g); text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--g-100); color: var(--k-900); }

/* ---------- 3. SZKIELET ---------- */
.el-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); width: 100%; }

/* neutralizacja waskiego kontenera bootstrapa z classic:
   na stronie glownej pasy zarzadzaja szerokoscia same,
   na podstronach kontener rozszerzamy do naszej siatki */
#wrapper { background: transparent; padding-top: 0; }
#wrapper > .container { max-width: var(--shell); width: 100%; padding-left: var(--pad); padding-right: var(--pad); }
#index #wrapper > .container { max-width: none; padding: 0; }
#index #wrapper { padding-top: 0; }
.el-home { max-width: none; padding: 0; }

/* ---------- 4. PRZYCISKI ---------- */
.el-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    border: 0; border-radius: var(--pill); cursor: pointer; text-align: center;
    font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
    padding: .85rem 1.7rem;
    transition: background-color var(--tf), color var(--tf), box-shadow var(--tm), transform var(--tf);
}
.el-btn i { font-size: 1.2em; line-height: 1; }
.el-btn:active { transform: translateY(1px); }
.el-btn--lg { padding: 1.1rem 2.4rem; font-size: 1.08rem; }

.el-btn--primary { background: var(--g); color: var(--w); box-shadow: var(--sh-g); position: relative; overflow: hidden; }
.el-btn--primary:hover, .el-btn--primary:focus { background: var(--g-dark); color: var(--w); box-shadow: 0 16px 36px rgba(18,146,95,.45); transform: translateY(-2px); }
.el-btn--primary::after {
    content:""; position:absolute; top:0; bottom:0; left:-80%; width:45%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-20deg); transition: left var(--ts); pointer-events:none;
}
.el-btn--primary:hover::after { left: 130%; }

.el-btn--ghost { background: transparent; color: var(--w); box-shadow: inset 0 0 0 2px rgba(255,255,255,.30); }
.el-btn--ghost:hover { background: rgba(255,255,255,.10); color: var(--w); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.el-btn--ghost-light { background: transparent; color: var(--w); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.el-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: var(--w); }

/* przyciski bootstrapa na podstronach systemowych */
.btn { border-radius: var(--pill); font-weight: 600; border: 0; padding: .7rem 1.5rem; }
.btn-primary { background: var(--g); box-shadow: var(--sh-g); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--g-dark); }
.btn-secondary, .btn-default { background: var(--w); color: var(--k-800); box-shadow: inset 0 0 0 2px var(--s-200); }
.btn-secondary:hover, .btn-default:hover { background: var(--g-50); color: var(--g-deep); box-shadow: inset 0 0 0 2px var(--g); }

/* ---------- 5. NAGLOWEK ---------- */
#header {
    position: sticky; top: -42px; z-index: 1000;
    background: linear-gradient(165deg, var(--k) 0%, var(--k-950) 60%, #0C2C20 140%);
    color: var(--s-300);
    box-shadow: 0 1px 0 rgba(255,255,255,.05);
    transition: box-shadow var(--tm);
}
#header.is-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.35); }
#header a { color: inherit; }

/* topbar — dokladnie 42px, chowa sie przy przewijaniu (sticky top:-42px) */
.el-topbar { height: 42px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .84rem; }
.el-topbar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.el-topbar__contact, .el-topbar__links { display: flex; align-items: center; gap: 1.6rem; }
.el-topbar__item { display: inline-flex; align-items: center; gap: .45rem; color: var(--s-400) !important; font-weight: 500; }
.el-topbar__item:hover { color: var(--g-neon) !important; }
.el-topbar__item i { font-size: 1.05rem; color: var(--g-neon); }

/* wiersz glowny */
.el-hmain { padding: 1.15rem 0; }
.el-hmain__in { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 3rem); }

/* znak firmowy */
.el-brandwrap { margin: 0; line-height: 0; flex: 0 0 auto; }
.el-brand { display: inline-flex; align-items: center; gap: .75rem; line-height: 1; }
.el-brand__mark {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px;
    background: linear-gradient(140deg, var(--g-neon), var(--g-dark));
    color: var(--w); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(18,146,95,.4);
    transition: transform var(--tm);
}
.el-brand:hover .el-brand__mark { transform: rotate(-6deg) scale(1.06); }
.el-brand__mark i { font-size: 1.75rem; }
.el-brand__text { display: flex; flex-direction: column; gap: .3rem; }
.el-brand__name { color: var(--w) !important; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.el-brand__name em { font-style: normal; color: var(--g-neon); }
.el-brand__tag { color: var(--s-500); font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.el-brand--sm .el-brand__mark { width: 38px; height: 38px; border-radius: 11px; }
.el-brand--sm .el-brand__mark i { font-size: 1.3rem; }
.el-brand--sm .el-brand__name { font-size: 1.25rem; }

/* wyszukiwarka */
.el-search { position: relative; flex: 1 1 auto; max-width: 640px; }
.el-search__input {
    width: 100%;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.12);
    border-radius: var(--pill);
    color: var(--w);
    font-family: var(--font); font-size: .95rem;
    padding: .85rem 3.4rem .85rem 1.4rem;
    transition: background-color var(--tf), border-color var(--tf), box-shadow var(--tf);
}
.el-search__input::placeholder { color: var(--s-500); }
.el-search__input:focus {
    outline: none;
    background: rgba(255,255,255,.12);
    border-color: var(--g-neon);
    box-shadow: 0 0 0 4px rgba(34,201,137,.18);
}
.el-search__btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: 0; border-radius: var(--pill);
    background: var(--g); color: var(--w);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background-color var(--tf), transform var(--tf);
}
.el-search__btn:hover { background: var(--g-neon); color: var(--k-950); transform: translateY(-50%) scale(1.07); }

/* przycisk kontaktu */
.el-hcta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .7rem;
    background: var(--g); color: var(--w) !important;
    border-radius: var(--pill); padding: .6rem 1.4rem .6rem 1rem;
    box-shadow: var(--sh-g);
    transition: background-color var(--tf), transform var(--tf), box-shadow var(--tm);
}
.el-hcta:hover { background: var(--g-neon); color: var(--k-950) !important; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(34,201,137,.42); }
.el-hcta i { font-size: 1.5rem; }
.el-hcta span { display: flex; flex-direction: column; line-height: 1.3; }
.el-hcta strong { font-size: .95rem; font-weight: 700; }
.el-hcta small { font-size: .78rem; opacity: .85; }

/* nawigacja */
.el-nav { border-top: 1px solid rgba(255,255,255,.06); }
.el-nav__in { display: flex; align-items: center; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.el-nav__in::-webkit-scrollbar { display: none; }
.el-nav__spacer { flex: 1 1 auto; }
.el-nav__link {
    display: block; white-space: nowrap;
    color: #D7DCE3 !important;
    font-size: .94rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    padding: 1.02rem 1.1rem;
    position: relative;
    transition: color var(--tf);
}
.el-nav__link::after {
    content:""; position:absolute; left:1.1rem; right:1.1rem; bottom:0; height:3px;
    border-radius:3px 3px 0 0; background: var(--g-neon);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--tm);
}
.el-nav__link:hover, .el-nav__link.is-active { color: var(--w) !important; }
.el-nav__link:hover::after, .el-nav__link.is-active::after { transform: scaleX(1); }
.el-nav__link--accent { color: var(--g-neon) !important; }

/* burger + szuflada mobilna */
.el-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; border: 0; border-radius: 12px;
    background: rgba(255,255,255,.09); cursor: pointer; flex: 0 0 auto;
    transition: background-color var(--tf);
}
.el-burger span { display: block; width: 20px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--s-200); transition: transform var(--tm), opacity var(--tf); }
.el-burger:hover { background: var(--g); }
body.el-drawer-open .el-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.el-drawer-open .el-burger span:nth-child(2) { opacity: 0; }
body.el-drawer-open .el-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.el-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1300;
    width: min(340px, 88vw);
    background: var(--k-950); color: var(--s-300);
    display: flex; flex-direction: column;
    transform: translateX(105%);
    transition: transform var(--tm);
    box-shadow: var(--sh-3);
}
body.el-drawer-open .el-drawer { transform: translateX(0); }
.el-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.07); }
/* logo w menu mobilnym: białe (ciemne było niewidoczne na ciemnym tle) */
#el-drawer .el-brand__name { color: var(--w) !important; }
#el-drawer .el-brand__name em { color: var(--g-neon) !important; font-style: normal; }
.el-drawer__close { background: rgba(255,255,255,.08); border: 0; border-radius: 10px; width: 40px; height: 40px; color: var(--s-200); cursor: pointer; display:flex; align-items:center; justify-content:center; }
.el-drawer__close:hover { background: var(--g); color: var(--w); }
.el-drawer__nav { display: flex; flex-direction: column; padding: .75rem 0; overflow-y: auto; flex: 1 1 auto; }
.el-drawer__nav a {
    color: var(--s-200) !important; font-weight: 600; font-size: 1.02rem;
    padding: .8rem 1.5rem; border-left: 3px solid transparent;
    transition: background-color var(--tf), border-color var(--tf), color var(--tf);
}
.el-drawer__nav a:hover { background: rgba(255,255,255,.05); border-left-color: var(--g-neon); color: var(--w) !important; }
.el-drawer__foot { padding: 1.1rem 1.5rem 1.4rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: .6rem; }
.el-drawer__foot a { display: inline-flex; align-items: center; gap: .55rem; color: var(--s-300) !important; font-weight: 600; }
.el-drawer__foot a:hover { color: var(--g-neon) !important; }
.el-drawer__foot i { color: var(--g-neon); font-size: 1.15rem; }

.el-drawer__scrim {
    position: fixed; inset: 0; z-index: 1290;
    background: rgba(10,12,15,.55); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--tm), visibility var(--tm);
}
body.el-drawer-open .el-drawer__scrim { opacity: 1; visibility: visible; }
body.el-drawer-open { overflow: hidden; }

/* ---------- 6. HERO ---------- */
.el-hero {
    position: relative; overflow: clip;
    background: linear-gradient(150deg, var(--k) 0%, var(--k-950) 45%, #0C3A29 120%);
    color: var(--w);
    padding: clamp(4.5rem, 7vw, 7.5rem) 0 clamp(4.5rem, 7vw, 7.5rem);
    margin-bottom: clamp(3rem, 5vw, 5rem);
}
.el-hero__glow {
    position: absolute; right: -8%; top: -20%;
    width: 1000px; height: 1000px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,201,137,.26) 0%, rgba(34,201,137,0) 65%);
    pointer-events: none;
    animation: elFloat 10s ease-in-out infinite alternate;
}
.el-hero__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(ellipse at 28% 42%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 28% 42%, #000 0%, transparent 70%);
}
.el-hero__inner { position: relative; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

.el-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--pill);
    color: var(--s-300); font-size: .92rem; font-weight: 500;
    padding: .5rem 1.2rem .5rem .85rem; margin: 0 0 1.75rem;
}
.el-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-neon); box-shadow: 0 0 0 5px rgba(34,201,137,.18); }

.el-hero__title {
    color: var(--w);
    font-size: clamp(2.5rem, 4.6vw, 4.4rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.06;
    margin: 0 0 1.4rem; max-width: 20ch;
}
.el-hero__accent {
    background: linear-gradient(100deg, var(--g-neon), #8FF0C4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.el-hero__lead { color: var(--s-300); font-size: clamp(1.05rem, 1.25vw, 1.3rem); line-height: 1.7; max-width: 60ch; margin: 0 0 2.25rem; }
.el-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.el-hero__facts { display: flex; flex-wrap: wrap; gap: clamp(2rem, 4vw, 4.5rem); list-style: none; margin: 0; padding: 2.1rem 0 0; border-top: 1px solid rgba(255,255,255,.10); }
.el-hero__facts li { display: flex; flex-direction: column; gap: .15rem; }
.el-hero__facts strong { color: var(--w); font-size: clamp(2rem, 2.6vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.el-hero__facts span { color: var(--s-500); font-size: .95rem; }

/* --- SLAJDER POWITALNY (hero) — auto-przewijane slajdy --- */
.el-hero__slider { position: relative; }
.el-hero__track { position: relative; }
.el-hero__slide {
    position: absolute; top: 0; left: 0; width: 100%;
    opacity: 0; transform: translateY(24px); pointer-events: none;
    transition: opacity .55s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.el-hero__slide.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.el-hero__slider .el-hero__actions { margin-bottom: 0; }
/* opóźnione wejście elementów aktywnego slajdu */
.el-hero__slide.is-active .el-hero__eyebrow { animation: elHeroUp .55s .04s both; }
.el-hero__slide.is-active .el-hero__title   { animation: elHeroUp .55s .12s both; }
.el-hero__slide.is-active .el-hero__lead    { animation: elHeroUp .55s .2s both; }
.el-hero__slide.is-active .el-hero__actions { animation: elHeroUp .55s .28s both; }
@keyframes elHeroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.el-hero__dots { display: flex; gap: .55rem; margin-top: 1.8rem; }
.el-hero__dot {
    width: 30px; height: 6px; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--pill); background: rgba(18,146,95,.22);
    transition: background-color var(--tf), width var(--tf);
}
.el-hero__dot:hover { background: rgba(18,146,95,.45); }
.el-hero__dot.is-active { width: 46px; background: var(--g); }

@media (prefers-reduced-motion: reduce) {
    /* ruch ograniczony: slajdy tekstu przenikają bez przesunięcia */
    .el-hero__slide { transition-property: opacity; transform: none !important; }
}

/* =========================================================================
   34. SLAJDER ZDJĘĆ (ps_imageslider) — pełna szerokość, styl „Tesla"
   ========================================================================= */
.el-slider {
    position: relative; width: 100vw; margin-left: calc(50% - 50vw);
    height: clamp(400px, 52vh, 560px); overflow: hidden;
    background: var(--k); isolation: isolate;
}
.el-slider__track { position: absolute; inset: 0; }
.el-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.el-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.el-slide__bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.09); transition: transform 7.5s ease-out;
}
.el-slide.is-active .el-slide__bg { transform: scale(1); }
.el-slide__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(8,12,10,.85) 0%, rgba(8,12,10,.5) 40%, rgba(8,12,10,.05) 72%),
        linear-gradient(0deg, rgba(8,12,10,.82) 0%, rgba(8,12,10,0) 55%);
}
.el-slide__content { position: absolute; left: 0; right: 0; bottom: clamp(58px, 9vh, 108px); z-index: 2; color: #fff; }
.el-slide__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #d7f5e6; padding: .45rem .9rem; border-radius: var(--pill);
    background: rgba(34,201,137,.16); border: 1px solid rgba(34,201,137,.4);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); margin-bottom: 1rem;
}
.el-slide__eyebrow .el-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-neon); }
.el-slide__title {
    font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.02; font-weight: 800;
    letter-spacing: -.02em; color: #fff; margin: 0; max-width: 18ch;
}
.el-slide__lead {
    margin: 1.1rem 0 0; max-width: 54ch; font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.55; color: rgba(255,255,255,.85);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.el-slide__lead * { color: inherit !important; background: transparent !important; }
.el-slide__actions { margin-top: clamp(1.4rem, 3vh, 2rem); display: flex; flex-wrap: wrap; gap: .8rem; }
.el-slide.is-active .el-slide__eyebrow { animation: elHeroUp .7s .15s both; }
.el-slide.is-active .el-slide__title   { animation: elHeroUp .8s .28s both; }
.el-slide.is-active .el-slide__lead    { animation: elHeroUp .8s .4s both; }
.el-slide.is-active .el-slide__actions { animation: elHeroUp .8s .52s both; }

.el-slider__dots { position: absolute; z-index: 5; left: clamp(20px, 5vw, 64px); bottom: clamp(22px, 4.5vh, 52px); display: flex; gap: 10px; }
.el-slider__dot { position: relative; height: 4px; width: 46px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.3); border-radius: var(--pill); overflow: hidden; }
.el-slider__dot > span { position: absolute; inset: 0; width: 0; background: #fff; border-radius: var(--pill); }
.el-slider__dot.is-active > span { width: 100%; transition: width var(--el-slider-dur, 6500ms) linear; }

.el-slider__arrows { position: absolute; z-index: 5; right: clamp(20px, 5vw, 64px); bottom: clamp(22px, 4.5vh, 52px); display: flex; gap: 10px; }
.el-slider__arrow {
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background-color var(--tf), transform var(--tf);
}
.el-slider__arrow:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.el-slider__arrow i { font-size: 1.6rem; }

@media (max-width: 767px) {
    .el-slider { height: clamp(360px, 56vh, 480px); }
    .el-slide__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .el-slide__lead { -webkit-line-clamp: 2; font-size: 1rem; }
    /* strzałki wyżej (górna część), żeby nie nachodziły na napis u dołu */
    .el-slider__arrows { bottom: auto; top: 30%; left: 0; right: 0; transform: translateY(-50%); justify-content: space-between; padding: 0 10px; }
    .el-slider__arrow { width: 44px; height: 44px; }
    .el-slide__content { bottom: 60px; }   /* miejsce na kropki pod spodem */
    .el-slider__dots { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    /* ruch ograniczony: przenikanie slajdów zostaje, znika powolne zbliżenie tła */
    .el-slide__bg { transform: none !important; transition: none; }
}

/* dekoracja techniczna po prawej */
.el-hero__art { position: absolute; right: var(--pad); top: 50%; transform: translateY(-52%); width: 480px; height: 480px; pointer-events: none; }
.el-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; }
.el-ring--1 { width: 480px; height: 480px; border: 1px solid rgba(34,201,137,.22); }
.el-ring--2 { width: 340px; height: 340px; border: 1px dashed rgba(34,201,137,.30); animation: elSpin 46s linear infinite; }
.el-ring--3 { width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(circle, rgba(34,201,137,.14), transparent 70%); }
.el-chip {
    position: absolute; left: var(--dx); top: var(--dy);
    background: rgba(16,19,24,.85);
    border: 1px solid rgba(34,201,137,.45);
    border-radius: var(--pill);
    color: var(--g-neon); font-size: .95rem; font-weight: 700; letter-spacing: .05em;
    padding: .55rem 1.2rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.2);
    backdrop-filter: blur(4px);
    animation: elDrift 6.5s ease-in-out infinite alternate;
    animation-delay: var(--dl);
}

/* ---------- 7. KATEGORIE ---------- */
.el-section { max-width: var(--shell); margin: 0 auto clamp(3rem, 5vw, 5rem); padding: 0 var(--pad); }
.el-section__head { margin-bottom: 2rem; }
.el-section__title { font-size: clamp(1.8rem, 2.3vw, 2.5rem); font-weight: 800; margin: 0 0 .4rem; }
.el-section__sub { color: var(--s-500); font-size: 1.08rem; margin: 0; }

.el-cats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; }
@media (min-width: 1100px) { .el-cats__grid { grid-template-columns: repeat(5, 1fr); } }
.el-cat {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.05rem;
    background: var(--w); border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 1.7rem 1.5rem 1.55rem;
    transition: transform var(--tm), box-shadow var(--tm);
}
.el-cat::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--g-50), transparent 60%);
    opacity: 0; transition: opacity var(--tm);
}
.el-cat:hover { transform: translateY(-7px); box-shadow: var(--sh-3), 0 0 0 2px var(--g-100); }
.el-cat:hover::before { opacity: 1; }
.el-cat > * { position: relative; }
.el-cat__icon {
    width: 56px; height: 56px; border-radius: 15px;
    background: linear-gradient(140deg, var(--g-neon), var(--g-dark));
    color: var(--w); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(18,146,95,.32);
    transition: transform var(--tm);
}
.el-cat:hover .el-cat__icon { transform: scale(1.1) rotate(-5deg); }
.el-cat__icon i { font-size: 1.8rem; }
/* kolory ikon per kategoria: 1,4 zielony · 2,5 żółty · 3 czerwony
   (Oświetlenie = żółty jak żarówka, Transformatory bezpieczeństwa = czerwony) */
.el-cats__grid .el-cat:nth-child(2) .el-cat__icon,
.el-cats__grid .el-cat:nth-child(5) .el-cat__icon {
    background: linear-gradient(140deg, #FFCB52, #E39A17);
    box-shadow: 0 8px 18px rgba(227,154,23,.34);
}
/* poświata (::before) i obwódka na hover — w kolorze ikony kafla (wyraźna) */
.el-cats__grid .el-cat:nth-child(1)::before,
.el-cats__grid .el-cat:nth-child(4)::before { background: linear-gradient(135deg, rgba(18,146,95,.17), transparent 60%); }
.el-cats__grid .el-cat:nth-child(2)::before,
.el-cats__grid .el-cat:nth-child(5)::before { background: linear-gradient(135deg, rgba(227,154,23,.20), transparent 60%); }
.el-cats__grid .el-cat:nth-child(3)::before { background: linear-gradient(135deg, rgba(214,52,46,.20), transparent 60%); }
.el-cats__grid .el-cat:nth-child(1):hover,
.el-cats__grid .el-cat:nth-child(4):hover { box-shadow: var(--sh-3), 0 0 0 2px rgba(18,146,95,.32); }
.el-cats__grid .el-cat:nth-child(2):hover,
.el-cats__grid .el-cat:nth-child(5):hover { box-shadow: var(--sh-3), 0 0 0 2px rgba(227,154,23,.35); }
.el-cats__grid .el-cat:nth-child(3):hover { box-shadow: var(--sh-3), 0 0 0 2px rgba(214,52,46,.35); }
.el-cats__grid .el-cat:nth-child(2):hover .el-cat__arrow,
.el-cats__grid .el-cat:nth-child(5):hover .el-cat__arrow { color: #E39A17; }
.el-cats__grid .el-cat:nth-child(3):hover .el-cat__arrow { color: #E0483C; }

.el-cats__grid .el-cat:nth-child(3) .el-cat__icon {
    background: linear-gradient(140deg, #FF6E5A, #D6342E);
    box-shadow: 0 8px 18px rgba(214,52,46,.32);
}
.el-cat__body { display: flex; flex-direction: column; gap: .2rem; }
.el-cat__name { color: var(--k-900); font-weight: 700; font-size: 1.1rem; }
.el-cat__desc { color: var(--s-500); font-size: .88rem; line-height: 1.5; }
.el-cat__arrow { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--s-300); transition: transform var(--tm), color var(--tm); }
.el-cat:hover .el-cat__arrow { color: var(--g); transform: translateX(4px); }

/* ---------- 8. PASEK ZAUFANIA ---------- */
.el-trust { max-width: var(--shell); margin: 0 auto clamp(3rem, 5vw, 5rem); padding: 0 var(--pad); }
/* pasek pod slajderem: lekko niżej od slajdera, mniejszy odstęp pod spodem
   (żeby sekcja „Czego szukasz?" była widoczna od razu na wejściu) */
.el-trust--slider { margin-top: clamp(1.75rem, 3.5vw, 3rem); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.el-trust__list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
    list-style: none; margin: 0; padding: 0;
    background: var(--s-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
}
.el-trust__item { display: flex; align-items: center; gap: 1.05rem; background: var(--w); padding: 1.7rem 1.6rem; transition: background-color var(--tf); }
.el-trust__item:hover { background: var(--g-50); }
.el-trust__item i { color: var(--g); font-size: 2.1rem; flex: 0 0 auto; }
.el-trust__item span { display: flex; flex-direction: column; color: var(--s-500); font-size: .9rem; line-height: 1.5; }
.el-trust__item strong { color: var(--k-900); font-size: 1.06rem; font-weight: 700; }

/* ---------- 9. SEKCJE PRODUKTOWE + SIATKA ---------- */
.featured-products, .el-psec, .product-accessories { max-width: var(--shell); margin: 0 auto clamp(3rem, 5vw, 5rem); padding: 0 var(--pad); }
.el-psec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.el-psec__eyebrow { color: var(--g); font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .35rem; }
.el-psec__title { font-size: clamp(1.8rem, 2.3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0; text-transform: none; }
.el-psec__link {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--w); color: var(--g-deep);
    border-radius: var(--pill);
    box-shadow: inset 0 0 0 2px var(--g-100);
    font-size: .98rem; font-weight: 700; padding: .7rem 1.5rem;
    transition: background-color var(--tf), color var(--tf), box-shadow var(--tf), gap var(--tf);
}
.el-psec__link:hover { background: var(--g); color: var(--w); box-shadow: none; gap: .8rem; }

/* !important, bo motyw classic narzuca .products wlasna siatke/flex
   i wymiary elementow — te reguly musza wygrac bezwzglednie */
.products.el-grid, .el-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    justify-content: stretch !important;
}
.el-grid > div, .el-grid__item, .el-grid .js-product {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- 10. KARTA PRODUKTU ---------- */
.el-card { height: 100%; }
.el-card__inner {
    background: var(--w); border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-1);
    height: 100%; display: flex; flex-direction: column;
    margin: 0; width: 100%;
    transition: transform var(--tm), box-shadow var(--tm);
}
.el-card__inner:hover, .el-card__inner:focus-within { transform: translateY(-7px); box-shadow: var(--sh-3), 0 0 0 2px var(--g-100); }

.el-card__media { position: relative; background: var(--s-50); overflow: hidden; }
/* równe ramki: zdjęcie wypełnia kwadrat (cover), produkt wyśrodkowany,
   przycinane tylko brzegi tła — wszystkie karty identycznej wysokości */
.el-card__img { display: block; padding: 1.1rem; }
.el-card__img img {
    width: 100%; aspect-ratio: 1 / 1; height: auto;
    object-fit: cover; object-position: center;
    display: block; border-radius: var(--r-sm);
    transition: transform var(--ts);
}
.el-card__inner:hover .el-card__img img { transform: scale(1.07); }

/* nakladka na cala powierzchnie zdjecia — przycisk wysrodkowany,
   nigdy nie zostaje przyciety przez overflow:hidden mediow */
/* nakładka „Szybki podgląd": subtelny gradient u dołu zdjęcia + przycisk
   wysuwany W OBRĘBIE zdjęcia (nie na granicy z opisem) */
.el-card__hover {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: center; gap: .5rem;
    background: linear-gradient(to top, rgba(9,13,11,.62) 0%, rgba(9,13,11,.14) 40%, transparent 66%);
    padding: 1.1rem; text-align: center;
    opacity: 0;
    transition: opacity var(--tm);
    pointer-events: none;
    border: 0; box-shadow: none; height: auto; width: auto;
}
.el-card__inner:hover .el-card__hover, .el-card__inner:focus-within .el-card__hover { opacity: 1; pointer-events: auto; }
.el-card__quick {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--w); color: var(--g-deep) !important;
    border-radius: var(--pill); font-size: .88rem; font-weight: 700;
    padding: .62rem 1.35rem;
    box-shadow: 0 10px 24px rgba(9,13,11,.32);
    transform: translateY(14px);
    transition: background-color var(--tf), color var(--tf), transform var(--tm);
}
.el-card__inner:hover .el-card__quick, .el-card__inner:focus-within .el-card__quick { transform: translateY(0); }
.el-card__quick:hover { background: var(--g); color: var(--w) !important; }
.el-card__quick i { font-size: 1.1rem; }
/* natywny .highlighted-informations ma białe tło — wymuś nasz gradient (oba tryby) */
.el-card__media .el-card__hover.highlighted-informations,
.el-card__media .highlighted-informations {
    background: linear-gradient(to top, rgba(9,13,11,.62) 0%, rgba(9,13,11,.14) 40%, transparent 66%) !important;
}

.el-card__media .product-flags { position: absolute; top: .9rem; left: .9rem; z-index: 2; display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.product-flags li.product-flag, .product-flag {
    position: static; margin: 0; width: auto; min-height: 0;
    /* półprzezroczysta, „szklana" etykieta — pasuje do reszty strony */
    background: rgba(18,146,95,.60); color: var(--w);
    -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.3);
    text-shadow: 0 1px 2px rgba(10,12,15,.28);
    border-radius: var(--pill);
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: .3rem .85rem; line-height: 1.6;
    box-shadow: 0 6px 16px rgba(10,12,15,.16);
    animation: elPop var(--tm) both;
}
.product-flags li.product-flag.discount, .product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage, .product-flags li.product-flag.on-sale { background: rgba(214,52,52,.60); }
.product-flags li.product-flag.online-only { background: rgba(23,27,33,.5); }
.product-flags li.product-flag.out_of_stock { background: rgba(107,114,128,.55); }
.product-flags li.product-flag.pack { background: rgba(38,42,48,.52); }

/* serce (wishlist) po kliknięciu: czerwone + „pop" (potem przekierowanie) */
.wishlist-button-add.is-liked,
.wishlist-button-add.is-liked i,
.wishlist-button-add.is-liked .material-icons { color: #E5342E !important; }
.wishlist-button-add.is-liked { animation: elLikePop .34s ease; }
@keyframes elLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.el-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.3rem 1.3rem; flex: 1 1 auto; background: var(--w); position: static; width: auto; border: 0; }
.el-card__ref { color: var(--s-400); font-size: .73rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 0 .6rem; }
.el-card__title { margin: 0; font-size: 1.04rem; line-height: 1.4; }
.el-card__title a {
    color: var(--k-900) !important; font-weight: 600; text-transform: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color var(--tf);
}
.el-card__inner:hover .el-card__title a { color: var(--g-deep) !important; }

.el-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .95rem; }
.el-card__price .price, .el-card__price { color: var(--g-deep); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.el-card__price .regular-price { color: var(--s-400); font-size: .9rem; font-weight: 500; text-decoration: line-through; margin-right: .4rem; }
.el-card__price .discount-percentage, .el-card__price .discount-amount { background: var(--red); color: var(--w); border-radius: var(--pill); font-size: .76rem; font-weight: 700; padding: .12rem .55rem; margin-left: .3rem; }
/* „Cena na zapytanie" jako subtelny znacznik (pigułka) — pasuje do motywu */
.el-card__ask {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--k-700); font-size: .78rem; font-weight: 700; letter-spacing: .01em;
    background: var(--s-100); border-radius: var(--pill);
    padding: .42rem .85rem; white-space: nowrap; margin-left: .55rem;
}
.el-card__ask::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--g); flex: 0 0 auto;
}
.el-card__cta {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--g-50); color: var(--g-deep) !important;
    border-radius: var(--pill); font-size: .88rem; font-weight: 700;
    padding: .5rem 1.05rem; flex: 0 0 auto; margin-right: .55rem;
    transition: background-color var(--tf), color var(--tf), gap var(--tf);
}
.el-card__inner:hover .el-card__cta { background: var(--g); color: var(--w) !important; gap: .55rem; }
.el-card__cta i { font-size: 1.05rem; }

/* ---------- 10b. PAS PROMOCYJNY (nadpisany ps_banner) ---------- */
.el-promo { max-width: var(--shell); margin: 0 auto clamp(3rem, 5vw, 5rem); padding: 0 var(--pad); }
.el-promo__in {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap;
    background: linear-gradient(120deg, var(--k-900) 0%, var(--k-950) 40%, #0C3A29 130%);
    border-radius: var(--r-xl);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 4vw, 3.25rem);
    box-shadow: var(--sh-2);
}
.el-promo__glow {
    position: absolute; right: -60px; top: -90px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,201,137,.28), transparent 68%);
    pointer-events: none;
    animation: elFloat 11s ease-in-out infinite alternate;
}
.el-promo__icon {
    position: relative; flex: 0 0 auto;
    width: 68px; height: 68px; border-radius: 20px;
    background: linear-gradient(140deg, var(--g-neon), var(--g-dark));
    color: var(--w); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(18,146,95,.4);
}
.el-promo__icon i { font-size: 2.1rem; }
.el-promo__text { position: relative; flex: 1 1 340px; }
.el-promo__eyebrow { color: var(--g-neon); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .35rem; }
.el-promo__title { color: var(--w); font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .45rem; }
.el-promo__sub { color: var(--s-400); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 52ch; }
.el-promo__actions { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* wariant promocyjny: badge z procentem zamiast ikony */
.el-promo__badge {
    position: relative; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 96px; height: 96px; border-radius: 24px;
    background: linear-gradient(140deg, var(--g-neon), var(--g-dark));
    box-shadow: 0 12px 28px rgba(18,146,95,.42);
    color: var(--w);
}
.el-promo__pct { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.el-promo__pctsub { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

@media (max-width: 767px) {
    .el-promo__actions { width: 100%; }
    .el-promo__actions .el-btn { flex: 1 1 100%; justify-content: center; }
    .el-promo__badge { width: 76px; height: 76px; border-radius: 20px; }
    .el-promo__pct { font-size: 1.5rem; }
}

/* =========================================================================
   POPRAWKI WIDOCZNOSCI (poprawka 3)
   ========================================================================= */

/* --- wpisywany tekst w wyszukiwarce (byl ciemny na ciemnym) ---
   generyczne input[type="text"] ma wyzsza specyficznosc niz .el-search__input,
   dlatego wzmacniamy selektor, zeby tekst byl bialy */
.el-hmain input.el-search__input,
.el-header input.el-search__input { color: var(--w); }
.el-hmain input.el-search__input::placeholder { color: var(--s-400); }

/* --- newsletter w stopce ---
   tytul modulu dubluje nasze "Badz na biezaco" i byl ciemny na ciemnym -> chowamy */
.el-fnews__form #block-newsletter-label { display: none; }
/* tekst zgody prawnej — czytelna szarosc na ciemnym tle */
.el-fnews__form .block_newsletter p,
.el-fnews__form .block_newsletter .col-xs-12 > p { color: var(--s-400) !important; font-size: .82rem; line-height: 1.55; }
.el-fnews__form .block_newsletter a { color: var(--g-neon); }
/* komunikat po zapisie (alert) czytelny na ciemnym */
.el-fnews__form .block_newsletter p.alert { color: var(--w) !important; }

/* ---------- 11. PAS CTA ---------- */
.el-cta {
    position: relative; overflow: clip;
    background: linear-gradient(120deg, var(--k-900), #0C3E2C);
    padding: clamp(3.25rem, 5vw, 5rem) var(--pad);
    margin: 0;
}
.el-cta::after {
    content:""; position:absolute; right:-40px; top:-120px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,201,137,.25), transparent 68%);
    pointer-events: none;
}
.el-cta__inner {
    position: relative; max-width: var(--shell); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem;
    background: transparent; border-radius: 0; padding: 0;
}
.el-cta__text h2 { color: var(--w); font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 800; margin: 0 0 .5rem; }
.el-cta__text p { color: var(--s-300); margin: 0; font-size: 1.12rem; }
.el-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- 12. STOPKA ---------- */
#footer { background: var(--k); color: var(--s-400); padding: 0; margin: 0; }
#footer a { color: var(--s-300); }
#footer a:hover { color: var(--g-neon); }

.el-fnews { background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 2.1rem 0; }
.el-fnews__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.el-fnews__title { color: var(--w); font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem; }
.el-fnews__sub { color: var(--s-500); margin: 0; font-size: .95rem; }
.el-fnews__form { flex: 1 1 480px; max-width: 640px; }
.el-fnews__form .block_newsletter { background: transparent; box-shadow: none; padding: 0; margin: 0; float: none; width: 100%; }
.el-fnews__form .block_newsletter p { color: var(--s-500); font-size: .82rem; }
.el-fnews__form input[type="email"] {
    background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.13);
    border-radius: var(--pill) 0 0 var(--pill); color: var(--w);
    padding: .8rem 1.3rem; width: 100%;
}
.el-fnews__form input[type="email"]::placeholder { color: var(--s-500); }
.el-fnews__form input[type="email"]:focus { outline: none; border-color: var(--g-neon); box-shadow: 0 0 0 4px rgba(34,201,137,.16); background: rgba(255,255,255,.1); }
.el-fnews__form .input-group-btn > .btn, .el-fnews__form button[type="submit"] { border-radius: 0 var(--pill) var(--pill) 0; background: var(--g); box-shadow: none; }
.el-fnews__form button[type="submit"]:hover { background: var(--g-neon); color: var(--k-950); }
#footer .block-reassurance, .el-fnews .block-reassurance { display: none; }
#footer .block-social ul { display: flex; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
#footer .block-social ul li { background: rgba(255,255,255,.07); border-radius: var(--pill); transition: background-color var(--tf), transform var(--tf); }
#footer .block-social ul li:hover { background: var(--g); transform: translateY(-3px); }

.el-fmain { padding: 3.5rem 0 2.5rem; }
.el-fmain__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.el-fcol { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.el-fcol--brand { padding-right: 2rem; gap: 1rem; }
.el-fcol__title { color: var(--w); font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .6rem; }
.el-fcol > a { font-size: .96rem; padding: .15rem 0; transition: padding-left var(--tf), color var(--tf); }
.el-fcol > a:hover { padding-left: 6px; }
.el-fcol__desc { color: var(--s-500); font-size: .93rem; line-height: 1.7; margin: 0; }
.el-fcontact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.el-fcontact li { display: flex; align-items: center; gap: .6rem; }
.el-fcontact i { color: var(--g-neon); font-size: 1.15rem; }
.el-fcontact a { color: var(--s-200) !important; font-weight: 600; }
.el-fcontact a:hover { color: var(--g-neon) !important; }

.el-fbottom { border-top: 1px solid rgba(255,255,255,.07); }
.el-fbottom__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 1.2rem; padding-bottom: 1.2rem; }
.el-fbottom p { margin: 0; font-size: .84rem; color: var(--s-600); }
.el-fbottom a { color: var(--s-500); }

/* ---------- 13. PODSTRONY SYSTEMOWE ---------- */
#wrapper .breadcrumb { background: transparent; padding: 1.4rem 0 .9rem; font-size: .88rem; }
#wrapper .breadcrumb li a { color: var(--s-500); }
#wrapper .breadcrumb li:last-child span { color: var(--k-800); font-weight: 600; }

#main .page-header { background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.5rem 1.9rem; margin-bottom: 1.5rem; }
#main .page-header h1 { margin: 0; font-size: 1.7rem; }
#main .page-content, #content-wrapper .card, .page-content.page-cms { background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.75rem; }

#js-product-list-top, .products-selection { background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: .85rem 1.2rem; margin-bottom: 1.4rem; }
#js-product-list-top .row, .products-selection.row { align-items: center; }
.total-products p { margin: 0; color: var(--s-500); font-weight: 600; }
/* sortowanie: pole dopasowane do tresci, nie na cala kolumne */
.products-sort-order { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.products-sort-order .sort-by { color: var(--s-500); font-weight: 600; white-space: nowrap; margin: 0; }
.products-sort-order .select-title {
    display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem;
    width: auto; min-width: 0; max-width: 100%;
    border-radius: var(--pill); box-shadow: inset 0 0 0 2px var(--s-200);
    padding: .5rem .7rem .5rem 1.1rem; color: var(--k-800); font-weight: 600; cursor: pointer;
    transition: box-shadow var(--tf);
}
.products-sort-order .select-title:hover { box-shadow: inset 0 0 0 2px var(--g); }
.products-sort-order .select-title i { color: var(--s-500); }
.products-sort-order .dropdown-menu { border: 0; border-radius: var(--r); box-shadow: var(--sh-3); padding: .35rem; }
.products-sort-order .dropdown-menu .select-list { border-radius: var(--r-sm); padding: .45rem .8rem; }
.products-sort-order .dropdown-menu .select-list:hover, .products-sort-order .dropdown-menu a.current { background: var(--g-50); color: var(--g-deep); }
@media (max-width: 575px) { .products-sort-order { justify-content: flex-start; margin-top: .6rem; } .products-sort-order .select-title { flex: 1 1 auto; } }

/* --- PAGINACJA — bieżąca strona bywa <span>, nie <a>; stylujemy oba --- */
.pagination { margin-top: 1.5rem; }
.pagination .page-list { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; background: var(--w); border-radius: var(--pill); box-shadow: var(--sh-1); padding: .4rem; margin: 0; list-style: none; }
.pagination .page-list > li { display: inline-flex; margin: 0; }
.pagination .page-list > li > a,
.pagination .page-list > li > span {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    min-width: 42px; height: 42px; padding: 0 .85rem;
    border-radius: var(--pill); font-weight: 700; color: var(--k-700);
    transition: background-color var(--tf), color var(--tf);
}
.pagination .page-list > li > a:hover { background: var(--g-50); color: var(--g-deep); }
.pagination .page-list > li.current > a,
.pagination .page-list > li.current > span,
.pagination .page-list > li > a.current,
.pagination .page-list > li > span.current { background: var(--g); color: var(--w); box-shadow: var(--sh-g); }
.pagination .page-list > li.disabled > span { color: var(--s-300); }
.pagination .page-list .previous, .pagination .page-list .next { font-weight: 700; }
.pagination .page-list .previous.disabled, .pagination .page-list .next.disabled { display: none; }
#search_filters { background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.35rem; }
#search_filters .facet .facet-title { color: var(--k-900); font-weight: 700; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--g); }

.block-categories, #left-column .block, #right-column .block { background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.35rem; }
.block-categories .category-sub-menu li a { color: var(--k-700); border-radius: var(--r-sm); padding: .32rem .55rem; display: inline-block; transition: background-color var(--tf), color var(--tf), transform var(--tf); }
.block-categories .category-sub-menu li a:hover { background: var(--g-50); color: var(--g-deep); transform: translateX(3px); }

.product-cover img { border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--w); }
.product-images > li.thumb-container > .thumb { border-radius: var(--r-sm); border: 2px solid transparent; transition: border-color var(--tf); }
.product-images > li.thumb-container > .thumb.selected, .product-images > li.thumb-container > .thumb:hover { border-color: var(--g); }
#product .product-information, .product-information { background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.6rem; }
.product-prices .current-price span:first-child, .product-price { color: var(--g-deep); font-size: 2rem; font-weight: 800; }
.product-actions .add-to-cart { border-radius: var(--pill); font-size: 1.05rem; padding: 1rem 2.1rem; width: 100%; }
.tabs { border-radius: var(--r); box-shadow: var(--sh-1); background: var(--w); padding: 1.35rem; }
.tabs .nav-tabs { border-bottom: 2px solid var(--s-100); }
.tabs .nav-tabs .nav-link { color: var(--s-600); font-weight: 600; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover { color: var(--g-deep); border-bottom-color: var(--g); }

.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
    border: 2px solid var(--s-200); border-radius: var(--r-sm); color: var(--k-800);
    font-family: var(--font); padding: .65rem .95rem;
    transition: border-color var(--tf), box-shadow var(--tf);
}
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); outline: none; }
.form-control-label { color: var(--k-700); font-weight: 600; }

.pagination .page-list { background: var(--w); border-radius: var(--pill); box-shadow: var(--sh-1); padding: .4rem; }
.pagination a { border-radius: var(--pill); min-width: 40px; text-align: center; }
.pagination .current a { background: var(--g); color: var(--w); }
.pagination a:hover { background: var(--g-50); color: var(--g-deep); }

/* powiadomienia — miękkie tła w kolorach typu, zaokrąglone, pod motyw */
.alert {
    border: 0; border-radius: var(--r-sm); box-shadow: var(--sh-1);
    border-left: 4px solid var(--g); padding: 1rem 1.25rem; font-weight: 500;
    background: var(--g-50); color: var(--g-deep);
}
.alert a { font-weight: 700; text-decoration: underline; }
.alert-success { border-left-color: var(--g); background: var(--g-50); color: var(--g-deep); }
.alert-danger { border-left-color: #D6342E; background: #FDECEA; color: #B3261E; }
.alert-warning { border-left-color: #E39A17; background: #FFF6E5; color: #8A5A00; }
.alert-info { border-left-color: var(--s-400); background: var(--s-100); color: var(--k-800); }
.card, .modal-content { border: 0; border-radius: var(--r); box-shadow: var(--sh-2); }

/* przycisk powrotu na gore */
.el-to-top {
    position: fixed; right: 26px; bottom: 26px; z-index: 1100;
    width: 50px; height: 50px; border: 0; border-radius: var(--pill);
    background: var(--g); color: var(--w);
    box-shadow: var(--sh-g);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity var(--tm), transform var(--tm), background-color var(--tf);
}
.el-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.el-to-top:hover { background: var(--g-dark); }

/* ---------- 14. ANIMACJE ---------- */
@keyframes elFadeUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elPop      { 0% { opacity: 0; transform: scale(.85); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes elFloat    { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-36px) scale(1.05); } }
@keyframes elSpin     { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes elDrift    { from { transform: translateY(0); } to { transform: translateY(-18px); } }

.el-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--ts), transform var(--ts); will-change: opacity, transform; }
.el-reveal.is-revealed { opacity: 1; transform: translateY(0); }
.el-reveal[data-el-delay="1"] { transition-delay: 70ms; }
.el-reveal[data-el-delay="2"] { transition-delay: 140ms; }
.el-reveal[data-el-delay="3"] { transition-delay: 210ms; }
.el-reveal[data-el-delay="4"] { transition-delay: 280ms; }

/* ---------- 15. DOSTEPNOSC I RESPONSYWNOSC ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .el-btn:focus-visible {
    outline: 3px solid var(--g-neon); outline-offset: 2px; border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    /* „Ograniczony ruch" oznacza mniej ruchu, nie jego brak: przenikanie, kolor
       i cień zostają; znikają pętle, skalowanie, parallax i przesunięcia przy
       przewijaniu. Windows z wyłączonymi „Efektami animacji" zgłasza ten tryb
       w każdej przeglądarce, więc dawne wyłączenie wszystkiego dawało martwą stronę. */
    html { scroll-behavior: auto !important; }
    .el-reveal { transform: none !important; transition-property: opacity !important; }
    .el-card__inner:hover .el-card__img img, .el-cat:hover .el-cat__icon,
    .el-card__inner:hover .el-card__quick, .el-card__cta:active,
    .el-card__inner:hover, .el-cat:hover, .el-trust__item:hover,
    .el-pagi__list > li > a:hover, .btn-primary:hover, .btn-secondary:hover, .btn-default:hover { transform: none !important; }
    .el-hero__glow,
    .el-ring--2,
    .el-chip,
    .el-promo__glow,
    .el-cathead__glow { animation: none !important; }
}

@media (max-width: 1420px) {
    .el-hero__art { width: 380px; height: 380px; opacity: .8; }
    .el-ring--1 { width: 380px; height: 380px; }
    .el-ring--2 { width: 270px; height: 270px; }
    .el-ring--3 { width: 170px; height: 170px; }
}
@media (max-width: 1180px) {
    .el-hero__art { display: none; }
    .el-hcta { display: none; }
}
@media (max-width: 991px) {
    :root { --pad: 24px; }
    .el-nav { display: none; }
    .el-burger { display: flex; }
    .el-search { max-width: none; }
    .el-brand__tag { display: none; }
    .el-brand__mark { width: 42px; height: 42px; border-radius: 12px; }
    .el-brand__mark i { font-size: 1.4rem; }
    .el-brand__name { font-size: 1.4rem; }
    .el-fmain__in { grid-template-columns: 1fr 1fr; gap: 2rem; }
    #header { top: -43px; }
}
@media (max-width: 767px) {
    :root { --pad: 16px; }
    body { font-size: 15px; }
    .el-hide-mobile { display: none; }
    .el-topbar__links { display: none; }
    .el-topbar__in { justify-content: center; }
    .el-hmain { padding: .7rem 0; }
    /* nagłówek mobilny: burger + logo w 1. rzędzie, wyszukiwarka pełny 2. rząd */
    .el-hmain__in { flex-wrap: wrap; gap: .6rem .9rem; }
    .el-brandwrap { margin-right: auto; }
    .el-search { order: 3; flex: 1 1 100%; max-width: none; }
    .el-hero { padding: 3rem 0 3.25rem; }
    .el-hero__actions .el-btn { flex: 1 1 100%; }
    .el-hero__facts { gap: 1.5rem 2.25rem; }
    .el-cats__grid { grid-template-columns: 1fr; }
    .el-cat { flex-direction: row; align-items: center; }
    .el-cat__arrow { position: static; margin-left: auto; }
    .el-cta__inner { flex-direction: column; align-items: flex-start; }
    .el-cta__actions { width: 100%; }
    .el-cta__actions .el-btn { flex: 1 1 100%; }
    .el-fmain__in { grid-template-columns: 1fr; }
    /* dotyk: bez nakladki podgladu — dotkniecie zdjecia wchodzi w produkt */
    .el-card__hover { display: none; }
    .el-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* =========================================================================
   16. ZIELEN DOMINUJE — czern schodzi do roli drugoplanowej
   Wielkie plaszczyzny (naglowek, hero, stopka, banery) przechodza
   z prawie-czarnych na gleboka zielen. Czern zostaje w tekscie i detalach.
   Blok na koncu pliku — wygrywa w kaskadzie.
   ========================================================================= */
body { background: #EDF5EF; }

/* naglowek */
#header { background: linear-gradient(120deg, #06281C 0%, #0B3E2B 55%, #12543A 145%); }
#header.is-scrolled .el-nav { background: rgba(8,46,32,.92); }

/* hero — zielen dominuje, ciemniej po lewej dla kontrastu tekstu */
.el-hero { background: linear-gradient(140deg, #072C1F 0%, #0C4A33 52%, #0F6B47 155%); }

/* stopka */
#footer { background: #06241A; }
.el-fnews { background: rgba(255,255,255,.045); }

/* CTA */
.el-cta { background: linear-gradient(120deg, #0A3B29, #0D6042); }

/* promo band */
.el-promo__in { background: linear-gradient(120deg, #0A3B29 0%, #0B4230 45%, #0D5A3D 150%); }

/* szuflada mobilna */
.el-drawer { background: #082E20; }

/* delikatny zielony akcent na jasnych sekcjach */
.el-trust__list { background: var(--g-100); }
.el-section__title, .el-psec__title { color: var(--g-deep); }

/* =========================================================================
   17. NAGLOWEK KATEGORII (zielony baner — koniec z pusta biala plachta)
   ========================================================================= */
#js-product-list-header { margin-bottom: 1.5rem; }
.el-cathead {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1.75rem;
    background: linear-gradient(120deg, #06281C 0%, #0C4A33 55%, #0F6B47 155%);
    border-radius: var(--r-lg);
    padding: 1.7rem 2rem;
    color: var(--w);
    box-shadow: var(--sh-2);
}
.el-cathead--desc { padding: 2.1rem 2rem; }
.el-cathead__glow {
    position: absolute; right: -50px; top: -70px;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,201,137,.32), transparent 68%);
    pointer-events: none;
    animation: elFloat 12s ease-in-out infinite alternate;
}
.el-cathead__body { position: relative; flex: 1 1 auto; }
.el-cathead__eyebrow { color: var(--g-neon); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .35rem; }
.el-cathead__title { color: var(--w); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.el-cathead__desc { color: rgba(255,255,255,.82); font-size: .96rem; line-height: 1.65; margin: .75rem 0 0; max-width: 72ch; }
.el-cathead__desc a { color: var(--g-neon); }
.el-cathead__cover { position: relative; flex: 0 0 auto; }
.el-cathead__cover img { border-radius: var(--r); box-shadow: var(--sh-3); max-height: 130px; width: auto; }
@media (max-width: 767px) {
    .el-cathead { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.35rem; }
    .el-cathead__cover img { max-height: 90px; }
}

/* =========================================================================
   18. PAGINACJA — jedna linia + pole "idź do strony"
   ========================================================================= */
.el-pagi {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem;
}
.el-pagi__summary { color: var(--s-500); font-weight: 600; font-size: .9rem; }
.el-pagi__nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.el-pagi__list {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .3rem;
    background: var(--w); border-radius: var(--pill); box-shadow: var(--sh-1);
    padding: .4rem; margin: 0; list-style: none; max-width: 100%; overflow-x: auto;
}
.el-pagi__list::-webkit-scrollbar { height: 0; }
.el-pagi__list > li { display: inline-flex; flex: 0 0 auto; }
.el-pagi__list > li > a,
.el-pagi__list > li > span {
    display: inline-flex; align-items: center; justify-content: center; gap: .2rem;
    min-width: 42px; height: 42px; padding: 0 .85rem; white-space: nowrap;
    border-radius: var(--pill); font-weight: 700; color: var(--k-700);
    transition: background-color var(--tf), color var(--tf);
}
.el-pagi__list > li > a:hover { background: var(--g-50); color: var(--g-deep); }
.el-pagi__list > li.current > a,
.el-pagi__list > li.current > span { background: var(--g); color: var(--w); box-shadow: none; }
.el-pagi__list > li.disabled > span { color: var(--s-300); }
.el-pagi__list .spacer { color: var(--s-400); }
.el-pagi__goto { display: flex; align-items: center; gap: .55rem; }
.el-pagi__goto label { color: var(--s-500); font-weight: 600; font-size: .88rem; }
.el-pagi__goto input {
    width: 68px; text-align: center; border: 2px solid var(--s-200);
    border-radius: var(--r-sm); padding: .45rem .4rem; font-family: var(--font); font-weight: 700; color: var(--k-800);
}
.el-pagi__goto input:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); outline: none; }
.el-pagi__of { color: var(--s-500); font-size: .88rem; white-space: nowrap; }
.el-pagi__go { background: var(--g); color: var(--w); border: 0; border-radius: var(--pill); padding: .5rem 1.15rem; font-weight: 700; font-family: var(--font); cursor: pointer; transition: background-color var(--tf); }
.el-pagi__go:hover { background: var(--g-dark); }
@media (max-width: 767px) {
    .el-pagi { justify-content: center; }
    .el-pagi__nav { order: -1; width: 100%; }
    .el-pagi__lbl { display: none; }
}

/* =========================================================================
   19. NEWSLETTER — wyrownanie: pole+przycisk na rowni z tytulem
   Tekst zgody pozycjonujemy pod polem (poza flow), zeby wiersz formularza
   wysrodkowal sie wzgledem "Badz na biezaco".
   ========================================================================= */
/* wyrownanie GORAMI: tytul po lewej na tej samej linii co pole e-mail
   (formularz jest wyzszy przez tekst zgody, wiec centrowanie podnosilo pole) */
.el-fnews { padding: 2rem 0; }
.el-fnews__in { align-items: flex-start; }
.el-fnews__text { padding-top: .1rem; }
/* pole i tekst zgody w normalnym flow -> maja rowny lewy brzeg */
.el-fnews__form .block_newsletter form > .row > .col-xs-12 + .col-xs-12 { margin-top: .55rem; }

/* =========================================================================
   20. STRONA KONTAKT — zielone ikony, zielony przycisk pliku, porzadek
   ========================================================================= */
#left-column .block .material-icons,
.contact-rich .icon i,
#left-column .block i.material-icons { color: var(--g); }
#left-column .block a { color: var(--g-deep); font-weight: 600; }
#left-column .block a:hover { color: var(--g); }
/* niebieski "Wybierz plik" -> zielony (rozne przegladarki) */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--g); color: var(--w); border: 0; border-radius: var(--pill);
    padding: .5rem 1.1rem; margin-right: .85rem; font-family: var(--font); font-weight: 700; cursor: pointer;
    transition: background-color var(--tf);
}
input[type="file"]::file-selector-button:hover { background: var(--g-dark); }
.custom-file-label::after { background: var(--g); color: var(--w); border: 0; }
.contact-form .form-control, #content .contact-form input { border-radius: var(--r-sm); }

/* pole „Wybierz plik" (bootstrap-filestyle) — zielony przycisk, zaokrąglone,
   spójne z resztą strony (był niebieski .btn-default) */
.bootstrap-filestyle.input-group { border-radius: var(--r-sm); overflow: hidden; box-shadow: none; }
.bootstrap-filestyle input.form-control {
    border-radius: var(--r-sm) 0 0 var(--r-sm) !important; border-right: 0;
}
.bootstrap-filestyle .btn,
.bootstrap-filestyle label.btn,
.bootstrap-filestyle .btn-default {
    background: var(--g) !important; color: var(--w) !important; border: 0 !important;
    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
    font-weight: 700; letter-spacing: .02em; padding: .6rem 1.3rem; box-shadow: none !important;
    transition: background-color var(--tf);
}
.bootstrap-filestyle .btn:hover,
.bootstrap-filestyle label.btn:hover { background: var(--g-dark) !important; }

/* =========================================================================
   21. WERSJA JASNA — biel + jaśniejsza zieleń, lekko i przewiewnie
   Odwrocenie ciezkiej ciemnej zieleni: naglowek i hero na jasno,
   banery na mint, stopka jako jedyna ciemna kotwica.
   Blok na samym koncu — wygrywa w kaskadzie.
   ========================================================================= */
body { background: #FAFDFB; }

/* ---- NAGLOWEK: jasny ---- */
#header {
    background: #FFFFFF;
    color: var(--k-700);
    box-shadow: 0 1px 0 var(--s-100), 0 6px 20px rgba(10,12,15,.05);
}
#header.is-scrolled { box-shadow: 0 8px 26px rgba(10,12,15,.10); }

/* pasek kontaktowy jasny */
.el-header .el-topbar, .el-topbar { background: #F3F7F5; border-bottom: 1px solid var(--s-100); }
.el-topbar__item { color: var(--s-600) !important; }
.el-topbar__item:hover { color: var(--g-deep) !important; }
.el-topbar__item i { color: var(--g); }

/* znak firmowy na jasnym */
.el-brand__name { color: var(--k-900) !important; }
.el-brand__name em { color: var(--g); }
.el-brand__tag { color: var(--s-500); }

/* wyszukiwarka na jasnym */
.el-hmain input.el-search__input,
.el-header input.el-search__input,
.el-search__input { background: var(--s-100); border-color: transparent; color: var(--k-800); }
.el-hmain input.el-search__input::placeholder,
.el-search__input::placeholder { color: var(--s-500); }
.el-hmain input.el-search__input:focus,
.el-search__input:focus { background: var(--w); border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); }

/* nawigacja na jasnym */
.el-nav { border-top: 1px solid var(--s-100); }
.el-nav__link { color: var(--k-700) !important; }
.el-nav__link:hover, .el-nav__link.is-active { color: var(--g-deep) !important; }
.el-nav__link--accent { color: var(--g) !important; }
#header.el-sticky .el-nav, #header.is-scrolled .el-nav { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }

/* burger na jasnym */
.el-header .el-burger { background: var(--s-100); }
.el-header .el-burger span { background: var(--k-700); }
.el-header .el-burger:hover { background: var(--g); }
.el-header .el-burger:hover span { background: var(--w); }

/* ---- HERO: jasny, przewiewny ---- */
.el-hero {
    background: linear-gradient(155deg, #FFFFFF 0%, #EDF8F1 55%, #DDF2E6 120%);
    color: var(--k-800);
}
.el-hero__grid {
    background-image:
        linear-gradient(rgba(18,146,95,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,146,95,.06) 1px, transparent 1px);
}
.el-hero__eyebrow { background: var(--w); border-color: var(--g-100); color: var(--g-deep); box-shadow: var(--sh-1); }
.el-hero__title { color: var(--k-900); }
.el-hero__accent {
    background: linear-gradient(100deg, var(--g), var(--g-dark));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.el-hero__lead { color: var(--s-600); }
.el-hero__facts { border-top-color: var(--s-200); }
.el-hero__facts strong { color: var(--k-900); }
.el-hero__facts span { color: var(--s-500); }
.el-hero .el-btn--ghost { color: var(--g-deep); box-shadow: inset 0 0 0 2px var(--g-100); }
.el-hero .el-btn--ghost:hover { background: var(--g-50); color: var(--g-deep); box-shadow: inset 0 0 0 2px var(--g); }
/* dekoracja techniczna na jasnym */
.el-ring--1 { border-color: rgba(18,146,95,.18); }
.el-ring--2 { border-color: rgba(18,146,95,.28); }
.el-ring--3 { border-color: rgba(18,146,95,.12); background: radial-gradient(circle, rgba(34,201,137,.10), transparent 70%); }
.el-chip { background: var(--w); border-color: var(--g-100); color: var(--g-deep); box-shadow: var(--sh-2); }

/* ---- BANERY: jasny mint ---- */
.el-promo__in {
    background: linear-gradient(120deg, #F1FAF5 0%, #E6F6EE 60%, #D8F0E2 130%);
    box-shadow: var(--sh-1);
}
.el-promo__title { color: var(--k-900); }
.el-promo__sub { color: var(--s-600); }
.el-promo__eyebrow { color: var(--g-deep); }
.el-promo__glow { background: radial-gradient(circle, rgba(34,201,137,.18), transparent 68%); }

.el-cta { background: linear-gradient(120deg, #EDF8F1, #DBF1E4); }
.el-cta::after { background: radial-gradient(circle, rgba(34,201,137,.16), transparent 70%); }
.el-cta__text h2 { color: var(--k-900); }
.el-cta__text p { color: var(--s-600); }
.el-cta .el-btn--ghost-light { color: var(--g-deep); box-shadow: inset 0 0 0 2px var(--g-100); }
.el-cta .el-btn--ghost-light:hover { background: var(--g-50); color: var(--g-deep); box-shadow: inset 0 0 0 2px var(--g); }

/* ---- NAGLOWEK KATEGORII: jasniejsza zielen ---- */
.el-cathead { background: linear-gradient(120deg, #0E7A4F 0%, #12925F 55%, #1FB577 150%); }

/* ---- STOPKA: jedyna ciemna kotwica, ciemna zielen (nie czern) ---- */
#footer { background: #0B2B20; }
.el-fnews { background: rgba(255,255,255,.04); }

/* delikatny zielony akcent na jasnych sekcjach — subtelniej */
.el-trust__list { background: var(--s-200); }

/* =========================================================================
   22. "..." JAKO POLE DO WPISANIA STRONY  +  TWITTER -> X
   ========================================================================= */
.pagination .el-pagi__list { flex-wrap: nowrap; }
/* "..." rozwijane w pole „przejdź do strony" — domyślnie zwykłe kropki,
   po kliknięciu w tym samym miejscu pojawia się pole na numer + strzałka */
.el-pagi__jump { position: relative; display: inline-flex; align-items: center; }

.el-pagi__jump-toggle {
    width: 44px; height: 42px; padding: 0; border: 0; cursor: pointer;
    background: transparent; color: var(--k-700);
    border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; line-height: 1;
    transition: background-color var(--tf), color var(--tf);
}
.el-pagi__jump-toggle:hover { background: var(--g-50); color: var(--g-deep); }
.el-pagi__jump.is-active .el-pagi__jump-toggle { display: none; }

.el-pagi__jump-edit {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--w); border: 2px solid var(--g);
    border-radius: var(--pill); padding: 3px 4px 3px 10px;
    box-shadow: 0 6px 16px rgba(18,146,95,.18);
    animation: elJumpIn .18s ease;
}
@keyframes elJumpIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.el-pagi__jump-input {
    width: 3.2ch; border: 0; outline: none; background: transparent;
    font-family: var(--font); font-weight: 700; font-size: 1rem; color: var(--k-900);
    text-align: center; padding: 0; -moz-appearance: textfield;
}
.el-pagi__jump-input::placeholder { color: var(--s-400); font-weight: 600; }
.el-pagi__jump-go {
    width: 30px; height: 30px; flex: 0 0 auto; border: 0; cursor: pointer;
    background: var(--g); color: var(--w); border-radius: var(--pill);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--tf), transform var(--tf);
}
.el-pagi__jump-go:hover { background: var(--g-dark); transform: translateX(1px); }
.el-pagi__jump-go i { font-size: 1.05rem; }

/* Twitter -> X (przyciski udostepniania na produkcie i w stopce) */
.social-sharing li.twitter,
.block-social li.twitter,
#footer li.twitter {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%234A5160'%20d='M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-size: 52% !important;
    background-repeat: no-repeat !important;
}
.social-sharing li.twitter:hover,
.block-social li.twitter:hover,
#footer li.twitter:hover {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z'/%3E%3C/svg%3E") !important;
}

/* =========================================================================
   23. DOSTROJENIE: mniej bieli, jasniejsza stopka, detale
   ========================================================================= */

/* strona za biala -> lekki zielono-szary odcien tla; biale karty ladnie odbijaja */
body { background: #E9F1EC; }

/* gora za jasna -> naglowek lekko przygaszony (nie czysta biel) */
#header { background: #F4F8F5; }
.el-header .el-topbar, .el-topbar { background: #EBF2EE; }
#header.el-sticky .el-nav, #header.is-scrolled .el-nav { background: rgba(244,248,245,.94); }

/* podpis pod logo — troche nizej */
.el-brand__text { gap: .45rem; }
.el-brand__tag { margin-top: .1rem; }

/* dol za ciemny -> jasniejsza zielen; logo w stopce bylo czarne -> na biel */
#footer { background: #123B2C; }
.el-fnews { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.el-fcol--brand .el-brand__name { color: var(--w) !important; }
.el-fcol--brand .el-brand__name em { color: var(--g-neon); }
.el-fcol--brand .el-brand__tag { color: var(--s-400); }

/* =========================================================================
   24. PODKATEGORIE — kafle z ikona (bez brzydkich miniatur)
   ========================================================================= */
.el-subcats {
    background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1);
    padding: 1.6rem; margin-bottom: 1.5rem;
}
.el-subcats__title { font-size: 1.3rem; font-weight: 800; color: var(--k-900); margin: 0 0 1.15rem; }
.el-subcats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.el-subcat {
    position: relative; display: flex; align-items: center; gap: .9rem;
    background: var(--s-50); border: 1px solid var(--s-100);
    border-radius: var(--r-sm); padding: .95rem 1.05rem;
    min-width: 0; overflow: hidden;   /* nic nie wychodzi poza kafel */
    transition: transform var(--tm), box-shadow var(--tm), background-color var(--tf), border-color var(--tf);
}
.el-subcat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); background: var(--g-50); border-color: var(--g-100); }
.el-subcat__icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(140deg, var(--g-neon), var(--g-dark)); color: var(--w);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(18,146,95,.3);
    transition: transform var(--tm);
}
.el-subcat:hover .el-subcat__icon { transform: scale(1.08) rotate(-5deg); }
.el-subcat__icon i { font-size: 1.45rem; }
/* nazwa: może się zwężać (min-width:0) i łamać długie słowa — arrow zostaje w środku */
.el-subcat__name {
    flex: 1 1 auto; min-width: 0;
    font-weight: 700; color: var(--k-800); font-size: .95rem; line-height: 1.3;
    overflow-wrap: break-word; word-break: normal; hyphens: none;
}
.el-subcat:hover .el-subcat__name { color: var(--g-deep); }
.el-subcat__arrow { flex: 0 0 auto; margin-left: auto; color: var(--s-300); transition: transform var(--tf), color var(--tf); }
.el-subcat__arrow i { display: block; font-size: 1.3rem; }
.el-subcat:hover .el-subcat__arrow { color: var(--g); transform: translateX(3px); }

/* =========================================================================
   25. STRONA PRODUKTU — zdjecie przyklejone (koniec pustej lewej strony)
       + ladna tabela w opisie
   ========================================================================= */
#product .product-container { align-items: flex-start; }
#product .product-container > .col-md-6:first-child { position: sticky; top: 96px; align-self: flex-start; }
@media (max-width: 991px) { #product .product-container > .col-md-6:first-child { position: static; } }

/* opis produktu na pelna szerokosc, pod dwiema kolumnami */
.el-product-tabs { width: 100%; margin-top: 2rem; }
.el-product-tabs .tab-content { padding-top: 1.1rem; }
.el-product-tabs .product-description img { border-radius: var(--r-sm); }

.product-description table, .tabs table, #product .rte-content table {
    width: 100%; border-collapse: collapse; margin: 1rem 0;
    border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-1); font-size: .9rem;
}
.product-description table th, .tabs table th {
    background: var(--g) !important; color: var(--w) !important; font-weight: 700;
    padding: .55rem .75rem; text-align: left; border: 0 !important;
}
.product-description table td, .tabs table td { padding: .5rem .75rem; border: 0 !important; border-top: 1px solid var(--s-100) !important; }
.product-description table tr:nth-child(even) td, .tabs table tr:nth-child(even) td { background: var(--s-50) !important; }
/* szerokie tabele specyfikacji — kontener przewijany w poziomie (JS opakowuje) */
.el-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1rem 0; }
.el-table-scroll > table { margin: 0; }
@media (max-width: 767px) { .el-table-scroll > table { min-width: 540px; } }

/* =========================================================================
   26. PASEK INFO (.el-trust) — animacja
   ========================================================================= */
.el-trust__item { transition: transform var(--tm), background-color var(--tf); }
.el-trust__item i { transition: transform var(--tm); }
.el-trust__item:hover { transform: translateY(-4px); }
.el-trust__item:hover i { transform: scale(1.18) rotate(-6deg); }
.el-trust__item::after {
    content: ""; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--g);
    transform: scaleX(0); transform-origin: left center; transition: transform var(--tm);
}
.el-trust__item { position: relative; overflow: hidden; }
.el-trust__item:hover::after { transform: scaleX(1); }

/* =========================================================================
   27. DALSZE DOSTROJENIE
   ========================================================================= */

/* --- przycisk "Szybki podgląd" — czysty, elegancki --- */
.el-card__quick {
    background: rgba(255,255,255,.95);
    color: var(--g-deep) !important;
    box-shadow: 0 8px 20px rgba(10,12,15,.28);
    backdrop-filter: blur(3px);
    font-weight: 700;
    padding: .62rem 1.4rem;
    transform: translateY(14px) scale(.96);
    transition: background-color var(--tf), color var(--tf), transform var(--tm), box-shadow var(--tf);
}
.el-card__inner:hover .el-card__quick,
.el-card__inner:focus-within .el-card__quick { transform: translateY(0) scale(1); }
.el-card__quick:hover { background: var(--g); color: var(--w) !important; box-shadow: var(--sh-g); }
.el-card__quick:active { transform: scale(.95); }

/* --- modal szybkiego podglądu — animacja otwarcia --- */
.quickview .modal-content, #product-modal .modal-content {
    border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
}
.quickview.show .modal-dialog,
.quickview.in .modal-dialog,
#product-modal.show .modal-dialog {
    animation: elQvIn .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes elQvIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.quickview .modal-header .close, #product-modal .close {
    transition: transform var(--tf), color var(--tf); opacity: 1;
}
.quickview .modal-header .close:hover { transform: rotate(90deg) scale(1.1); color: var(--g); }

/* --- "Zobacz także" — odstep od sekcji opisu produktu --- */
#product .product-accessories, .product-accessories { margin-top: 3rem; }

/* --- STRONA KONTAKT — wyrownanie kolumn (lewa info z formularzem) ---
   Nagłówek formularza siedzi w karcie z paddingiem 28px u góry, więc jest
   ~44px niżej niż tytuł lewej kolumny. Na stronie kontaktu przesuwamy lewą
   kolumnę o tyle w dół, żeby oba tytuły były na jednej linii. Scoped do
   .page-contact — bo #left-column to też kolumna filtrów w kategoriach. */
/* --- STRONA KONTAKT (przebudowa): dwie RÓWNE karty obok siebie --- */
.page-contact #content-wrapper { flex: 0 0 100%; max-width: 100%; width: 100%; }
.page-contact #left-column, .page-contact #right-column { display: none; }
.page-contact .page-content.card, .page-contact #content .card:first-child { margin-top: 0; }

.el-contact { width: 100%; }
.el-contact__grid {
    display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 1.5rem; align-items: stretch;
}
/* mapa Google pod formularzem */
.el-contact__map {
    margin-top: 1.5rem; border-radius: var(--r-xl); overflow: hidden;
    box-shadow: var(--sh-1); border: 1px solid var(--s-100); line-height: 0;
}
.el-contact__map iframe { display: block; width: 100%; height: 380px; border: 0; }
/* w trybie ciemnym — ciemna mapa (filtr) + subtelna ramka */
html[data-el-theme="dark"] .el-contact__map { border-color: rgba(255,255,255,.08); }
html[data-el-theme="dark"] .el-contact__map iframe { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.92); }
@media (max-width: 767px) { .el-contact__grid { grid-template-columns: 1fr; } }
.el-contact__card {
    background: var(--w); border-radius: var(--r-xl);
    box-shadow: var(--sh-1); padding: 2rem;
    display: flex; flex-direction: column; min-width: 0;
}

/* nagłówki obu kart równo (ten sam padding karty, brak górnego marginesu) */
.el-contact__card--info .contact-rich h4,
.el-contact__card--form .contact-form h3,
.el-contact__card--form .login-form h1,
.el-contact__card--form header h1,
.el-contact__card--form h3 {
    font-size: 1.2rem; font-weight: 800; color: var(--k-900);
    letter-spacing: -.01em; margin: 0 0 1.3rem; text-transform: uppercase;
}

/* lewa karta: contact-rich jako czyste wiersze (bez zagnieżdżonych kart) */
.el-contact__card--info .contact-rich { display: flex; flex-direction: column; }
.el-contact__card--info .contact-rich .block {
    display: flex; align-items: flex-start; gap: .95rem;
    background: transparent; border: 0; box-shadow: none;
    padding: .7rem 0; margin: 0;
}
.el-contact__card--info .contact-rich hr {
    border: 0; border-top: 1px solid var(--s-100); margin: .2rem 0;
}
.el-contact__card--info .contact-rich .icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
    background: var(--g-50); display: flex; align-items: center; justify-content: center;
}
.el-contact__card--info .contact-rich .icon i { color: var(--g); font-size: 1.35rem; }
.el-contact__card--info .contact-rich .data { color: var(--s-600); line-height: 1.55; padding-top: .1rem; }
.el-contact__card--info .contact-rich .data a { color: var(--g-deep); font-weight: 700; }

/* prawa karta: formularz */
.el-contact__card--form .contact-form,
.el-contact__card--form .login-form { padding-top: 0; margin-top: 0; }
.el-contact__card--form .login-form { display: flex; flex-direction: column; flex: 1 1 auto; }
.el-contact__card--form .login-form header p { color: var(--s-500); margin: -.7rem 0 1.5rem; font-size: .95rem; }
.el-contact__card--form .form-fields label { display: block; margin-bottom: 1.1rem; }
.el-contact__card--form .form-fields label > span {
    display: block; font-weight: 700; color: var(--k-800); margin-bottom: .4rem; font-size: .92rem;
}
.el-contact__card--form .form-footer { margin-top: auto; display: flex; justify-content: flex-end; padding-top: .5rem; }

/* --- STOPKA: przycisk "Napisz do nas" ---
   Uwaga: '#footer a' oraz '#footer a:hover' (selektor z ID) wygrywały
   z regułami przycisku i psuły kolor tekstu (na hover neon-na-neonie =
   niewidoczny). Dlatego tu też prefiksujemy '#footer', by wygrać specyfiką. */
#footer .el-btn--primary {
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    padding: .7rem 1.5rem;
    margin-top: 1rem;   /* odstep od tekstu — przycisk troche nizej */
    align-self: flex-start;
    color: var(--w);
}
#footer .el-btn--primary::after { display: none; }
#footer .el-btn--primary:hover, #footer .el-btn--primary:focus {
    background: var(--w); color: var(--g-deep);
    box-shadow: 0 12px 26px rgba(0,0,0,.32); transform: translateY(-2px);
}

/* =========================================================================
   28. PAS CTA — zaokraglona karta (koniec z ostrym prostokatem na tle)
       + widoczny przycisk z telefonem
   ========================================================================= */
/* CTA jako zaokraglona karta (wrapper + inner), nie pas na cala szerokosc */
.el-cta {
    max-width: var(--shell);
    margin: 0 auto clamp(3rem, 5vw, 5rem);
    padding: 0 var(--pad);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.el-cta::after { display: none; }
.el-cta__inner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #EDF8F1 0%, #E0F3E7 55%, #CFEBDC 130%);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-2);
    padding: clamp(2.25rem, 4vw, 3.5rem);
}
.el-cta__inner::after {
    content: ""; position: absolute; right: -40px; top: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,201,137,.16), transparent 70%);
    pointer-events: none;
}
/* przycisk z numerem telefonu — bialy, wyrazny na jasnym mincie */
.el-cta .el-btn--ghost-light {
    background: var(--w);
    color: var(--g-deep);
    box-shadow: inset 0 0 0 2px var(--g-100), var(--sh-1);
}
.el-cta .el-btn--ghost-light:hover {
    background: var(--g);
    color: var(--w);
    box-shadow: var(--sh-g);
    transform: translateY(-2px);
}

/* =========================================================================
   29. "Bądź na bieżąco" przeniesione na DOL stopki (pod kolumny)
   ========================================================================= */
.el-fnews { background: transparent; border: 0; }
.el-fnews--bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 2.4rem 0;
}
.el-fmain { padding-top: 3rem; }

/* autor strony — ta sama czcionka i kolor co "Wszystkie prawa zastrzeżone" */
.el-fcredit {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: .9rem 0 1rem;
    text-align: center;
}
.el-fcredit p { margin: 0; font-size: .84rem; color: var(--s-600); }

/* =========================================================================
   30. PASEK "Jest N produktów / Sortuj wg" — wkomponowany toolbar
       (zamiast odklejonej bialej karty)
   ========================================================================= */
#js-product-list-top, .products-selection {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--s-200);
    padding: 0 .25rem .9rem !important;
    margin: 0 0 1.75rem !important;
    /* licznik po lewej, sortowanie po PRAWEJ */
    display: flex !important; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
}
#js-product-list-top > [class*="col-"],
.products-selection > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding-left: 0; padding-right: 0; }
#js-product-list-top .col-lg-7, .products-selection .col-lg-7 { margin-left: auto; }
/* wiersz sortowania: etykieta „Sortuj wg:" tuż przy polu (bez zawijania) */
#js-product-list-top .sort-by-row, .products-selection .sort-by-row {
    margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
}
.sort-by-row > span, .sort-by-row .sort-by {
    flex: 0 0 auto; width: auto !important; max-width: none !important; margin: 0 !important;
    white-space: nowrap;
}
.sort-by-row > [class*="col-md-9"], .sort-by-row > [class*="col-"]:last-child {
    flex: 0 0 auto; width: auto; max-width: none;
}
.products-sort-order { justify-content: flex-end !important; }
.total-products { display: flex; align-items: center; }
/* licznik produktów jako miękka zielona pigułka (zamiast sztywnego tekstu) */
.total-products p {
    margin: 0; color: var(--g-deep); font-weight: 700; font-size: .95rem;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--g-50); border: 1px solid var(--g-100);
    padding: .5rem 1.05rem; border-radius: var(--pill);
}
.total-products p::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--g); box-shadow: 0 0 0 3px rgba(18,146,95,.2); flex: 0 0 auto;
}
/* dropdown sortowania — czysty pill */
.products-sort-order .select-title {
    background: var(--w);
    box-shadow: inset 0 0 0 2px var(--s-200);
}
.products-sort-order .select-title:hover { box-shadow: inset 0 0 0 2px var(--g); color: var(--g-deep); }

/* autor strony wysrodkowany miedzy prawami autorskimi a PrestaShop */
.el-fbottom__in { flex-wrap: wrap; gap: .4rem 1.5rem; }
.el-fbottom__credit { text-align: center; flex: 1 1 auto; }

/* =========================================================================
   31. WŁASNY SZYBKI PODGLĄD (modal .el-qv) — zamiast natywnego PrestaShopa
   ========================================================================= */
body.el-qv-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.el-qv {
    position: fixed; inset: 0; z-index: 2000;
    visibility: hidden;
    transition: visibility 0s .34s;
}
.el-qv.is-open { visibility: visible; transition: visibility 0s 0s; }

/* pełne, zaprojektowane tło EL-SKLEP (nieprzezroczyste — nie widać strony pod
   spodem, więc nic się nie „tnie" przy podglądzie produktów niżej na liście) */
.el-qv__scrim {
    position: absolute; inset: 0;
    background:
        radial-gradient(60rem 32rem at 18% 12%, rgba(34,201,137,.22), transparent 62%),
        radial-gradient(50rem 28rem at 86% 90%, rgba(18,146,95,.28), transparent 58%),
        linear-gradient(140deg, #0B1512 0%, #0C1E18 42%, #06110E 100%);
    opacity: 0; transition: opacity .3s ease;
}
/* delikatna tekstura z kropek, wygaszona na brzegach */
.el-qv__scrim::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 80%);
    mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 80%);
}
.el-qv.is-open .el-qv__scrim { opacity: 1; }

/* subtelny znak wodny marki za kartą */
.el-qv__brand {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(1.04);
    display: flex; align-items: center; gap: .5rem;
    color: rgba(255,255,255,.07); pointer-events: none;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
    white-space: nowrap; user-select: none;
}
.el-qv.is-open .el-qv__brand { transform: translate(-50%, -50%) scale(1); }
.el-qv__brand i { font-size: 8rem; color: rgba(34,201,137,.10); }
.el-qv__brand-txt { font-size: 7rem; font-weight: 800; letter-spacing: -.04em; }
.el-qv__brand-txt em { font-style: normal; color: rgba(34,201,137,.14); }
@media (max-width: 767px) {
    .el-qv__brand i { font-size: 4rem; }
    .el-qv__brand-txt { font-size: 3.4rem; }
}

.el-qv__dialog {
    position: absolute; left: 50%; top: 50%;
    width: min(940px, 94vw); max-height: 90vh; overflow-y: auto;
    background: var(--w); border-radius: var(--r-xl);
    box-shadow: var(--sh-3);
    opacity: 0; transform: translate(-50%, -44%) scale(.94);
    transition: opacity .28s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.el-qv.is-open .el-qv__dialog { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.el-qv__close {
    position: absolute; top: .85rem; right: .85rem; z-index: 2;
    width: 40px; height: 40px; border: 0; border-radius: var(--pill);
    background: var(--s-100); color: var(--k-700); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--tf), color var(--tf), transform var(--tf);
}
.el-qv__close:hover { background: var(--g); color: var(--w); transform: rotate(90deg); }

.el-qv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; padding: 1.9rem; }
.el-qv__media {
    position: relative; background: var(--s-50); border-radius: var(--r-lg);
    padding: 1.25rem; display: flex; align-items: center; justify-content: center;
    min-height: 260px;
}
.el-qv__img { max-width: 100%; max-height: 420px; height: auto; border-radius: var(--r-sm); display: block; transition: opacity var(--tm); }
.el-qv__flag {
    position: absolute; top: .9rem; left: .9rem;
    background: var(--g); color: var(--w);
    border-radius: var(--pill); font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: .28rem .8rem;
}
.el-qv__flag:empty { display: none; }

.el-qv__body { display: flex; flex-direction: column; padding-right: 1.5rem; }
.el-qv__ref { color: var(--s-400); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .4rem; }
.el-qv__title { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .9rem; color: var(--k-900); line-height: 1.25; }
.el-qv__price { color: var(--g-deep); font-size: 1.5rem; font-weight: 800; margin: 0 0 .9rem; }
.el-qv__price:empty { display: none; }
.el-qv__desc { color: var(--s-600); font-size: .96rem; line-height: 1.65; margin-bottom: 1.4rem; }
.el-qv__desc p { margin: 0 0 .6rem; }
.el-qv__loading { color: var(--s-400); font-style: italic; }
.el-qv__actions { margin-top: auto; display: flex; gap: .8rem; flex-wrap: wrap; }
.el-qv__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--g); color: var(--w) !important;
    border-radius: var(--pill); font-weight: 700; font-size: 1rem;
    padding: .85rem 1.8rem; box-shadow: var(--sh-g);
    transition: background-color var(--tf), transform var(--tf), box-shadow var(--tm);
}
.el-qv__cta:hover { background: var(--g-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18,146,95,.4); }
.el-qv__cta i { font-size: 1.2rem; }

@media (max-width: 767px) {
    .el-qv__grid { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.1rem; }
    .el-qv__media { min-height: 180px; }
    .el-qv__body { padding-right: 0; }
    .el-qv__dialog { width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
    .el-qv, .el-qv__scrim, .el-qv__dialog { transition-property: opacity !important; }
    .el-qv__dialog { transform: translate(-50%, -50%) scale(1) !important; animation: none !important; }
}

/* =========================================================================
   32. POWIĘKSZENIE ZDJĘCIA PRODUKTU (#product-modal) — czysty lightbox
       w stylu motywu (to samo tło co szybki podgląd). Logikę galerii
       (przełączanie miniatur) obsługuje PrestaShop — my tylko stylujemy.
   ========================================================================= */
/* GALERIA: inny mechanizm niż szybki podgląd — pokazujemy zdjęcia,
   a tło strony jest ZABLUROWANE (mrożone szkło), nie zielone. */
#product-modal.modal {
    background: rgba(10, 16, 13, .22);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    backdrop-filter: blur(16px) saturate(1.05);
}
/* przyciemnienie od Bootstrapowego backdropu robimy lżejsze — resztę robi blur */
.modal-backdrop.show, .modal-backdrop.in { opacity: .38; }
#product-modal .modal-dialog {
    max-width: min(1040px, 94vw); width: 100%;
    margin: 0 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 100vh; padding: 4vh 0;
}
#product-modal .modal-content { background: transparent; border: 0; box-shadow: none; width: 100%; }
/* .modal-content .modal-body — wyzsza specyficznosc, by pokonac regule
   z theme.css (#product-modal .modal-content .modal-body { margin-left:-35% }) */
#product-modal .modal-content .modal-body {
    padding: 0; margin: 0 auto; width: 100%; max-width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
/* biała karta obejmuje samo zdjęcie i jest wyśrodkowana */
#product-modal figure {
    margin: 0 auto; background: var(--w); border-radius: var(--r-xl);
    padding: 1.4rem; box-shadow: var(--sh-3);
    display: flex; align-items: center; justify-content: center;
    max-width: 100%;
}
#product-modal figure picture { display: flex; align-items: center; justify-content: center; width: 100%; }
#product-modal .product-cover-modal {
    max-height: 76vh; max-width: 100%; width: auto; height: auto;
    border-radius: var(--r-sm); display: block; margin: 0 auto;
}
#product-modal .image-caption { display: none; }   /* opis niepotrzebny w powiększeniu */
#product-modal #thumbnails { margin: 0; padding: 0; background: transparent; width: 100%; }
#product-modal .js-modal-mask,
#product-modal #thumbnails .thumbnails-container {
    margin: 0; display: flex; justify-content: center; align-items: center;
    gap: 8px; flex-wrap: wrap;
}
/* strzałki prev/next (wstrzykiwane przez JS) — tylko przy >1 zdjęciu */
.el-lb-arrow {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 54px; height: 54px; border: 0; border-radius: var(--pill);
    background: rgba(255,255,255,.14); color: var(--w); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--tf), transform var(--tf);
}
.el-lb-arrow:hover { background: var(--g); }
.el-lb-arrow--prev { left: 24px; }
.el-lb-arrow--next { right: 24px; }
.el-lb-arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.el-lb-arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.el-lb-arrow i { font-size: 1.9rem; }
#product-modal.is-single .el-lb-arrow { display: none; }
@media (max-width: 767px) { .el-lb-arrow { width: 44px; height: 44px; }
    .el-lb-arrow--prev { left: 8px; } .el-lb-arrow--next { right: 8px; } }
#product-modal #thumbnails .thumb-container, #product-modal #thumbnails .thumb {
    display: inline-block; width: 66px; height: 66px; margin: 0 5px;
    border-radius: 12px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: var(--w);
    transition: border-color var(--tf), transform var(--tf);
}
#product-modal #thumbnails .thumb { object-fit: cover; }
#product-modal #thumbnails .thumb:hover { transform: translateY(-2px); }
#product-modal #thumbnails .thumb.selected, #product-modal #thumbnails .thumb-container.selected { border-color: var(--g-neon); }
/* jeśli produkt ma tylko jedno zdjęcie — ukryj pasek miniatur */
#product-modal #thumbnails:only-child, #product-modal.is-single #thumbnails { display: none; }
/* własny przycisk zamknięcia (wstrzykiwany przez JS) */
.el-lb-close {
    position: fixed; top: 22px; right: 26px; z-index: 5;
    width: 46px; height: 46px; border: 0; border-radius: var(--pill);
    background: rgba(255,255,255,.12); color: var(--w); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--tf), transform var(--tf);
}
.el-lb-close:hover { background: var(--g); transform: rotate(90deg); }
.el-lb-close i { font-size: 1.5rem; }

/* =========================================================================
   35. RESPONSYWNOŚĆ — dodatkowe poprawki mobilne
   ========================================================================= */
@media (max-width: 767px) {
    /* GÓRNY PASEK: pokaż e-mail i „Moje konto" (były schowane) — jeden rząd */
    .el-topbar { font-size: .74rem; }
    .el-topbar__in { justify-content: space-between; gap: .5rem; }
    .el-topbar__contact { gap: .7rem; }
    .el-hide-mobile { display: inline-flex !important; }
    .el-topbar__links { display: flex !important; }
    .el-topbar__item { white-space: nowrap; }
    .el-topbar__item i { font-size: .95rem; }

    /* NEWSLETTER w stopce: odstęp między polem e-mail a przyciskiem */
    .el-fnews__form .block_newsletter form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
    .el-fnews__form .block_newsletter form input[type="text"],
    .el-fnews__form .block_newsletter form input[type="email"] { flex: 1 1 100%; margin: 0; }
    .el-fnews__form .block_newsletter form .btn,
    .el-fnews__form .block_newsletter form button,
    .el-fnews__form .block_newsletter form input[type="submit"] { flex: 0 0 auto; margin: 0; }

    /* FORMULARZ KONTAKTU: etykiety do lewej, nad polem (nie dosunięte do prawej) */
    .el-contact__card--form .form-group.row { display: block; margin-bottom: 1.1rem; }
    .el-contact__card--form .form-group.row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; text-align: left !important; }
    .el-contact__card--form .form-group label,
    .el-contact__card--form .form-control-label {
        display: block; text-align: left !important; justify-content: flex-start !important; margin-bottom: .4rem;
    }
    .el-contact__card--form .form-control,
    .el-contact__card--form select,
    .el-contact__card--form textarea { width: 100%; }
    /* select nie ucina tekstu (opisowe descendery „ą", „ł") */
    .el-contact__card--form select.form-control,
    .el-contact__card--form .form-group select { height: auto; min-height: 50px; line-height: 1.5; }
}

/* ukryj nieaktywny „Powrót do góry" na dole listy (link do #header nie działał);
   od przewijania na górę jest pływająca zielona strzałka .el-to-top */
.up.text-xs-right, .up > a[href="#header"] { display: none !important; }

/* =========================================================================
   36. PODPOWIEDZI WYSZUKIWANIA (.el-ac) — lista produktów z miniaturkami
   ========================================================================= */
.el-ac {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200;
    background: var(--w); border: 1px solid var(--s-100); border-radius: var(--r-sm);
    box-shadow: var(--sh-3); overflow: hidden auto; max-height: 74vh;
    display: none;
}
.el-ac.is-open { display: block; animation: elAcIn .18s ease; }
@keyframes elAcIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.el-ac__item {
    display: flex; align-items: center; gap: .85rem; padding: .6rem .85rem;
    border-bottom: 1px solid var(--s-50); transition: background-color var(--tf);
}
.el-ac__item:hover { background: var(--g-50); }
.el-ac__thumb {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 11px;
    background: var(--s-50); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.el-ac__thumb img { width: 100%; height: 100%; object-fit: contain; }
.el-ac__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.el-ac__name {
    color: var(--k-900); font-weight: 600; font-size: .92rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.el-ac__ref { color: var(--s-400); font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.el-ac__go { flex: 0 0 auto; color: var(--s-300); font-size: 1.2rem; transition: transform var(--tf), color var(--tf); }
.el-ac__item:hover .el-ac__go { color: var(--g); transform: translateX(3px); }
.el-ac__all {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .8rem; font-weight: 700; color: var(--g-deep); background: var(--s-50);
    transition: background-color var(--tf);
}
.el-ac__all:hover { background: var(--g-50); }
.el-ac__all i { font-size: 1.15rem; }
.el-ac__empty { padding: 1.1rem; color: var(--s-500); text-align: center; font-size: .95rem; }

/* natywne autouzupełnianie ps_searchbar (jQuery UI) — ostylowane pod motyw */
ul.ui-autocomplete.searchbar-autocomplete {
    background: var(--w) !important; border: 1px solid var(--s-100) !important;
    border-radius: var(--r-sm) !important; box-shadow: var(--sh-3) !important;
    max-height: 62vh; overflow-y: auto; padding: 0 !important; margin: 6px 0 0 !important;
    list-style: none; z-index: 1200 !important;
    min-width: min(420px, 92vw) !important;
}
.searchbar-autocomplete .ui-menu-item { margin: 0 !important; list-style: none; }
.searchbar-autocomplete .ui-menu-item a,
.searchbar-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    display: flex !important; align-items: center; gap: .8rem;
    padding: .6rem .85rem !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--s-50) !important; border-radius: 0 !important;
    color: var(--k-900) !important; background: transparent !important;
    font-weight: 500; white-space: normal; line-height: 1.35;
    transition: background-color var(--tf);
}
.searchbar-autocomplete .ui-menu-item a.ui-state-active,
.searchbar-autocomplete .ui-menu-item a:hover,
.searchbar-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
.searchbar-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover {
    background: var(--g-50) !important; color: var(--g-deep) !important;
}
.searchbar-autocomplete .autocomplete-thumbnail {
    width: 50px; height: 50px; flex: 0 0 auto; object-fit: contain;
    border-radius: 10px; background: var(--s-50); padding: 2px;
}
.searchbar-autocomplete .product {
    flex: 1 1 auto; font-size: .9rem; line-height: 1.35; color: inherit;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================================
   37. PRZEŁĄCZNIK MOTYWU (jasny / ciemny) + TRYB CIEMNY
   ========================================================================= */
/* --- animowany przełącznik (dzień/noc) --- */
.el-theme-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; flex: 0 0 auto; }
.el-theme-toggle__track {
    position: relative; width: 62px; height: 31px; border-radius: var(--pill);
    display: flex; align-items: center; justify-content: space-between; padding: 0 8px;
    background: linear-gradient(135deg, #BFE3FF, #EAF5FF);
    box-shadow: inset 0 1px 3px rgba(10,30,60,.2);
    transition: background .5s ease, box-shadow .4s ease;
    overflow: hidden;
}
.el-theme-toggle__sun, .el-theme-toggle__moon {
    position: relative; z-index: 2; font-size: 16px;
    transition: color .4s ease, transform .5s ease, opacity .4s ease;
}
.el-theme-toggle__sun { color: #F5A302; }
.el-theme-toggle__moon { color: #9AA6C4; opacity: .7; transform: scale(.82); }
.el-theme-toggle__knob {
    position: absolute; top: 3.5px; left: 3.5px; width: 24px; height: 24px; z-index: 1;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(10,20,40,.4);
    transition: transform .5s cubic-bezier(.6,-.3,.35,1.45), background .4s ease;
}
.el-theme-toggle:hover .el-theme-toggle__knob { box-shadow: 0 3px 10px rgba(10,20,40,.5); }
/* stan ciemny */
html[data-el-theme="dark"] .el-theme-toggle__track { background: linear-gradient(135deg, #14203C, #263864); box-shadow: inset 0 1px 4px rgba(0,0,0,.5); }
html[data-el-theme="dark"] .el-theme-toggle__knob { transform: translateX(31px); background: #DDE5FB; }
html[data-el-theme="dark"] .el-theme-toggle__sun { color: #5B6076; opacity: .55; transform: scale(.8); }
html[data-el-theme="dark"] .el-theme-toggle__moon { color: #26305A; opacity: 1; transform: scale(1.08); }

/* płynne, powolne przejście CAŁEJ strony przy zmianie motywu.
   Włączane klasą .el-theme-anim na <html> tylko na czas przełączenia
   (JS zdejmuje ją po ~0,7 s), więc nie spowalnia zwykłych interakcji. */
html.el-theme-anim,
html.el-theme-anim *,
html.el-theme-anim *::before,
html.el-theme-anim *::after {
    transition: background-color .6s ease, color .6s ease,
                border-color .6s ease, box-shadow .6s ease,
                fill .6s ease, stroke .6s ease, outline-color .6s ease !important;
}
/* suwak zachowuje własne, sprężyste animacje (gałka jedzie, słońce/księżyc się zmienia) */
html.el-theme-anim .el-theme-toggle__knob {
    transition: transform .5s cubic-bezier(.6,-.3,.35,1.45), background .45s ease !important;
}
html.el-theme-anim .el-theme-toggle__sun,
html.el-theme-anim .el-theme-toggle__moon {
    transition: color .45s ease, opacity .45s ease, transform .45s ease !important;
}
/* uwaga: świadomie NIE wyłączamy tego przy prefers-reduced-motion — to łagodne
   przenikanie kolorów (nie ruch), a właściciel sklepu wprost o nie prosił. */

/* --- TRYB CIEMNY: przemapowanie tokenów --- */
html[data-el-theme="dark"] {
    color-scheme: dark;
    /* --w ciemne: wszystkie powierzchnie (karty, kafle, pola) ciemnieją naraz.
       Biały tekst/ikony na kolorowych elementach naprawiamy niżej (color:#fff). */
    --w:       #171D26;
    --surface: #171D26;
    --k:      #05070A;
    --k-950:  #0B0F15;
    --k-900:  #E9EEF3;   /* główny tekst — jasny */
    --k-800:  #D6DEE5;
    --k-700:  #BAC3CC;
    --s-600:  #C7CFD7;   /* dawniej ciemny szary → jasny tekst */
    --s-500:  #ABB4BE;
    --s-400:  #8B95A1;
    --s-300:  #4C5560;   /* subtelne bordery/teksty */
    --s-200:  #333B46;   /* bordery */
    --s-100:  #232B35;   /* jasne tła → ciemne */
    --s-50:   #1B222C;   /* najjaśniejsze tło → ciemne */
    --g-deep: #43CF93;   /* zielony tekst — jaśniejszy na ciemnym */
    --g-50:   #14291F;   /* zielone tło pigułek → ciemna zieleń */
    --g-100:  #1C3B2C;
    --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4);
    --sh-2: 0 8px 22px rgba(0,0,0,.55);
    --sh-3: 0 22px 52px rgba(0,0,0,.65);
}
/* tła sekcji (nadpisanie zakodowanych jasnych wartości) */
html[data-el-theme="dark"] body { background: #0D1117 !important; color: var(--k-900); }
html[data-el-theme="dark"] #header { background: #12181F !important; border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-el-theme="dark"] .el-header .el-topbar,
html[data-el-theme="dark"] .el-topbar { background: #0E141A !important; border-bottom-color: rgba(255,255,255,.06) !important; }
html[data-el-theme="dark"] #footer { background: #0A0F14 !important; }
html[data-el-theme="dark"] .el-search__input { background: var(--s-100) !important; color: var(--k-800) !important; }
html[data-el-theme="dark"] .el-search__input::placeholder { color: var(--s-400) !important; }
html[data-el-theme="dark"] .el-nav__link { color: var(--k-700); }
html[data-el-theme="dark"] .el-nav__link.is-active, html[data-el-theme="dark"] .el-nav__link--accent { color: var(--g-neon); }
html[data-el-theme="dark"] .el-section__title, html[data-el-theme="dark"] .total-products p { color: var(--g-neon); }
/* karty / pola — subtelna ramka na ciemnym, żeby się odcinały */
html[data-el-theme="dark"] .el-card__inner,
html[data-el-theme="dark"] .el-contact__card { border: 1px solid rgba(255,255,255,.06); }
html[data-el-theme="dark"] .el-card__media { background: #10151C; }

/* --- nadpisania jasnych powierzchni z sekcji „WERSJA JASNA" --- */
/* nawigacja (także przyklejona po przewinięciu) */
html[data-el-theme="dark"] #header.el-sticky .el-nav,
html[data-el-theme="dark"] #header.is-scrolled .el-nav { background: rgba(18,24,31,.95) !important; }
html[data-el-theme="dark"] .el-nav { border-top-color: rgba(255,255,255,.06) !important; }
html[data-el-theme="dark"] .el-nav__link { color: var(--k-700) !important; }
html[data-el-theme="dark"] .el-nav__link:hover,
html[data-el-theme="dark"] .el-nav__link.is-active { color: var(--g-neon) !important; }
html[data-el-theme="dark"] .el-brand__name { color: var(--k-900) !important; }
html[data-el-theme="dark"] .el-brand__tag { color: var(--s-500) !important; }
html[data-el-theme="dark"] .el-burger { background: var(--s-100) !important; }
html[data-el-theme="dark"] .el-burger span { background: var(--s-500) !important; }

/* POWIERZCHNIE → ciemne (przez --surface; --w zostaje białe dla tekstu/ikon).
   Obejmuje też natywne białe kontenery PrestaShopa. */
html[data-el-theme="dark"] .el-card__inner,
html[data-el-theme="dark"] .el-card__body,
html[data-el-theme="dark"] .el-subcats,
html[data-el-theme="dark"] .el-contact__card,
html[data-el-theme="dark"] .card,
html[data-el-theme="dark"] .page-content,
html[data-el-theme="dark"] .product-information,
html[data-el-theme="dark"] .product-features,
html[data-el-theme="dark"] .tab-content,
html[data-el-theme="dark"] .el-product-tabs,
html[data-el-theme="dark"] .product-tabs,
html[data-el-theme="dark"] .rte-content,
html[data-el-theme="dark"] .comment,
html[data-el-theme="dark"] .comments-note,
html[data-el-theme="dark"] #product-comments-list-header,
html[data-el-theme="dark"] .product-comments-additional-info,
html[data-el-theme="dark"] .contact-form,
html[data-el-theme="dark"] .bootstrap-filestyle input.form-control,
html[data-el-theme="dark"] .form-control,
html[data-el-theme="dark"] textarea,
html[data-el-theme="dark"] select {
    background: var(--surface) !important; color: var(--k-900) !important;
    border-color: rgba(255,255,255,.09) !important;
}
/* tabele specyfikacji / opisu produktu */
html[data-el-theme="dark"] .product-description table,
html[data-el-theme="dark"] .tabs table,
html[data-el-theme="dark"] .data-sheet { background: var(--surface) !important; }
html[data-el-theme="dark"] .product-description table td,
html[data-el-theme="dark"] .tabs table td,
html[data-el-theme="dark"] .data-sheet dt,
html[data-el-theme="dark"] .data-sheet dd { color: var(--k-800) !important; border-color: rgba(255,255,255,.08) !important; }
/* wszystkie wiersze specyfikacji ciemne (natywna striping robiła jasne) */
html[data-el-theme="dark"] .data-sheet dt,
html[data-el-theme="dark"] .data-sheet dd,
html[data-el-theme="dark"] .product-features dt,
html[data-el-theme="dark"] .product-features dd { background: var(--surface) !important; color: var(--k-800) !important; }
html[data-el-theme="dark"] .product-description table tr:nth-child(even) td,
html[data-el-theme="dark"] .tabs table tr:nth-child(even) td,
html[data-el-theme="dark"] .data-sheet dd:nth-of-type(even),
html[data-el-theme="dark"] .data-sheet dt:nth-of-type(even),
html[data-el-theme="dark"] .product-features dd:nth-of-type(even),
html[data-el-theme="dark"] .product-features dt:nth-of-type(even) { background: rgba(255,255,255,.045) !important; }
/* nagłówki/etykiety na ciemnych powierzchniach */
html[data-el-theme="dark"] .product-features h4,
html[data-el-theme="dark"] .contact-form h3,
html[data-el-theme="dark"] .el-contact__card--form h3,
html[data-el-theme="dark"] .comments-note,
html[data-el-theme="dark"] .page-content h1,
html[data-el-theme="dark"] .rte-content { color: var(--k-900) !important; }
/* taby produktu */
html[data-el-theme="dark"] .nav-tabs { border-bottom-color: rgba(255,255,255,.1); }
html[data-el-theme="dark"] .nav-tabs .nav-link { color: var(--s-500); }
html[data-el-theme="dark"] .nav-tabs .nav-link.active { background: var(--surface) !important; color: var(--g-neon) !important; }
/* pola formularza — placeholder i tekst */
html[data-el-theme="dark"] .form-control::placeholder,
html[data-el-theme="dark"] textarea::placeholder { color: var(--s-400) !important; }
/* recenzje / „brak recenzji" */
html[data-el-theme="dark"] .comments-note,
html[data-el-theme="dark"] .product-comment-list,
html[data-el-theme="dark"] #content .alert.alert-info { background: var(--surface) !important; color: var(--k-800) !important; }

/* banery mint (promo / cta) + hero → ciemna zieleń */
html[data-el-theme="dark"] .el-promo__in { background: linear-gradient(120deg, #142520, #123529) !important; box-shadow: var(--sh-1) !important; }
html[data-el-theme="dark"] .el-cta { background: linear-gradient(120deg, #12201A, #143026) !important; }
html[data-el-theme="dark"] .el-hero { background: linear-gradient(155deg, #12181F, #0F1E17) !important; color: var(--k-800); }
html[data-el-theme="dark"] .el-hero__eyebrow,
html[data-el-theme="dark"] .el-chip { background: var(--w) !important; border-color: var(--g-100) !important; }
html[data-el-theme="dark"] .el-hero__title,
html[data-el-theme="dark"] .el-promo__title,
html[data-el-theme="dark"] .el-cta__text h2 { color: var(--k-900) !important; }

/* podkategorie — kafelki */
html[data-el-theme="dark"] .el-subcat { background: var(--s-50) !important; border-color: var(--s-200) !important; }
html[data-el-theme="dark"] .el-subcat__name { color: var(--k-800) !important; }

/* wyszukiwarka: focus na ciemnym */
html[data-el-theme="dark"] .el-search__input:focus { background: #10151C !important; box-shadow: 0 0 0 4px rgba(34,201,137,.18) !important; }

/* === TRYB CIEMNY — DOMKNIĘCIE: biały tekst/ikony na kolorowych elementach
   (używały --w, które jest teraz ciemne) === */
html[data-el-theme="dark"] .el-btn--primary,
html[data-el-theme="dark"] .el-btn--primary i,
html[data-el-theme="dark"] .el-hcta,
html[data-el-theme="dark"] .el-hcta strong,
html[data-el-theme="dark"] #footer .el-btn--primary,
html[data-el-theme="dark"] .product-flag,
html[data-el-theme="dark"] .el-cathead__title,
html[data-el-theme="dark"] .el-cathead__eyebrow,
html[data-el-theme="dark"] .el-fcol__title,
html[data-el-theme="dark"] .el-fnews__title,
html[data-el-theme="dark"] .el-fcol--brand .el-brand__name,
html[data-el-theme="dark"] .el-cat__icon i,
html[data-el-theme="dark"] .el-subcat__icon i,
html[data-el-theme="dark"] .el-slide__title,
html[data-el-theme="dark"] .el-to-top { color: #FFFFFF !important; }

/* szuflada mobilna — panel jest ZAWSZE ciemnozielony, więc tekst zawsze jasny.
   W trybie ciemnym tokeny (--s-200/--w/--s-300) flipują na ciemne → tu je przywracamy */
html[data-el-theme="dark"] .el-drawer__nav a { color: #C9D2DB !important; }
html[data-el-theme="dark"] .el-drawer__nav a:hover { color: #FFFFFF !important; }
html[data-el-theme="dark"] #el-drawer .el-brand__name { color: #FFFFFF !important; }
html[data-el-theme="dark"] #el-drawer .el-brand__name em { color: var(--g-neon) !important; }
html[data-el-theme="dark"] .el-drawer__close { color: #C9D2DB !important; }
html[data-el-theme="dark"] .el-drawer__foot a { color: #AEB8C2 !important; }
html[data-el-theme="dark"] .el-drawer__foot a:hover { color: var(--g-neon) !important; }

/* kolumna filtrów / drzewo kategorii (natywne, białe) */
html[data-el-theme="dark"] #left-column .block,
html[data-el-theme="dark"] #left-column .block_content,
html[data-el-theme="dark"] #search_filters,
html[data-el-theme="dark"] .block-categories,
html[data-el-theme="dark"] .faceted-search,
html[data-el-theme="dark"] #left-column .title_block { background: var(--surface) !important; color: var(--k-800) !important; }
html[data-el-theme="dark"] #left-column a { color: var(--k-700) !important; }
html[data-el-theme="dark"] #left-column a:hover { color: var(--g-neon) !important; }

/* CTA (baner „nie wiesz który model") — outer przezroczysty (bez zielonego boxa),
   ciemna karta tylko na .el-cta__inner */
html[data-el-theme="dark"] .el-cta { background: transparent !important; }
html[data-el-theme="dark"] .el-cta::before,
html[data-el-theme="dark"] .el-cta::after { opacity: .18 !important; }
html[data-el-theme="dark"] .el-cta__inner,
html[data-el-theme="dark"] .el-cta__in { background: linear-gradient(120deg, #12201A, #14312A) !important; }
html[data-el-theme="dark"] .el-cta__text h2, html[data-el-theme="dark"] .el-cta__title { color: #FFFFFF !important; }
html[data-el-theme="dark"] .el-cta__text p, html[data-el-theme="dark"] .el-cta__sub { color: var(--s-500) !important; }
/* box recenzji / komentarzy (productcomments) */
html[data-el-theme="dark"] #product-comments-list,
html[data-el-theme="dark"] .product-comments-additional-info,
html[data-el-theme="dark"] .comments,
html[data-el-theme="dark"] .product-comment-list,
html[data-el-theme="dark"] .comment,
html[data-el-theme="dark"] .comments-note,
html[data-el-theme="dark"] #idTab5,
html[data-el-theme="dark"] [id^="product-comments"],
html[data-el-theme="dark"] .product-comment-list-item,
html[data-el-theme="dark"] .comment-content,
html[data-el-theme="dark"] .comment-infos,
html[data-el-theme="dark"] .product-tab-content { background: var(--surface) !important; color: var(--k-800) !important; }
html[data-el-theme="dark"] .el-cta .el-btn--ghost-light { color: var(--g-neon) !important; box-shadow: inset 0 0 0 2px rgba(34,201,137,.4) !important; }

/* paginacja + sortowanie — pigułki (używają --w, ale pewność) */
/* paginacja: przezroczysta (bez brzydkiego boxa), same numery */
html[data-el-theme="dark"] .el-pagi__nav,
html[data-el-theme="dark"] .page-list { background: transparent !important; box-shadow: none !important; }
html[data-el-theme="dark"] .products-sort-order .select-title,
html[data-el-theme="dark"] .el-pagi__jump-edit { background: var(--surface) !important; }
html[data-el-theme="dark"] .page-list a, html[data-el-theme="dark"] .el-pagi__nav a { color: var(--k-800) !important; }

/* „Szybki podgląd" na karcie — w trybie ciemnym ciemny zamiast białego */
html[data-el-theme="dark"] .el-card__quick { background: rgba(23,29,38,.94) !important; color: var(--g-neon) !important; }
html[data-el-theme="dark"] .el-card__quick:hover { background: var(--g) !important; color: #FFFFFF !important; }
/* etykiety formularzy (Temat, Adres e-mail...) — jasne na ciemnym */
html[data-el-theme="dark"] .el-contact__card--form label,
html[data-el-theme="dark"] .el-contact__card--form label > span,
html[data-el-theme="dark"] .el-contact__card--form .form-control-label,
html[data-el-theme="dark"] .contact-form label,
html[data-el-theme="dark"] .form-group > label,
html[data-el-theme="dark"] .form-control-label { color: #CBD4DB !important; }
/* etykiety w zakładkach produktu (np. „Indeks") — jasne */
html[data-el-theme="dark"] .el-product-tabs label,
html[data-el-theme="dark"] .tab-content label,
html[data-el-theme="dark"] .product-reference,
html[data-el-theme="dark"] .product-reference label,
html[data-el-theme="dark"] .rte-content label,
html[data-el-theme="dark"] .product-features label { color: var(--k-700) !important; }
/* tekst opisu produktu (zakodowane ciemne kolory) → jasny; kolorowe (czerwone) zostają */
html[data-el-theme="dark"] .product-description:not([style*="color"]),
html[data-el-theme="dark"] .rte-content:not([style*="color"]),
html[data-el-theme="dark"] .product-description p:not([style*="color"]),
html[data-el-theme="dark"] .product-description li:not([style*="color"]),
html[data-el-theme="dark"] .product-description div:not([style*="color"]),
html[data-el-theme="dark"] .product-description h1:not([style*="color"]),
html[data-el-theme="dark"] .product-description h2:not([style*="color"]),
html[data-el-theme="dark"] .product-description h3:not([style*="color"]),
html[data-el-theme="dark"] .product-description strong:not([style*="color"]),
html[data-el-theme="dark"] .rte-content p:not([style*="color"]),
html[data-el-theme="dark"] .rte-content li:not([style*="color"]) { color: var(--k-800) !important; }
/* blok „Customer Reassurance" (Polityka/Dostawa/Zwrot) — tytuł ma inline color:#000 */
html[data-el-theme="dark"] .blockreassurance_product .block-title,
html[data-el-theme="dark"] .block-title,
html[data-el-theme="dark"] .blockreassurance_product span,
html[data-el-theme="dark"] .block-reassurance .block-title,
html[data-el-theme="dark"] .block-reassurance span { color: var(--k-900) !important; }
html[data-el-theme="dark"] .blockreassurance_product .block-subtitle,
html[data-el-theme="dark"] .blockreassurance_product p,
html[data-el-theme="dark"] .blockreassurance_product div > p,
html[data-el-theme="dark"] .block-reassurance p,
html[data-el-theme="dark"] .block-subtitle { color: var(--s-500) !important; }
/* „Udostępnij" (social sharing) */
html[data-el-theme="dark"] .social-sharing,
html[data-el-theme="dark"] .social-sharing span,
html[data-el-theme="dark"] .product-additional-info span { color: var(--k-800) !important; }
/* modale (podgląd / galeria) i podpowiedzi — ciemne powierzchnie */
html[data-el-theme="dark"] .el-ac,
html[data-el-theme="dark"] ul.ui-autocomplete.searchbar-autocomplete,
html[data-el-theme="dark"] .el-qv__dialog { background: var(--surface) !important; }
html[data-el-theme="dark"] .el-ac__item, html[data-el-theme="dark"] .searchbar-autocomplete .ui-menu-item a { border-bottom-color: rgba(255,255,255,.07) !important; }
html[data-el-theme="dark"] .el-ac__name, html[data-el-theme="dark"] .searchbar-autocomplete .product { color: var(--k-800) !important; }

/* select formularza — nie ucinaj tekstu (opadające „ą","ł") */
html[data-el-theme="dark"] select.form-control,
html[data-el-theme="dark"] .form-group select,
.el-contact__card--form select.form-control,
.el-contact__card--form .form-group select { min-height: 54px !important; line-height: 1.7 !important; padding-top: .55rem !important; padding-bottom: .55rem !important; }

@media print {
    #header, #footer, .el-to-top, .el-hero, .el-cta { box-shadow: none; }
    .el-card__inner { box-shadow: none; border: 1px solid var(--s-200); }
}

/* =========================================================================
   38. TABELA PARAMETRÓW — zieleń zamieniona na welon
   Zastępuje pełne tło var(--g) na komórkach th (dawne reguły z sekcji 25).
   Kontrast rośnie z 3,96:1 do ok. 5,96:1, powierzchnia koloru maleje o ~45%.
   ========================================================================= */
.product-description table, .tabs table, #product .rte-content table {
    width: 100%; border-collapse: collapse; margin: 1rem 0;
    border-radius: var(--r-sm); overflow: hidden;
    box-shadow: var(--sh-1); background: var(--w);
    font-size: .92rem;
}

.product-description table th, .tabs table th {
    position: relative;
    width: 34%;
    background: rgba(18, 146, 95, .07) !important;
    color: var(--g-deep) !important;
    font-weight: 600;
    padding: .7rem .95rem .7rem 1.15rem;
    text-align: left;
    border: 0 !important;
    border-top: 1px solid rgba(18, 146, 95, .10) !important;
    transition: background-color var(--tf), color var(--tf);
}

/* cała moc koloru schodzi do cienkiej kreski przy krawędzi */
.product-description table th::before,
.tabs table th::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--g); opacity: .38;
    transition: opacity var(--tf), width var(--tf);
}

.product-description table td, .tabs table td {
    padding: .7rem .95rem;
    border: 0 !important;
    border-top: 1px solid var(--s-100) !important;
    color: var(--k-800); font-weight: 500;
}

.product-description table tr:first-child th,
.product-description table tr:first-child td,
.tabs table tr:first-child th,
.tabs table tr:first-child td { border-top: 0 !important; }

.product-description table tr:nth-child(even) td,
.tabs table tr:nth-child(even) td { background: var(--s-50) !important; }
.product-description table tr:nth-child(even) th,
.tabs table tr:nth-child(even) th { background: rgba(18, 146, 95, .045) !important; }

.product-description table tr:hover th,
.tabs table tr:hover th { background: rgba(18, 146, 95, .13) !important; }
.product-description table tr:hover td,
.tabs table tr:hover td { background: rgba(18, 146, 95, .05) !important; }
.product-description table tr:hover th::before,
.tabs table tr:hover th::before { opacity: 1; width: 4px; }

/* tryb ciemny — dotąd brakowało nadpisania dla th, przez co tekst był nieczytelny */
html[data-el-theme="dark"] .product-description table th,
html[data-el-theme="dark"] .tabs table th {
    background: rgba(34, 201, 137, .10) !important;
    color: var(--g-deep) !important;
    border-top-color: rgba(255, 255, 255, .06) !important;
}
html[data-el-theme="dark"] .product-description table tr:nth-child(even) th,
html[data-el-theme="dark"] .tabs table tr:nth-child(even) th { background: rgba(34, 201, 137, .06) !important; }
html[data-el-theme="dark"] .product-description table th::before,
html[data-el-theme="dark"] .tabs table th::before { background: var(--g-neon); }
html[data-el-theme="dark"] .product-description table tr:hover th,
html[data-el-theme="dark"] .tabs table tr:hover th { background: rgba(34, 201, 137, .16) !important; }

/* telefon: znosimy min-width, który spychał całą kolumnę wartości poza ekran */
@media (max-width: 767px) {
    .el-table-scroll > table { min-width: 0; }
    .product-description table, .tabs table { font-size: .88rem; }
    .product-description table th, .tabs table th { width: 44%; padding: .6rem .7rem .6rem .85rem; }
    .product-description table td, .tabs table td { padding: .6rem .7rem; }
}

/* dl.data-sheet w zakładce „Szczegóły produktu" — ta sama estetyka */
#product .data-sheet {
    border-radius: var(--r-sm); overflow: hidden;
    box-shadow: var(--sh-1); background: var(--w);
}
#product .data-sheet dt.name,
#product .data-sheet dd.value {
    font-size: .92rem; padding: .7rem .95rem;
    background: transparent; margin-bottom: 0;
    border-top: 1px solid var(--s-100);
}
#product .data-sheet dt.name {
    color: var(--g-deep); font-weight: 600;
    background: rgba(18, 146, 95, .07);
    box-shadow: inset 3px 0 0 rgba(18, 146, 95, .38);
}
#product .data-sheet dd.value { color: var(--k-800); font-weight: 500; }

/* =========================================================================
   39. KARTA PRODUKTU — wejście sekcji i mikroruch
   Korzysta z istniejących @keyframes i czasów motywu; blok
   prefers-reduced-motion z sekcji 17 wyłącza to automatycznie.
   ========================================================================= */
#product .product-container > .col-md-6:first-child { animation: elHeroUp .5s .02s both; }
#product .product-container > .col-md-6:last-child  { animation: elHeroUp .5s .12s both; }
#product .el-product-tabs                            { animation: elHeroUp .55s .22s both; }
#product .product-accessories                        { animation: elHeroUp .55s .32s both; }

.tabs .nav-tabs .nav-link { position: relative; transition: color var(--tf); }
.tabs .nav-tabs .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--g); border-radius: 2px 2px 0 0;
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--tm);
}
.tabs .nav-tabs .nav-link.active::after,
.tabs .nav-tabs .nav-link:hover::after { transform: scaleX(1); }
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover { border-bottom-color: transparent; }

#product .tab-pane.active { animation: elFadeUp .35s both; }

.product-cover img { transition: transform var(--tm), box-shadow var(--tm); }
.product-cover:hover img { transform: translateY(-4px); box-shadow: var(--sh-2); }
.product-images > li.thumb-container > .thumb { transition: border-color var(--tf), transform var(--tm); }
.product-images > li.thumb-container > .thumb:hover { transform: translateY(-3px); }

#product .blockreassurance_product .item-product { transition: transform var(--tm); }
#product .blockreassurance_product > div:hover .item-product { transform: scale(1.12) rotate(-6deg); }

/* =========================================================================
   40. KARTA PRODUKTU — proporcje
   ========================================================================= */
#product #main h1.h1 {
    font-size: clamp(1.55rem, 2.1vw, 2.05rem);
    line-height: 1.22;
    margin-bottom: .55rem;
}
#product .product-prices .current-price span:first-child { font-size: 1.75rem; }
#product .tax-shipping-delivery-label { font-size: .82rem; color: var(--s-500); }

#product .el-product-tabs .product-description,
#product .el-product-tabs .product-description p,
#product .el-product-tabs .product-description li { font-size: .95rem; line-height: 1.72; }

#product .el-product-tabs .product-description h3 { font-size: 1.2rem; margin: 1.7rem 0 .75rem; }
#product .el-product-tabs .product-description h3:first-child { margin-top: .2rem; }

#product .product-features .h6,
#product .product-attachments .h5,
#product .product-accessories .h5 {
    font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 1rem;
}

@media (min-width: 992px) {
    #product .product-container .page-content#content { max-width: 100%; }
    #product .images-container { width: 100%; max-width: 520px; margin-inline: auto; }
    #product .product-cover img { width: 100%; height: auto; }
}

@media (max-width: 575px) {
    .tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tabs .nav-tabs::-webkit-scrollbar { display: none; }
    .tabs .nav-tabs .nav-link { white-space: nowrap; padding: .5rem .85rem; font-size: .95rem; }
    #product #main h1.h1 { font-size: 1.45rem; }
    #product .product-information { padding: 1.15rem; }
}

/* =========================================================================
   41. LOGO PRODUCENTA w zakładce „Szczegóły produktu"
   Plik z PrestaShopa to kwadrat 452x452 z logo dopełnionym bielą, dlatego
   sterujemy szerokością (nie wysokością) i chowamy białe pole w karcie.
   ========================================================================= */
#product .product-manufacturer {
    display: inline-flex; align-items: center; gap: 1rem;
    padding: .9rem 1.25rem; margin-bottom: 1.25rem;
    background: var(--w);
    border: 1px solid var(--s-100);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    transition: box-shadow var(--tm), transform var(--tm), border-color var(--tm);
}
#product .product-manufacturer:hover {
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
    border-color: var(--g-100);
}
#product .product-manufacturer::before {
    content: "Producent";
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--s-500); white-space: nowrap;
    padding-right: 1rem; border-right: 1px solid var(--s-100);
}
#product .product-manufacturer a { display: block; line-height: 0; }
#product .manufacturer-logo {
    width: 190px; height: auto; max-width: 100%;
    mix-blend-mode: multiply;   /* białe dopełnienie znika na jasnym tle karty */
    transition: transform var(--tm);
}
#product .product-manufacturer:hover .manufacturer-logo { transform: scale(1.03); }

@media (max-width: 575px) {
    #product .product-manufacturer { width: 100%; justify-content: center; padding: .8rem 1rem; gap: .8rem; }
    #product .product-manufacturer::before { padding-right: .8rem; }
    #product .manufacturer-logo { width: 150px; }
}

/* tryb ciemny: logo jest czarno-zielone na bieli, więc odwracamy tylko tło karty */
html[data-el-theme="dark"] #product .product-manufacturer {
    background: #fff;
    border-color: rgba(255,255,255,.12);
}
html[data-el-theme="dark"] #product .product-manufacturer::before {
    color: var(--s-500); border-right-color: rgba(0,0,0,.10);
    background: transparent;
}

/* =========================================================================
   42. POPRAWKI RESPONSYWNOŚCI
   Każda pozycja wynika z pomiaru: podana liczba to szerokość treści
   uciętej przez overflow-x: clip na html/body.
   ========================================================================= */

/* 42.1 Kontakt: bootstrap-filestyle wpisuje inline width:342px w kolumnę
   szeroką na 80 px. Przepełnienie 153 px przy 768, 53 przy 360. */
#file-upload.filestyle,
.bootstrap-filestyle input.filestyle,
#content .bootstrap-filestyle { width: 100% !important; max-width: 100%; min-width: 0; }
.bootstrap-filestyle { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 100%; }
#content .form-group .bootstrap-filestyle .group-span-filestyle { flex: 1 1 auto; min-width: 0; }

/* 42.2 Strona główna: .container ma padding 0, a zagnieżdżony .row zachował
   margin 0 -15px — treść wystaje o 15 px na każdej szerokości. */
#wrapper > .container { padding-left: 15px; padding-right: 15px; }

/* 42.3 Newsletter w stopce wylewa się o 15 px na każdej szerokości
   (padding kolumny Bootstrapa bez kompensacji). */
.el-fnews__form .block_newsletter,
.el-fnews__in .block_newsletter { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; }
.el-fnews__form { max-width: 100%; }

/* 42.4 Pasek górny przy 360 px: kontakt zajmuje 262 px i nie mieści się.
   Klasa .el-hide-mobile istniała, ale nie działała poniżej 480 px. */
@media (max-width: 480px) {
    .el-hide-mobile { display: none !important; }
    .el-topbar__in { gap: .5rem; padding-inline: 12px; }
}

/* 42.5 Menu poziome potrzebuje 1330 px, a między 992 a ~1345 px dostaje mniej
   i chowa trzy pozycje. Zwężamy odstępy, zamiast ucinać treść. */
@media (min-width: 992px) and (max-width: 1359px) {
    .el-nav__link { padding-inline: 10px; font-size: .9rem; letter-spacing: -.01em; }
    .el-nav__in { gap: 0; }
}

/* 42.6 Kropki slidera mają 46x4 px — najmniejszy cel dotykowy w sklepie.
   Powiększamy obszar klikalny, kreska zostaje wizualnie taka sama. */
.el-slider__dot {
    height: 40px !important; min-height: 40px; padding: 0; background: none !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.el-slider__dot::before {
    content: ""; display: block; width: 46px; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, .38); transition: background-color var(--tf), width var(--tf);
}
.el-slider__dot.is-active::before,
.el-slider__dot[aria-current="true"]::before { background: var(--w); width: 56px; }

/* 42.7 Cele dotykowe poniżej 44 px w pasku górnym i stopce. */
.el-topbar__item, .el-fmenu a, .el-fbot a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 992px) { .el-topbar__item { min-height: 32px; } }

/* 42.8 Drobne teksty: 10,7-11,7 px w kartach i etykietach. */
.el-card__ref { font-size: .8rem; }
.product-flag, .product-flag.new { font-size: .78rem; }
.el-promo__pctsub, .el-brand__tag { font-size: .78rem; }

/* 42.9 Ikona lupy przerasta swój box (32 px treści w 24 px). */
.search-widget i.material-icons.search,
#content i.material-icons.search { width: 32px; font-size: 24px; line-height: 1; }

/* 42.10 Treści CMS wklejone z edytora mają inline font-size: 8pt (10,67 px).
   Nadpisujemy tylko w obrębie treści strony, nie ruszając reszty sklepu. */
#content.page-content.page-cms [style*="font-size"],
.cms-description [style*="font-size"] { font-size: 1rem !important; }
#content.page-content.page-cms [style*="font-family"],
.cms-description [style*="font-family"] { font-family: var(--font) !important; }

/* 42.11 Tabela parametrów na bardzo szerokich ekranach: kolumna etykiet
   rozciągała się do 876 px. Ograniczamy szerokość samej tabeli. */
@media (min-width: 1600px) {
    .product-description table, .tabs table { max-width: 1100px; }
}

/* 42.12 Nagłówki H1 poza kartą produktu też były sztywne. */
#main .page-header h1, .page-header h1.h1 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); line-height: 1.25; }

/* =========================================================================
   43. LOGO PRODUCENTA — przycięcie białego dopełnienia
   PrestaShop zapisuje logo jako kwadrat 452x452 z bielą dookoła. Logo zajmuje
   środkowy pas o proporcji 2,088:1, więc przycinamy obraz do tej proporcji —
   zostaje sam logotyp, bez pustej ramki podnoszącej wysokość karty.
   ========================================================================= */
#product .manufacturer-logo {
    width: 200px;
    height: 96px;               /* 200 / 2,083 = proporcja logotypu */
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
}
@media (max-width: 575px) {
    #product .manufacturer-logo { width: 160px; height: 77px; }
}

/* =========================================================================
   44. WYCIEK 15 px NA STRONIE GŁÓWNEJ
   #wrapper > .container ma padding 0, a zagnieżdżony wiersz Bootstrapa
   zachował margin -15px, przez co treść sięgała od -15 do 1366 w kontenerze
   szerokim na 1351. Kolumny mają własny padding 15 px, więc po wyzerowaniu
   marginesu odstępy zostają zachowane.
   ========================================================================= */
#wrapper > .container > .row { margin-left: 0; margin-right: 0; }

/* =========================================================================
   45. ZAKŁADKI KARTY PRODUKTU NA TELEFONIE
   .nav-tabs ma display:block, więc flex-wrap:nowrap nic nie robił i trzy
   linki (62+178+105 = 345 px) łamały się w oknie 272 px na dwa rzędy.
   ========================================================================= */
@media (max-width: 575px) {
    .tabs .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tabs .nav-tabs::-webkit-scrollbar { display: none; }
    .tabs .nav-tabs .nav-item { flex: 0 0 auto; }
    .tabs .nav-tabs .nav-link { white-space: nowrap; }
}

/* =========================================================================
   46. SZYBKI PODGLĄD NA KAFLU — pasek wysuwany spod zdjęcia (jak w ZZZ)
   Dotąd: pastylka pośrodku zdjęcia pojawiająca się z gradientem, a na
   telefonie cała nakładka display:none (podgląd nieosiągalny dotykiem).
   Teraz: wąski pasek na całą szerokość kafla, wjeżdżający z dołu przy
   najechaniu, klikalny od krawędzi do krawędzi; na ekranach dotykowych
   zamiast paska mały okrągły znacznik lupy w rogu zdjęcia.
   Znaczników HTML nie ruszamy — .el-card__hover i .el-card__quick już są.
   ========================================================================= */
.el-card { --el-pasek-h: 38px; }

/* nakładka staje się paskiem: bez gradientu, przy dolnej krawędzi zdjęcia */
.el-card__media .el-card__hover,
.el-card__media .el-card__hover.highlighted-informations,
.el-card__media .highlighted-informations {
    inset: auto 0 0 0 !important;
    height: var(--el-pasek-h);
    padding: 0 !important;
    display: flex; align-items: stretch; justify-content: stretch; gap: 0;
    background: rgba(18, 146, 95, .94) !important;
    backdrop-filter: blur(2px);
    opacity: 1 !important;
    transform: translateY(100%);
    transition: transform var(--tm), background-color var(--tf);
    pointer-events: auto;
    border-radius: 0;
}
.el-card__inner:hover .el-card__hover,
.el-card__inner:focus-within .el-card__hover { transform: translateY(0); }

/* odnośnik rozciągnięty na cały pasek — trafia się w niego wszędzie, nie tylko w napis */
.el-card__quick,
.el-card__media .el-card__quick.quick-view {
    display: flex !important; align-items: center; justify-content: center; gap: .45rem;
    width: 100%; height: 100%; min-height: var(--el-pasek-h);
    margin: 0; padding: 0 .75rem;
    background: transparent !important;
    color: var(--w) !important;
    border-radius: 0; box-shadow: none !important; backdrop-filter: none;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
    transform: none !important;
    transition: background-color var(--tf), color var(--tf), letter-spacing var(--tf);
}
.el-card__quick i,
.el-card__media .el-card__quick.quick-view i.material-icons {
    font-size: 16px; line-height: 1; width: auto; height: auto; min-height: 0; padding: 0; margin: 0;
    transition: transform var(--tm);
}
.el-card__quick:hover,
.el-card__media .el-card__quick.quick-view:hover {
    background: rgba(11, 110, 71, .96) !important;
    color: var(--w) !important;
    letter-spacing: .13em;
}
.el-card__quick:hover i { transform: scale(1.12); }
.el-card__quick:active { transform: none !important; opacity: .85; }

/* wskaźnik fokusu z klawiatury — pasek i tak jest widoczny przez focus-within */
.el-card__quick:focus-visible { outline: 2px solid var(--w); outline-offset: -4px; }

/* zdjęcie nie „ucieka" pod pasek: przy najechaniu delikatnie się unosi */
.el-card__inner:hover .el-card__img img { transform: scale(1.05) translateY(-4px); }

/* --- tryb ciemny: pasek w jaśniejszej zieleni, żeby oddzielał się od ciemnej karty --- */
html[data-el-theme="dark"] .el-card__media .el-card__hover,
html[data-el-theme="dark"] .el-card__media .highlighted-informations { background: rgba(34, 201, 137, .92) !important; }
html[data-el-theme="dark"] .el-card__quick,
html[data-el-theme="dark"] .el-card__media .el-card__quick.quick-view { color: #0B1A12 !important; background: transparent !important; }
html[data-el-theme="dark"] .el-card__quick:hover,
html[data-el-theme="dark"] .el-card__media .el-card__quick.quick-view:hover { background: rgba(18, 146, 95, .96) !important; color: #FFFFFF !important; }

/* --- ekrany dotykowe / wąskie: zamiast paska stały znacznik lupy w rogu zdjęcia.
   Nadpisuje wcześniejsze .el-card__hover { display:none } z sekcji mobilnej. --- */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .el-card__media .el-card__hover,
    .el-card__media .el-card__hover.highlighted-informations,
    .el-card__media .highlighted-informations {
        display: flex !important;
        inset: .6rem .6rem auto auto !important;
        width: 40px; height: 40px;
        border-radius: var(--pill);
        transform: none;
        background: rgba(18, 146, 95, .92) !important;
        box-shadow: 0 4px 12px rgba(10, 12, 15, .22);
    }
    .el-card__quick,
    .el-card__media .el-card__quick.quick-view { min-height: 40px; padding: 0; gap: 0; }
    .el-card__quick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .el-card__quick i,
    .el-card__media .el-card__quick.quick-view i.material-icons { font-size: 20px; }
    .el-card__inner:hover .el-card__img img { transform: none; }
    html[data-el-theme="dark"] .el-card__media .el-card__hover { background: rgba(34, 201, 137, .92) !important; }
}

/* --- ograniczony ruch: pasek po prostu jest, bez wjazdu --- */
@media (prefers-reduced-motion: reduce) {
    /* pasek podglądu nie wjeżdża, tylko się pojawia */
    .el-card__media .el-card__hover { transform: translateY(0); opacity: 0 !important; transition: opacity var(--tm) !important; }
    .el-card__inner:hover .el-card__hover, .el-card__inner:focus-within .el-card__hover { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px), (prefers-reduced-motion: reduce) and (hover: none) and (pointer: coarse) {
    .el-card__media .el-card__hover { opacity: 1 !important; }
}

/* =========================================================================
   47. NAGŁÓWEK — odchudzenie po przewinięciu (klasa is-scrolled z custom.js)
   375: 127 px widocznych → ok. 100 (12 % ekranu); 1366: 150 → ok. 118.
   ========================================================================= */
.el-hmain, .el-hmain__in, .el-search__input, .el-search__btn, .el-brand__mark, .el-burger, .el-nav__link {
    transition: padding var(--tm), height var(--tm), width var(--tm), font-size var(--tm), gap var(--tm), transform var(--tf);
}
@media (max-width: 767px) {
    #header.is-scrolled .el-hmain { padding: .35rem 0 .5rem; }
    #header.is-scrolled .el-hmain__in { gap: .35rem .9rem; }
    #header.is-scrolled .el-burger { height: 40px; }
    #header.is-scrolled .el-brand__mark { width: 36px; height: 36px; border-radius: 10px; }
    #header.is-scrolled .el-brand__mark i { font-size: 1.2rem; }
    #header.is-scrolled .el-search__input { padding: .42rem 3rem .42rem 1.1rem; font-size: .9rem; }
    #header.is-scrolled .el-search__btn { width: 34px; height: 34px; right: 4px; }
}
@media (min-width: 992px) {
    #header.is-scrolled .el-hmain { padding: .55rem 0; }
    #header.is-scrolled .el-nav__link { padding-top: .65rem; padding-bottom: .65rem; }
}

/* =========================================================================
   48. STRONA GŁÓWNA — kolumna Bootstrapa #content-wrapper (padding 15) po
   wyzerowaniu marginesu wiersza zjadała 30 px na telefonie i przesuwała
   treść o 15 px względem nagłówka.
   ========================================================================= */
#index #wrapper > .container > .row > #content-wrapper { padding-left: 0; padding-right: 0; }

/* =========================================================================
   49. KAFEL — nazwa produktu: classic narzucał 14 px / 400 / wyśrodkowanie /
   capitalize. Przywracamy hierarchię: numer 12,8 → nazwa 16,6/600 → cena 20,8/800,
   wszystko do lewej.
   ========================================================================= */
.product-miniature .el-card__title { margin-top: 0; text-align: left; text-transform: none; }
.product-miniature .el-card__title a { font-size: inherit; font-weight: 600; text-align: left; line-height: 1.35; }

/* =========================================================================
   50. LISTING 768–991 px: lewa kolumna 33 % → 28 %, siatka w dwóch kolumnach
   (było: jedna karta 452×611 px na rząd).
   ========================================================================= */
@media (min-width: 768px) and (max-width: 991px) {
    #left-column.col-md-4 { width: 28%; }
    #content-wrapper.col-md-8 { width: 72%; }
    .products.el-grid, .el-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
    #left-column .block-categories { padding: 1rem; }
    #left-column .block-categories .h6 { font-size: 1rem; }
}

/* =========================================================================
   51. LISTING ≤767 px: produkty przed drzewem kategorii (drzewo 318 px
   i breadcrumb 106 px spychały karty na 898 px), tytuł kategorii bez ucięcia,
   breadcrumb w jednej przewijanej linii.
   ========================================================================= */
@media (max-width: 767px) {
    #category #wrapper > .container > .row { display: flex; flex-direction: column; }
    #category #content-wrapper { order: 1; }
    #category #left-column { order: 2; margin-top: 1rem; }
    .el-cathead__title { font-size: clamp(1.2rem, 5.8vw, 1.6rem); overflow-wrap: anywhere; hyphens: auto; }
    #wrapper .breadcrumb { padding: .9rem 0 .6rem; font-size: .8rem; }
    #wrapper .breadcrumb ol { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
    #wrapper .breadcrumb ol::-webkit-scrollbar { display: none; }
    .el-pagi { margin-bottom: 2rem; }
}

/* =========================================================================
   52. CELE DOTYKOWE ≥ 44 px (pomiar 375: linki stopki 30, „Zobacz" 39,
   serce 40, paginacja 42, przełącznik 31, drzewo 33). Naprawia też sekcję
   42.7, która celowała w nieistniejące klasy .el-fmenu / .el-fbot.
   ========================================================================= */
@media (max-width: 991px) {
    .el-topbar { height: 44px; }
    #header { top: -45px; }
    .el-topbar__item { font-size: .8rem; }
    .el-fcol > a, .el-fcontact a, .el-fbottom a { min-height: 44px; display: inline-flex; align-items: center; }
    .el-fcol { gap: 0; }
    .el-card__cta { min-height: 44px; padding: .6rem 1.15rem; }
    .el-card__title a { padding: .2rem 0; }
    .wishlist-button-add { width: 44px !important; height: 44px !important; }
    .el-pagi__list > li > a, .el-pagi__list > li > span, .el-pagi__jump-toggle { min-width: 44px; height: 44px; }
    .el-theme-toggle { min-height: 44px; }
    .el-slider__dot { height: 44px !important; min-height: 44px; }
    .block-categories .category-sub-menu li a { min-height: 44px; display: inline-flex; align-items: center; }
    .block-categories .collapse-icons { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .el-btn--lg { padding: .85rem 1.7rem; font-size: 1rem; }
}

/* =========================================================================
   53. STRONA GŁÓWNA — pustka i proporcje: pusty blok ps_customtext (124 px),
   pasek zaufania 495 px → ok. 400, stopka 1479 → ok. 1250 (linki w dwu kolumnach).
   ========================================================================= */
#custom-text:not(:has(p, h1, h2, h3, img, ul, table)) { display: none; }
@media (max-width: 767px) {
    .el-trust__item { padding: 1rem 1.1rem; gap: .8rem; }
    .el-trust__item i { font-size: 1.7rem; }
    .el-trust__item strong { font-size: 1rem; }
    .el-trust__item span { font-size: .86rem; }
    .el-psec__head { margin-bottom: 1.2rem; }
    .el-psec__link { padding: .55rem 1.2rem; font-size: .92rem; }
    .el-fmain { padding: 2.5rem 0 2rem; }
    .el-fmain__in { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
    .el-fcol--brand, .el-fcol:nth-child(4) { grid-column: 1 / -1; }
    .el-fcol > a { font-size: .9rem; }
}

/* =========================================================================
   54. KONTRAST I TRYB CIEMNY — stopka jest zawsze ciemnozielona (#123B2C):
   --s-600 dawał 1,6:1, --s-500 2,6:1 → --s-400 (4,8:1). Pole newslettera
   w trybie ciemnym miało kolor tekstu równy tłu.
   ========================================================================= */
.el-fbottom p, .el-fcredit p { color: var(--s-400); }
.el-fcol__desc, .el-fnews__sub, .el-fnews__form .block_newsletter p { color: var(--s-400); }
html[data-el-theme="dark"] .el-fbottom p,
html[data-el-theme="dark"] .el-fcol__desc,
html[data-el-theme="dark"] .el-fnews__sub { color: var(--s-500); }
html[data-el-theme="dark"] .el-fnews__form input[type="email"] { color: var(--k-900) !important; background: var(--s-100) !important; }

/* =========================================================================
   55. ANIMACJE — dopełnienie (globalny blok prefers-reduced-motion wyłącza wszystko)
   ========================================================================= */
/* telefon: siatka jednokolumnowa, kaskada 70–280 ms tylko opóźniała pojedynczą kartę */
@media (max-width: 767px) { .el-reveal[data-el-delay] { transition-delay: 0ms; } }
/* baner kategorii, podkategorie — wejście jak reszta (selektory dodane w JS) */
.el-cathead.el-reveal, .el-subcat.el-reveal { transform: translateY(14px); }
/* „Zobacz" — strzałka dojeżdża, klik lekko wciska */
.el-card__cta i { transition: transform var(--tf); }
.el-card__inner:hover .el-card__cta i, .el-card__cta:hover i { transform: translateX(3px); }
.el-card__cta:active { transform: scale(.96); }
/* licznik produktów — kropka pulsuje trzy razy po wejściu */
@keyframes elPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(18,146,95,.20); } 50% { box-shadow: 0 0 0 7px rgba(18,146,95,.06); } }
.total-products p::before { animation: elPulse 2.2s ease-in-out .6s 3; }
/* paginacja — aktywna strona „wskakuje", najechanie unosi o 1 px */
.el-pagi__list > li > a { transition: background-color var(--tf), color var(--tf), transform var(--tf), box-shadow var(--tm); }
.el-pagi__list > li > a:hover { transform: translateY(-1px); }
.el-pagi__list > li.current > a { box-shadow: var(--sh-g); animation: elPop var(--tm) both; }
/* zdjęcia w kartach — płynne pojawienie po załadowaniu (klasa html.el-img-fade
   dodawana skryptem, więc bez JS obrazki są widoczne od razu) */
html.el-img-fade .el-card__img img { opacity: 0; transition: opacity var(--ts), transform var(--ts); }
html.el-img-fade .el-card__img img.is-loaded { opacity: 1; }
/* przenikanie zdjęć zostaje także przy ograniczonym ruchu — to fade, nie ruch */

/* =========================================================================
   56. PODSTRONY I FORMULARZE — telefon i tryb ciemny najpierw
   Liczby w komentarzach = pomiar przed zmianą (375 px, tryb jasny).
   ========================================================================= */

/* 56.1 Rozmiary dotykowe: pola 45 px, przyciski 42/38 px, hasło 38 px. */
.btn, .btn-primary, .btn-secondary { min-height: 44px; line-height: 1.25; }
#wrapper .form-control, #wrapper input[type="text"], #wrapper input[type="email"],
#wrapper input[type="password"], #wrapper input[type="tel"], #wrapper input[type="number"],
#wrapper select { min-height: 48px; font-size: 1rem; }
#wrapper textarea.form-control { min-height: 140px; resize: vertical; }
.forgotten-password .form-fields .email input,
.forgotten-password .form-fields .center-email-fields button { height: auto; min-height: 48px; }
.el-fnews__form input[type="email"] { font-size: 1rem; min-height: 48px; }
.el-fnews__form .btn, .el-fnews__form button[type="submit"] { min-height: 48px; }

@media (max-width: 575px) {
    /* submit na całą szerokość: „Wyślij" 105 px, „Zaloguj się" 148 px, „Zapisz" 102 px */
    #login-form .form-footer .btn, #customer-form .form-footer .btn,
    .contact-form .form-footer .btn, .contact-form input[type="submit"],
    .forgotten-password .center-email-fields .btn { width: 100%; float: none; margin: .25rem 0 0; }
    #wrapper .form-footer { text-align: center; }
}

/* 56.2 Etykiety nad polami poniżej 768 px: padding-top 10 px robił dziurę. */
@media (max-width: 767px) {
    #wrapper .form-control-label { padding-top: 0; margin-bottom: .35rem; text-align: left; }
    #wrapper .form-group.row { margin-bottom: 1.1rem; }
    #wrapper .form-group .form-control-comment.col-md-3 { padding-top: 0; }
    #wrapper .form-control-comment { font-size: .85rem; }
}
/* kolory etykiet i podpisów z tokenów — w trybie ciemnym przełączają się same
   (classic: label #232323, comment #7a7a7a = 1,08 / 3,94:1 na ciemnym) */
#wrapper label, #wrapper .form-control-label, #wrapper .radio-inline,
#wrapper .custom-checkbox label { color: var(--k-800); }
#wrapper .form-control-comment { color: var(--s-500); }
#main .page-content p, .page-not-found p, .forgotten-password p,
.register-form p, .login-form header p { color: var(--s-600); }

/* linki pomocnicze jako cele 44 px (były 20–23 px); breadcrumb wyrównany do kart */
.forgot-password a, .no-account a, .page-footer .account-link,
#wrapper .breadcrumb li a { display: inline-flex; align-items: center; min-height: 44px; }
#wrapper .breadcrumb { padding-left: 15px; padding-right: 15px; }
@media (max-width: 575px) { #wrapper .breadcrumb { padding-top: .9rem; padding-bottom: .5rem; } }

/* 56.3 KONTAKT — zewnętrzna karta przezroczysta (karta w karcie zabierała 28 px
   z każdej strony; pola miały 163 px na 375). */
.page-contact #content.page-content { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
html[data-el-theme="dark"] .page-contact #content.page-content { background: transparent !important; }
.el-contact__card { border-radius: var(--r-lg); }
.el-contact__card--form .contact-form { padding: 0; }
#content .contact-form input[type="submit"] { border-radius: var(--pill); }
@media (max-width: 991px) {
    /* 768–991: karta formularza miała 213 px, pola 44 px */
    .el-contact__grid { grid-template-columns: 1fr; }
    .el-contact__card--form .form-group.row { display: block; margin-bottom: 1.1rem; }
    .el-contact__card--form .form-control-label { padding-top: 0; margin-bottom: .35rem; text-align: left; }
}
@media (max-width: 575px) {
    .el-contact__card { padding: 1.25rem; }
    .el-contact__map iframe { height: 260px; }
}

/* 56.4 CHECKBOX / RADIO — 22 px, tokeny, zielone zaznaczenie, animowany ptaszek. */
.custom-checkbox input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
.custom-checkbox input[type="checkbox"] + span,
#authentication .custom-checkbox input[type="checkbox"] + span {
    flex: 0 0 22px; width: 22px; height: 22px; margin-right: .6rem;
    border: 2px solid var(--s-300); border-radius: 6px; background: var(--w);
    display: inline-flex; align-items: center; justify-content: center; vertical-align: -5px;
    transition: background-color var(--tf), border-color var(--tf), box-shadow var(--tm);
}
.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
    display: block; margin: 0; font-size: 16px; color: #FFFFFF;
    opacity: 0; transform: scale(.4); transition: opacity var(--tf), transform var(--tm);
}
.custom-checkbox input[type="checkbox"]:checked + span { background: var(--g); border-color: var(--g); }
.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked { opacity: 1; transform: scale(1); }
.custom-checkbox input[type="checkbox"]:focus-visible + span { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); }
.custom-checkbox label, #authentication .custom-checkbox label { display: flex; align-items: flex-start; min-height: 44px; padding: .55rem 0 0; cursor: pointer; }

.custom-radio { width: 22px; height: 22px; border: 2px solid var(--s-300); background: var(--w); transition: border-color var(--tf), box-shadow var(--tm); }
.custom-radio input[type="radio"] { width: 22px; height: 22px; margin: 0; }
.custom-radio input[type="radio"]:checked + span { width: 10px; height: 10px; margin: 4px; background: var(--g); }
.radio-inline:focus-within .custom-radio { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); }
#wrapper label.radio-inline { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-right: 1.25rem; cursor: pointer; }
html[data-el-theme="dark"] .custom-checkbox input[type="checkbox"] + span,
html[data-el-theme="dark"] .custom-radio { background: var(--s-50); border-color: var(--s-300); }

/* 56.5 „Pokaż" hasło (11 px, #7a7a7a, radius 0) i „Wybierz plik" (11 px, 39 px). */
.input-group .input-group-btn > .btn[data-action="show-password"] {
    background: var(--s-100); color: var(--k-800); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    padding: 0 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: inset 0 0 0 2px var(--s-200);
    transition: background-color var(--tf), color var(--tf);
}
.input-group .input-group-btn > .btn[data-action="show-password"]:hover { background: var(--g-50); color: var(--g-deep); }
.input-group .form-control.js-visible-password { border-radius: var(--r-sm) 0 0 var(--r-sm); }

.bootstrap-filestyle { gap: .6rem; align-items: stretch; }
#content .form-group .bootstrap-filestyle .group-span-filestyle { flex: 0 0 auto; }
.bootstrap-filestyle input.form-control { flex: 1 1 150px; min-width: 0; border-radius: var(--r-sm) !important; border-right: 2px solid var(--s-200); }
.input-group.bootstrap-filestyle .input-group-btn > .btn,
.input-group.bootstrap-filestyle .input-group-btn > label.btn {
    border-radius: var(--pill) !important; font-size: .9rem; text-transform: none; letter-spacing: 0;
    min-height: 48px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.2rem; margin: 0; width: auto;
}

/* 56.6 FOKUS i BŁĘDY — jeden pierścień (bez dublowania outline z sekcji 15),
   w trybie ciemnym halo z neonu (--g-50 = #14291F było niewidoczne). */
#wrapper input:focus-visible, #wrapper select:focus-visible, #wrapper textarea:focus-visible { outline: none; }
.form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea {
    transition: border-color var(--tf), box-shadow var(--tm), background-color var(--tf);
}
html[data-el-theme="dark"] .form-control:focus, html[data-el-theme="dark"] textarea:focus,
html[data-el-theme="dark"] select:focus { border-color: var(--g-neon) !important; box-shadow: 0 0 0 4px rgba(34,201,137,.22); }
html[data-el-theme="dark"] .form-control, html[data-el-theme="dark"] textarea,
html[data-el-theme="dark"] select { border-color: rgba(255,255,255,.16) !important; }

.form-group.has-error .form-control, .form-group.has-error input, .form-group.has-error select {
    outline: 0; border-color: var(--red); box-shadow: 0 0 0 4px rgba(220,58,76,.14);
}
.help-block { margin-top: .5rem; }
.help-block ul { margin: 0; padding: 0; list-style: none; }
.help-block li.alert, .ps-alert-error .item p {
    font-size: .9rem; padding: .7rem .95rem; margin-bottom: .5rem;
    animation: elFadeUp var(--tm) both;
}
html[data-el-theme="dark"] .alert-danger, html[data-el-theme="dark"] .help-block li.alert-danger {
    background: rgba(220,58,76,.16) !important; color: #FF9AA2 !important; border-left-color: #FF6B78;
}

/* 56.7 WYSZUKIWARKA na 404 i pustym wyniku (ps_searchbar: #f1f1f1, 14 px, radius 5;
   w trybie ciemnym tekst #D6DEE5 na #f1f1f1 = 1,2:1). */
#search_widget { float: none; width: 100%; max-width: 100%; margin: .5rem auto 0; }
#search_widget form input {
    min-height: 48px; font-size: 1rem; padding: .6rem 2.75rem; color: var(--k-800);
    background: var(--s-100); border: 2px solid transparent; border-radius: var(--r-sm);
    transition: border-color var(--tf), box-shadow var(--tm), background-color var(--tf);
}
#search_widget form input:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); background: var(--w); }
#search_widget form i { top: 50%; transform: translateY(-50%); padding: 0 .6rem; color: var(--s-500); }
html[data-el-theme="dark"] #search_widget form input { background: var(--s-100) !important; color: var(--k-900) !important; }
html[data-el-theme="dark"] #search_widget form input:focus { border-color: var(--g-neon); box-shadow: 0 0 0 4px rgba(34,201,137,.22); }
html[data-el-theme="dark"] #search_widget form input::placeholder { color: var(--s-400); }

/* 404: classic dawało margin 2rem 0 3rem i 10rem pustki nad stopką */
#pagenotfound #main .page-header { margin: 0 0 1.5rem; }
#pagenotfound #main .page-content { margin-bottom: 2rem; }
#pagenotfound .page-not-found, #search .page-not-found { max-width: 620px; margin-inline: auto; text-align: center; }
#pagenotfound .page-not-found::before {
    content: "404"; display: block; font-size: clamp(3rem, 8vw, 5rem); font-weight: 800;
    line-height: 1; color: var(--g-100); margin-bottom: .4rem; letter-spacing: -.04em;
}
.page-not-found h4 { font-size: 1.15rem; color: var(--k-900); margin: 0 0 .6rem; }
.page-not-found p { margin-bottom: 1.25rem; }

/* nagłówek wyników wyszukiwania w karcie jak inne .page-header (było h1.h2 21 px luzem);
   sortowanie 58 px → 44 px */
#search #js-product-list-header {
    display: block; background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1);
    padding: 1.25rem 1.9rem; margin: 0 0 1.25rem; text-transform: none; color: var(--k-900);
    font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); line-height: 1.25;
}
.products-sort-order .select-title { min-height: 44px; padding: .35rem .6rem .35rem 1rem; }

/* 56.8 CMS (regulamin, wysyłka): 15 px #7a7a7a justowane, style inline z Worda,
   kolumna 1236 px na 1366, link 457 px wychodzący poza 375. */
#content.page-cms { max-width: 820px; margin-inline: auto; text-align: left; font-size: 1rem; line-height: 1.7; color: var(--k-700); }
#content.page-cms p, #content.page-cms li, #content.page-cms span, #content.page-cms td { color: var(--k-700); font-size: 1rem; }
#content.page-cms p { margin: 0 0 .85rem !important; line-height: 1.7 !important; }
#content.page-cms [style*="justify"] { text-align: left !important; }
#content.page-cms [style*="margin"] { margin-left: 0 !important; margin-right: 0 !important; }
#content.page-cms [style*="#808080"], #content.page-cms [style*="#888888"],
#content.page-cms [style*="#7a7a7a"] { color: var(--k-700) !important; }
#content.page-cms strong, #content.page-cms b, #content.page-cms h2, #content.page-cms h3,
#content.page-cms h4 { color: var(--k-900); }
#content.page-cms h2, #content.page-cms h3, #content.page-cms h4 { margin: 1.6rem 0 .6rem; }
#content.page-cms p[style*="text-align:center"], #content.page-cms p[style*="text-align: center"] {
    font-weight: 700; color: var(--k-900); margin-top: 1.4rem !important;
}
#content.page-cms ul, #content.page-cms ol { padding-left: 1.4rem; list-style-position: outside; margin-bottom: 1rem; }
#content.page-cms li { margin-bottom: .35rem; }
#content.page-cms a, #content.page-cms span { overflow-wrap: anywhere; word-break: break-word; }
#content.page-cms a { color: var(--g-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
html[data-el-theme="dark"] #content.page-cms, html[data-el-theme="dark"] #content.page-cms p,
html[data-el-theme="dark"] #content.page-cms li, html[data-el-theme="dark"] #content.page-cms span,
html[data-el-theme="dark"] #content.page-cms td,
html[data-el-theme="dark"] #content.page-cms [style*="#808080"],
html[data-el-theme="dark"] #content.page-cms [style*="#888888"] { color: var(--k-800) !important; }
html[data-el-theme="dark"] #content.page-cms strong, html[data-el-theme="dark"] #content.page-cms b,
html[data-el-theme="dark"] #content.page-cms p[style*="center"] { color: var(--k-900) !important; }

/* 56.9 MAPA STRONY (bez karty, ul -15 px, h2 #232323 w ciemnym) i SKLEPY (karta w karcie) */
body.page-sitemap #main > .container-fluid, #sitemap #main > .container-fluid {
    background: var(--w); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.5rem 1.25rem .75rem;
}
.sitemap, .sitemap ul { margin-left: 0; }
.sitemap ul { margin-top: .5rem; }
.sitemap ul.nested { margin-left: 1rem; }
.sitemap h2 { font-size: .8rem; letter-spacing: .08em; color: var(--s-500); margin: 0 0 .25rem; }
.sitemap li { margin-bottom: .1rem; }
.sitemap a { display: inline-block; padding: .5rem 0; color: var(--k-700); font-size: .95rem; transition: color var(--tf), transform var(--tf); }
.sitemap a:hover { color: var(--g-deep); transform: translateX(3px); }
@media (max-width: 767px) {
    .sitemap > .col-md-3 + .col-md-3 { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--s-100); }
}

#stores .page-stores { width: 100%; }
#stores .store-item.card { box-shadow: none; border-radius: 0; padding: 0; margin: 0; background: transparent; }
#stores .store-item + .store-item { border-top: 1px solid var(--s-100); padding-top: 1.5rem; margin-top: 1.5rem; }
#stores .divide-left table th { text-align: left; padding: .15rem .9rem .15rem 0; color: var(--k-800); }
#stores .divide-left table td { color: var(--k-700); }
@media (max-width: 767px) { #stores .store-item-container { padding: .5rem 0; } }

/* 56.10 Karty na telefonie: padding 28 px zabierał 56 z 315 px */
@media (max-width: 575px) {
    #main .page-header { padding: 1rem 1.15rem; margin-bottom: 1rem; }
    #main .page-content, #content-wrapper .card, .page-content.page-cms { padding: 1.15rem; }
    #search #js-product-list-header { padding: 1rem 1.15rem; }
}

/* 56.11 TRYB CIEMNY — domknięcia poza tokenami */
html[data-el-theme="dark"] #wrapper label, html[data-el-theme="dark"] .radio-inline,
html[data-el-theme="dark"] .custom-checkbox label { color: var(--k-800) !important; }
html[data-el-theme="dark"] .form-control-comment, html[data-el-theme="dark"] #main .page-content p,
html[data-el-theme="dark"] .page-not-found p { color: var(--s-500) !important; }
html[data-el-theme="dark"] .wishlist-button-add { background: var(--surface) !important; color: var(--k-800) !important; }
html[data-el-theme="dark"] .wishlist-button-add i { color: inherit !important; }

/* 56.12 ANIMACJE — wejście kart stron pobocznych, żywszy przycisk
   (blok prefers-reduced-motion z sekcji 15 wyłącza je) */
#main .page-header { animation: elFadeUp var(--ts) both; }
#main .page-content, body.page-sitemap #main > .container-fluid, #sitemap #main > .container-fluid,
#search #js-product-list-header { animation: elFadeUp var(--ts) 60ms both; }
.el-contact__card--info { animation: elFadeUp var(--ts) 60ms both; }
.el-contact__card--form { animation: elFadeUp var(--ts) 140ms both; }
.el-contact__map { animation: elFadeUp var(--ts) 220ms both; }
.btn { transition: background-color var(--tf), color var(--tf), box-shadow var(--tm), transform var(--tf); }
.btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18,146,95,.42); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--sh-g); }
.btn-secondary:hover, .btn-default:hover { transform: translateY(-1px); }

/* =========================================================================
   57. TRYB CIEMNY — STOPKA I NAGŁÓWEK
   Stopka jest zawsze ciemna, a szare tokeny w trybie ciemnym flipują w złą
   stronę (linki #4C5560 na #0A0F14 = 2,54; telefon 1,70). Liczby = po zmianie.
   ========================================================================= */
html[data-el-theme="dark"] #footer a, html[data-el-theme="dark"] .el-fcol > a { color: var(--s-500); }   /* 9,17 */
html[data-el-theme="dark"] #footer a:hover, html[data-el-theme="dark"] .el-fcol > a:hover { color: var(--g-neon); }
html[data-el-theme="dark"] .el-fcontact a { color: var(--k-700) !important; }                          /* 10,78 */
html[data-el-theme="dark"] .el-fnews__form .block_newsletter input[type="email"],
html[data-el-theme="dark"] .el-fnews__form input[type="email"] { border: 2px solid rgba(255,255,255,.13) !important; }
.block_newsletter { border-bottom: 0 !important; }                                                     /* kreska #F6F6F6 z classic przy <=767 */
html[data-el-theme="dark"] .el-hcta { background: var(--g-dark) !important; }                          /* biały na #0E7A4F = 5,36 */
html[data-el-theme="dark"] .el-hcta small { color: #FFFFFF !important; }

/* przyciski główne: biały na #12925F = 3,96 — w trybie ciemnym ciemniejsza zieleń (5,36) */
html[data-el-theme="dark"] .el-btn--primary,
html[data-el-theme="dark"] .btn-primary,
html[data-el-theme="dark"] #submit-login,
html[data-el-theme="dark"] .el-fnews__form .btn,
html[data-el-theme="dark"] .el-qv__cta { background: var(--g-dark) !important; color: #FFFFFF !important; }
html[data-el-theme="dark"] .el-btn--primary:hover,
html[data-el-theme="dark"] .btn-primary:hover,
html[data-el-theme="dark"] .el-qv__cta:hover { background: var(--g) !important; }

/* =========================================================================
   58. TRYB CIEMNY — LISTINGI (kategoria, wyszukiwarka)
   ========================================================================= */
html[data-el-theme="dark"] .page-list > li.current > a,
html[data-el-theme="dark"] .el-pagi__list > li.current > a,
html[data-el-theme="dark"] .el-pagi__list > li.current > span { background: var(--g-dark) !important; color: #FFFFFF !important; }   /* 2,91 → 5,36 */
html[data-el-theme="dark"] #js-product-list-top .showing,
html[data-el-theme="dark"] .sort-by-row .sort-by,
html[data-el-theme="dark"] .products-sort-order .sort-by { color: var(--s-500) !important; }   /* 4,41 → 9,01 */
html[data-el-theme="dark"] .el-cathead__eyebrow { background: rgba(0,0,0,.28); padding: .15rem .6rem; border-radius: var(--pill); }

/* =========================================================================
   59. TRYB CIEMNY — KARTA PRODUKTU (domknięcie sekcji 38, 41, 43)
   ========================================================================= */
html[data-el-theme="dark"] .product-description table.table-bordered,
html[data-el-theme="dark"] .tabs table.table-bordered { border-color: rgba(255,255,255,.08) !important; }   /* rama #F6F6F6 */
html[data-el-theme="dark"] #product .product-manufacturer::before { color: #4A5160; }                    /* 2,10 → 7,96 na białej karcie */
html[data-el-theme="dark"] #product .product-manufacturer { border-color: rgba(0,0,0,.08); }
html[data-el-theme="dark"] #product .data-sheet dt.name {
    color: var(--g-deep) !important; background: rgba(34,201,137,.10) !important;
    box-shadow: inset 3px 0 0 rgba(34,201,137,.6);
}
html[data-el-theme="dark"] #product .data-sheet dt.name:nth-of-type(even) { background: rgba(34,201,137,.06) !important; }
html[data-el-theme="dark"] .product-images > li.thumb-container > .thumb.selected,
html[data-el-theme="dark"] .product-images > li.thumb-container > .thumb:hover { border-color: var(--g-neon); }   /* zamiast cyjanu classic */
html[data-el-theme="dark"] .social-sharing li { filter: invert(.88) hue-rotate(180deg); }

/* =========================================================================
   60. TRYB CIEMNY — BIAŁE PLAMY I ZDJĘCIA NA KAFLACH
   Zdjęcia produktów to JPG na białym tle: na kaflu #10151C dawały biały
   zaokrąglony kwadrat. Pole zdjęcia dostaje jasną podkładkę, a zdjęcie
   lekko przygaszone, żeby się z nią zlało.
   ========================================================================= */
html[data-el-theme="dark"] .wishlist-button-add .material-icons,
html[data-el-theme="dark"] .wishlist-button-add i { color: var(--k-700) !important; }
html[data-el-theme="dark"] #custom-text { background: transparent !important; }
html[data-el-theme="dark"] .el-cat__arrow, html[data-el-theme="dark"] .el-cat__arrow i { color: var(--s-500); }   /* 2,24 → 8,07 */
html[data-el-theme="dark"] .el-slider__dot.is-active::before,
html[data-el-theme="dark"] .el-slider__dot[aria-current="true"]::before { background: #FFFFFF; }
html[data-el-theme="dark"] .el-card__media { background: #F4F6F8; }
html[data-el-theme="dark"] .el-qv__media { background: #F4F6F8 !important; }
html[data-el-theme="dark"] .el-card__media img,
html[data-el-theme="dark"] .product-cover img,
html[data-el-theme="dark"] .el-qv__img { filter: brightness(.94); }

/* =========================================================================
   61. TRYB CIEMNY — FORMULARZE, domknięcie sekcji 56
   ========================================================================= */
html[data-el-theme="dark"] .contact-form label.btn,
html[data-el-theme="dark"] .bootstrap-filestyle label.btn,
html[data-el-theme="dark"] .bootstrap-filestyle label.btn span { color: #FFFFFF !important; background: var(--g-dark) !important; }  /* 2,64 → 5,36 */
html[data-el-theme="dark"] .el-qv__desc p { color: var(--s-500) !important; }   /* 3,94 → 8,07 */

/* =========================================================================
   62. CMS — kolory wklejone z Worda (regulamin: 59× color:#808080, 21× #8f28fe)
   ========================================================================= */
#content.page-cms [style*="808080" i], .cms-description [style*="808080" i] { color: var(--k-700) !important; }
#content.page-cms a, #content.page-cms a span, #content.page-cms [style*="8f28fe" i] { color: var(--g-deep) !important; }
html[data-el-theme="dark"] #content.page-cms [style*="808080" i],
html[data-el-theme="dark"] .cms-description [style*="808080" i] { color: var(--k-800) !important; }   /* 4,29 → 12,45 */
html[data-el-theme="dark"] #content.page-cms a, html[data-el-theme="dark"] #content.page-cms a span,
html[data-el-theme="dark"] #content.page-cms [style*="8f28fe" i] { color: var(--g-neon) !important; }   /* 3,15 → 7,89 */

/* =========================================================================
   63. OBA TRYBY — błędy znalezione przy audycie
   ========================================================================= */
/* mapa kontaktu: filtr invert przełączał się skokiem */
html.el-theme-anim .el-contact__map iframe { transition: filter .6s ease !important; }
/* 42.6 podniosło kropkę slidera do 40/44 px, a stary pasek postępu (inset:0)
   wypełniał cały przycisk — biała pastylka 46×40 zamiast kreski */
.el-slider__dot > span { top: calc(50% - 2px); bottom: auto; height: 4px; }
/* ikony kafli 2 i 5 (żółty gradient): biały dawał 1,5–2,4 → ciemniejszy gradient, >= 3,75 */
.el-cats__grid .el-cat:nth-child(2) .el-cat__icon,
.el-cats__grid .el-cat:nth-child(5) .el-cat__icon { background: linear-gradient(140deg, #E39A17, #B87400); }
/* drobne teksty jasnego trybu poniżej 3:1 */
.el-card__ref { color: var(--s-600); }                            /* #98A0AC 2,64 → ok. 5 */
.product-flag.new { background: var(--g-dark) !important; }        /* biały na #6DBB9D 2,27 → 5,36 */

/* =========================================================================
   64. DROBIAZGI PO POMIARZE TRYBU CIEMNEGO
   ========================================================================= */
html[data-el-theme="dark"] .el-card__ref { color: var(--s-500); }   /* --s-600 w ciemnym = #D6DEE5, numer świecił jak tytuł */

/* =========================================================================
   65. RUCH — NAGŁÓWEK, SZUFLADA MOBILNA, „DO GÓRY", STOPKA
   Animowane wyłącznie: transform / opacity / box-shadow / background-position
   (+ kolory tła i obramowań, które motyw i tak animuje). Zero zmian układu,
   wymiarów i kolejności. Ograniczony ruch (65.12): gasną pętle, kaskady zostają
   jako czyste przenikanie, ruch wywołany przez użytkownika zostaje.
   Uwaga do sekcji 47: jej wspólna lista `transition` na .el-search__input,
   .el-search__btn, .el-burger i .el-hmain zastąpiła przejścia kolorów
   z sekcji 5 (fokus pola, hover lupy i burgera skaczą). 65.4, 65.7 i 65.2
   przywracają je, zachowując właściwości z 47 (padding/height/width/right).
   ========================================================================= */

/* 65.0 dwa tokeny: odbicie (małe elementy) i mocne wyhamowanie (duże) */
:root {
    --el-spring: cubic-bezier(.34,1.56,.64,1);
    --el-out:    cubic-bezier(.16,1,.3,1);
    --tspring:   450ms cubic-bezier(.34,1.56,.64,1);
    --tout:      520ms cubic-bezier(.16,1,.3,1);
}

/* 65.1 klatki */
@keyframes elSheen    { 0% { transform: translateX(-160%) skewX(-18deg); } 7% { transform: translateX(260%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes elGlow     { 0%, 10%, 100% { box-shadow: 0 8px 20px rgba(18,146,95,.4); } 4% { box-shadow: 0 10px 30px rgba(34,201,137,.62), 0 0 0 8px rgba(34,201,137,.10); } }
@keyframes elRing     { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
@keyframes elRingIdle { 0%, 12%, 100% { transform: rotate(0); } 2% { transform: rotate(-14deg); } 4% { transform: rotate(11deg); } 6% { transform: rotate(-8deg); } 8% { transform: rotate(5deg); } 10% { transform: rotate(-2deg); } }
@keyframes elNavIn    { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes elSlideIn  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes elLupa     { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-18deg) scale(1.12); } 60% { transform: rotate(9deg); } }
@keyframes elLupaGo   { to { transform: rotate(90deg) scale(.9); opacity: .55; } }
@keyframes elWire     { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes elFlash    { from { box-shadow: 0 0 0 0 rgba(34,201,137,.45); } to { box-shadow: 0 0 0 14px rgba(34,201,137,0); } }

/* 65.2 nagłówek po przewinięciu — cień i tło płyną wolniej niż wymiary z 47 */
#header  { transition: box-shadow var(--ts), background-color var(--ts); }
.el-hmain { transition: padding var(--tm), background-color var(--ts); }   /* lista z 47 + tło */
.el-nav  { transition: background-color var(--ts); }

/* 65.2b (OPCJONALNIE) szkło po przewinięciu — treść prześwituje pod nagłówkiem.
   NIE na #header: jest rodzicem szuflady i scrimu (position: fixed), a filter /
   backdrop-filter zrobiłby z niego containing block i szuflada przykleiłaby się
   do nagłówka. Dlatego tło znika z #header, a wiersze dostają własne, mleczne.
   Odkomentować w całości albo pominąć. */
/*
#header.is-scrolled { background-color: transparent; }
html[data-el-theme="dark"] #header.is-scrolled { background-color: transparent !important; }
#header.is-scrolled .el-hmain,
#header.is-scrolled .el-nav {
    background-color: rgba(244,248,245,.84);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}
html[data-el-theme="dark"] #header.is-scrolled .el-hmain,
html[data-el-theme="dark"] #header.is-scrolled .el-nav { background-color: rgba(18,24,31,.84) !important; }
*/

/* 65.3 logo — co 12 s poświata pulsuje, a po znaku przebiega refleks (0,8 s) */
.el-hmain .el-brand__mark {
    position: relative; overflow: hidden;
    animation: elGlow 12s var(--el-out) 3s infinite;
}
.el-hmain .el-brand__mark::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: elSheen 12s var(--el-out) 3s infinite;
    pointer-events: none;
}

/* 65.4 wyszukiwarka — pierścień fokusu płynie (47 to zgubiła), lupa reaguje */
.el-search__input { transition: padding var(--tm), font-size var(--tm), background-color var(--tf), border-color var(--tf), box-shadow var(--tm); }
.el-search__btn   { transition: width var(--tm), height var(--tm), right var(--tm), background-color var(--tf), color var(--tf), transform var(--tf), box-shadow var(--tm); }
.el-search__btn i { transition: transform var(--tm); }
.el-search:focus-within .el-search__btn { background: var(--g-neon); color: var(--k-950); box-shadow: 0 0 0 4px rgba(34,201,137,.18); }
.el-search:focus-within .el-search__btn i { animation: elLupa .5s var(--el-out); }
.el-search.is-sending .el-search__btn i { animation: elLupaGo .35s var(--el-out) forwards; }   /* klasa z JS przy submit */
.el-search.is-sending .el-search__input { box-shadow: 0 0 0 6px rgba(34,201,137,.10); }

/* 65.5 przełącznik motywu — słońce/księżyc obracają się przy zmianie, gałka
   reaguje na najechanie, przycisk błyska pierścieniem na czas przełączenia */
.el-theme-toggle { border-radius: var(--pill); }
.el-theme-toggle__sun  { transform: rotate(0deg) scale(1); }
.el-theme-toggle__moon { transform: rotate(-40deg) scale(.82); }
html[data-el-theme="dark"] .el-theme-toggle__sun  { transform: rotate(150deg) scale(.8); }
html[data-el-theme="dark"] .el-theme-toggle__moon { transform: rotate(0deg) scale(1.08); }
html.el-theme-anim .el-theme-toggle__sun,
html.el-theme-anim .el-theme-toggle__moon { transition: color .45s ease, opacity .45s ease, transform .5s var(--el-spring) !important; }
html.el-theme-anim .el-theme-toggle { animation: elFlash .6s var(--el-out); }
.el-theme-toggle:hover  .el-theme-toggle__knob { transform: scale(1.08); }
.el-theme-toggle:active .el-theme-toggle__knob { transform: scale(.94); }
html[data-el-theme="dark"] .el-theme-toggle:hover  .el-theme-toggle__knob { transform: translateX(31px) scale(1.08); }
html[data-el-theme="dark"] .el-theme-toggle:active .el-theme-toggle__knob { transform: translateX(31px) scale(.94); }

/* 65.6 nawigacja — pozycje wchodzą kaskadą; jeden wskaźnik ślizga się między
   pozycjami (element .el-nav__ind dodaje JS; bez JS zostaje ::after z sekcji 5) */
.el-nav__link { animation: elNavIn var(--ts) both; }
.el-nav__in > :nth-child(1) { animation-delay: 40ms; }
.el-nav__in > :nth-child(2) { animation-delay: 80ms; }
.el-nav__in > :nth-child(3) { animation-delay: 120ms; }
.el-nav__in > :nth-child(4) { animation-delay: 160ms; }
.el-nav__in > :nth-child(5) { animation-delay: 200ms; }
.el-nav__in > :nth-child(6) { animation-delay: 240ms; }
.el-nav__in > :nth-child(8) { animation-delay: 280ms; }   /* 7 = .el-nav__spacer */
.el-nav__in > :nth-child(9) { animation-delay: 320ms; }
.el-nav__in { position: relative; }
.el-nav__ind {
    position: absolute; left: 0; bottom: 0; width: 100px; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--g-neon);
    transform-origin: left center; transform: translate3d(0,0,0) scaleX(0);
    opacity: 0; pointer-events: none;
    transition: transform var(--ts), opacity var(--tm);
    will-change: transform;
}
.el-nav.has-ind .el-nav__link::after { display: none; }

/* 65.7 burger — kreski składają się w X ze sprężyną, środkowa zwija się do
   punktu, cały przycisk obraca się o 90° (47 zgubiła przejście tła) */
.el-burger { transition: height var(--tm), background-color var(--tf), transform var(--tm); }
.el-burger span { transition: transform var(--tspring), opacity var(--tf); transform-origin: center; }
.el-burger:hover span:nth-child(2) { transform: scaleX(.6); }
body.el-drawer-open .el-burger { transform: rotate(90deg); }
body.el-drawer-open .el-burger span:nth-child(2) { transform: scaleX(0); opacity: 0; }

/* 65.8 szuflada — wjeżdża z mocnym wyhamowaniem (zamyka się szybciej),
   nagłówek i pozycje wchodzą kaskadą; X w przycisku obraca się przy najechaniu */
.el-drawer { transition: transform var(--tm); }
body.el-drawer-open .el-drawer { transition: transform var(--tout); }
body.el-drawer-open .el-drawer__scrim { transition: opacity var(--tout), visibility var(--tout); }
body.el-drawer-open .el-drawer__head { animation: elSlideIn var(--ts) var(--el-out) 60ms both; }
body.el-drawer-open .el-drawer__nav a { animation: elSlideIn var(--ts) var(--el-out) both; }
body.el-drawer-open .el-drawer__nav a:nth-child(1) { animation-delay: 110ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(2) { animation-delay: 145ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(3) { animation-delay: 180ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(4) { animation-delay: 215ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(5) { animation-delay: 250ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(6) { animation-delay: 285ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(7) { animation-delay: 320ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(8) { animation-delay: 355ms; }
body.el-drawer-open .el-drawer__nav a:nth-child(9) { animation-delay: 390ms; }
body.el-drawer-open .el-drawer__foot a { animation: elSlideIn var(--ts) var(--el-out) both; }
body.el-drawer-open .el-drawer__foot a:nth-child(1) { animation-delay: 430ms; }
body.el-drawer-open .el-drawer__foot a:nth-child(2) { animation-delay: 465ms; }
.el-drawer__close { transition: background-color var(--tf), color var(--tf), transform var(--tf); }
.el-drawer__close i { transition: transform var(--tm); }
.el-drawer__close:hover i, .el-drawer__close:focus-visible i { transform: rotate(90deg); }
.el-drawer__close:active { transform: scale(.92); }

/* 65.9 pasek górny i „Zapytaj o dobór" — ikony żyją: słuchawka dzwoni co 9 s
   i na najechanie, ikony kontaktu unoszą się */
.el-topbar__item i { transition: transform var(--tm); }
.el-topbar__item:hover i { transform: translateY(-1px) scale(1.12); }
.el-hcta i { transform-origin: 50% 40%; animation: elRingIdle 9s ease-in-out 6s infinite; }
.el-hcta:hover i { animation: elRing .6s var(--el-out); }

/* 65.10 „do góry" — wyskakuje ze skalą i odbiciem, strzałka unosi się */
.el-to-top { transform: translateY(14px) scale(.6); transition: opacity var(--tm), transform var(--tm), background-color var(--tf), box-shadow var(--tm); }
.el-to-top.is-visible { transform: translateY(0) scale(1); transition: opacity var(--tm), transform var(--tspring), background-color var(--tf), box-shadow var(--tm); }
.el-to-top i { transition: transform var(--tm); }
.el-to-top:hover { box-shadow: 0 16px 34px rgba(18,146,95,.42); }
.el-to-top:hover i { transform: translateY(-3px); }
.el-to-top.is-visible:active { transform: translateY(0) scale(.94); }

/* 65.11 stopka — linki: strzałka wjeżdża z lewej, link odjeżda transformem
   (zamiast padding-left z sekcji 12); ikony kontaktu dzwonią; pole newslettera
   z płynnym pierścieniem, przycisk z połyskiem; pasek dolny z „iskrą" na kresce */
.el-fcol > a:not(.el-btn) { position: relative; transition: transform var(--tf), color var(--tf); }
.el-fcol > a:not(.el-btn):hover { padding-left: 0; transform: translateX(8px); }
.el-fcol > a:not(.el-btn)::before {
    content: "›"; position: absolute; left: -.85em; top: 50%;
    color: var(--g-neon); font-weight: 700; line-height: 1;
    opacity: 0; transform: translate(-6px, -50%);
    transition: opacity var(--tf), transform var(--tm);
    pointer-events: none;
}
.el-fcol > a:not(.el-btn):hover::before,
.el-fcol > a:not(.el-btn):focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.el-fcontact i { transform-origin: 50% 40%; }
.el-fcontact li:hover i { animation: elRing .6s var(--el-out); }
.el-fnews__form input[type="email"] { transition: border-color var(--tf), box-shadow var(--tm), background-color var(--tf); }
.el-fnews__form input[type="submit"] {
    background-image: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
    background-size: 240% 100%; background-repeat: no-repeat; background-position: 160% 0;
    transition: background-position var(--ts), background-color var(--tf), color var(--tf), transform var(--tf), box-shadow var(--tm);
}
.el-fnews__form input[type="submit"]:hover,
.el-fnews__form input[type="submit"]:focus-visible { background-position: -60% 0; background-color: var(--g-neon); color: var(--k-950); box-shadow: var(--sh-g); }
.el-fnews__form input[type="submit"]:active { transform: scale(.97); }
.el-fbottom { position: relative; }
.el-fbottom::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--g-neon), transparent) no-repeat;
    background-size: 34% 100%; background-position: -60% 0;
    opacity: .55;
    animation: elWire 16s linear 2s infinite;
}

/* 65.12 ograniczony ruch — mniej ruchu, nie zero: pętle (poświata, refleks,
   dzwonienie, iskra) gasną, kaskady nagłówka i szuflady zostają jako czyste
   przenikanie, wskaźnik nawigacji ślizga się dalej (ruch wywołany przez użytkownika) */
@media (prefers-reduced-motion: reduce) {
    .el-hmain .el-brand__mark, .el-hmain .el-brand__mark::after,
    .el-hcta i, .el-fcontact li:hover i, .el-fbottom::before { animation: none !important; }
    .el-hmain .el-brand__mark::after { display: none; }
    .el-fbottom::before { opacity: .25; }
    @keyframes elNavIn   { from { opacity: 0; } to { opacity: 1; } }
    @keyframes elSlideIn { from { opacity: 0; } to { opacity: 1; } }
    .el-burger span { transition: transform var(--tm), opacity var(--tf); }
    .el-to-top, .el-to-top.is-visible { transform: none; transition: opacity var(--tm), background-color var(--tf), box-shadow var(--tm); }
}

/* =========================================================================
   66. ANIMACJE — LISTING, KARTA PRODUKTU, SZYBKI PODGLĄD (rozszerzenie 31, 39, 46, 55)
   Tylko transform / opacity / filter / box-shadow / clip-path. Czasy i krzywa
   z tokenów (--tf/--tm/--ts); dla własnych czasów trwania krzywa --el-ease.
   Ograniczony ruch (66.15): przenikania zostają, przesunięcia i pętle znikają,
   stany „ukryte przed wjazdem" nie mogą nic schować na stałe.
   Selektory potwierdzone na żywo (/3-oswietlenie, /…/60-arw-5…html, 1366 i 375 px)
   lub w szablonach classic (ps_categorytree, sort-orders, product-cover-thumbnails).
   Klasy stanów dodaje custom.js: is-loading / is-paging (#js-product-list),
   is-swapping / is-swapping--in (.product-cover), is-counting / is-counted /
   is-updated (.current-price-value), el-cascade + is-revealed (tabele),
   is-current (link drzewa).
   ========================================================================= */
:root { --el-ease: cubic-bezier(.22,.61,.36,1); }

/* ---------- 66.1 KEYFRAMES ---------- */
@keyframes elLineX     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes elMenuIn    { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes elTabIn     { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes elStandUp   { 0% { transform: none; } 45% { transform: translateY(-6px) rotate(-9deg) scale(1.12); } 100% { transform: translateY(-2px) rotate(-5deg) scale(1.08); } }
@keyframes elBreathe   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes elListPulse { 0%, 100% { opacity: .55; } 50% { opacity: .35; } }
@keyframes elZoomHint {
    0%   { opacity: 0; clip-path: circle(0px at 50% 50%); }
    30%  { opacity: 1; clip-path: circle(58px at 50% 50%); }
    70%  { opacity: 1; clip-path: circle(58px at 50% 50%); }
    100% { opacity: 0; clip-path: circle(72px at 50% 50%); }
}
@keyframes elZoomIco   { 0% { transform: scale(.7); } 40% { transform: scale(1.08); } 70% { transform: scale(1); } 100% { transform: scale(.9); } }
@keyframes elPriceGlow { 0% { filter: drop-shadow(0 0 0 rgba(34,201,137,0)); } 35% { filter: drop-shadow(0 0 10px rgba(34,201,137,.55)); } 100% { filter: drop-shadow(0 0 0 rgba(34,201,137,0)); } }
@keyframes elPricePop  { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- 66.2 LISTING: stan ładowania po sortowaniu / filtrze / stronie ----------
   custom.js (listaLadowanie) dodaje is-loading, a przy zmianie numeru strony
   is-paging, w chwili prestashop 'updateFacets'. classic podmienia cały węzeł
   #js-product-list, więc klasy znikają z HTML-em, a nowe karty wjeżdżają przez
   el-reveal (pojawianie() po 'updateProductList' — już jest). */
#js-product-list { transition: opacity var(--tm), transform var(--ts); }
#js-product-list.is-loading { opacity: .55; animation: elListPulse 1.1s ease-in-out .3s infinite; }
#js-product-list.is-loading.is-paging { transform: translateY(-14px); }

/* ---------- 66.3 LISTING: pigułka sortowania ----------
   Bootstrap 4 alpha.5 (classic) daje .open rodzicowi .dropdown i aria-expanded
   na przycisku (potwierdzone); menu 270 px wyrównane do prawej krawędzi pigułki. */
.products-sort-order .select-title i { transition: transform var(--tm), color var(--tf); }
.products-sort-order.open .select-title i,
.products-sort-order .select-title[aria-expanded="true"] i { transform: rotate(180deg); color: var(--g-deep); }
.products-sort-order .dropdown-menu { transform-origin: top right; }
.products-sort-order.open > .dropdown-menu { animation: elMenuIn var(--tm) both; }
.products-sort-order .dropdown-menu .select-list { transition: background-color var(--tf), color var(--tf), transform var(--tf); }
.products-sort-order .dropdown-menu .select-list:hover { transform: translateX(3px); }
.products-sort-order.open > .dropdown-menu .select-list { animation: elFadeUp var(--tm) backwards; }
.products-sort-order.open > .dropdown-menu .select-list:nth-child(2) { animation-delay: 30ms; }
.products-sort-order.open > .dropdown-menu .select-list:nth-child(3) { animation-delay: 60ms; }
.products-sort-order.open > .dropdown-menu .select-list:nth-child(4) { animation-delay: 90ms; }
.products-sort-order.open > .dropdown-menu .select-list:nth-child(5) { animation-delay: 120ms; }
.products-sort-order.open > .dropdown-menu .select-list:nth-child(6) { animation-delay: 150ms; }
.products-sort-order.open > .dropdown-menu .select-list:nth-child(n+7) { animation-delay: 180ms; }

/* ---------- 66.4 LISTING: podkategorie — ikona „wstaje" przy najechaniu ----------
   Rozszerza .el-subcat:hover .el-subcat__icon (sekcja 24): skok i osiadanie
   zamiast samego skalowania; po zjechaniu wraca istniejącym przejściem. */
.el-subcat:hover .el-subcat__icon,
.el-subcat:focus-visible .el-subcat__icon { animation: elStandUp var(--ts) both; }

/* ---------- 66.5 LISTING: drzewo kategorii ----------
   Plus → minus bez podmiany glifu: classic chowa .add i pokazuje .remove przez
   display, czego nie da się animować. Zostaje sam glif „add" (E145): clip-path
   wycina poziome ramię, obrót o 90° kładzie pozostałe ramię poziomo. Pole
   24 px i cel dotykowy 44 px (sekcja 52) bez zmian. */
.block-categories .collapse-icons .add {
    display: inline-block !important;
    clip-path: inset(0 0 0 0);
    transition: transform var(--tm), clip-path var(--tm), color var(--tf);
}
.block-categories .collapse-icons[aria-expanded="true"] .add {
    display: inline-block !important;
    transform: rotate(90deg);
    clip-path: inset(0 41% 0 41%);
    color: var(--g-deep);
}
.block-categories .collapse-icons .remove { display: none !important; }
/* głębsze poziomy: chevron obraca się w dół zamiast podmiany dwu ikon */
.block-categories .arrows .arrow-right { display: inline-block !important; transition: transform var(--tm), color var(--tf); }
.block-categories .arrows[aria-expanded="true"] .arrow-right { transform: rotate(90deg); color: var(--g-deep); }
.block-categories .arrows .arrow-down { display: none !important; }
/* rozwinięte pozycje kaskadą: .collapsing (w trakcie) i .collapse.in (po) —
   ta sama animation-name, więc zmiana klasy nie restartuje ruchu */
.block-categories :is(.collapsing, .collapse.in) > .category-sub-menu > li { animation: elFadeUp var(--tm) backwards; }
.block-categories :is(.collapsing, .collapse.in) > .category-sub-menu > li:nth-child(2) { animation-delay: 45ms; }
.block-categories :is(.collapsing, .collapse.in) > .category-sub-menu > li:nth-child(3) { animation-delay: 90ms; }
.block-categories :is(.collapsing, .collapse.in) > .category-sub-menu > li:nth-child(4) { animation-delay: 135ms; }
.block-categories :is(.collapsing, .collapse.in) > .category-sub-menu > li:nth-child(n+5) { animation-delay: 180ms; }
/* aktywna kategoria (is-current z custom.js): kreska rysowana od góry po
   ujawnieniu bloku; domyślnie widoczna — schowana tylko, gdy blok czeka na
   el-reveal, więc bez JS / przy ograniczonym ruchu nic nie znika */
.block-categories .category-sub-menu a.is-current { position: relative; color: var(--g-deep); }
.block-categories .category-sub-menu a.is-current::before {
    content: ""; position: absolute; left: 0; top: .45rem; bottom: .45rem; width: 3px;
    border-radius: 2px; background: var(--g);
    transform: scaleY(1); transform-origin: top center;
    transition: transform var(--ts) .35s;
}
.block-categories.el-reveal:not(.is-revealed) .category-sub-menu a.is-current::before { transform: scaleY(0); }
html[data-el-theme="dark"] .block-categories .category-sub-menu a.is-current::before { background: var(--g-neon); }

/* ---------- 66.6 BREADCRUMB: ostatnie ogniwo podkreśla się od lewej ----------
   li jest display:inline (classic), więc pseudo-element na span; position:
   relative nie zmienia układu inline, długie nazwy nadal się zawijają. Na
   telefonie ol ma overflow-x:auto (sekcja 51) — kreska przy bottom:0, żeby
   nie wystawała poza linię i nie wywołała paska przewijania. */
#wrapper .breadcrumb li:last-child span { position: relative; }
#wrapper .breadcrumb li:last-child span::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    border-radius: 2px; background: var(--g);
    transform: scaleX(0); transform-origin: left center;
    animation: elLineX var(--ts) .45s both;
}
html[data-el-theme="dark"] #wrapper .breadcrumb li:last-child span::after { background: var(--g-neon); }
@media (max-width: 767px) { #wrapper .breadcrumb li:last-child span::after { bottom: 0; } }

/* ---------- 66.7 KARTA PRODUKTU: zmiana zdjęcia po kliknięciu miniatury ----------
   custom.js (galeriaPrzejscie) ustawia --el-dx (miniatura na prawo od aktywnej →
   nowe zdjęcie wjeżdża z prawej) i klasy is-swapping (wyjazd) /
   is-swapping--in (przestawienie na drugą stronę bez przejścia). */
#product .product-cover { --el-dx: 12px; }
#product .product-cover img { transition: opacity var(--tm), transform var(--tm), box-shadow var(--tm); }
#product .product-cover.is-swapping img {
    opacity: 0; transform: translateX(calc(var(--el-dx) * -1)) scale(.985);
    transition: opacity var(--tf), transform var(--tf);
}
#product .product-cover.is-swapping.is-swapping--in img { transition: none; transform: translateX(var(--el-dx)) scale(.985); }
/* miniatury wchodzą kaskadą, gdy jest ich więcej niż jedna; backwards, żeby po
   zakończeniu działał hover */
.product-images > li.thumb-container:not(:only-child) .thumb { animation: elFadeUp var(--ts) .25s backwards; }
.product-images > li.thumb-container:not(:only-child):nth-child(2) .thumb { animation-delay: .31s; }
.product-images > li.thumb-container:not(:only-child):nth-child(3) .thumb { animation-delay: .37s; }
.product-images > li.thumb-container:not(:only-child):nth-child(4) .thumb { animation-delay: .43s; }
.product-images > li.thumb-container:not(:only-child):nth-child(n+5) .thumb { animation-delay: .49s; }
/* POPRAWKA SELEKTORA (sekcje 13, 39, 59 celują w „li > .thumb", a w PS 9 img
   siedzi w <picture>; na żywo ramka to cyjan classic 3 px). Ramka 3 → 2 px na
   zaznaczonej miniaturze — zgodnie z pierwotnym zamiarem sekcji 13. */
.product-images > li.thumb-container .thumb {
    border-radius: var(--r-sm); border: 2px solid transparent; background: var(--w);
    transition: border-color var(--tf), transform var(--tm), box-shadow var(--tm);
}
.product-images > li.thumb-container .thumb:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover { border-color: var(--g); }
html[data-el-theme="dark"] .product-images > li.thumb-container .thumb.selected,
html[data-el-theme="dark"] .product-images > li.thumb-container .thumb:hover { border-color: var(--g-neon); }

/* ---------- 66.8 KARTA PRODUKTU: lupa zaprasza raz ----------
   .layer (rgba(0,0,0,.6), opacity 0, tylko :hover) — clip-path circle wycina
   krążek wokół ikony pośrodku zdjęcia: 1,2 s po wejściu pokazuje się i gaśnie.
   Bez fill-mode, więc potem :hover działa jak dotąd. Poniżej 768 px .layer ma
   hidden-sm-down — animacja nie startuje. */
#product .product-cover .layer { animation: elZoomHint 1.6s var(--el-ease) 1.2s 1 none; }
#product .product-cover .layer .zoom-in { animation: elZoomIco 1.6s var(--el-ease) 1.2s 1 none; }

/* ---------- 66.9 KARTA PRODUKTU: cena ----------
   custom.js (cenaWjazd) liczy od najmniejszej liczby o tej samej ilości cyfr
   (szerokość bez skoków; tabular-nums na czas liczenia), po dojściu poświata.
   Zmiana wariantu (updatedProduct) — podbicie. inline-block dla transform;
   jedna linia, więc układ identyczny jak inline. */
#product .current-price-value { display: inline-block; }
#product .current-price-value.is-counting { font-variant-numeric: tabular-nums; }
#product .current-price-value.is-counted { animation: elPriceGlow .9s var(--el-ease) 1; }
#product .current-price-value.is-updated { animation: elPricePop var(--ts) 1, elPriceGlow .9s var(--el-ease) 1; }

/* ---------- 66.10 KARTA PRODUKTU: zakładki — treść przenika z 8 px (dopracowanie sekcji 39) ---------- */
#product .tab-pane.active { animation: elTabIn var(--tm) both; }

/* ---------- 66.11 KARTA PRODUKTU: wiersze tabeli parametrów i dl.data-sheet kaskadą ----------
   custom.js (kaskadaWierszy) daje tabeli/dl klasę el-cascade, a po wejściu w kadr
   is-revealed; wiersze dostają opóźnienie wg nth-child (12 kroków, dalej razem).
   6 px zamiast 22, bo tabela ma overflow:hidden (zaokrąglenie) i siedzi w
   przewijanym .el-table-scroll. will-change celowo wyzerowane (16+ wierszy). */
.el-cascade :is(tr, dt, dd) { will-change: auto; }
.el-cascade:not(.is-revealed) :is(tr, dt, dd) { opacity: 0; transform: translateY(6px); }
.el-cascade.is-revealed :is(tr, dt, dd) { opacity: 1; transform: none; transition: opacity var(--ts), transform var(--ts); }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(2)    { transition-delay: 30ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(3)    { transition-delay: 60ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(4)    { transition-delay: 90ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(5)    { transition-delay: 120ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(6)    { transition-delay: 150ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(7)    { transition-delay: 180ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(8)    { transition-delay: 210ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(9)    { transition-delay: 240ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(10)   { transition-delay: 270ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(11)   { transition-delay: 300ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(12)   { transition-delay: 330ms; }
.el-cascade.is-revealed :is(tr, dt, dd):nth-child(n+13) { transition-delay: 360ms; }
@media (max-width: 767px) {
    .el-cascade.is-revealed :is(tr, dt, dd):nth-child(n+2)  { transition-delay: 20ms; }
    .el-cascade.is-revealed :is(tr, dt, dd):nth-child(n+4)  { transition-delay: 60ms; }
    .el-cascade.is-revealed :is(tr, dt, dd):nth-child(n+7)  { transition-delay: 100ms; }
    .el-cascade.is-revealed :is(tr, dt, dd):nth-child(n+10) { transition-delay: 140ms; }
}

/* ---------- 66.12 KARTA PRODUKTU: pasek zaufania — trzy pozycje kaskadą ----------
   Wewnątrz kolumny, która sama wjeżdża (elHeroUp .5s .12s); backwards, żeby
   hover na .item-product (sekcja 39) nie był blokowany przez fill. */
#product .blockreassurance_product > div:not(.clearfix) { animation: elFadeUp var(--ts) backwards; }
#product .blockreassurance_product > div:not(.clearfix):nth-child(1) { animation-delay: .32s; }
#product .blockreassurance_product > div:not(.clearfix):nth-child(2) { animation-delay: .42s; }
#product .blockreassurance_product > div:not(.clearfix):nth-child(3) { animation-delay: .52s; }

/* ---------- 66.13 KARTA PRODUKTU: logo producenta oddycha ----------
   Na <a> (display:block, sekcja 41), bo hover skaluje sam obrazek. Zakładka
   „Szczegóły" jest display:none, dopóki nie zostanie otwarta — nie liczy się w tle. */
#product .product-manufacturer a { animation: elBreathe 5.5s ease-in-out 1s infinite; }

/* ---------- 66.14 SZYBKI PODGLĄD: choreografia wnętrza ----------
   Dialog już wjeżdża (sekcja 31). Zdjęcie dogania ze skalą .92, kolumna prawa
   kaskadą ref → tytuł → cena → opis → CTA; zamykanie odwrotnie i ciasno (dialog
   gaśnie w .28 s). Poprawia też .el-qv__img: było transition: opacity var(--t)
   z niezdefiniowanym --t (linia 1798). */
.el-qv__img { opacity: 0; transform: scale(.92); transition: opacity var(--tm), transform var(--ts); }
.el-qv.is-open .el-qv__img { opacity: 1; transform: none; transition-delay: 80ms; }
.el-qv__body > * { opacity: 0; transform: translateY(10px); transition: opacity var(--tm), transform var(--tm); }
.el-qv.is-open .el-qv__body > * { opacity: 1; transform: none; }
.el-qv.is-open .el-qv__ref     { transition-delay: 120ms; }
.el-qv.is-open .el-qv__title   { transition-delay: 170ms; }
.el-qv.is-open .el-qv__price   { transition-delay: 220ms; }
.el-qv.is-open .el-qv__desc    { transition-delay: 270ms; }
.el-qv.is-open .el-qv__actions { transition-delay: 320ms; }
.el-qv__close { opacity: 0; transform: rotate(-90deg) scale(.8); transition: opacity var(--tm), transform var(--tm), background-color var(--tf), color var(--tf); }
.el-qv.is-open .el-qv__close { opacity: 1; transform: none; transition-delay: 260ms; }
.el-qv.is-open .el-qv__close:hover { transform: rotate(90deg); transition-delay: 0ms; }
/* zamykanie — odwrotna kolejność, krótko */
.el-qv:not(.is-open) .el-qv__close   { transition-delay: 0ms; transition-duration: 150ms; }
.el-qv:not(.is-open) .el-qv__actions { transition-delay: 0ms; }
.el-qv:not(.is-open) .el-qv__desc    { transition-delay: 30ms; }
.el-qv:not(.is-open) .el-qv__price   { transition-delay: 60ms; }
.el-qv:not(.is-open) .el-qv__title   { transition-delay: 90ms; }
.el-qv:not(.is-open) .el-qv__ref     { transition-delay: 120ms; }
.el-qv:not(.is-open) .el-qv__img     { transition-delay: 60ms; transition-duration: 150ms; }
@media (max-width: 767px) {
    .el-qv.is-open .el-qv__img     { transition-delay: 40ms; }
    .el-qv.is-open .el-qv__ref     { transition-delay: 60ms; }
    .el-qv.is-open .el-qv__title   { transition-delay: 90ms; }
    .el-qv.is-open .el-qv__price   { transition-delay: 120ms; }
    .el-qv.is-open .el-qv__desc    { transition-delay: 150ms; }
    .el-qv.is-open .el-qv__actions { transition-delay: 180ms; }
    .el-qv.is-open .el-qv__close   { transition-delay: 150ms; }
}

/* ---------- 66.15 OGRANICZONY RUCH — mniej ruchu, nie zero ----------
   Przenikania, kaskady i licznik ceny zostają; znikają przesunięcia, skalowanie,
   pętle (oddech logo, puls listy, zaproszenie lupy). Nic nie zostaje schowane. */
@media (prefers-reduced-motion: reduce) {
    #product .product-cover .layer, #product .product-cover .layer .zoom-in,
    #product .product-manufacturer a, #js-product-list.is-loading,
    .el-subcat:hover .el-subcat__icon, .el-subcat:focus-visible .el-subcat__icon { animation: none !important; }
    #js-product-list.is-loading { transform: none; }
    .el-qv__img, .el-qv__body > *, .el-qv__close, .el-qv.is-open .el-qv__close:hover { transform: none !important; }
    .el-cascade:not(.is-revealed) :is(tr, dt, dd) { transform: none; }
    #product .product-cover.is-swapping img { transform: none !important; }
    #product .current-price-value.is-updated { animation: elPriceGlow .9s var(--el-ease) 1; }
    .products-sort-order .dropdown-menu .select-list:hover { transform: none; }
    @keyframes elMenuIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes elTabIn  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes elLineX  { from { opacity: 0; transform: scaleX(1); } to { opacity: 1; transform: scaleX(1); } }
}

/* =========================================================================
   67. SYSTEM RUCHU — strony poboczne i formularze (audyt 2026-09-05)
   Rozszerza sekcje 4, 14, 15, 55, 56.12, 57. Tylko transform / opacity /
   box-shadow / background-position|size / filter. Ograniczony ruch (67.12):
   pętle i potrząsanie znikają, stany zależne od klas z JS mają stan końcowy.
   ========================================================================= */

/* 67.0 tokeny uzupełniające: krzywa do @keyframes, długi czas, sprężyna suwaka,
   zieleń jako trójka RGB do poświat — w trybie ciemnym przełącza się na neon */
:root {
    --ease:   cubic-bezier(.22,.61,.36,1);
    --tl:     650ms var(--ease);
    --spring: cubic-bezier(.6,-.3,.35,1.45);
    --g-rgb:  18,146,95;
}
html[data-el-theme="dark"] {
    --g-rgb: 34,201,137;
    --sh-g:  0 10px 28px rgba(34,201,137,.26);   /* jedyny cień bez wersji ciemnej (sekcja 37) */
}

/* 67.1 WEJŚCIE STRONY — bez powtórki przy „wstecz / dalej" (klasa z custom.js §22) */
#wrapper .breadcrumb { animation: elFadeUp var(--tm) both; }
.page-contact #content.page-content { animation: none; }   /* karta przezroczysta (56.3); animują się karty wewnątrz (56.12) */
html.el-nav-back #main .page-header,
html.el-nav-back #main .page-content,
html.el-nav-back #wrapper .breadcrumb,
html.el-nav-back body.page-sitemap #main > .container-fluid,
html.el-nav-back #sitemap #main > .container-fluid,
html.el-nav-back .sitemap > .col-md-3,
html.el-nav-back #search #js-product-list-header,
html.el-nav-back .el-contact__card--info,
html.el-nav-back .el-contact__card--form,
html.el-nav-back .el-contact__map,
html.el-nav-back #pagenotfound .page-not-found::before,
html.el-nav-back .page-not-found #search_widget form input,
html.el-nav-back .page-not-found #search_widget form i.search,
html.el-nav-back .el-nav__link { animation: none !important; }
html.el-nav-back .el-reveal { opacity: 1; transform: none; transition: none; }

/* 67.2 PRZYCISKI — jeden gest: hover/focus-visible unosi (145, 3173), :active wciska.
   Reguła :active stoi PO regułach hover, bo dotąd .el-btn--primary:hover (145)
   wygrywał kolejnością z .el-btn:active (141) i wciśnięcie primary nie było widoczne. */
.btn:active, .el-btn:active { transform: translateY(1px) scale(.98); }
.btn-secondary:hover, .btn-default:hover,
.btn-secondary:focus-visible, .btn-default:focus-visible { box-shadow: inset 0 0 0 2px var(--g), var(--sh-1); }
.btn-secondary:focus-visible, .btn-default:focus-visible { transform: translateY(-1px); }

/* połysk primary (jak .el-btn--primary::after, 146–151) na przyciskach classic — przez transform, nie left */
button.btn-primary, a.btn-primary { position: relative; overflow: hidden; }
button.btn-primary::after, a.btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent);
    transform: translateX(-180%) skewX(-20deg); transition: transform var(--ts); pointer-events: none;
}
button.btn-primary:hover::after, a.btn-primary:hover::after,
button.btn-primary:focus-visible::after, a.btn-primary:focus-visible::after { transform: translateX(300%) skewX(-20deg); }

/* input[type=submit] („Wyślij" w kontakcie, newsletter) nie ma pseudoelementów:
   ten sam błysk gradientem sunącym przez background-position */
input.btn-primary[type="submit"] {
    background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
    background-size: 260% 100%; background-position: 120% 0; background-repeat: no-repeat;
    transition: background-color var(--tf), color var(--tf), box-shadow var(--tm), transform var(--tf), background-position var(--ts);
}
input.btn-primary[type="submit"]:hover, input.btn-primary[type="submit"]:focus-visible { background-position: -60% 0; }
/* sekcja 57 zeruje w dark `background` skrótem z !important — odtwarzamy warstwę błysku */
html[data-el-theme="dark"] input.btn-primary[type="submit"] {
    background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%) !important;
    background-size: 260% 100% !important; background-repeat: no-repeat !important; background-position: 120% 0 !important;
}
html[data-el-theme="dark"] input.btn-primary[type="submit"]:hover,
html[data-el-theme="dark"] input.btn-primary[type="submit"]:focus-visible { background-position: -60% 0 !important; }

/* cienie hover z 145 i 3173 są literalne (18,146,95) — w dark poświata z neonu */
html[data-el-theme="dark"] .el-btn--primary:hover, html[data-el-theme="dark"] .el-btn--primary:focus { box-shadow: 0 16px 36px rgba(var(--g-rgb),.30); }
html[data-el-theme="dark"] .btn-primary:hover, html[data-el-theme="dark"] .btn-primary:focus-visible { box-shadow: 0 14px 30px rgba(var(--g-rgb),.30); }

/* dotyk: :hover nie istnieje — ten sam feedback na :active, a przyklejony
   po tapnięciu :focus nie zostawia „zawieszonego" uniesienia */
@media (hover: none) {
    .btn:active, .el-btn:active, .el-card__cta:active { transform: translateY(1px) scale(.97); }
    .btn-primary:active, .el-btn--primary:active { box-shadow: 0 4px 12px rgba(var(--g-rgb),.30); }
    .el-btn--primary:focus:not(:focus-visible) { transform: none; box-shadow: var(--sh-g); background: var(--g); }
    .btn-primary:focus:not(:focus-visible) { transform: none; box-shadow: var(--sh-g); }
}

/* 67.3 LINKI TEKSTOWE — podkreślenie rysowane od lewej: treść CMS, dolna stopka,
   dane kontaktu, linki pomocnicze formularzy. Nawigacja i kolumny stopki bez zmian.
   Linia bazowa zawsze widoczna (nic ważnego tylko przez hover), druga dorysowuje się. */
#content.page-cms a, .el-fbottom a, .el-fcontact a, .contact-rich .data a,
.forgot-password a, .no-account a, .register-form p a, .login-form header a,
.page-footer .account-link, .store-description a[data-toggle="collapse"] {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor),
                      linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent));
    background-size: 0% 2px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;   /* kreska pod każdą linią zawiniętego URL-a */
    transition: background-size var(--tm), color var(--tf);
}
#content.page-cms a:hover, .el-fbottom a:hover, .el-fcontact a:hover, .contact-rich .data a:hover,
.forgot-password a:hover, .no-account a:hover, .register-form p a:hover, .login-form header a:hover,
.page-footer .account-link:hover, .store-description a[data-toggle="collapse"]:hover,
#content.page-cms a:focus-visible, .el-fbottom a:focus-visible, .el-fcontact a:focus-visible, .contact-rich .data a:focus-visible,
.forgot-password a:focus-visible, .no-account a:focus-visible, .register-form p a:focus-visible,
.page-footer .account-link:focus-visible, .store-description a[data-toggle="collapse"]:focus-visible { background-size: 100% 2px, 100% 1px; }

/* 67.4 POLA — etykieta unosi się przy fokusie (transform, układ bez zmian); pierścień z 56.6 */
#wrapper .form-control-label { transition: transform var(--tm), color var(--tf); transform-origin: left center; }
#wrapper .form-group:focus-within .form-control-label { transform: translateY(-2px); color: var(--g-deep); }
html[data-el-theme="dark"] #wrapper .form-group:focus-within .form-control-label { color: var(--g-neon) !important; }   /* 56.11 daje label !important */
/* pole z błędem raz kręci głową; komunikat wjeżdża (56.6) */
@keyframes elNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
.form-group.has-error .form-control, .form-group.has-error select { animation: elNudge var(--ts) both; }
/* komunikaty globalne i alert sukcesu kontaktu — jak błędy pól */
#notifications .alert, #content .alert, .contact-form .alert { animation: elFadeUp var(--tm) both; }

/* 67.5 RADIO — kropka wyrasta ze środka (checkbox ma to w 56.4). Classic stawiał ją
   na .125rem + margin 4 px z 56.4 = 2 px poza środkiem → top/left 0. */
.custom-radio input[type="radio"] + span {
    position: absolute; top: 0; left: 0; display: block; width: 10px; height: 10px; margin: 4px; border-radius: 50%;
    background: var(--g); opacity: 0; transform: scale(.3); transition: transform var(--tm), opacity var(--tf);
}
.custom-radio input[type="radio"]:checked + span { top: 0; left: 0; opacity: 1; transform: scale(1); }
html[data-el-theme="dark"] .custom-radio input[type="radio"]:checked + span { background: var(--g-neon); }
html[data-el-theme="dark"] .custom-checkbox input[type="checkbox"]:focus-visible + span,
html[data-el-theme="dark"] .radio-inline:focus-within .custom-radio { border-color: var(--g-neon); box-shadow: 0 0 0 4px rgba(var(--g-rgb),.22); }   /* --g-50 w dark = #14291F, niewidoczne */

/* 67.6 STAN WYSYŁKI — klasa is-sending z custom.js §23; spinner na elSpin (sekcja 14) */
.is-sending { pointer-events: none; }
button.is-sending { position: relative; color: transparent !important; text-shadow: none; }
button.is-sending::after {
    content: ""; position: absolute; top: 50%; left: 50%; bottom: auto; width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%;
    background: none; transform: translate(-50%,-50%) rotate(0deg); transition: none;
    animation: elSpin .7s linear infinite;
}
button.is-sending:not(.btn-primary):not(.el-btn--primary)::after { border-color: rgba(var(--g-rgb),.25); border-top-color: var(--g); }
/* input[type=submit]: pasy sunące przez background-position (kafelek 28,28 px = jeden okres ukośnych pasów 20 px) */
@keyframes elStripes { to { background-position: 28.28px 0; } }
#wrapper input.is-sending[type="submit"], #footer input.is-sending[type="submit"] {
    color: rgba(255,255,255,.75) !important;
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 10px, transparent 10px 20px) !important;
    background-size: 28.28px 28.28px !important; background-repeat: repeat !important; background-position: 0 0 !important;
    transition: none; animation: elStripes .6s linear infinite;
}

/* 67.7 404 I PUSTY WYNIK — numer z 56.7 wjeżdża i dryfuje, lupa rozgląda się raz, pole pulsuje raz */
@keyframes elSway { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes elLook { 0%, 100% { transform: translateY(-50%) rotate(0); } 30% { transform: translateY(-50%) rotate(-8deg); } 70% { transform: translateY(-50%) rotate(8deg); } }
@keyframes elRingPulse { from { box-shadow: 0 0 0 0 rgba(var(--g-rgb),.45); } to { box-shadow: 0 0 0 14px rgba(var(--g-rgb),0); } }
@keyframes elRingBtn { from { box-shadow: var(--sh-g), 0 0 0 0 rgba(var(--g-rgb),.45); } to { box-shadow: var(--sh-g), 0 0 0 16px rgba(var(--g-rgb),0); } }
#pagenotfound .page-not-found::before { animation: elPop var(--ts) both, elSway 6s ease-in-out .45s infinite alternate; }
.page-not-found #search_widget form i.search { transform-origin: 50% 60%; animation: elLook 1.2s var(--ease) .6s both; }   /* translateY(-50%) z 56.7 zachowane w klatkach */
.page-not-found #search_widget form input { animation: elRingPulse 1.4s var(--ease) 1.1s 1; }
/* przycisk powrotu (gdy szablon go doda): wjazd + jeden puls */
#pagenotfound .el-404__back .el-btn--primary { animation: elFadeUp var(--ts) .3s both, elRingBtn 1.6s var(--ease) 1.2s 1; }
.el-404__back { text-align: center; margin: -.5rem auto 2rem; max-width: 620px; }

/* 67.8 MAPA STRONY — kolumny kaskadą po wejściu karty (56.12); na telefonie są pod sobą */
.sitemap > .col-md-3 { animation: elFadeUp var(--ts) both; }
.sitemap > .col-md-3:nth-child(1) { animation-delay: 140ms; }
.sitemap > .col-md-3:nth-child(2) { animation-delay: 220ms; }
.sitemap > .col-md-3:nth-child(3) { animation-delay: 300ms; }
.sitemap > .col-md-3:nth-child(4) { animation-delay: 380ms; }
@media (max-width: 767px) { .sitemap > .col-md-3 { animation-delay: 100ms; } }

/* 67.9 CMS — tytuły sekcji (.el-cms-title z custom.js §24: h2–h4 oraz niepuste wyśrodkowane
   akapity z Worda) wjeżdżają przez pojawianie(), a przy .is-revealed dorysowuje się kreska.
   Pozycja absolutna → zero zmian układu. */
#content.page-cms .el-cms-title { position: relative; }
#content.page-cms .el-cms-title::after {
    content: ""; position: absolute; left: 0; bottom: -5px; width: 48px; height: 3px; border-radius: 2px;
    background: var(--g); transform: scaleX(0); transform-origin: left center; transition: transform var(--ts) 160ms;
}
#content.page-cms p.el-cms-title::after { left: 50%; margin-left: -24px; transform-origin: center; }   /* pod wyśrodkowanym tytułem od środka */
#content.page-cms .el-cms-title.is-revealed::after { transform: scaleX(1); }
html[data-el-theme="dark"] #content.page-cms .el-cms-title::after { background: var(--g-neon); }

/* 67.10 SKLEPY — chevron „O nas i kontakt" dojeżdża, po rozwinięciu obraca się; stopka sklepu wjeżdża */
.store-description a[data-toggle="collapse"] .material-icons { transition: transform var(--tm); }
.store-description a[data-toggle="collapse"]:hover .material-icons,
.store-description a[data-toggle="collapse"]:focus-visible .material-icons { transform: translateX(3px); }
.store-description a[data-toggle="collapse"][aria-expanded="true"] .material-icons { transform: rotate(90deg); }
#stores .store-item .collapse.show, #stores .store-item .collapse.in { animation: elFadeUp var(--tm) both; }

/* 67.11 IKONY — strzałki jadą 3 px w swoim kierunku, reszta skala 1.1; ten sam ruch na focus-visible
   (pasek górny i przycisk zamykania szuflady ma już sekcja 65) */
.btn .material-icons, .el-btn .material-icons, .page-footer .account-link .material-icons,
.contact-rich .icon .material-icons { transition: transform var(--tf); }
.btn:hover .material-icons, .btn:focus-visible .material-icons,
.el-btn:hover .material-icons, .el-btn:focus-visible .material-icons { transform: scale(1.1); }
.page-footer .account-link:hover .material-icons, .page-footer .account-link:focus-visible .material-icons { transform: translateX(-3px); }   /* chevron_left */
.contact-rich .block:hover .icon .material-icons, .contact-rich .block:focus-within .icon .material-icons { transform: scale(1.1) rotate(-6deg); }

/* 67.12 OGRANICZONY RUCH — mniej ruchu, nie zero: pętle i potrząsanie znikają,
   wskaźnik wysyłki kręci się dalej (informacja, nie ozdoba) */
@media (prefers-reduced-motion: reduce) {
    #content.page-cms .el-cms-title::after { transform: scaleX(1); }
    #pagenotfound .page-not-found::before, .page-not-found #search_widget form i.search,
    .page-not-found #search_widget form input, .form-group.has-error .form-control,
    .form-group.has-error select { animation: none; }
    .custom-radio input[type="radio"] + span { transition: opacity var(--tf); transform: scale(1); }
    #wrapper .form-group:focus-within .form-control-label { transform: none; }
    .btn:active, .el-btn:active { transform: none; }
}

/* =========================================================================
   68. STRONA GŁÓWNA — CHOREOGRAFIA RUCHU
       (slajder, pasek zaufania, kafle kategorii, nagłówki sekcji, karty,
        pas promocyjny, CTA)
   Zasada: rodzic wjeżdża istniejącym .el-reveal (transition), a jego dzieci
   dostają krótkie ANIMACJE z fill-mode: backwards — po zakończeniu wracają do
   stanu bazowego, więc żaden istniejący :hover ani transition nie zostaje
   nadpisany. Animowane wyłącznie transform / opacity / filter / clip-path.
   Tokeny: czasy --tm/--tout/--tspring, krzywe --el-out/--el-spring (sekcja 65),
   kolory przez color-mix(var(--g-neon)). Klatki wielokrotnego użytku: elFadeUp,
   elPop, elSlideIn, elRing, elFloat; nowe tylko tam, gdzie nie ma odpowiednika.
   Ograniczony ruch: mniej ruchu, nie zero; 68.9 zeruje opóźnienia dzieci
   (pojawianie() działa też w tym trybie) i gasi dwie pętle slajdera.
   Wymaga w custom.js: paralaksaSlajdera(), swiatloKafli() i 5-stopniowej
   kaskady .el-cat w pojawianie() — patrz dopiski do custom.js.
   ========================================================================= */

/* 68.0 opóźnienie kaskady jako zmienna (dzieci liczą od niego własne) + piąty
   stopień dla pięciu kafli kategorii w jednym rzędzie; na telefonie zero,
   tak jak transition-delay w sekcji 55 */
.el-reveal[data-el-delay="1"] { --el-d: 70ms; }
.el-reveal[data-el-delay="2"] { --el-d: 140ms; }
.el-reveal[data-el-delay="3"] { --el-d: 210ms; }
.el-reveal[data-el-delay="4"] { --el-d: 280ms; }
.el-reveal[data-el-delay="5"] { --el-d: 350ms; transition-delay: 350ms; }
@media (max-width: 767px) { .el-reveal[data-el-delay] { --el-d: 0ms; } }

/* 68.1 klatki (elSheenOnce ≠ elSheen z 65.1: tamten zatrzymuje pasek w 260 %,
   co na .el-btn--primary::after o left:-80% zostawiałoby go w środku przycisku;
   elGlowBreath ≠ elGlow: filter zamiast box-shadow, żeby nie zabić cienia :hover) */
@keyframes elHeroCine   { from { opacity: 0; transform: translateY(26px) scale(1.02); filter: blur(10px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes elGlowBreath { from { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--g-neon) 0%, transparent)); } to { filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--g-neon) 55%, transparent)); } }
@keyframes elWipeIn     { from { clip-path: inset(-6% 101% -6% -2%); } to { clip-path: inset(-6% -4% -6% -2%); } }
@keyframes elIconIn     { from { opacity: 0; transform: translateX(-16px) scale(.6); } 70% { opacity: 1; transform: translateX(2px) scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes elSweep      { 0% { transform: scaleX(1); clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { transform: scaleX(1); clip-path: inset(0 0 0 100%); } }
@keyframes elZoomSettle { from { transform: scale(1.1); } to { transform: none; } }
@keyframes elBadgeIn    { from { opacity: 0; transform: scale(.45) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes elShine      { to { transform: translateX(110%); } }
@keyframes elSheenOnce  { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(480%) skewX(-20deg); } }

/* 68.2 SLAJDER: tytuł „kinowo" (z rozmycia do ostrości), oddychająca poświata
   przycisku, paralaksa głębi przy przewijaniu — JS ustawia --el-par 0→1 na
   .el-slider; tor zdjęć powiększa się do 1.08, napis unosi się i gaśnie, kropki
   i strzałki gasną. Powiększenie zamiast przesunięcia: nigdy nie odsłania tła. */
.el-slide.is-active .el-slide__title { animation: elHeroCine .9s var(--el-out) .22s both; }
.el-slide.is-active .el-slide__actions .el-btn--primary {
    animation: elGlowBreath 3.2s var(--el-out) 1.6s infinite alternate;
    will-change: filter;   /* pętla na małym elemencie */
}
.el-slider { --el-par-k: 1; }
.el-slider__track { transform: scale(calc(1 + var(--el-par, 0) * var(--el-par-k) * .08)); }
.el-slide__content {
    transform: translate3d(0, calc(var(--el-par, 0) * var(--el-par-k) * -64px), 0);
    opacity: max(0, calc(1 - var(--el-par, 0) * 1.15));
}
.el-slider__dots, .el-slider__arrows { opacity: max(0, calc(1 - var(--el-par, 0) * 1.3)); }
@media (max-width: 767px) { .el-slider { --el-par-k: .45; } }
.el-slider__arrow i { transition: transform var(--tm); }
.el-slider__arrow[data-el-slider-next]:hover i { transform: translateX(3px); }
.el-slider__arrow[data-el-slider-prev]:hover i { transform: translateX(-3px); }

/* 68.3 PASEK ZAUFANIA: ikona wjeżdża z lewej z lekkim odbiciem, a istniejąca
   zielona kreska (::after z sekcji 26) raz przemiata pod pozycją — kolejno
   w czterech polach. Po animacji hover działa jak dotąd. */
.el-trust__item.is-revealed i      { animation: elIconIn .7s var(--el-out) backwards; animation-delay: calc(var(--el-d, 0ms) + 140ms); }
.el-trust__item.is-revealed::after { animation: elSweep .8s var(--el-out) backwards;  animation-delay: calc(var(--el-d, 0ms) + 420ms); }

/* 68.4 KAFLE KATEGORII: ikona „budzi się" (elPop) tuż po wjeździe kafla;
   światło pod kursorem — JS zapisuje --el-mx/--el-my, ::after rysuje reflektor
   w kolorze ikony danego kafla (żółty/czerwony = wartości z sekcji 7).
   isolation + z-index:-1 trzyma reflektor pod treścią i pod istniejącym ::before. */
.el-cat.is-revealed .el-cat__icon { animation: elPop .5s var(--el-out) backwards; animation-delay: calc(var(--el-d, 0ms) + 180ms); }
.el-cat { isolation: isolate; --el-spot: color-mix(in srgb, var(--g-neon) 22%, transparent); }
.el-cats__grid .el-cat:nth-child(2),
.el-cats__grid .el-cat:nth-child(5) { --el-spot: rgba(227,154,23,.20); }
.el-cats__grid .el-cat:nth-child(3) { --el-spot: rgba(214,52,46,.18); }
.el-cat::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(240px circle at var(--el-mx, 50%) var(--el-my, 50%), var(--el-spot), transparent 70%);
    opacity: 0; transition: opacity var(--tm);
}
.el-cat:hover::after { opacity: 1; }

/* 68.5 NAGŁÓWKI SEKCJI: eyebrow → tytuł odsłaniany od lewej (clip-path, bez
   nowych elementów ozdobnych) → podtytuł / przycisk „Zobacz wszystkie" wjeżdża
   z prawej (elSlideIn); strzałka w przycisku dojeżdża na hover. */
.el-psec__head.is-revealed .el-psec__eyebrow { animation: elFadeUp var(--tout) backwards; }
.el-psec__head.is-revealed .el-psec__title,
.el-section__head.is-revealed .el-section__title { animation: elWipeIn .7s var(--el-out) 120ms backwards; }
.el-psec__head.is-revealed .el-psec__link      { animation: elSlideIn var(--tout) 320ms backwards; }
.el-section__head.is-revealed .el-section__sub { animation: elFadeUp var(--tout) 320ms backwards; }
.el-psec__link i { transition: transform var(--tm); }
.el-psec__link:hover i { transform: translateX(3px); }

/* 68.6 KARTY PRODUKTÓW: zdjęcie „osiada" (1.1 → 1) razem z wjazdem karty
   (niezależnie od przenikania po załadowaniu z sekcji 55 — inna właściwość);
   etykieta „Nowy" (elPop) nie odpala pod zagięciem, lecz dopiero po karcie. */
.el-grid .el-card.is-revealed .el-card__img img { animation: elZoomSettle .9s var(--el-out) backwards; animation-delay: var(--el-d, 0ms); }
.el-grid .el-card.el-reveal:not(.is-revealed) .product-flag { animation: none; }
.el-grid .el-card.is-revealed .product-flag { animation-delay: calc(var(--el-d, 0ms) + 420ms); }

/* 68.7 PAS PROMOCYJNY (.el-promo__in jest już w pojawianie()): badge z procentem
   wskakuje ze sprężyną i dostaje jeden błysk, tekst i przycisk kaskadą; druga
   poświata (::before) dryfuje w innym rytmie niż istniejąca .el-promo__glow;
   przycisk — jednorazowy połysk transformem na istniejącym ::after (nie „left"). */
.el-promo__in.is-revealed .el-promo__badge { animation: elBadgeIn var(--tspring) 180ms both; }
.el-promo__badge { overflow: hidden; }   /* przycina tylko błysk; cień badge'a zostaje */
.el-promo__badge::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.32) 50%, transparent 68%);
    transform: translateX(-110%);   /* biel na zawsze zielonym badge'u — jak połysk .el-btn--primary */
}
.el-promo__in.is-revealed .el-promo__badge::after { animation: elShine 1.1s var(--el-out) 1.05s 1; }
.el-promo__in.is-revealed .el-promo__text    { animation: elFadeUp var(--tout) 220ms backwards; }
.el-promo__in.is-revealed .el-promo__actions { animation: elFadeUp var(--tout) 360ms backwards; }
.el-promo__in::before {
    content: ""; position: absolute; left: -90px; bottom: -150px; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--g-neon) 16%, transparent), transparent 68%);
    pointer-events: none;
    animation: elFloat 14s var(--el-out) -7s infinite alternate;
}
.el-promo__in.is-revealed .el-btn--primary::after { animation: elSheenOnce 1.1s var(--el-out) 1s 1; }

/* 68.8 CTA: nagłówek → akapit → przyciski kaskadą; telefon „dzwoni" raz po
   wejściu w kadr (elRing z 65.1); jednorazowy połysk na „Napisz do nas";
   istniejąca poświata (::after) dryfuje; druga poświata (::before) w lewym
   dolnym rogu w innym rytmie — pod treścią (isolation + z-index:-1). */
.el-cta__inner { isolation: isolate; }
.el-cta__inner.is-revealed .el-cta__text h2         { animation: elFadeUp var(--tout) 120ms backwards; }
.el-cta__inner.is-revealed .el-cta__text p          { animation: elFadeUp var(--tout) 240ms backwards; }
.el-cta__inner.is-revealed .el-cta__actions .el-btn { animation: elFadeUp var(--tout) 340ms backwards; }
.el-cta__inner.is-revealed .el-cta__actions .el-btn + .el-btn { animation-delay: 460ms; }
.el-cta__inner.is-revealed .el-btn--ghost-light i   { animation: elRing .7s var(--el-out) 950ms 1; transform-origin: 50% 20%; }
.el-cta__inner.is-revealed .el-btn--primary::after  { animation: elSheenOnce 1.1s var(--el-out) 1.1s 1; }
.el-cta__inner::after { animation: elFloat 13s var(--el-out) -5s infinite alternate; }
.el-cta__inner::before {
    content: ""; position: absolute; left: -120px; bottom: -170px; width: 360px; height: 360px; z-index: -1;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--g-neon) 14%, transparent), transparent 68%);
    animation: elFloat 17s var(--el-out) infinite alternate-reverse;
}

/* 68.9 OGRANICZONY RUCH: sekcja 15 zeruje czasy, ale nie opóźnienia — dzieci
   z fill-mode: backwards byłyby niewidoczne przez swoje opóźnienie (do ~1,1 s),
   bo pojawianie() nadaje klasy także w tym trybie. Zerujemy więc opóźnienia
   w obrębie sekcji 68 i gasimy dwie pętle slajdera (tytuł z 68.2 nadpisywał
   animation:none z sekcji 34 — bez tego migałby przez 220 ms). */
@media (prefers-reduced-motion: reduce) {
    .el-slide.is-active .el-slide__title,
    .el-slide.is-active .el-slide__actions .el-btn--primary { animation: none; }
    .el-slide.is-active .el-slide__actions .el-btn--primary { will-change: auto; }
    .el-trust__item.is-revealed i, .el-trust__item.is-revealed::after,
    .el-cat.is-revealed .el-cat__icon,
    .el-psec__head.is-revealed *, .el-section__head.is-revealed *,
    .el-grid .el-card.is-revealed .el-card__img img, .el-grid .el-card.is-revealed .product-flag,
    .el-promo__in.is-revealed *, .el-promo__in.is-revealed *::after,
    .el-cta__inner.is-revealed *, .el-cta__inner.is-revealed *::after { animation-delay: 0s !important; }
}

/* =========================================================================
   69. OGRANICZONY RUCH — pętle dekoracyjne z sekcji 68 gasną (mniej ruchu, nie zero)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .el-promo__in::before, .el-cta__inner::before, .el-cta__inner::after,
    .el-slide.is-active .el-slide__actions .el-btn--primary { animation: none !important; }
}

/* =========================================================================
   75. POPRAWKI PO ZGŁOSZENIACH WŁAŚCICIELA (2026-09-05, wieczór)
   ========================================================================= */
/* 75.1 sortowanie / filtry chowały się za kaflami: pasek nad listą dostawał
   .el-reveal (will-change + transform = własny stacking context), a kafle
   za nim malowały się wyżej. Pasek dostaje własną warstwę nad listą. */
#js-product-list-top, .products-selection { position: relative; z-index: 30; }
#js-product-list-top.el-reveal { will-change: auto; }
#js-product-list-top.is-revealed { transform: none; }
#js-product-list { position: relative; z-index: 1; }
.products-sort-order .dropdown-menu { z-index: 1050; }

/* 75.2 szybki podgląd: etykieta „Nowy" ginęła pod zdjęciem (img z filtrem
   maluje się nad elementem absolutnym bez z-index) */
.el-qv__flag { z-index: 3; color: #FFFFFF; background: var(--g-dark); }

/* 75.3 karta produktu: ul.product-flags była pełnoszerokim paskiem nad galerią —
   custom.js przenosi ją do .product-cover, tu chip w rogu zdjęcia jak na kaflach */
#product .product-cover { position: relative; }
#product .product-cover .product-flags,
#product .product-flags {
    position: absolute; top: .9rem; left: .9rem; z-index: 6;
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
    margin: 0; padding: 0; list-style: none; width: auto;
}
#product .product-flags:empty { display: none; }
#product .product-flags .product-flag { display: inline-flex; align-items: center; width: auto; }

/* =========================================================================
   76. FORMULARZE KONTA — logowanie, rejestracja, odzyskiwanie hasła
   Właściciel: „to tak samo" (ohydnie). Zamiast układu z generatora (etykiety
   w lewej kolumnie, podpisy w prawej, karta na 1/3 szerokości pod osobnym
   nagłówkiem) jedna karta 560 px: tytuł wewnątrz (przenosi JS, klasa body.el-acc),
   etykiety NAD polami na każdej szerokości, pola 50 px z obrysem, płeć jako
   pigułki, zgody jako czytelne wiersze z opisem pod spodem, przycisk na całą
   szerokość. Zakres: body.page-customer-account oraz #password / #authentication /
   #registration (ten sam DOM z classic).
   ========================================================================= */
body.el-acc #main .page-header { display: none; }

body.page-customer-account #content.page-content, #password #content.page-content,
#authentication #content.page-content, #registration #content.page-content {
    max-width: 560px; margin: .5rem auto 2.5rem; padding: 2.25rem 2.25rem 2rem;
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
#identity #content.page-content, #address #content.page-content, #addresses #content.page-content { max-width: 760px; }
@media (max-width: 575px) {
    body.page-customer-account #content.page-content, #password #content.page-content,
    #authentication #content.page-content, #registration #content.page-content { padding: 1.5rem 1.15rem 1.35rem; margin-top: 0; }
}

.el-acc__title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -.02em;
    color: var(--k-900); margin: 0 0 .35rem; line-height: 1.15;
}
.el-acc__title + section > p:first-child, .el-acc__title + .register-form > p:first-child,
body.page-customer-account .register-form > p:first-child { color: var(--s-600); margin: 0 0 1.6rem; font-size: .95rem; }
body.page-customer-account .login-form > header:empty { display: none; }
body.page-customer-account .login-form > section { padding-top: .25rem; }

/* pola: etykieta nad polem, podpis pod polem — kolumny Bootstrapa wyłączone */
body.page-customer-account .form-group.row, #password .form-group.row { display: block; margin: 0 0 1.15rem; }
body.page-customer-account .form-group.row > [class*="col-"], #password .form-group.row > [class*="col-"] {
    width: 100%; max-width: 100%; flex: none; padding: 0; float: none;
}
body.page-customer-account .form-control-label, #password .form-control-label {
    display: block; text-align: left; padding: 0; margin: 0 0 .45rem;
    font-size: .88rem; font-weight: 600; color: var(--k-800);
}
body.page-customer-account .form-control-comment, #password .form-control-comment {
    display: block; padding: .4rem 0 0; font-size: .82rem; color: var(--s-500); text-align: left;
}
body.page-customer-account .form-control-comment:empty { display: none; }
body.page-customer-account .form-control, body.page-customer-account .input-group .form-control,
#password .form-control {
    background: var(--w); border: 2px solid var(--s-200); border-radius: var(--r-sm);
    min-height: 50px; padding: .6rem .95rem; color: var(--k-900); box-shadow: none;
    transition: border-color var(--tf), box-shadow var(--tm);
}
body.page-customer-account .form-control:focus, #password .form-control:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); outline: 0; }
html[data-el-theme="dark"] body.page-customer-account .form-control { background: var(--s-50); border-color: rgba(255,255,255,.14) !important; }
html[data-el-theme="dark"] body.page-customer-account .form-control:focus { border-color: var(--g-neon) !important; box-shadow: 0 0 0 4px rgba(34,201,137,.22); }

/* hasło: pole i „Pokaż" jako jeden obrys */
body.page-customer-account .input-group { display: flex; align-items: stretch; }
body.page-customer-account .input-group .form-control { flex: 1 1 auto; border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: 0; }
body.page-customer-account .input-group .input-group-btn { display: flex; }
body.page-customer-account .input-group .input-group-btn > .btn[data-action="show-password"] {
    min-height: 50px; height: auto; margin: 0; padding: 0 1rem;
    border: 2px solid var(--s-200); border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--s-50); color: var(--k-800); box-shadow: none; font-size: .78rem; letter-spacing: .06em;
}
body.page-customer-account .input-group:focus-within .form-control { border-color: var(--g); }
body.page-customer-account .input-group:focus-within .input-group-btn > .btn { border-color: var(--g); }
html[data-el-theme="dark"] body.page-customer-account .input-group .input-group-btn > .btn[data-action="show-password"] { background: var(--s-100); border-color: rgba(255,255,255,.14); }

/* płeć: pigułki zamiast luźnych kółek */
body.page-customer-account .form-control-valign { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
body.page-customer-account label.radio-inline {
    margin: 0; min-height: 46px; padding: .5rem 1.1rem .5rem .85rem; gap: .55rem;
    border: 2px solid var(--s-200); border-radius: var(--pill); background: var(--w);
    color: var(--k-800); font-weight: 500;
    transition: border-color var(--tf), background-color var(--tf), color var(--tf), box-shadow var(--tm);
}
body.page-customer-account label.radio-inline:hover { border-color: var(--s-300); }
body.page-customer-account label.radio-inline:has(input:checked) { border-color: var(--g); background: var(--g-50); color: var(--g-deep); font-weight: 600; }
body.page-customer-account label.radio-inline:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--g-50); }
html[data-el-theme="dark"] body.page-customer-account label.radio-inline { background: var(--s-50); border-color: rgba(255,255,255,.14); }
html[data-el-theme="dark"] body.page-customer-account label.radio-inline:has(input:checked) { border-color: var(--g-neon); color: var(--g-neon); background: rgba(34,201,137,.10); }

/* zgody: pole 22 px z lewej, tekst płynie obok, opis (em) pod tekstem — dotąd
   tekst i opis stały obok siebie w dwu wąskich kolumnach (flex) */
body.page-customer-account .custom-checkbox { display: block; }
body.page-customer-account .custom-checkbox label {
    display: block; position: relative; padding: .1rem 0 0 2.2rem; min-height: 26px;
    line-height: 1.5; color: var(--k-800); cursor: pointer;
}
body.page-customer-account .custom-checkbox input[type="checkbox"] { position: absolute; left: 0; top: .1rem; width: 22px; height: 22px; margin: 0; opacity: 0; }
body.page-customer-account .custom-checkbox input[type="checkbox"] + span { position: absolute; left: 0; top: .1rem; margin: 0; }
body.page-customer-account .custom-checkbox label em { display: block; font-style: normal; font-size: .82rem; color: var(--s-500); margin-top: .2rem; }
body.page-customer-account .custom-checkbox label a { color: var(--g-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.page-customer-account .form-group.row .custom-checkbox + .custom-checkbox { margin-top: .9rem; }

/* przycisk na całą szerokość; odnośniki pomocnicze */
body.page-customer-account .form-footer, #password .form-footer { text-align: left; margin-top: 1.6rem; }
body.page-customer-account .form-footer .btn, #password .form-footer .btn, #password .center-email-fields .btn {
    width: 100%; float: none; margin: 0; min-height: 52px; border-radius: var(--r-sm); font-size: .95rem; letter-spacing: .05em;
}
body.page-customer-account .forgot-password { text-align: right; margin: -.5rem 0 0; }
body.page-customer-account .forgot-password a { font-size: .88rem; min-height: 40px; }
body.page-customer-account .no-account { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--s-100); text-align: center; }
body.page-customer-account .no-account a { font-weight: 600; }
body.page-customer-account .page-footer, #password .page-footer { max-width: 560px; margin: -1.5rem auto 2rem; text-align: center; }
body.page-customer-account .page-footer .account-link { min-height: 44px; }

/* odzyskiwanie hasła: pole + przycisk pod sobą */
#password .forgotten-password .form-fields { display: block; }
#password .forgotten-password .form-fields .email input { width: 100%; }
#password .forgotten-password .center-email-fields { margin-top: 1rem; }
#password .forgotten-password .center-email-fields .btn { width: 100%; }

/* wejście: karta wjeżdża jak inne (56.12), tytuł chwilę później */
.el-acc__title { animation: elFadeUp var(--ts) 80ms both; }
@media (prefers-reduced-motion: reduce) { .el-acc__title { animation-name: elFadeUp; } }

/* =========================================================================
   77. SLIDER NA STRONIE GŁÓWNEJ — napis i przycisk o połowę mniejsze (prośba
   właściciela): tytuł 61 → ~30 px na 1366, przycisk 61 → ~31 px wysokości.
   ========================================================================= */
.el-slide__title { font-size: clamp(1.2rem, 2.6vw, 2.3rem); max-width: 26ch; }   /* +15 % na prośbę właściciela */
.el-slide__actions { margin-top: clamp(.7rem, 1.5vh, 1rem); gap: .5rem; }
.el-slide__actions .el-btn--lg, .el-slide__actions .el-btn { padding: .48rem 1.2rem; font-size: .9rem; gap: .4rem; min-height: 0; }
.el-slide__actions .el-btn i, .el-slide__actions .el-btn .material-icons { font-size: 18px; }
@media (max-width: 767px) {
    .el-slide__title { font-size: clamp(1.1rem, 4vw, 1.27rem); }
    .el-slide__actions .el-btn--lg, .el-slide__actions .el-btn { padding: .46rem 1.1rem; font-size: .87rem; }
}

/* =========================================================================
   78. STRONA PRODUCENTA (/1_breve) — właściciel: „do napisania od nowa i
   wkomponowania". Szablon catalog/listing/manufacturer.tpl: baner .el-cathead
   z logo w białej karcie i krótkim opisem, pełny opis w karcie .el-brandabout,
   niżej siatka produktów jak w kategorii.
   ========================================================================= */
.el-cathead--brand { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.el-cathead--brand .el-cathead__body { min-width: 0; }
.el-brandhead__logo {
    flex: 0 0 auto; background: #FFFFFF; border-radius: var(--r); padding: .9rem 1.25rem;
    box-shadow: var(--sh-3); position: relative; z-index: 1;
}
/* logo producenta to plik 800×800 z białymi pasami góra/dół — kadrujemy do proporcji znaku */
.el-brandhead__logo img { display: block; width: 220px; height: 105px; object-fit: cover; border-radius: 0; box-shadow: none; max-height: none; }
.el-brandhead__count { margin: 1rem 0 0; color: rgba(255,255,255,.82); font-size: .9rem; }
.el-brandhead__count strong { color: #FFFFFF; font-size: 1.1rem; font-weight: 800; }

.el-brandabout {
    background: var(--w); border-radius: var(--r-lg); box-shadow: var(--sh-1);
    padding: 1.75rem 2rem; margin: 1.25rem 0 1.75rem;
}
.el-brandabout__eyebrow { color: var(--g-deep); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .8rem; }
.el-brandabout__text, .el-brandabout__text p, .el-brandabout__text span, .el-brandabout__text li { color: var(--k-700); font-size: .97rem; line-height: 1.7; }
.el-brandabout__text p { margin: 0 0 .9rem; }
.el-brandabout__text p:last-child { margin-bottom: 0; }
.el-brandabout__text [style*="font-size"], .el-brandabout__text [style*="font-family"] { font-size: inherit !important; font-family: inherit !important; }
.el-brandabout__text [style*="color"] { color: inherit !important; }
.el-brandabout__text strong { color: var(--k-900); }
/* jedna kolumna do czytania (dwie łamały się nierówno: trzeci akapit sam po prawej) */
@media (min-width: 992px) {
    .el-brandabout { padding: 2rem 2.5rem; }
    .el-brandabout__text { max-width: 78ch; }
    .el-brandabout__text p:first-child { font-size: 1.08rem; color: var(--k-900); }
}
@media (max-width: 767px) {
    .el-cathead--brand { flex-direction: column-reverse; align-items: flex-start; gap: 1.1rem; }
    .el-brandhead__logo { padding: .7rem 1rem; }
    .el-brandhead__logo img { width: 170px; height: 81px; }
    .el-brandabout { padding: 1.25rem 1.15rem; margin: 1rem 0 1.25rem; }
}
html[data-el-theme="dark"] .el-brandhead__logo { background: #FFFFFF; }
html[data-el-theme="dark"] .el-brandabout__eyebrow { color: var(--g-neon); }
html[data-el-theme="dark"] .el-brandabout__text, html[data-el-theme="dark"] .el-brandabout__text p,
html[data-el-theme="dark"] .el-brandabout__text span, html[data-el-theme="dark"] .el-brandabout__text li { color: var(--k-800); }
#manufacturer #js-product-list-header { margin-bottom: 0; }
.el-brandabout.el-reveal { transform: translateY(14px); }
/* krótki opis z bazy ma w sobie obrazek logo — w banerze logo jest już w białej karcie */
.el-cathead--brand .el-cathead__desc img, .el-cathead--brand .el-cathead__desc picture { display: none; }
.el-brandabout__text img { max-width: 220px; height: auto; display: block; margin: 0 0 .9rem; }
/* opis z bazy może mieć style inline — na zieleni zawsze biały tekst */
.el-cathead--brand .el-cathead__desc, .el-cathead--brand .el-cathead__desc * { color: rgba(255,255,255,.92) !important; background: transparent !important; font-size: 1rem !important; line-height: 1.6 !important; }
.el-cathead--brand .el-brandhead__count, .el-cathead--brand .el-brandhead__count span { color: rgba(255,255,255,.9); }
/* tryb ciemny: etykieta „Producent"/„Kategoria" dostała w sekcji 58 tło, a jako <p> rozciągała je na całą szerokość baneru */
html[data-el-theme="dark"] .el-cathead__eyebrow { display: inline-block; width: auto; }

/* =========================================================================
   70. PASEK ZAUFANIA v2 — „Techniczna precyzja" (pakiet końcowy na bazie projektu A)
   Cztery OSOBNE karty w siatce (nie jedna biała plansza pocięta kreskami —
   ten układ właściciel odrzucił): każda z obrysem 1 px, promieniem --r i
   cieniem --sh-1 jak kafle kategorii .el-cat na tej samej stronie. W karcie:
   wiersz indeksu 01–04 w kroju monospace z linią do końca pola, ikona w
   obrysowanym kwadracie 40 px, tytuł 600 i podtytuł w dwu stopniach i kolorach.
   Zieleń tylko w indeksie, na obrysie przy najechaniu i na 2 px linii u dołu
   (::after z sekcji 26 przestylowane; przemiatanie elSweep z 68.3 zostaje).
   Telefon, e-mail i „Dobór parametrów" są odnośnikami rozciągniętymi na CAŁĄ
   kartę (::after odnośnika) — cel dotykowy ≥ 44 px przy każdej szerokości.
   Wymaga znacznika z klasą .el-trust--v2 (index.tpl). Klasy obserwowane przez
   custom.js (.el-trust__item, el-reveal/is-revealed, data-el-delay) bez zmian.
   ========================================================================= */
/* 70.0 tokeny wspólne dla sekcji 70–74: krój monospace do numerów katalogowych,
   telefonów i indeksów (systemowy — bez dodatkowych plików fontów) */
:root {
    --el-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@keyframes elV2Fade { from { opacity: 0; } to { opacity: 1; } }

/* 70.1 lista: cztery osobne karty, odstęp zamiast włoskowych kresek z tła */
.el-trust--v2 .el-trust__list {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.2vw, 1.1rem);
    background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
}

/* 70.2 karta pola: wiersz indeksu na całą szerokość, pod nim ikona + tekst */
.el-trust--v2 .el-trust__item {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: .95rem; row-gap: .8rem; align-items: start;
    background: var(--w); border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: var(--sh-1);
    padding: 1.05rem 1.35rem 1.25rem;
    /* opacity w liście, bo ta reguła zastępuje transition z .el-reveal (wjazd w kadr ma dalej przenikać) */
    transition: opacity var(--ts), transform var(--tm), box-shadow var(--tm), border-color var(--tf), background-color var(--tf);
}
.el-trust--v2 .el-trust__item:hover,
.el-trust--v2 .el-trust__item:focus-within { background: var(--w); border-color: var(--g); box-shadow: var(--sh-2); transform: translateY(-3px); }
/* fokus z klawiatury: pierścień na karcie (odnośnik ma outline: none — jego pole to cała karta) */
.el-trust--v2 .el-trust__item:focus-within { box-shadow: var(--sh-2), 0 0 0 3px rgba(var(--g-rgb), .30); }
.el-trust--v2 .el-trust__item:hover i { transform: none; }
html[data-el-theme="dark"] .el-trust--v2 .el-trust__item { border-color: var(--s-200); }

/* wiersz indeksu: „01" + linia do końca pola */
.el-trust--v2 .el-trust__head { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: .7rem; min-width: 0; }
.el-trust--v2 .el-trust__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--s-200); }
.el-trust--v2 .el-trust__idx {
    display: block; flex: 0 0 auto;
    font-family: var(--el-mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; line-height: 1;
    color: var(--g-deep);
}

/* ikona w obrysowanym kwadracie — nie „luzem" */
.el-trust--v2 .el-trust__ico {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 1px solid var(--s-200); border-radius: var(--r-sm);
    background: var(--w); color: var(--k-800);
    transition: border-color var(--tf), color var(--tf), background-color var(--tf);
}
.el-trust--v2 .el-trust__ico i { font-size: 22px; line-height: 1; color: inherit; transition: color var(--tf); }
.el-trust--v2 .el-trust__item:hover .el-trust__ico,
.el-trust--v2 .el-trust__item:focus-within .el-trust__ico { border-color: var(--g); color: var(--g-deep); background: var(--g-50); }
/* wjazd ikony z 68.3 (elIconIn: przesunięcie + skala) → samo przenikanie */
.el-trust--v2 .el-trust__item.is-revealed i { animation-name: elV2Fade; }

/* tekst: tytuł 600 i podtytuł nie zlewają się (dwa stopnie, dwa kolory) */
.el-trust--v2 .el-trust__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; color: var(--s-500); font-size: .84rem; line-height: 1.45; }
.el-trust--v2 .el-trust__txt strong { color: var(--k-900); font-size: .98rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; overflow-wrap: anywhere; }
/* podtytuł dziedziczy z .el-trust__txt (stara reguła „.el-trust__item span" dawała mu .9rem i flex) */
.el-trust--v2 .el-trust__sub { display: block; color: inherit; font-size: inherit; line-height: inherit; }
/* odnośnik: napis dziedziczy kolor, a ::after rozciąga pole kliknięcia na całą kartę (karta ma position: relative) */
.el-trust--v2 .el-trust__txt a { color: inherit; text-decoration: none; transition: color var(--tf); }
.el-trust--v2 .el-trust__txt a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.el-trust--v2 .el-trust__txt a:focus-visible { outline: none; }   /* pierścień rysuje karta (:focus-within wyżej) */
.el-trust--v2 .el-trust__item:hover .el-trust__txt a,
.el-trust--v2 .el-trust__txt a:focus-visible { color: var(--g-deep); }
.el-trust--v2 .el-trust__item--num .el-trust__txt strong { font-family: var(--el-mono); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* 70.3 zielona linia u dołu karty (::after z sekcji 26): 2 px, od krawędzi do krawędzi, pod obrysem */
.el-trust--v2 .el-trust__item::after {
    left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0;
    background: var(--g); transform: scaleX(0); transform-origin: left center;
    transition: transform var(--tm);
}
.el-trust--v2 .el-trust__item:hover::after,
.el-trust--v2 .el-trust__item:focus-within::after { transform: scaleX(1); }

/* 70.4 szerokości: 2 kolumny do 1099 px, 1 kolumna (wiersze) do 599 px */
@media (max-width: 1099px) {
    .el-trust--v2 .el-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .el-trust--v2 .el-trust__item { padding: .95rem 1.1rem 1.1rem; column-gap: .85rem; row-gap: .65rem; }
    .el-trust--v2 .el-trust__ico i { font-size: 20px; }
    .el-trust--v2 .el-trust__txt strong { font-size: .95rem; }
    .el-trust--v2 .el-trust__txt { font-size: .82rem; }
}
@media (max-width: 599px) {
    .el-trust--v2 .el-trust__list { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    /* wiersz: indeks | ikona | tekst — bez linii po indeksie; karta ma ≥ 60 px, więc cel dotykowy ≥ 44 px */
    .el-trust--v2 .el-trust__item { grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; padding: .8rem 1rem; column-gap: .8rem; min-height: 60px; }
    .el-trust--v2 .el-trust__head { grid-column: auto; }
    .el-trust--v2 .el-trust__head::after { display: none; }
    .el-trust--v2 .el-trust__ico { width: 36px; height: 36px; }
    .el-trust--v2 .el-trust__ico i { font-size: 19px; }
    .el-trust--v2 .el-trust__item--num .el-trust__txt, .el-trust--v2 .el-trust__item--mail .el-trust__txt { gap: 0; }
}

/* 70.5 ograniczony ruch — mniej ruchu, nie zero: karta nie unosi się, linia u dołu przenika
   zamiast rosnąć, przemiatanie elSweep z 68.3 gaśnie, ikona tylko przenika (już wyżej) */
@media (prefers-reduced-motion: reduce) {
    .el-trust--v2 .el-trust__item:hover, .el-trust--v2 .el-trust__item:focus-within { transform: none; }
    .el-trust--v2 .el-trust__item::after { transform: scaleX(1); opacity: 0; transition: opacity var(--tm); }
    .el-trust--v2 .el-trust__item:hover::after, .el-trust--v2 .el-trust__item:focus-within::after { opacity: 1; }
    .el-trust--v2 .el-trust__item.is-revealed::after { animation: none; }
}

/* =========================================================================
   71. KAFEL PRODUKTU v2 — „Techniczna precyzja" (pakiet końcowy na bazie projektu A)
   Karta z obrysem 1 px, promieniem --r i cieniem --sh-1 (ten sam język co
   .el-cat i pasek zaufania). Pole zdjęcia BIAŁE (w ciemnym jasna podkładka
   #EEF1F4), zdjęcie w całości (contain), bez własnego promienia i tła —
   padding leży na .el-card__img, nie na <img>, więc nie ma „ramki w ramce";
   w trybie ciemnym biel JPG-a zlewa się z podkładką przez mix-blend-mode:
   multiply (tylko tam — w jasnym biel na bieli nie potrzebuje blendu).
   Treść jak wiersz katalogu: „Nr kat." + numer w monospace, nazwa 600 o stałej
   wysokości dwu linii, u dołu linia włoskowa, cena 700 w czerni (tabular-nums)
   i „Zobacz" jako napis + strzałka w pełnym kwadracie --g-dark (biały 5,4:1) —
   zieleń marki od razu, nie dopiero w akcji, żeby kafel nie był cichszy od
   odrzuconego. Etykieta „Nowy" jako prostokątny znacznik --g-dark. Pasek
   szybkiego podglądu (sekcja 46) w --g-deep (biały 6,3:1); na dotyku 44 px
   w prawym DOLNYM rogu, bo prawy górny zajmuje serce blockwishlist (44 px,
   własne position: absolute — niezależne od .products z wishlist.css).
   768–991 px (siatka 2 kolumny z sekcji 50, kafel ≈ 242 px): „Zobacz" zostaje
   samą strzałką w kwadracie 44 px (napis dla czytników) — cena się nie łamie.
   Wymaga klasy .el-card--v2 na <article> (product.tpl). Znaczniki i klasy dla
   custom.js bez zmian.
   ========================================================================= */
/* 71.0 karta */
.el-card--v2 .el-card__inner {
    position: relative;
    background: var(--w); border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: var(--sh-1);
    transition: transform var(--tm), box-shadow var(--tm), border-color var(--tf);
}
html[data-el-theme="dark"] .el-card--v2 .el-card__inner { border: 1px solid var(--s-200); }
.el-card--v2 .el-card__inner:hover, .el-card--v2 .el-card__inner:focus-within { transform: translateY(-3px); border-color: var(--g); box-shadow: var(--sh-2); }

/* 71.1 pole zdjęcia — biel, zdjęcie w całości, bez ramki w ramce (padding na .el-card__img) */
.el-card--v2 .el-card__media { background: #FFFFFF; border-bottom: 1px solid var(--s-100); }
html[data-el-theme="dark"] .el-card--v2 .el-card__media { background: #EEF1F4; border-bottom-color: transparent; }
.el-card--v2 .el-card__img { display: block; padding: 1.25rem 1.25rem 1rem; background: transparent; }
.el-card--v2 .el-card__img picture { display: block; }
.el-card--v2 .el-card__img img {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    object-fit: contain; object-position: center;
    padding: 0; border-radius: 0; background: transparent; mix-blend-mode: normal;
}
/* ciemny: filtr brightness z sekcji 60 zdejmujemy; biel JPG-a = kolor podkładki przez multiply */
html[data-el-theme="dark"] .el-card--v2 .el-card__media img { filter: none; }
html[data-el-theme="dark"] .el-card--v2 .el-card__img img { mix-blend-mode: multiply; }
.el-card--v2 .el-card__inner:hover .el-card__img img { transform: scale(1.03); }

/* 71.2 etykiety („Nowy", promocje): prostokątny znacznik, pełny kolor
   (background z !important, bo sekcja 63 ustawia .product-flag.new z !important) */
.el-card--v2 .el-card__media .product-flags { top: .85rem; left: .85rem; gap: .35rem; }
.el-card--v2 .el-card__media .product-flags li.product-flag, .el-card--v2 .el-card__media .product-flag {
    background: var(--g-dark) !important; color: #FFFFFF; border: 0; border-radius: 4px;
    box-shadow: none; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
    padding: .3rem .6rem; min-width: 0; min-height: 0;
}
.el-card--v2 .el-card__media .product-flags li.product-flag.discount, .el-card--v2 .el-card__media .product-flags li.product-flag.discount-amount,
.el-card--v2 .el-card__media .product-flags li.product-flag.discount-percentage, .el-card--v2 .el-card__media .product-flags li.product-flag.on-sale { background: #C1303E !important; }   /* biały 5,6:1 */
.el-card--v2 .el-card__media .product-flags li.product-flag.online-only, .el-card--v2 .el-card__media .product-flags li.product-flag.pack { background: #22272F !important; }
.el-card--v2 .el-card__media .product-flags li.product-flag.out_of_stock { background: #4A5160 !important; }

/* 71.3 serce (blockwishlist wstrzykuje przycisk do .thumbnail-container = .el-card__inner):
   kwadrat 44 px z obrysem, własne position: absolute (nie zależy od .products article z wishlist.css),
   zawsze biały, bo leży na białej/jasnej podkładce zdjęcia w obu trybach */
.el-card--v2 .el-card__inner .wishlist-button-add {
    position: absolute; top: .85rem; right: .85rem; left: auto; z-index: 12;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0;
    border-radius: var(--r-sm); background: #FFFFFF; border: 1px solid var(--s-300); box-shadow: none; opacity: 1;
    color: #333944;
    transition: border-color var(--tf), background-color var(--tf), transform var(--tf), opacity var(--tf);
}
.el-card--v2 .el-card__inner .wishlist-button-add:hover,
.el-card--v2 .el-card__inner .wishlist-button-add:focus-visible { opacity: 1; border-color: var(--g); }
.el-card--v2 .el-card__inner .wishlist-button-add:active { transform: scale(.94); }
.el-card--v2 .el-card__inner .wishlist-button-add i,
.el-card--v2 .el-card__inner .wishlist-button-add .material-icons { color: #333944; font-size: 20px; line-height: 1; }
html[data-el-theme="dark"] .el-card--v2 .el-card__inner .wishlist-button-add { background: #FFFFFF !important; border-color: var(--s-300); color: #333944 !important; }
html[data-el-theme="dark"] .el-card--v2 .el-card__inner .wishlist-button-add:not(.is-liked) i { color: #333944 !important; }
/* polubione: czerwone w OBU trybach (sekcja 60 dawała w ciemnym --k-700 !important i serce zostawało szare) */
.el-card--v2 .el-card__inner .wishlist-button-add.is-liked,
.el-card--v2 .el-card__inner .wishlist-button-add.is-liked i,
.el-card--v2 .el-card__inner .wishlist-button-add.is-liked .material-icons,
html[data-el-theme="dark"] .el-card--v2 .el-card__inner .wishlist-button-add.is-liked i,
html[data-el-theme="dark"] .el-card--v2 .el-card__inner .wishlist-button-add.is-liked .material-icons { color: #E5342E !important; }

/* 71.4 pasek „Szybki podgląd" (sekcja 46): głębsza zieleń pod biały napis; w ciemnym neon + ciemny tekst (2761) */
.el-card--v2 .el-card__media .el-card__hover,
.el-card--v2 .el-card__media .el-card__hover.highlighted-informations,
.el-card--v2 .el-card__media .highlighted-informations { background: rgba(11, 110, 71, .96) !important; backdrop-filter: none; }
html[data-el-theme="dark"] .el-card--v2 .el-card__media .el-card__hover,
html[data-el-theme="dark"] .el-card--v2 .el-card__media .el-card__hover.highlighted-informations,
html[data-el-theme="dark"] .el-card--v2 .el-card__media .highlighted-informations { background: rgba(34, 201, 137, .94) !important; }
/* letter-spacing (układ) nie animuje się — stała wartość także na hover */
.el-card--v2 .el-card__quick, .el-card--v2 .el-card__media .el-card__quick.quick-view { letter-spacing: .12em; transition: background-color var(--tf), color var(--tf); }
.el-card--v2 .el-card__quick:hover, .el-card--v2 .el-card__media .el-card__quick.quick-view:hover { background: rgba(8, 84, 54, .98) !important; letter-spacing: .12em; }
html[data-el-theme="dark"] .el-card--v2 .el-card__quick:hover,
html[data-el-theme="dark"] .el-card--v2 .el-card__media .el-card__quick.quick-view:hover { background: rgba(18, 146, 95, .96) !important; }

/* 71.5 treść: wiersz katalogu */
.el-card--v2 .el-card__body { padding: .95rem 1.15rem 1.1rem; gap: .35rem; }
.el-card--v2 .el-card__ref {
    display: flex; align-items: baseline; gap: .5rem; margin: 0;
    color: var(--s-600); font-family: var(--el-mono); font-size: .8rem; font-weight: 500;
    letter-spacing: .02em; text-transform: none; line-height: 1.4; font-variant-numeric: tabular-nums;
}
/* etykieta w CSS — nie w treści, więc szybki podgląd (custom.js czyta textContent) dostaje sam numer */
.el-card--v2 .el-card__ref::before {
    content: "Nr kat."; font-family: var(--font); font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--s-500);
}
/* tytuł o stałej wysokości dwu linii — stopki kafli w rzędzie równo także przy nazwach jednolinijkowych */
.el-card--v2 .el-card__title, .el-card--v2.product-miniature .el-card__title { margin: .1rem 0 0; font-size: .95rem; line-height: 1.4; min-height: calc(2 * 1.4em); text-align: left; }
.el-card--v2 .el-card__title a, .el-card--v2.product-miniature .el-card__title a { font-size: inherit; font-weight: 600; color: var(--k-900) !important; letter-spacing: -.005em; line-height: 1.4; }
.el-card--v2 .el-card__foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--s-100); gap: .6rem; flex-wrap: wrap; }
.el-card--v2 .el-card__price, .el-card--v2 .el-card__price .price {
    color: var(--k-900); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.el-card--v2 .el-card__price .regular-price { color: var(--s-500); font-size: .8rem; font-weight: 500; }
.el-card--v2 .el-card__price .discount-percentage, .el-card--v2 .el-card__price .discount-amount { background: #C1303E; color: #FFFFFF; border-radius: 4px; font-size: .78rem; padding: .1rem .45rem; }
.el-card--v2 .el-card__ask {
    margin: 0; background: transparent; border: 1px solid var(--s-300); border-radius: 6px;
    color: var(--k-800); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .6rem;
}
/* „Zobacz": napis + strzałka w PEŁNYM kwadracie --g-dark (biały 5,4:1); na hover kwadrat ciemnieje i dojeżdża 2 px */
.el-card--v2 .el-card__cta {
    position: relative; margin: 0; padding: 0 0 0 .5rem; min-height: 36px; background: transparent; border-radius: 0;
    color: var(--g-deep) !important; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    gap: .55rem; transition: color var(--tf);
}
.el-card--v2 .el-card__cta i {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid var(--g-dark); border-radius: 8px; font-size: 18px; color: #FFFFFF; background: var(--g-dark);
    transition: background-color var(--tf), border-color var(--tf), color var(--tf), transform var(--tf);
}
.el-card--v2 .el-card__inner:hover .el-card__cta { background: transparent; color: var(--g-deep) !important; gap: .55rem; }
.el-card--v2 .el-card__inner:hover .el-card__cta i, .el-card--v2 .el-card__cta:hover i { background: #0B6E47; border-color: #0B6E47; color: #FFFFFF; transform: translateX(2px); }
.el-card--v2 .el-card__cta:active { transform: none; }
.el-card--v2 .el-card__cta:active i { transform: translateX(2px) scale(.94); }

/* 71.6 dotyk / wąskie ekrany: znacznik podglądu 44 px w prawym dolnym rogu (serce jest w prawym górnym),
   „Zobacz" jako cel 44 px */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .el-card--v2 .el-card__media .el-card__hover,
    .el-card--v2 .el-card__media .el-card__hover.highlighted-informations,
    .el-card--v2 .el-card__media .highlighted-informations {
        inset: auto .6rem .6rem auto !important; width: 44px; height: 44px;
        border-radius: var(--r-sm); box-shadow: none;
        background: rgba(11, 110, 71, .94) !important;
    }
    .el-card--v2 .el-card__quick, .el-card--v2 .el-card__media .el-card__quick.quick-view { min-height: 44px; }
    .el-card--v2 .el-card__inner:hover .el-card__img img { transform: none; }
    .el-card--v2 .el-card__cta { min-height: 44px; padding: 0 0 0 .5rem; }
    .el-card--v2 .el-card__cta i { width: 40px; height: 40px; }
}
@media (max-width: 991px) {
    .el-card--v2 .el-card__cta { min-height: 44px; padding: 0 0 0 .5rem; }
    .el-card--v2 .el-card__cta i { width: 40px; height: 40px; }
}
/* 768–991: dwie kolumny (sekcja 50), kafel ≈ 242 px — cena + „ZOBACZ" + kwadrat nie mieszczą się w jednym
   wierszu przy dłuższych kwotach; zostaje sama strzałka w kwadracie 44 px, napis tylko dla czytników */
@media (min-width: 768px) and (max-width: 991px) {
    .el-card--v2 .el-card__cta { width: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; }
    .el-card--v2 .el-card__inner:hover .el-card__cta { gap: 0; }
    .el-card--v2 .el-card__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .el-card--v2 .el-card__cta i { width: 44px; height: 44px; }
}

/* 71.7 ograniczony ruch — mniej ruchu, nie zero: karta nie unosi się, zdjęcie nie skaluje,
   strzałka nie jedzie, „osiadanie" zdjęcia z 68.6 gaśnie; kolory i cień przenikają dalej */
@media (prefers-reduced-motion: reduce) {
    .el-card--v2 .el-card__inner:hover, .el-card--v2 .el-card__inner:focus-within,
    .el-card--v2 .el-card__inner:hover .el-card__img img,
    .el-card--v2 .el-card__inner:hover .el-card__cta i, .el-card--v2 .el-card__cta:hover i, .el-card--v2 .el-card__cta:active i,
    .el-card--v2 .el-card__inner .wishlist-button-add:active { transform: none; }
    .el-grid .el-card--v2.is-revealed .el-card__img img { animation: none; }
}

/* =========================================================================
   72. NEWSLETTER + PASEK DOLNY STOPKI v2 — „Techniczna precyzja" (pakiet końcowy na bazie A)
   Dwie kolumny 5/7: po lewej eyebrow „Newsletter" z kreską, tytuł i podtytuł;
   po prawej pole i przycisk jako JEDNO narzędzie (wspólny obrys 1 px,
   promień --r-sm, ikona koperty, przycisk w neonie z ciemnym tekstem 8,4:1),
   pod nim tekst prawny w jednej kolumnie (max 64 znaki, text-wrap: balance).
   Poniżej 576 px narzędzie łamie się na dwa wiersze: ikona + pole nad
   przyciskiem na całą szerokość (placeholder mieści się w całości na 375 px).
   Pasek dolny: trzy pola siatki 1fr/auto/1fr, nazwa sklepu wyróżniona;
   tylko padding PIONOWY (poziomy daje .el-shell na tym samym elemencie).
   Wymaga: .el-fnews--v2 i .el-fnews__panel (footer.tpl), nowy szablon modułu
   ps_emailsubscription (.el-nl); klasa .block_newsletter ZOSTAJE — używa jej
   AJAX modułu ($('.block_newsletter form')). .el-fnews__in dalej w pojawianie().
   Stopka jest zawsze ciemnozielona (#123B2C), w trybie ciemnym #0A0F14.
   ========================================================================= */
/* 72.1 układ */
.el-fnews--v2 { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.09); padding: clamp(2rem, 3.5vw, 2.9rem) 0; }
.el-fnews--v2 .el-fnews__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.el-fnews--v2 .el-fnews__text { padding: 0; }
.el-fnews--v2 .el-fnews__eyebrow {
    display: flex; align-items: center; gap: .65rem; margin: 0 0 .55rem;
    color: var(--g-neon); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.el-fnews--v2 .el-fnews__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--g-neon); flex: 0 0 auto; }
.el-fnews--v2 .el-fnews__title { margin: 0 0 .45rem; color: #FFFFFF; font-size: clamp(1.3rem, 1.6vw, 1.55rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.el-fnews--v2 .el-fnews__sub { margin: 0; color: var(--s-400); font-size: .95rem; line-height: 1.6; max-width: 40ch; }   /* --s-400 na #123B2C = 4,7:1 */
.el-fnews--v2 .el-fnews__panel { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }

/* 72.2 blok modułu: zerujemy style classic (.block_newsletter: biel, max-width 50rem, marginesy) */
.el-fnews--v2 .block_newsletter { background: transparent; float: none; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; font-size: 1rem; }
.el-fnews--v2 .el-nl__form { position: relative; display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.el-fnews--v2 .el-nl__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* jedno narzędzie: obrys wspólny dla ikony, pola i przycisku */
.el-fnews--v2 .el-nl__field {
    display: flex; align-items: stretch; min-height: 54px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sm); background: rgba(255,255,255,.05);
    transition: border-color var(--tf), box-shadow var(--tm), background-color var(--tf);
}
.el-fnews--v2 .el-nl__field:focus-within { border-color: var(--g-neon); box-shadow: 0 0 0 3px rgba(34,201,137,.22); background: rgba(255,255,255,.07); }
.el-fnews--v2 .el-nl__ico { align-self: center; flex: 0 0 auto; margin-left: 1rem; font-size: 20px; line-height: 1; color: var(--g-neon); }
.el-fnews--v2 .block_newsletter form input[type="email"].el-nl__input,
html[data-el-theme="dark"] .el-fnews--v2 .block_newsletter form input[type="email"].el-nl__input {
    flex: 1 1 auto; min-width: 0; width: auto; height: auto; min-height: 52px; margin: 0; padding: 0 1rem;
    border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none;
    color: #FFFFFF !important; font-family: var(--font); font-size: 1rem; line-height: 1.3; outline: none;
}
.el-fnews--v2 .block_newsletter form input[type="email"].el-nl__input:focus,
.el-fnews--v2 .block_newsletter form input[type="email"].el-nl__input:focus-visible { padding: 0 1rem; border: 0; outline: none; box-shadow: none; background: transparent; }
.el-fnews--v2 .el-nl__input::placeholder { color: rgba(255,255,255,.62); opacity: 1; }
.el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit {
    flex: 0 0 auto; height: auto; min-height: 52px; margin: 0; padding: 0 1.35rem;
    border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
    background-color: var(--g-neon); color: #0B1A12;
    font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
    transition: background-color var(--tf), color var(--tf);
}
.el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit:hover,
.el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit:focus-visible { background-color: #FFFFFF; color: #0B6E47; transform: none; box-shadow: none; }
/* pierścień fokusu WEWNĄTRZ przycisku — obrys zewnętrzny obciąłby overflow: hidden narzędzia */
.el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -4px; border-radius: 0; }
.el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit:active { transform: none; }
/* stan wysyłki z custom.js §23 (67.6 rysuje pasy przez background-image) — kolor napisu na neonie */
#footer .el-fnews--v2 input.is-sending[type="submit"].el-nl__submit { color: rgba(11,26,18,.75) !important; }

/* komunikaty modułu: statyczny ($msg) i wstrzyknięty przez AJAX (.block_newsletter_alert na początku formularza) */
#footer .el-fnews--v2 .el-nl .alert { margin: 0; padding: .7rem .95rem; border: 1px solid transparent; border-radius: var(--r-sm); font-size: .86rem; line-height: 1.45; }
#footer .el-fnews--v2 .el-nl .alert-success { background: rgba(34,201,137,.14); border-color: rgba(34,201,137,.35); color: #B8F0D6; }
#footer .el-fnews--v2 .el-nl .alert-danger { background: rgba(220,58,76,.16); border-color: rgba(255,120,132,.4); color: #FFC1C7; }
/* tekst prawny: jedna kolumna, równe wiersze */
#footer .el-fnews--v2 .el-nl__legal, #footer .el-fnews--v2 .el-nl__legal p { margin: 0; padding: 0; color: var(--s-400); font-size: .8rem; line-height: 1.55; max-width: 64ch; text-wrap: balance; }
#footer .el-fnews--v2 .el-nl__legal a { color: var(--s-300); }
#footer .el-fnews--v2 .el-nl__legal a:hover { color: var(--g-neon); }
/* zgoda GDPR (jeśli moduł psgdpr ją wstrzyknie) — jasny tekst na stopce */
#footer .el-fnews--v2 .el-nl .custom-checkbox label, #footer .el-fnews--v2 .el-nl .psgdpr_consent_message { color: var(--s-300); font-size: .82rem; }
/* pusty blok social (ps_socialfollow bez pozycji) nie zabiera miejsca */
.el-fnews--v2 .block-social { float: none; width: auto; max-width: none; padding: 0; }
.el-fnews--v2 .block-social:not(:has(li)) { display: none; }

/* tryb ciemny stopki (#0A0F14): te same jasne teksty, podtytuł jak w sekcji 54 */
html[data-el-theme="dark"] .el-fnews--v2 .el-fnews__sub, html[data-el-theme="dark"] #footer .el-fnews--v2 .el-nl__legal,
html[data-el-theme="dark"] #footer .el-fnews--v2 .el-nl__legal p { color: var(--s-500); }
html[data-el-theme="dark"] .el-fnews--v2 .el-fnews__title { color: #FFFFFF !important; }

/* 72.3 pasek dolny: trzy pola siatki, nazwa sklepu wyróżniona; padding tylko pionowy — poziomy daje .el-shell */
.el-fbottom--v2 { border-top: 1px solid rgba(255,255,255,.09); }
.el-fbottom--v2 .el-fbottom__in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: .5rem 1.5rem; padding-top: 1.15rem; padding-bottom: 1.25rem;
}
.el-fbottom--v2 p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--s-400); }
.el-fbottom--v2 .el-fbottom__copy strong { color: var(--s-300); font-weight: 600; letter-spacing: .02em; }
.el-fbottom--v2 .el-fbottom__credit { text-align: center; flex: none; }
.el-fbottom--v2 .el-fbottom__ps { justify-self: end; text-align: right; }
/* „#footer a" (selektor z ID, sekcja 12) wygrywałby z klasą — stąd prefiks */
#footer .el-fbottom--v2 a { color: var(--s-400); }
#footer .el-fbottom--v2 a:hover, #footer .el-fbottom--v2 a:focus-visible { color: var(--g-neon); }
html[data-el-theme="dark"] .el-fbottom--v2 p { color: var(--s-500); }
html[data-el-theme="dark"] .el-fbottom--v2 .el-fbottom__copy strong { color: var(--k-700); }

/* 72.4 szerokości */
@media (max-width: 991px) {
    .el-fnews--v2 .el-fnews__in { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .el-fnews--v2 .el-fnews__sub { max-width: none; }
}
@media (max-width: 767px) {
    .el-fbottom--v2 .el-fbottom__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .35rem; padding-top: 1rem; padding-bottom: 1.1rem; }
    .el-fbottom--v2 .el-fbottom__ps { justify-self: center; text-align: center; }
}
@media (max-width: 575px) {
    /* narzędzie łamie się: [ikona + pole] nad [przycisk na całą szerokość] — jeden wspólny obrys */
    .el-fnews--v2 .el-nl__field { flex-wrap: wrap; }
    .el-fnews--v2 .el-nl__ico { margin-left: .85rem; font-size: 18px; }
    .el-fnews--v2 .block_newsletter form input[type="email"].el-nl__input { flex: 1 1 0; min-height: 50px; padding: 0 .8rem; font-size: .95rem; }
    .el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit { flex: 1 1 100%; width: 100%; min-height: 48px; padding: 0 1rem; font-size: .78rem; letter-spacing: .08em; }
}

/* 72.5 ograniczony ruch — mniej ruchu, nie zero: przycisk i pole nie mają transformacji;
   pasy „wysyłania" z 67.6 (pętla elStripes) zamieniamy na statyczne przygaszenie */
@media (prefers-reduced-motion: reduce) {
    #footer .el-fnews--v2 input.is-sending[type="submit"].el-nl__submit { animation: none; background-image: none !important; opacity: .7; }
    .el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit:hover,
    .el-fnews--v2 .block_newsletter form input[type="submit"].el-nl__submit:active { transform: none; }
}

/* =========================================================================
   73. KONTAKT v2 — KARTY + FORMULARZ, „Techniczna precyzja" (pakiet końcowy na bazie A)
   Nagłówek strony (eyebrow z kreską, H1 w zieleni 800, jedno zdanie), pod nim
   siatka 5/7: karta „Informacja o sklepie" jako lista definicji (etykieta nad
   wartością, linie włoskowe, telefon/faks/NIP w monospace; wiersze telefonu
   i e-maila są odnośnikami na CAŁEJ szerokości — ::after odnośnika) i karta
   formularza z etykietami NAD polami, jasnymi polami z obrysem 1 px --s-500
   (4,8:1 — WCAG 1.4.11 ≥ 3:1), tematem i e-mailem w dwu kolumnach,
   załącznikiem w polu z kreskowanym obrysem (natywne input[type=file], bez
   bootstrap-filestyle; przycisk pliku 44 px) i stopką z linią i przyciskiem
   --g-dark (biały 5,4:1). Karta danych przykleja się (sticky) przy dłuższym
   formularzu na ≥ 992 px. Indeksy 01/02 w rogach kart, 03 na mapie.
   Wymaga: contact.tpl (.el-contact--v2), contactform.tpl (.el-cform),
   ps_contactinfo-rich.tpl (.el-cinfo). Klasy .el-contact__card--info/--form
   i .el-contact__map zostają (animacje 56.12 / 67.1).
   ========================================================================= */
/* 73.0 nagłówek strony */
.el-contact--v2 { width: 100%; }
.el-contact--v2 .el-contact__head { max-width: 62ch; margin: .25rem 0 1.5rem; animation: elFadeUp var(--ts) both; }
html.el-nav-back .el-contact--v2 .el-contact__head { animation: none !important; }
/* eyebrow to <span>, nie <p> — „#main .page-content p" (1,1,1) malowałby go na szaro */
.el-contact--v2 .el-contact__eyebrow {
    display: flex; align-items: center; gap: .65rem; margin: 0 0 .5rem;
    color: var(--g-deep); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.el-contact--v2 .el-contact__eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }
.el-contact--v2 .el-contact__title { margin: 0 0 .5rem; color: var(--g-deep); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
html[data-el-theme="dark"] .el-contact--v2 .el-contact__title { color: var(--g-neon); }
#main .el-contact--v2 .el-contact__lead { margin: 0; color: var(--s-600); font-size: 1.02rem; line-height: 1.6; }

/* 73.1 siatka i karty: obrys 1 px, promień --r, cień --sh-1; indeks w rogu; karta danych przyklejona */
.el-contact--v2 .el-contact__grid { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: start; }
.el-contact--v2 .el-contact__card {
    position: relative; background: var(--w); border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: var(--sh-1);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem); display: flex; flex-direction: column; min-width: 0;
}
html[data-el-theme="dark"] .el-contact--v2 .el-contact__card { border: 1px solid var(--s-200); }
@media (min-width: 992px) {
    /* pod przyklejonym nagłówkiem (≈ 115–130 px po przewinięciu); przy krótszej karcie danych zostaje w kadrze */
    .el-contact--v2 .el-contact__card--info { position: sticky; top: 128px; }
}
.el-contact--v2 .el-contact__idx {
    position: absolute; top: 1.1rem; right: 1.25rem; margin: 0; line-height: 1;
    font-family: var(--el-mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--s-500);
}
/* nagłówki kart (h2) i zdanie pod nimi */
.el-contact--v2 .el-cinfo__title, .el-contact--v2 .el-cform__title,
.el-contact--v2 .el-contact__card--info .contact-rich h4, .el-contact--v2 .el-contact__card--form .contact-form h3 {
    margin: 0 0 .35rem; padding-right: 3rem; color: var(--k-900);
    font-size: 1.22rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; text-transform: none;
}
#main .el-contact--v2 .el-cinfo__sub, #main .el-contact--v2 .el-cform__lead { margin: 0 0 1.35rem; color: var(--s-500); font-size: .92rem; line-height: 1.55; }

/* 73.2 karta informacji: lista definicji */
.el-contact--v2 .el-cinfo { display: flex; flex-direction: column; margin: 0; color: var(--k-800); overflow-wrap: anywhere; }   /* classic: .contact-rich margin-bottom 2rem */
.el-contact--v2 .el-cinfo__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--s-200); }
.el-contact--v2 .el-cinfo__row { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .95rem 0; border-bottom: 1px solid var(--s-200); min-width: 0; }
.el-contact--v2 .el-cinfo__row dt { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--s-500); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.el-contact--v2 .el-cinfo__row dt i { font-size: 17px; line-height: 1; color: var(--g-deep); transition: transform var(--tf); }
.el-contact--v2 .el-cinfo__row:hover dt i, .el-contact--v2 .el-cinfo__row:focus-within dt i { transform: scale(1.1); }
.el-contact--v2 .el-cinfo__row dd { margin: 0; color: var(--k-900); font-size: .98rem; line-height: 1.5; }
/* odnośnik w wartości: kreska rysowana od lewej TRANSFORMEM (::before), nie background-size */
.el-contact--v2 .el-cinfo__row dd a {
    position: relative; display: inline-block; padding: .1rem 0; color: var(--k-900); font-weight: 600; text-decoration: none;
    background-image: none; transition: color var(--tf);
}
.el-contact--v2 .el-cinfo__row dd a::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--g);
    transform: scaleX(0); transform-origin: left center; transition: transform var(--tm);
}
.el-contact--v2 .el-cinfo__row dd a:hover, .el-contact--v2 .el-cinfo__row dd a:focus-visible,
.el-contact--v2 .el-cinfo__row--link:hover dd a { color: var(--g-deep); }
.el-contact--v2 .el-cinfo__row dd a:hover::before, .el-contact--v2 .el-cinfo__row dd a:focus-visible::before,
.el-contact--v2 .el-cinfo__row--link:hover dd a::before { transform: scaleX(1); }
/* wiersz z odnośnikiem (telefon, e-mail): pole kliknięcia = cały wiersz (≥ 60 px), fokus jako pierścień wiersza */
.el-contact--v2 .el-cinfo__row--link dd a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.el-contact--v2 .el-cinfo__row--link dd a:focus-visible { outline: none; }
.el-contact--v2 .el-cinfo__row--link:focus-within { outline: 3px solid var(--g-neon); outline-offset: 2px; border-radius: 6px; }
.el-contact--v2 .el-cinfo__row--num dd, .el-contact--v2 .el-cinfo__row--num dd a { font-family: var(--el-mono); font-size: .95rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.el-contact--v2 .el-cinfo__row--details dd { font-family: var(--el-mono); font-size: .86rem; line-height: 1.65; color: var(--k-800); }

/* 73.3 karta formularza */
.el-contact--v2 .el-cform, .el-contact--v2 .el-contact__card--form .contact-form { width: 100%; padding: 0; margin: 0; background: transparent; color: inherit; display: flex; flex-direction: column; flex: 1 1 auto; }
.el-contact--v2 .el-cform form { display: flex; flex-direction: column; flex: 1 1 auto; }
.el-contact--v2 .el-cform__head { margin: 0; }
.el-contact--v2 .el-cform__fields { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1.4rem; }
.el-contact--v2 .el-cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.el-contact--v2 .form-group.el-cform__group { margin: 0; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
/* etykieta NAD polem: mała, wersalikowa, z gwiazdką lub dopiskiem „opcjonalne" po prawej */
#wrapper .el-contact--v2 .el-cform__label, #wrapper .el-contact--v2 .el-contact__card--form .form-control-label {
    display: flex; align-items: baseline; gap: .5rem; margin: 0; padding: 0; text-align: left;
    color: var(--k-800); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.el-contact--v2 .el-cform__req { color: var(--g-deep); text-decoration: none; border: 0; font-weight: 700; cursor: help; }
/* „.el-contact__card--form .form-fields label > span" (sekcja 27) robił z każdego span-a w etykiecie blok 700/.92rem — stąd #wrapper */
#wrapper .el-contact--v2 .el-cform__label .el-cform__opt { display: inline; margin: 0 0 0 auto; color: var(--s-500); font-size: .78rem; font-weight: 500; letter-spacing: .02em; text-transform: none; }
/* pola: jasne, obrys 1 px --s-500 (4,8:1 na bieli), promień --r-sm; hover ciemniejszy, fokus = zielony obrys + pierścień */
.el-contact--v2 .form-control, .el-contact--v2 textarea.form-control, .el-contact--v2 select.form-control {
    width: 100%; min-height: 48px; padding: .7rem .95rem;
    background: var(--w); border: 1px solid var(--s-500); border-radius: var(--r-sm); box-shadow: none;
    color: var(--k-900); font-family: var(--font); font-size: 1rem; line-height: 1.4;
    transition: border-color var(--tf), box-shadow var(--tm), background-color var(--tf);
}
.el-contact--v2 .form-control::placeholder { color: var(--s-500); opacity: 1; }
.el-contact--v2 .form-control:hover { border-color: var(--k-700); }
.el-contact--v2 .form-control:focus { border-color: var(--g); box-shadow: 0 0 0 4px rgba(var(--g-rgb), .16); outline: none; }
#wrapper .el-contact--v2 textarea.form-control { min-height: 168px; resize: vertical; }   /* 56.1 daje #wrapper textarea 140 px */
.el-contact--v2 .form-group.has-error .form-control { border-color: var(--red); box-shadow: 0 0 0 4px rgba(220,58,76,.14); }
/* ciemny: pole --s-50 na karcie --w; obrys --s-400 (#8B95A1 na #1B222C = 5,4:1); 56.6 ma rgba .16 z !important */
html[data-el-theme="dark"] .el-contact--v2 .form-control, html[data-el-theme="dark"] .el-contact--v2 textarea.form-control {
    background: var(--s-50) !important; border-color: var(--s-400) !important; color: var(--k-900) !important;
}
html[data-el-theme="dark"] .el-contact--v2 .form-control:hover { border-color: var(--s-500) !important; }
html[data-el-theme="dark"] .el-contact--v2 .form-control:focus { border-color: var(--g-neon) !important; box-shadow: 0 0 0 4px rgba(34,201,137,.22); }
/* załącznik: pole z kreskowanym obrysem, natywny przycisk pliku jako obrysowany guzik 44 px */
.el-contact--v2 .el-cform__file {
    display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .35rem .5rem .35rem .95rem;
    border: 1px dashed var(--s-500); border-radius: var(--r-sm); background: var(--w); color: var(--k-800);
    transition: border-color var(--tf), background-color var(--tf), box-shadow var(--tm);
}
.el-contact--v2 .el-cform__file:hover { border-color: var(--k-700); }
.el-contact--v2 .el-cform__file:focus-within { border-color: var(--g); border-style: solid; box-shadow: 0 0 0 4px rgba(var(--g-rgb), .16); }
.el-contact--v2 .el-cform__file i { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--g-deep); }
.el-contact--v2 .el-cform__fileinput { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; background: transparent; color: var(--k-800); font-family: var(--font); font-size: .9rem; line-height: 1.4; }
.el-contact--v2 .el-cform__fileinput:focus-visible { outline: none; }
.el-contact--v2 .el-cform__fileinput::file-selector-button {
    margin: 0 .85rem 0 0; padding: .5rem .95rem; min-height: 44px;
    background: var(--w); color: var(--g-deep); border: 1px solid var(--g-deep); border-radius: 8px;
    font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .04em; cursor: pointer;
    transition: background-color var(--tf), color var(--tf), border-color var(--tf);
}
.el-contact--v2 .el-cform__fileinput::file-selector-button:hover { background: var(--g-dark); color: #FFFFFF; border-color: var(--g-dark); }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__file { background: var(--s-50); border-color: var(--s-400); }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__file:hover { border-color: var(--s-500); }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__file:focus-within { border-color: var(--g-neon); box-shadow: 0 0 0 4px rgba(34,201,137,.22); }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__fileinput::file-selector-button { background: var(--s-50); color: var(--g-neon); border-color: var(--g-neon); }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__fileinput::file-selector-button:hover { background: var(--g-dark); color: #FFFFFF; border-color: var(--g-dark); }
/* stopka formularza: linia, dopisek o polach wymaganych, przycisk po prawej */
.el-contact--v2 .el-cform__foot, .el-contact--v2 .el-contact__card--form .form-footer {
    margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--s-200);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; text-align: left;
}
.el-contact--v2 .el-cform__note { margin: 0; color: var(--s-500); font-size: .8rem; line-height: 1.4; }
#content .el-contact--v2 .contact-form input[type="submit"] {
    min-height: 48px; margin: 0; padding: 0 1.6rem; border: 0; border-radius: var(--r-sm); box-shadow: none; cursor: pointer;
    background-color: var(--g-dark); color: #FFFFFF;
    font-family: var(--font); font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    transition: background-color var(--tf), box-shadow var(--tm), transform var(--tf), background-position var(--ts);
}
#content .el-contact--v2 .contact-form input[type="submit"]:hover,
#content .el-contact--v2 .contact-form input[type="submit"]:focus-visible { background-color: #0B6E47; box-shadow: 0 8px 20px rgba(var(--g-rgb), .28); transform: translateY(-1px); }
#content .el-contact--v2 .contact-form input[type="submit"]:active { transform: translateY(1px); box-shadow: none; }
/* sekcja 57 daje w ciemnym .btn-primary:hover background: var(--g) !important (biały 3,96:1) — longhand koloru, błysk z 67.2 zostaje */
html[data-el-theme="dark"] #content .el-contact--v2 .contact-form input[type="submit"]:hover,
html[data-el-theme="dark"] #content .el-contact--v2 .contact-form input[type="submit"]:focus-visible { background-color: #0B6E47 !important; }
/* komunikaty (błędy / „wiadomość wysłana") */
.el-contact--v2 .el-cform__alert { margin: 0 0 1.2rem; padding: .85rem 1rem; border: 1px solid transparent; border-radius: var(--r-sm); font-size: .9rem; line-height: 1.5; }
.el-contact--v2 .el-cform__alert ul { margin: 0; padding-left: 1.1rem; }
.el-contact--v2 .el-cform__alert.alert-success { background: var(--g-50); border-color: var(--g-100); color: var(--g-deep); }
.el-contact--v2 .el-cform__alert.alert-danger { background: rgba(220,58,76,.10); border-color: rgba(220,58,76,.35); color: #A32433; }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__alert.alert-success { background: var(--g-50); border-color: var(--g-100); color: var(--g-neon); }
html[data-el-theme="dark"] .el-contact--v2 .el-cform__alert.alert-danger { background: rgba(220,58,76,.16); border-color: #FF6B78; color: #FF9AA2; }
/* zgoda GDPR (moduł psgdpr, jeśli aktywny) */
.el-contact--v2 .el-cform__gdpr .custom-checkbox label { min-height: 44px; }

/* 73.4 szerokości */
@media (max-width: 991px) {
    .el-contact--v2 .el-contact__grid { grid-template-columns: minmax(0, 1fr); }
    .el-contact--v2 .el-cinfo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
    .el-contact--v2 .el-cinfo__row--details { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .el-contact--v2 .el-contact__head { margin-bottom: 1.15rem; }
    .el-contact--v2 .el-contact__card { padding: 1.15rem; }
    .el-contact--v2 .el-contact__idx { top: 1rem; right: 1rem; }
    .el-contact--v2 .el-cinfo__list { grid-template-columns: minmax(0, 1fr); }
    .el-contact--v2 .el-cform__grid { grid-template-columns: minmax(0, 1fr); }
    .el-contact--v2 .el-cform__file { flex-wrap: wrap; padding: .5rem .6rem .6rem .95rem; }
    .el-contact--v2 .el-cform__foot, .el-contact--v2 .el-contact__card--form .form-footer { flex-direction: column; align-items: stretch; text-align: center; }
    .el-contact--v2 .el-cform__note { order: 2; }
    #content .el-contact--v2 .contact-form input[type="submit"] { width: 100%; }
}

/* 73.5 ograniczony ruch — mniej ruchu, nie zero: karty i nagłówek przenikają (bez wjazdu),
   ikony i przycisk nie przesuwają się; kreska pod linkiem przenika zamiast rosnąć */
@media (prefers-reduced-motion: reduce) {
    .el-contact--v2 .el-contact__head, .el-contact--v2 .el-contact__card--info, .el-contact--v2 .el-contact__card--form { animation-name: elV2Fade; }
    .el-contact--v2 .el-cinfo__row:hover dt i, .el-contact--v2 .el-cinfo__row:focus-within dt i,
    #content .el-contact--v2 .contact-form input[type="submit"]:hover,
    #content .el-contact--v2 .contact-form input[type="submit"]:focus-visible,
    #content .el-contact--v2 .contact-form input[type="submit"]:active { transform: none; }
    .el-contact--v2 .el-cinfo__row dd a::before { transform: scaleX(1); opacity: 0; transition: opacity var(--tm); }
    .el-contact--v2 .el-cinfo__row dd a:hover::before, .el-contact--v2 .el-cinfo__row dd a:focus-visible::before,
    .el-contact--v2 .el-cinfo__row--link:hover dd a::before { opacity: 1; }
}

/* =========================================================================
   74. KONTAKT v2 — MAPA, „Techniczna precyzja" (pakiet końcowy na bazie A)
   Mapa Google i ciemnozielona karta adresowa #123B2C (kolor stopki pod nią)
   tworzą JEDEN blok z obrysem 1 px i promieniem --r: mapa w lewej kolumnie
   (szara tonacja, po najechaniu odzyskuje część koloru), karta w prawej
   kolumnie 280–340 px — OBOK mapy, nie na niej, więc nic nie zasłania panelu
   adresu, przełącznika pełnego ekranu, kontrolek ani atrybucji Google
   (warunki osadzania). Indeks 03, adres, przycisk „Wyznacz trasę" (44 px,
   otwiera nawigację jednym dotknięciem — na telefonie mapa ma 260 px).
   Poniżej 768 px karta ląduje POD mapą na całą szerokość.
   ========================================================================= */
.el-contact--v2 .el-contact__map {
    position: relative; margin: 1.5rem 0 clamp(2rem, 4vw, 3rem);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: stretch;
    border: 1px solid var(--s-200); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1);
    background: var(--s-100); line-height: normal;
}
/* atrybut height="440" iframe'u ustępuje CSS: wysokość = wysokość wiersza siatki (min. 400 px) */
.el-contact--v2 .el-contact__map iframe {
    display: block; width: 100%; height: auto; min-height: 400px; align-self: stretch; border: 0;
    filter: grayscale(1) contrast(1.04); transition: filter var(--ts);
}
.el-contact--v2 .el-contact__map:hover iframe { filter: grayscale(.35) contrast(1.02); }
html[data-el-theme="dark"] .el-contact--v2 .el-contact__map { border-color: var(--s-200); background: var(--s-100); }
html[data-el-theme="dark"] .el-contact--v2 .el-contact__map iframe { filter: grayscale(1) invert(.9) contrast(.9) brightness(.9); }
html[data-el-theme="dark"] .el-contact--v2 .el-contact__map:hover iframe { filter: grayscale(1) invert(.9) contrast(.9) brightness(.96); }

/* karta adresowa obok mapy */
.el-contact--v2 .el-contact__pin {
    position: static; width: auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: #123B2C; color: #FFFFFF;
    border-radius: 0; box-shadow: none; line-height: 1.5;
}
.el-contact--v2 .el-contact__pin-eyebrow {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem;
    color: var(--g-neon); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}
.el-contact--v2 .el-contact__pin-idx { font-family: var(--el-mono); font-weight: 600; letter-spacing: .14em; }
.el-contact--v2 .el-contact__pin-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.18); }
.el-contact--v2 .el-contact__pin-addr { display: block; margin: 0 0 1.1rem; color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.5; }
.el-contact--v2 .el-contact__pin-addr strong { display: block; margin-bottom: .15rem; color: #FFFFFF; font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; }
.el-contact--v2 .el-contact__pin-link {
    display: inline-flex; align-items: center; align-self: flex-start; gap: .45rem; min-height: 44px; padding: 0 1rem;
    border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-sm);
    color: #FFFFFF; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    transition: background-color var(--tf), border-color var(--tf), color var(--tf);
}
.el-contact--v2 .el-contact__pin-link:hover, .el-contact--v2 .el-contact__pin-link:focus-visible { background: var(--g-neon); border-color: var(--g-neon); color: #0B1A12; }
.el-contact--v2 .el-contact__pin-link:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }   /* neon na neonie byłby niewidoczny */
.el-contact--v2 .el-contact__pin-link i { font-size: 18px; line-height: 1; transition: transform var(--tf); }
.el-contact--v2 .el-contact__pin-link:hover i { transform: translateX(3px); }

/* szerokości */
@media (max-width: 991px) {
    .el-contact--v2 .el-contact__map { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
    .el-contact--v2 .el-contact__map iframe { min-height: 340px; }
}
@media (max-width: 767px) {
    .el-contact--v2 .el-contact__map { grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
    .el-contact--v2 .el-contact__map iframe { min-height: 260px; }
    /* karta pod mapą, na całą szerokość — mapa zostaje czytelna w całości */
    .el-contact--v2 .el-contact__pin { padding: 1.1rem 1.15rem 1.2rem; }
    .el-contact--v2 .el-contact__pin-link { align-self: stretch; justify-content: center; }
}

/* ograniczony ruch: mapa przenika (już wyżej, tylko filtr), wjazd bloku z 56.12 → przenikanie, strzałka stoi */
@media (prefers-reduced-motion: reduce) {
    .el-contact--v2 .el-contact__map { animation-name: elV2Fade; }
    .el-contact--v2 .el-contact__pin-link:hover i { transform: none; }
}

/* =========================================================================
   80. STRONA PRODUKTU wg makiety klienta (2026-09-05 wieczór)
   Góra: zdjęcie o 1/3 mniejsze, miniatury tylko gdy zdjęć > 1; tytuł wersalikami,
   cena z „brutto", zdanie o produkcie, udostępnij, gwarancje. Pas z ikonami
   (dostawa / gwarancja / poradnik / zapytania), zielony przycisk „Karta katalogowa",
   „Wróć". Karty „Opis" i „Parametry techniczne": widoczny kontur, ZERO cieni
   i rozmyć, tabela w dwu kolumnach z kreskami między wierszami.
   ========================================================================= */

/* 80.0 wyłączone stare zakładki i welon tabeli z sekcji 38 (na tej stronie) */
.el-prod .el-product-tabs, .el-prod .nav-tabs, .el-prod .product-attachments { display: none; }

/* 80.1 zdjęcie: 520 → 350 px, karta bez zmian; miniatury ukryte przy jednym zdjęciu */
#product .el-prod__media #content.page-content { position: relative; }
#product .el-prod .images-container { max-width: 350px; margin-inline: auto; }
#product .el-prod .product-cover img { border-radius: var(--r); box-shadow: none; }
.el-prod--one-img .js-qv-mask, .el-prod--one-img .scroll-box-arrows { display: none !important; }
.el-prod .scroll-box-arrows { display: none; }
#product .el-prod__avail {
    position: absolute; top: 1.1rem; left: 1.1rem; z-index: 7;
    background: #E3F3EA; color: var(--g-deep); border-radius: var(--pill);
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .38rem .85rem;
}
#product .el-prod .product-cover .product-flags, #product .el-prod .product-flags { top: .9rem; left: auto; right: .9rem; align-items: flex-end; }
html[data-el-theme="dark"] #product .el-prod__avail { background: rgba(34,201,137,.16); color: var(--g-neon); }

/* 80.2 kolumna informacji */
.el-prod__info { padding-top: .5rem; }
#product .el-prod__title { font-size: clamp(1.15rem, .9rem + 1vw, 1.55rem); line-height: 1.3; text-transform: uppercase; letter-spacing: .01em; font-weight: 800; margin: 0 0 1rem; color: var(--k-900); }
#product .el-prod__info .product-prices { margin: 0 0 1rem; }
#product .el-prod__info .current-price-value { font-size: 1.55rem; font-weight: 800; color: var(--g-deep); }
#product .el-prod__info .tax-shipping-delivery-label, #product .el-prod__info .product-prices .tax-label { color: var(--s-600); font-size: .9rem; margin-left: .5rem; }
html[data-el-theme="dark"] #product .el-prod__info .current-price-value { color: var(--g-neon); }
#product .el-prod__short, #product .el-prod__short p { color: var(--k-700); font-size: .98rem; line-height: 1.6; margin: 0 0 1.25rem; }
#product .el-prod__info .product-actions { margin: 0; }
#product .el-prod__info .product-add-to-cart { margin: 0; }
/* udostępnij: „Udostępnij:" + ikony w rzędzie */
#product .el-prod__info .social-sharing { display: flex; align-items: center; gap: .9rem; margin: .5rem 0 1.5rem; }
#product .el-prod__info .social-sharing span { font-size: .9rem; color: var(--k-800); }
#product .el-prod__info .social-sharing ul { display: flex; gap: .6rem; margin: 0; padding: 0; }
#product .el-prod__info .social-sharing li { width: 36px; height: 36px; box-shadow: none; background: transparent; border: 1px solid var(--s-200); border-radius: 50%; background-size: 18px; }
/* gwarancje (blockreassurance): ikona w jasnym kółku, tytuł 600, opis drobny */
#product .el-prod__reassurance .blockreassurance_product { margin: 0; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) { display: flex; align-items: flex-start; gap: .9rem; padding: .55rem 0; }
#product .el-prod__reassurance .item-product { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: #E3F3EA; display: flex; align-items: center; justify-content: center; margin: 0; }
#product .el-prod__reassurance .item-product img, #product .el-prod__reassurance .item-product svg { width: 22px; height: 22px; }
#product .el-prod__reassurance .block-title { font-weight: 600; color: var(--k-900); font-size: .95rem; margin: 0; }
#product .el-prod__reassurance .block-title + p, #product .el-prod__reassurance .block-content p { color: var(--s-600); font-size: .85rem; margin: .1rem 0 0; }
html[data-el-theme="dark"] #product .el-prod__reassurance .item-product { background: rgba(34,201,137,.14); }

/* 80.3 PAS: logo producenta, cztery ikony, karta PDF, wróć */
.el-prod__band {
    display: flex; align-items: center; gap: 1.75rem 2.5rem; flex-wrap: wrap;
    background: #E9F4EE; border-radius: var(--r-lg); padding: 1.5rem 2rem; margin: 1.75rem 0;
}
html[data-el-theme="dark"] .el-prod__band { background: rgba(34,201,137,.08); }
.el-prod__brand { display: block; background: #FFFFFF; border-radius: var(--r); padding: .55rem .9rem; border: 1px solid var(--s-200); }
.el-prod__brand img { display: block; width: 120px; height: 57px; object-fit: cover; }
html[data-el-theme="dark"] .el-prod__brand { border-color: transparent; }
.el-prod__bitem {
    display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 84px; min-height: 44px;
    color: var(--g-deep); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    transition: color var(--tf), transform var(--tf);
}
.el-prod__bitem i { font-size: 40px; line-height: 1; color: var(--g); transition: transform var(--tm); }
.el-prod__bitem:hover { color: var(--g); transform: translateY(-2px); }
.el-prod__bitem:hover i { transform: scale(1.08); }
html[data-el-theme="dark"] .el-prod__bitem { color: var(--g-neon); }
html[data-el-theme="dark"] .el-prod__bitem i { color: var(--g-neon); }
.el-prod__pdf {
    display: inline-flex; align-items: center; gap: .7rem; margin-left: auto;
    background: var(--g-dark); color: #FFFFFF !important; border-radius: var(--r); padding: .8rem 1.4rem; min-height: 56px;
    font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; text-decoration: none;
    transition: background-color var(--tf), transform var(--tf), box-shadow var(--tm);
}
.el-prod__pdf i { font-size: 28px; }
.el-prod__pdf:hover { background: var(--g); transform: translateY(-2px); box-shadow: var(--sh-g); }
.el-prod__back {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .6rem 1.2rem;
    border: 2px solid var(--g); border-radius: var(--pill); color: var(--g-deep); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    transition: background-color var(--tf), color var(--tf), transform var(--tf);
}
.el-prod__back i { font-size: 20px; }
.el-prod__back:hover { background: var(--g); color: #FFFFFF; }
html[data-el-theme="dark"] .el-prod__back { color: var(--g-neon); border-color: var(--g-neon); }
html[data-el-theme="dark"] .el-prod__back:hover { background: var(--g-neon); color: #0B1A12; }
@media (max-width: 991px) {
    .el-prod__band { gap: 1.25rem 1.5rem; padding: 1.25rem; justify-content: center; }
    .el-prod__pdf { margin-left: 0; width: 100%; justify-content: center; }
    .el-prod__back { width: 100%; justify-content: center; }
}
@media (max-width: 575px) {
    .el-prod__band { gap: 1rem .5rem; }
    .el-prod__brand { width: 100%; display: flex; justify-content: center; }
    .el-prod__bitem { flex: 1 1 40%; min-width: 0; }
    .el-prod__bitem i { font-size: 34px; }
}

/* 80.4 KARTY: kontur, bez cienia; nagłówki wersalikami */
.el-opis-card, .el-param-card {
    background: var(--w); border: 1px solid var(--s-200); border-radius: var(--r-lg); box-shadow: none !important;
    padding: 1.75rem 2rem; margin: 0 0 1.5rem;
}
html[data-el-theme="dark"] .el-opis-card, html[data-el-theme="dark"] .el-param-card { border-color: rgba(255,255,255,.12); }
.el-prod__h { font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-900); margin: 0 0 1.1rem; }
.el-opis__seria { color: var(--s-600); font-size: .85rem; margin: 0 0 .9rem; }
.el-opis__seria strong { color: var(--g-deep); }
.el-opis__tekst p { color: var(--k-700); font-size: .98rem; line-height: 1.7; margin: 0 0 .9rem; }
.el-opis__tekst p:last-child { margin-bottom: 0; }
.el-opis__kluczowe { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.5rem; }
.el-opis__kluczowe li { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .95rem; border: 1px solid var(--s-200); border-radius: var(--r-sm); }
.el-opis__kluczowe span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-600); }
.el-opis__kluczowe strong { color: var(--k-900); font-size: .98rem; }
.el-opis__zrodlo { color: var(--s-500); font-size: .8rem; margin: 1.25rem 0 0; }
.el-opis__zrodlo a { color: var(--g-deep); }
html[data-el-theme="dark"] .el-opis__kluczowe li { border-color: rgba(255,255,255,.12); }
html[data-el-theme="dark"] .el-opis__seria strong, html[data-el-theme="dark"] .el-opis__zrodlo a { color: var(--g-neon); }

/* 80.5 TABELA PARAMETRÓW: dwie kolumny wierszy, kontur, kreski, bez welonu z sekcji 38 */
.el-param-card .el-table-scroll { overflow: visible; margin: 0; padding: 0; background: transparent; box-shadow: none; }
#product .el-param-card table, #product .el-param-card table.el-params {
    display: block; width: 100%; max-width: none; margin: 0; border: 1px solid var(--s-200); border-radius: var(--r-sm);
    overflow: hidden; box-shadow: none !important; background: transparent;
}
#product .el-param-card table tbody { display: grid; grid-template-columns: 1fr 1fr; }
#product .el-param-card table tr { display: grid; grid-template-columns: 44% 56%; border-bottom: 1px solid var(--s-200); }
#product .el-param-card table tbody tr:nth-child(odd) { border-right: 1px solid var(--s-200); }
#product .el-param-card table tbody tr:nth-last-child(-n+2) { border-bottom: 0; }
#product .el-param-card table th, #product .el-param-card table td {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    padding: .75rem 1.1rem !important; font-size: .9rem; line-height: 1.45; text-align: left; vertical-align: top; min-width: 0;
}
#product .el-param-card table th { font-weight: 600 !important; color: var(--k-900) !important; }
#product .el-param-card table td { color: var(--k-700) !important; font-weight: 400; }
html[data-el-theme="dark"] #product .el-param-card table, html[data-el-theme="dark"] #product .el-param-card table tr,
html[data-el-theme="dark"] #product .el-param-card table tbody tr:nth-child(odd) { border-color: rgba(255,255,255,.12); }
@media (max-width: 991px) {
    #product .el-param-card table tbody { grid-template-columns: 1fr; }
    #product .el-param-card table tbody tr:nth-child(odd) { border-right: 0; }
    #product .el-param-card table tbody tr:nth-last-child(-n+2) { border-bottom: 1px solid var(--s-200); }
    #product .el-param-card table tbody tr:last-child { border-bottom: 0; }
}
@media (max-width: 575px) {
    .el-opis-card, .el-param-card { padding: 1.15rem 1rem; }
    #product .el-param-card table tr { grid-template-columns: 1fr; }
    #product .el-param-card table th { padding-bottom: .1rem !important; }
    #product .el-param-card table td { padding-top: 0 !important; }
}
/* ograniczony ruch — nic nie unosi się */
@media (prefers-reduced-motion: reduce) { .el-prod__bitem:hover, .el-prod__pdf:hover { transform: none; } .el-prod__bitem:hover i { transform: none; } }

/* =========================================================================
   81. STRONA PRODUKTU — poprawki po uwagach klienta: karta zdjęcia sięga do
   dolnej krawędzi ramki po prawej (bez „wcięcia"), prawa ramka kompaktowa,
   „brutto" w linii ceny, miejsce pod przyszły „Dodaj do koszyka".
   ========================================================================= */
#product .el-prod__top { display: flex; flex-wrap: wrap; align-items: stretch; }
#product .el-prod__media { display: flex; }
#product .el-prod__media #content.page-content { flex: 1 1 auto; height: auto; display: flex; flex-direction: column; justify-content: center; margin: 0; }
#product .el-prod__info { display: flex; flex-direction: column; }
#product .el-prod__info .product-information { padding: 1.1rem 1.25rem; margin: 0; }
#product .el-prod__info .product-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; margin: 0 0 .9rem; }
#product .el-prod__info .product-prices .tax-shipping-delivery-label, #product .el-prod__info .product-prices .tax-label { margin: 0; display: inline; }
#product .el-prod__short, #product .el-prod__short p { font-size: .92rem; line-height: 1.5; margin: 0 0 .8rem; }
#product .el-prod__info .social-sharing { margin: .25rem 0 .9rem; }
#product .el-prod__info .social-sharing li { width: 32px; height: 32px; background-size: 16px; }
#product .el-prod__reassurance .blockreassurance_product { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem 1rem; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) { padding: .3rem 0; gap: .6rem; align-items: center; }
#product .el-prod__reassurance .blockreassurance_product > .clearfix { display: none; }
#product .el-prod__reassurance .item-product { width: 34px; height: 34px; flex-basis: 34px; }
#product .el-prod__reassurance .item-product img, #product .el-prod__reassurance .item-product svg { width: 17px; height: 17px; }
#product .el-prod__reassurance .block-title { font-size: .84rem; }
#product .el-prod__reassurance .block-title + p, #product .el-prod__reassurance .block-content p { font-size: .76rem; line-height: 1.35; }
#product .el-prod__info .product-add-to-cart:empty { display: none; }
@media (max-width: 767px) { #product .el-prod__media #content.page-content { justify-content: flex-start; } #product .el-prod__reassurance .blockreassurance_product { grid-template-columns: 1fr; } }

/* =========================================================================
   82. STRONA PRODUKTU — prawa ramka kończy się na linii karty zdjęcia;
   gwarancje jako trzy zwarte kolumny (ikona + tytuł, opis pod tytułem).
   ========================================================================= */
#product .el-prod__info .product-information { flex: 1 1 auto; margin-bottom: 0; display: flex; flex-direction: column; }
#product .el-prod__reassurance { margin-top: auto; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) { display: grid; grid-template-columns: 34px 1fr; column-gap: .6rem; row-gap: .15rem; align-items: start; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) .item-product { grid-row: 1 / span 2; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) .block-title { grid-column: 2; margin: 0; line-height: 1.3; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) p { grid-column: 2; margin: 0; }
@media (max-width: 767px) { #product .el-prod__info .product-information { flex: none; } }

/* =========================================================================
   83. STRONA PRODUKTU — tabela parametrów ZWARTA (sekcja 38 dawała th width:34 %
   i zielony pasek ::before, co w siatce łamało etykiety słowo po słowie),
   „Udostępnij" w pasie obok Zapytań, logo producenta jako pozycja pasa.
   ========================================================================= */
#product .el-param-card table th, #product .el-param-card table td { position: static; width: auto !important; min-width: 0; padding: .5rem .85rem !important; font-size: .86rem; line-height: 1.35; }
#product .el-param-card table th::before, #product .el-param-card table td::before { display: none !important; content: none !important; }
#product .el-param-card table tr { grid-template-columns: minmax(150px, 42%) 1fr; }
#product .el-param-card table tr:nth-child(even) th, #product .el-param-card table tr:nth-child(even) td, #product .el-param-card table tr:hover th, #product .el-param-card table tr:hover td { background: transparent !important; }
#product .el-param-card table th { color: var(--k-900) !important; font-weight: 600 !important; }
#product .el-param-card table td { color: var(--k-700) !important; font-weight: 400 !important; }
.el-param-card .el-prod__h { margin-bottom: .8rem; }
.el-opis-card, .el-param-card { padding: 1.35rem 1.6rem; }
/* udostępnij w pasie */
.el-prod__share { display: flex; align-items: center; }
.el-prod__share .product-additional-info { margin: 0; }
.el-prod__share .social-sharing { display: flex; align-items: center; gap: .5rem; margin: 0; }
.el-prod__share .social-sharing span { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-deep); margin-right: .25rem; }
.el-prod__share .social-sharing ul { display: flex; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.el-prod__share .social-sharing li { width: 40px; height: 40px; margin: 0; border: 1px solid var(--g); background-color: #FFFFFF; border-radius: 50%; box-shadow: none; background-size: 18px; background-position: center; background-repeat: no-repeat; transition: transform var(--tf), border-color var(--tf); }
.el-prod__share .social-sharing li:hover { transform: translateY(-2px); border-color: var(--g-deep); }
.el-prod__share .social-sharing li a { display: block; width: 100%; height: 100%; font-size: 0; }
html[data-el-theme="dark"] .el-prod__share .social-sharing span { color: var(--g-neon); }
html[data-el-theme="dark"] .el-prod__share .social-sharing li { background-color: #F4F6F8; border-color: var(--g-neon); }
/* producent w pasie: logo w miękkiej ramce jak ikony, podpis jak reszta */
.el-prod__brand { display: none; }
.el-prod__bitem--brand .el-prod__brandbox { display: flex; align-items: center; justify-content: center; width: 112px; height: 52px; background: #FFFFFF; border: 1px solid rgba(18,146,95,.25); border-radius: var(--r-sm); padding: 0 .5rem; }
.el-prod__bitem--brand img { display: block; width: 96px; height: 46px; object-fit: cover; }
.el-prod__bitem--brand:hover .el-prod__brandbox { border-color: var(--g); }
@media (max-width: 991px) { .el-prod__share { width: 100%; justify-content: center; } }

/* =========================================================================
   84. STRONA PRODUKTU — pas mieści się w jednym wierszu na 1366 px
   (mniejsze odstępy; „Wróć" nie spada do drugiego wiersza)
   ========================================================================= */
.el-prod__band { gap: 1.1rem 1.4rem; padding: 1.25rem 1.5rem; }
.el-prod__bitem { min-width: 76px; }
.el-prod__pdf { padding: .7rem 1.1rem; min-height: 52px; }
.el-prod__share .social-sharing li { width: 36px; height: 36px; background-size: 16px; }
@media (min-width: 1200px) { .el-prod__band { flex-wrap: nowrap; } .el-prod__back { flex: 0 0 auto; } }

/* =========================================================================
   85. STRONA PRODUKTU — PAS przeprojektowany i wpasowany w język strony:
   biała karta z konturem (jak „Opis" i „Parametry"), podzielona kreskami na
   równe pola: Producent | Dostawa | Gwarancja | Poradnik | Zapytania | Udostępnij;
   ikony w jasnozielonych kółkach 44 px, podpisy jednolite; po prawej pigułki
   „Karta katalogowa" (jak CTA w nagłówku) i „Wróć". Zero cieni na karcie.
   ========================================================================= */
.el-prod__band {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
    background: var(--w); border: 1px solid var(--s-200); border-radius: var(--r-lg);
    padding: 0; margin: 1.5rem 0; overflow: hidden; box-shadow: none;
}
html[data-el-theme="dark"] .el-prod__band { background: var(--w); border-color: rgba(255,255,255,.12); }
.el-prod__bitem, .el-prod__share {
    flex: 1 1 0; min-width: 118px; min-height: 0; padding: 1rem .6rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    border-left: 1px solid var(--s-200); text-decoration: none;
    color: var(--k-800); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    transition: background-color var(--tf), color var(--tf), transform var(--tf);
}
.el-prod__bitem--brand { border-left: 0; }
.el-prod__bitem span, .el-prod__share .social-sharing span { color: var(--k-800); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.el-prod__bitem i {
    width: 44px; height: 44px; font-size: 22px; line-height: 1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--g-50); color: var(--g-deep);
    transition: background-color var(--tf), color var(--tf), transform var(--tm);
}
.el-prod__bitem:hover { transform: none; background: var(--g-50); color: var(--g-deep); }
.el-prod__bitem:hover i { background: var(--g); color: #FFFFFF; transform: none; }
.el-prod__bitem:hover span { color: var(--g-deep); }
html[data-el-theme="dark"] .el-prod__bitem, html[data-el-theme="dark"] .el-prod__share { border-left-color: rgba(255,255,255,.1); color: var(--k-800); }
html[data-el-theme="dark"] .el-prod__bitem i { background: rgba(34,201,137,.14); color: var(--g-neon); }
html[data-el-theme="dark"] .el-prod__bitem:hover { background: rgba(34,201,137,.08); }
html[data-el-theme="dark"] .el-prod__bitem:hover i { background: var(--g-neon); color: #0B1A12; }
/* producent: logo bez pudełka, tej samej wysokości co kółka ikon */
.el-prod__bitem--brand .el-prod__brandbox { width: auto; height: 44px; border: 0; background: transparent; padding: 0; border-radius: 0; }
.el-prod__bitem--brand img { width: 94px; height: 44px; object-fit: cover; }
html[data-el-theme="dark"] .el-prod__bitem--brand .el-prod__brandbox { background: #FFFFFF; border-radius: var(--r-sm); padding: 0 .4rem; }
/* udostępnij: trzy kółka w kolorze strony (bez szarego sprite'a modułu), podpis pod nimi jak w innych polach */
.el-prod__share { justify-content: center; }
.el-prod__share .product-additional-info { width: 100%; }
.el-prod__share .social-sharing { flex-direction: column; align-items: center; gap: .55rem; margin: 0; }
.el-prod__share .social-sharing span { order: 2; margin: 0; }
.el-prod__share .social-sharing ul { order: 1; gap: .4rem; }
.el-prod__share .social-sharing li {
    width: 36px; height: 36px; position: relative; border-radius: 50%;
    border: 1px solid var(--g-100); background: var(--g-50) !important; background-image: none !important;
    transition: background-color var(--tf), border-color var(--tf), transform var(--tf);
}
.el-prod__share .social-sharing li a { display: block; width: 100%; height: 100%; font-size: 0; color: transparent; }
.el-prod__share .social-sharing li::before {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    font-family: var(--font); font-weight: 800; font-size: .82rem; line-height: 1; color: var(--g-deep); text-transform: none;
}
.el-prod__share .social-sharing li.facebook::before { content: "f"; }
.el-prod__share .social-sharing li.twitter::before { content: "X"; }
.el-prod__share .social-sharing li.pinterest::before { content: "P"; }
.el-prod__share .social-sharing li:hover { background: var(--g) !important; border-color: var(--g); transform: translateY(-2px); }
.el-prod__share .social-sharing li:hover::before { color: #FFFFFF; }
html[data-el-theme="dark"] .el-prod__share .social-sharing li { background: rgba(34,201,137,.14) !important; border-color: transparent; }
html[data-el-theme="dark"] .el-prod__share .social-sharing li::before { color: var(--g-neon); }
html[data-el-theme="dark"] .el-prod__share .social-sharing li:hover { background: var(--g-neon) !important; }
html[data-el-theme="dark"] .el-prod__share .social-sharing li:hover::before { color: #0B1A12; }
/* prawa strona: pigułki jak CTA w nagłówku */
.el-prod__pdf, .el-prod__back { flex: 0 0 auto; align-self: center; }
.el-prod__pdf {
    margin: 0 .75rem 0 auto; min-height: 50px; padding: .7rem 1.35rem .7rem 1.1rem;
    border-radius: var(--pill); background: var(--g); color: #FFFFFF !important; box-shadow: var(--sh-g);
    font-size: .74rem; letter-spacing: .08em; gap: .6rem;
}
.el-prod__pdf i { font-size: 24px; }
.el-prod__pdf:hover { background: var(--g-dark); transform: translateY(-2px); }
.el-prod__back { margin: 0 1.25rem 0 0; min-height: 46px; padding: .55rem 1.15rem .55rem .9rem; font-size: .74rem; }
html[data-el-theme="dark"] .el-prod__pdf { background: var(--g-dark); box-shadow: none; }
html[data-el-theme="dark"] .el-prod__pdf:hover { background: var(--g); }
@media (min-width: 1200px) { .el-prod__band { flex-wrap: nowrap; } .el-prod__pdf { margin-left: 1.25rem; } }
@media (max-width: 1199px) {
    .el-prod__bitem, .el-prod__share { flex: 1 1 33.333%; border-top: 1px solid var(--s-200); }
    .el-prod__bitem--brand, .el-prod__bitem:nth-child(2), .el-prod__bitem:nth-child(3) { border-top: 0; }
    .el-prod__bitem:nth-child(4) { border-left: 0; }
    .el-prod__pdf, .el-prod__back { width: calc(100% - 2rem); justify-content: center; margin: .9rem 1rem 0; }
    .el-prod__back { margin: .6rem 1rem 1rem; }
    html[data-el-theme="dark"] .el-prod__bitem, html[data-el-theme="dark"] .el-prod__share { border-top-color: rgba(255,255,255,.1); }
}
@media (max-width: 575px) {
    .el-prod__bitem, .el-prod__share { flex: 1 1 50%; min-width: 0; padding: .9rem .4rem; }
    .el-prod__bitem:nth-child(3) { border-top: 1px solid var(--s-200); border-left: 0; }
    .el-prod__bitem:nth-child(4) { border-left: 1px solid var(--s-200); }
    .el-prod__bitem:nth-child(5) { border-left: 0; }
    .el-prod__bitem i { width: 40px; height: 40px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .el-prod__share .social-sharing li:hover, .el-prod__pdf:hover { transform: none; } }

/* =========================================================================
   86. STRONA PRODUKTU — panel zakupu (.el-buy) w prawej ramce, w miejscu
   usuniętego krótkiego zdania. Dziś (tryb katalogu): dostępność + „Zapytaj
   o ten produkt" + telefon. Po wyłączeniu trybu katalogu: ilość, „Dodaj do
   koszyka", „Kup teraz" — bez zmian w szablonie.
   ========================================================================= */
#product .el-prod__short:empty, #product .el-prod__short:not(:has(*)):empty { display: none; }
#product .el-prod__info .product-add-to-cart.el-buy { display: block !important; margin: 0 0 1rem; }
#product .el-prod__info .product-add-to-cart:empty { display: none; }
.el-buy__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.25rem; }
.el-buy__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* tryb katalogu */
.el-buy__status { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.el-buy__status i { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--g-50); color: var(--g-deep); font-size: 22px; display: flex; align-items: center; justify-content: center; }
.el-buy__status div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.el-buy__status strong { color: var(--k-900); font-size: .95rem; font-weight: 700; }
.el-buy__status span { color: var(--s-600); font-size: .8rem; }
#product .el-buy .btn.el-buy__ask, #product .el-buy .btn.el-buy__call, #product .el-buy .btn.el-buy__add, #product .el-buy .btn.el-buy__now {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: .7rem 1.25rem; border-radius: var(--pill); border: 0;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--tf), color var(--tf), transform var(--tf), box-shadow var(--tm);
}
#product .el-buy .btn.el-buy__ask, #product .el-buy .btn.el-buy__add { background: var(--g); color: #FFFFFF; box-shadow: var(--sh-g); }
#product .el-buy .btn.el-buy__ask:hover, #product .el-buy .btn.el-buy__add:hover { background: var(--g-dark); transform: translateY(-2px); }
#product .el-buy .btn.el-buy__call, #product .el-buy .btn.el-buy__now { background: transparent; color: var(--g-deep); box-shadow: inset 0 0 0 2px var(--g); }
#product .el-buy .btn.el-buy__call:hover, #product .el-buy .btn.el-buy__now:hover { background: var(--g); color: #FFFFFF; }
#product .el-buy .btn i { font-size: 20px; }
#product .el-buy .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
html[data-el-theme="dark"] .el-buy__status i { background: rgba(34,201,137,.14); color: var(--g-neon); }
html[data-el-theme="dark"] #product .el-buy .btn.el-buy__ask, html[data-el-theme="dark"] #product .el-buy .btn.el-buy__add { background: var(--g-dark); box-shadow: none; }
html[data-el-theme="dark"] #product .el-buy .btn.el-buy__ask:hover, html[data-el-theme="dark"] #product .el-buy .btn.el-buy__add:hover { background: var(--g); }
html[data-el-theme="dark"] #product .el-buy .btn.el-buy__call, html[data-el-theme="dark"] #product .el-buy .btn.el-buy__now { color: var(--g-neon); box-shadow: inset 0 0 0 2px var(--g-neon); }
html[data-el-theme="dark"] #product .el-buy .btn.el-buy__call:hover, html[data-el-theme="dark"] #product .el-buy .btn.el-buy__now:hover { background: var(--g-neon); color: #0B1A12; }

/* po wyłączeniu trybu katalogu: ilość + dwa przyciski */
.el-buy__qty { display: flex; align-items: center; gap: .6rem; }
.el-buy__label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-800); margin: 0; }
#product .el-buy .qty { margin: 0; }
#product .el-buy #quantity_wanted { width: 84px; height: 48px; border: 2px solid var(--s-200); border-radius: var(--r-sm); text-align: center; font-weight: 700; color: var(--k-900); background: var(--w); }
#product .el-buy #quantity_wanted:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); outline: 0; }
#product .el-buy .product-availability .alert { margin: .9rem 0 0; border-radius: var(--r-sm); padding: .6rem .9rem; font-size: .88rem; }
#product .el-buy .product-minimal-quantity:empty { display: none; }
@media (max-width: 575px) {
    .el-buy__row { flex-direction: column; align-items: stretch; }
    .el-buy__actions { flex-direction: column; }
    #product .el-buy .btn.el-buy__ask, #product .el-buy .btn.el-buy__call, #product .el-buy .btn.el-buy__add, #product .el-buy .btn.el-buy__now { width: 100%; }
}
/* prawa ramka: panel u góry, gwarancje na dole */
#product .el-prod__info .product-information { justify-content: space-between; gap: 1rem; }
#product .el-prod__reassurance { margin-top: 0; padding-top: .9rem; border-top: 1px solid var(--s-100); }
html[data-el-theme="dark"] #product .el-prod__reassurance { border-top-color: rgba(255,255,255,.1); }

/* =========================================================================
   87. STRONA PRODUKTU — udostępnij: tylko nasze kółka z literami; sprite
   modułu i wcześniejsze ikony motywu (1370–1380, ::after/::before na li i a)
   wyłączone, żeby nic nie nakładało się na litery.
   ========================================================================= */
.el-prod__share .social-sharing li, .el-prod__share .social-sharing li:hover,
.el-prod__share .social-sharing li.facebook, .el-prod__share .social-sharing li.twitter, .el-prod__share .social-sharing li.pinterest,
.el-prod__share .social-sharing li.facebook:hover, .el-prod__share .social-sharing li.twitter:hover, .el-prod__share .social-sharing li.pinterest:hover,
.el-prod__share .social-sharing li a, .el-prod__share .social-sharing li a:hover { background-image: none !important; filter: none !important; }
.el-prod__share .social-sharing li::after, .el-prod__share .social-sharing li a::before, .el-prod__share .social-sharing li a::after { content: none !important; display: none !important; }
.el-prod__share .social-sharing li a { text-indent: -9999px; overflow: hidden; color: transparent !important; }
.el-prod__share .social-sharing li i, .el-prod__share .social-sharing li svg, .el-prod__share .social-sharing li img { display: none !important; }
html[data-el-theme="dark"] .el-prod__share .social-sharing li { filter: none !important; }

/* =========================================================================
   88. KONTAKT — mapa w kolorze (właściciel): zdjęty filtr szarości z sekcji 74
   i wcześniejsze filtry trybu ciemnego; iframe Google bez żadnego filtra.
   ========================================================================= */
.el-contact__map iframe, .el-contact--v2 .el-contact__map iframe, html[data-el-theme="dark"] .el-contact__map iframe, html[data-el-theme="dark"] .el-contact--v2 .el-contact__map iframe { filter: none !important; }

/* =========================================================================
   89. KAFEL — etykieta dostępności („Produkt dostępny na zamówienie") była za
   duża i wjeżdżała pod serce; teraz mała, dwuwierszowa, jasnozielona jak na
   karcie produktu, z miejscem na serce po prawej.
   ========================================================================= */
.el-card--v2 .el-card__media .product-flags, .el-card .el-card__media .product-flags { top: .7rem; left: .7rem; right: 64px; z-index: 5; max-width: calc(100% - 64px - .7rem); }
.el-card--v2 .product-flag, .el-card .product-flag {
    font-size: .6rem !important; letter-spacing: .05em; line-height: 1.3; padding: .28rem .55rem !important;
    white-space: normal; text-align: left; max-width: 100%; border-radius: 6px;
}
.el-card--v2 .product-flag.out_of_stock, .el-card .product-flag.out_of_stock, .product-flag.out_of_stock {
    background: #E3F3EA !important; color: var(--g-deep) !important; border: 1px solid rgba(18,146,95,.25) !important;
    text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
html[data-el-theme="dark"] .el-card .product-flag.out_of_stock, html[data-el-theme="dark"] .product-flag.out_of_stock { background: rgba(34,201,137,.18) !important; color: var(--g-neon) !important; border-color: transparent !important; }
/* to samo na karcie produktu, gdyby flaga dostępności pojawiła się obok chipa */
#product .product-flags .product-flag.out_of_stock { display: none; }

/* =========================================================================
   90. STRONA PRODUKTU — ikony gwarancji równo (moduł daje .item-product float:left,
   padding-top 5px i obrazek 35×35 — stąd przesunięcia); kółko 34 px, ikona 18 px
   wyśrodkowana, kółko wyrównane do pierwszej linii tytułu.
   ========================================================================= */
#product .el-prod__reassurance .item-product {
    float: none !important; padding: 0 !important; margin: 0 !important;
    width: 34px !important; height: 34px !important; flex: 0 0 34px;
    display: inline-flex !important; align-items: center; justify-content: center; align-self: start; margin-top: .05rem !important;
    border-radius: 50%; background: #E3F3EA; overflow: hidden;
}
#product .el-prod__reassurance .item-product img, #product .el-prod__reassurance .item-product svg,
#product .el-prod__reassurance .blockreassurance_product .item-product svg { width: 18px !important; height: 18px !important; display: block; margin: 0 !important; padding: 0 !important; }
#product .el-prod__reassurance .blockreassurance_product > div:not(.clearfix) { grid-template-columns: 34px 1fr; align-items: start; }
#product .el-prod__reassurance .block-title { padding-top: .2rem; }
html[data-el-theme="dark"] #product .el-prod__reassurance .item-product { background: rgba(34,201,137,.14); }

/* =========================================================================
   91. UDOSTĘPNIJ — classic wiesza brandowe SVG na li::before (.facebook::before,
   .pinterest::before, .twitter…) — tam, gdzie stoi nasza litera; tło pseudoelementu
   zerujemy, zostaje sama litera w kółku.
   ========================================================================= */
.el-prod__share .social-sharing li::before, .el-prod__share .social-sharing li.facebook::before, .el-prod__share .social-sharing li.twitter::before, .el-prod__share .social-sharing li.pinterest::before, .el-prod__share .social-sharing li:hover::before { background: none !important; background-image: none !important; width: auto; height: auto; }

/* =========================================================================
   92. STRONA PRODUKTU — poprawki po audycie (kaskada, dostępność, tryb ciemny,
   ograniczony ruch, druk). Oznaczenia A1.x / A2.x = punkty raportów audytorów.
   ========================================================================= */
/* A1.2 tytuł: sekcja 40 (#product #main h1.h1) przebijała kompaktowy rozmiar */
#product #main .el-prod__title.h1 { font-size: clamp(1.15rem, .9rem + 1vw, 1.55rem); line-height: 1.3; margin: 0 0 1rem; }
@media (max-width: 575px) { #product #main .el-prod__title.h1 { font-size: 1.15rem; } }
/* A1.8 cena: sekcja 40 przebijała 1.55rem */
#product .el-prod__info .product-prices .current-price span:first-child, #product .el-prod__info .current-price-value { font-size: 1.55rem; }
/* A1.3 tabela: nieparzysta liczba wierszy — ostatni na całą szerokość, bez pustego pola */
@media (min-width: 992px) {
    #product .el-param-card table tbody tr:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--s-200); }
    #product .el-param-card table tbody tr:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; grid-template-columns: minmax(150px, 21%) 1fr; }
    html[data-el-theme="dark"] #product .el-param-card table tbody tr:nth-last-child(2):nth-child(even) { border-bottom-color: rgba(255,255,255,.12); }
}
/* A2.5 telefon: tabela w jednej kolumnie (sekcja 83 przebijała 80.5) */
@media (max-width: 575px) {
    #product .el-param-card table tr { grid-template-columns: 1fr; }
    #product .el-param-card table th { padding: .5rem .85rem .1rem !important; }
    #product .el-param-card table td { padding: 0 .85rem .55rem !important; }
}
/* A1.4 / A2.2 wiersze tabeli nie czekają na obserwator przy ograniczonym ruchu i w druku */
@media (prefers-reduced-motion: reduce), print {
    .el-cascade:not(.is-revealed) :is(tr, dt, dd) { opacity: 1; transform: none; }
    .el-cascade.is-revealed :is(tr, dt, dd) { transition: none; }
}
html.el-ruch-ogr .el-cascade:not(.is-revealed) :is(tr, dt, dd) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    #product .blockreassurance_product > div:not(.clearfix), #product .product-accessories, #product #content.page-content { animation-name: elV2Fade; }
    .product-cover:hover img, #product .blockreassurance_product > div:hover .item-product { transform: none; }
}
@media print {
    .el-cascade :is(tr, dt, dd), .el-reveal, #product .product-accessories, #product .blockreassurance_product > div { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
/* A1.5 telefon: flaga „Nowy" pod chipem dostępności, nie na nim */
@media (max-width: 767px) { #product .el-prod .product-cover .product-flags, #product .el-prod .product-flags { top: 3.2rem; right: .9rem; left: auto; } }
/* A1.6 / A1.10 ikony gwarancji: kolor strony (moduł daje czarny fill), bez &nbsp; przesuwającego glif */
#product .el-prod__reassurance .item-product { font-size: 0; line-height: 0; }
#product .el-prod__reassurance .item-product svg, #product .el-prod__reassurance .item-product svg path:not([fill="none"]) { fill: var(--g-deep) !important; }
html[data-el-theme="dark"] #product .el-prod__reassurance .item-product svg, html[data-el-theme="dark"] #product .el-prod__reassurance .item-product svg path:not([fill="none"]) { fill: var(--g-neon) !important; }
/* A1.7 pusta sekcja rabatów wnosiła 24 px marginesu */
#product .el-prod__info .product-discounts, #product .el-prod__info .product-variants { margin: 0; }
#product .el-prod__info .product-discounts:not(:has(*)), #product .el-prod__info .product-variants:not(:has(*)) { display: none; }
/* A1.11 tryb ciemny: nazwa serii zielona, nagłówki kart jasne (blok 2318 przebijał) */
html[data-el-theme="dark"] .product-description .el-opis__seria strong { color: var(--g-neon) !important; }
html[data-el-theme="dark"] .product-description .el-prod__h { color: var(--k-900) !important; }
/* A1.13 pas: kreski niezależne od tego, czy jest producent / załącznik */
.el-prod__band > .el-prod__bitem:first-child { border-left: 0; border-top: 0; }
.el-prod__share + .el-prod__back { margin-left: 1.25rem; }
@media (max-width: 1199px) {
    .el-prod__band > .el-prod__bitem:nth-child(-n+3), .el-prod__band > .el-prod__share:nth-child(-n+3) { border-top: 0; }
    .el-prod__band > .el-prod__bitem:nth-child(3n+1), .el-prod__band > .el-prod__share:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 575px) {
    .el-prod__band > .el-prod__bitem:nth-child(odd), .el-prod__band > .el-prod__share:nth-child(odd) { border-left: 0; }
    .el-prod__band > .el-prod__bitem:nth-child(even), .el-prod__band > .el-prod__share:nth-child(even) { border-left: 1px solid var(--s-200); }
    .el-prod__band > .el-prod__bitem:nth-child(-n+2) { border-top: 0; }
    .el-prod__band > .el-prod__bitem:nth-child(n+3), .el-prod__band > .el-prod__share:nth-child(n+3) { border-top: 1px solid var(--s-200); }
}
/* A1.14 galeria z 4+ zdjęciami: miniatury przewijane */
.el-prod:not(.el-prod--one-img) .js-qv-mask, .el-prod:not(.el-prod--one-img) .js-qv-mask.scroll { overflow-x: auto; width: 100%; margin: 0; scrollbar-width: thin; padding-bottom: .25rem; }
/* A1.15 fallback bez opisu: product-details.tpl w estetyce kart (bez cieni) */
.el-prod .el-param-card .product-manufacturer, .el-prod .el-param-card .product-quantities, .el-prod .el-param-card .product-features .h6 { display: none; }
#product .el-prod .el-param-card .data-sheet { box-shadow: none; border: 1px solid var(--s-200); border-radius: var(--r-sm); }
#product .el-prod .el-param-card .data-sheet dt.name { box-shadow: none; background: transparent; color: var(--k-900); font-weight: 600; }
#product .el-prod .el-param-card .data-sheet dt.name, #product .el-prod .el-param-card .data-sheet dd.value { padding: .5rem .85rem; font-size: .86rem; line-height: 1.35; }
/* A1.16 / A2.9 prawa ramka i karta zdjęcia: kontur jak inne karty, bez cienia */
#product .el-prod__info .product-information { box-shadow: none; border: 1px solid var(--s-200); }
html[data-el-theme="dark"] #product .el-prod__media #content.page-content, html[data-el-theme="dark"] #product .el-prod__info .product-information { border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
/* A2.1 kontrast tekstu na zieleni: --g 3,96 → --g-dark 5,36, hover #0B6E47 */
.el-prod__pdf, #product .el-buy .btn.el-buy__ask, #product .el-buy .btn.el-buy__add { background: var(--g-dark); }
.el-prod__pdf:hover, #product .el-buy .btn.el-buy__ask:hover, #product .el-buy .btn.el-buy__add:hover { background: #0B6E47; }
.el-prod__back:hover, #product .el-buy .btn.el-buy__call:hover, #product .el-buy .btn.el-buy__now:hover { background: var(--g-dark); color: #FFFFFF; }
html[data-el-theme="dark"] .el-prod__pdf:hover, html[data-el-theme="dark"] #product .el-buy .btn.el-buy__ask:hover, html[data-el-theme="dark"] #product .el-buy .btn.el-buy__add:hover { background: #0B6E47; }
/* A2.4 kółka udostępniania: pole klikane 44×44 przy kółku 36 */
.el-prod__share .social-sharing li { position: relative; }
.el-prod__share .social-sharing li a { position: absolute; inset: -4px; width: auto; height: auto; border-radius: 50%; }
.el-prod__share .social-sharing ul { gap: .6rem; }
/* A2.6 fokus w pasie rysowany do wewnątrz (pas ma overflow: hidden) */
.el-prod__bitem:focus-visible { outline-offset: -5px; border-radius: var(--r-sm); }
/* A2.8 chip czytelniejszy */
#product .el-prod__avail { font-size: .72rem; }
/* A2.13 flaga dostępności na kaflach nie mniejsza niż 10,9 px */
.el-card--v2 .product-flag, .el-card .product-flag { font-size: .68rem !important; }
/* A2.14 tablet: karta zdjęcia nie rozciąga się do wysokości ramki */
@media (min-width: 768px) and (max-width: 991px) {
    #product .el-prod__top { align-items: flex-start; }
    #product .el-prod__media #content.page-content { justify-content: flex-start; }
}
/* A2.15 logo producenta w ciemnym na złamanej bieli */
html[data-el-theme="dark"] .el-prod__bitem--brand .el-prod__brandbox { background: #F4F6F8; border: 1px solid rgba(255,255,255,.1); }

/* =========================================================================
   93. KAFLE MNIEJSZE (właściciel 2026-09-06: „karty produktu są za duże, ale
   wszystko dopasować, żeby się nie rozjeżdżało"; po pierwszej wersji:
   „przesadziłeś, zrób 10 % większe" — to jest wersja po korekcie).
   Było: siatka auto-fill min 272 px, gap 24 → 4 kolumny po 300 px na 1366
   (342 px od 1536 w górę), kafel 478–520 px wysoki, zdjęcie 258 px, a na
   telefonie JEDNA kolumna 343 × 535. Teraz: strona główna 5 / 4 / 3 / 2
   kolumny (≥1200 / ≥992 / ≥640 / <640), listingi auto-fill min 216 px
   (kategoria 1366: 4 × 225 zamiast 3 × 309), gap 20 (telefon 12). Kafel na
   1366: 238 px, od 1536: 272 px (pierwsza wersja dawała 6 kolumn po 223),
   telefon 2 × 166 px. Wnętrze o stopień mniejsze niż pierwotnie, ale o ok.
   10 % większe niż w pierwszej wersji (nazwa 0,95 rem, cena 1,05 rem, „Zobacz"
   36 px, serce 40 px, pasek podglądu 36 px, zdjęcie z węższym marginesem).
   „Zobacz" zostaje samą strzałką, gdy kafel jest węższy niż 232 px
   (@container na .el-grid__item; bez wsparcia zapytań kontenerowych napis nie
   wychodzi poza kafel — stopka ma flex-wrap). Kontener = warstwa (layout
   containment), więc kafel pod kursorem dostaje z-index, żeby cień nie chował
   się pod sąsiadem. Popularne produkty: 12 w konfiguracji; przy 5 kolumnach
   widać 10, przy 3 — 9, przy 2 — 8 (koniec z sierotą w ostatnim rzędzie).
   Cele dotykowe ≥ 44 px bez zmian.
   ========================================================================= */
/* 93.0 siatka */
.products.el-grid, .el-grid { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)) !important; gap: 1.25rem !important; }
.el-grid > .el-grid__item, .el-grid > .js-product { container-type: inline-size; }
.el-grid > .el-grid__item:hover, .el-grid > .el-grid__item:focus-within { z-index: 3; }
@media (max-width: 639px) { .products.el-grid, .el-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; } }
@media (min-width: 640px) and (max-width: 767px) { .products.el-grid, .el-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; } }
/* strona główna: bez lewej kolumny, więc liczba kolumn jawna (sekcja 50 daje 2 na 768–991 — tu 3) */
@media (min-width: 768px) and (max-width: 991px) { #index .featured-products .el-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; } }
@media (min-width: 992px) and (max-width: 1199px) { #index .featured-products .el-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) {
    #index .featured-products .el-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    #index .featured-products .el-grid > .js-product:nth-child(n+11) { display: none !important; }
}
@media (min-width: 640px) and (max-width: 991px) { #index .featured-products .el-grid > .js-product:nth-child(n+10) { display: none !important; } }
@media (max-width: 639px) { #index .featured-products .el-grid > .js-product:nth-child(n+9) { display: none !important; } }

/* 93.1 wnętrze kafla — o stopień mniejsze niż pierwotnie */
.el-card--v2 { --el-pasek-h: 36px; }
.el-card--v2 .el-card__img { padding: .75rem .75rem .55rem; }
.el-card--v2 .el-card__body { padding: .8rem 1rem .9rem; gap: .35rem; }
.el-card--v2 .el-card__ref { font-size: .78rem; gap: .45rem; }
.el-card--v2 .el-card__ref::before { font-size: .72rem; letter-spacing: .1em; }
.el-card--v2 .el-card__title, .el-card--v2.product-miniature .el-card__title { margin: .05rem 0 0; font-size: .95rem; line-height: 1.35; min-height: calc(2 * 1.35em); }
.el-card--v2 .el-card__title a, .el-card--v2.product-miniature .el-card__title a { line-height: 1.35; }
.el-card--v2 .el-card__foot { padding-top: .7rem; gap: .5rem; }
.el-card--v2 .el-card__price, .el-card--v2 .el-card__price .price { font-size: 1.05rem; }
.el-card--v2 .el-card__price .regular-price { font-size: .78rem; }
.el-card--v2 .el-card__ask { font-size: .74rem; padding: .35rem .55rem; }
.el-card--v2 .el-card__cta { font-size: .74rem; letter-spacing: .08em; gap: .45rem; min-height: 36px; padding: 0 0 0 .35rem; }
.el-card--v2 .el-card__cta i { width: 36px; height: 36px; font-size: 18px; border-radius: 8px; }
.el-card--v2 .el-card__inner .wishlist-button-add { width: 40px; height: 40px; min-width: 40px; top: .75rem; right: .75rem; }
.el-card--v2 .el-card__inner .wishlist-button-add i, .el-card--v2 .el-card__inner .wishlist-button-add .material-icons { font-size: 19px; }
.el-card--v2 .el-card__media .product-flags, .el-card .el-card__media .product-flags { right: 56px; max-width: calc(100% - 56px - .7rem); }
.el-card--v2 .el-card__quick, .el-card--v2 .el-card__media .el-card__quick.quick-view { font-size: .74rem; }

/* 93.2 wąski kafel (poniżej 232 px): „Zobacz" jako sama strzałka (napis dla czytników) — liczone pod najdłuższą
   cenę w sklepie (7 562,42 zł, 11 znaków) */
@container (max-width: 231px) {
    .el-card--v2 .el-card__cta { padding: 0; gap: 0; justify-content: center; }
    .el-card--v2 .el-card__inner:hover .el-card__cta { gap: 0; }
    .el-card--v2 .el-card__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 93.3 dotyk / ≤991: cele 44 px jak dotąd (sekcja 71.6 leży wcześniej, więc powtórzone tu) */
@media (max-width: 991px), (hover: none) and (pointer: coarse) {
    .el-card--v2 .el-card__cta { min-height: 44px; }
    .el-card--v2 .el-card__cta i { width: 40px; height: 40px; }
    .el-card--v2 .el-card__inner .wishlist-button-add { width: 44px; height: 44px; min-width: 44px; }
    .el-card--v2 .el-card__inner .wishlist-button-add i, .el-card--v2 .el-card__inner .wishlist-button-add .material-icons { font-size: 20px; }
    .el-card--v2 .el-card__media .product-flags, .el-card .el-card__media .product-flags { right: 60px; max-width: calc(100% - 60px - .7rem); }
}
@media (min-width: 768px) and (max-width: 991px) {
    .el-card--v2 .el-card__cta { width: 44px; min-height: 44px; padding: 0; gap: 0; }
    .el-card--v2 .el-card__cta i { width: 44px; height: 44px; }
}

/* 93.4 telefon (kafel ok. 166 px): ciaśniej */
@media (max-width: 639px) {
    .el-card--v2 .el-card__img { padding: .6rem .6rem .45rem; }
    .el-card--v2 .el-card__body { padding: .65rem .75rem .75rem; gap: .25rem; }
    .el-card--v2 .el-card__ref { font-size: .7rem; gap: .35rem; }
    .el-card--v2 .el-card__ref::before { font-size: .62rem; }
    .el-card--v2 .el-card__title, .el-card--v2.product-miniature .el-card__title { font-size: .84rem; }
    .el-card--v2 .el-card__price, .el-card--v2 .el-card__price .price { font-size: .95rem; }
    .el-card--v2 .el-card__foot { padding-top: .55rem; gap: .4rem; }
    .el-card--v2 .el-card__media .el-card__hover,
    .el-card--v2 .el-card__media .el-card__hover.highlighted-informations,
    .el-card--v2 .el-card__media .highlighted-informations { inset: auto .45rem .45rem auto !important; }
}

/* 93.5 flaga dostępności na kaflu: sekcja 71.2 (li.product-flag.out_of_stock → #4A5160 !important, specyficzność
   wyższa niż w 89) wygrywała z jasnozielonym tłem z sekcji 89 — wychodził szary prostokąt z zielonym napisem
   (kontrast 1,6). Ta sama specyficzność co 71.2, później w pliku. */
.el-card--v2 .el-card__media .product-flags li.product-flag.out_of_stock, .el-card--v2 .el-card__media .product-flags .product-flag.out_of_stock,
.el-card .el-card__media .product-flags li.product-flag.out_of_stock { background: #E3F3EA !important; color: var(--g-deep) !important; border: 1px solid rgba(18,146,95,.25) !important; box-shadow: none; }
html[data-el-theme="dark"] .el-card--v2 .el-card__media .product-flags li.product-flag.out_of_stock, html[data-el-theme="dark"] .el-card--v2 .el-card__media .product-flags .product-flag.out_of_stock,
html[data-el-theme="dark"] .el-card .el-card__media .product-flags li.product-flag.out_of_stock { background: rgba(34,201,137,.18) !important; color: var(--g-neon) !important; border-color: transparent !important; }

/* 93.6 telefon/tablet: „Produkt dostępny na zamówienie" na kaflu 152 px układało się w 8 wierszy (78 × 109 px)
   i zakrywało zdjęcie — do 767 px flaga pokazuje krótsze „Na zamówienie" (tekst źródłowy zostaje dla czytników). */
@media (max-width: 767px) {
    .el-card .el-card__media .product-flags li.product-flag.out_of_stock { font-size: 0 !important; line-height: 0; padding: .3rem .5rem !important; }
    .el-card .el-card__media .product-flags li.product-flag.out_of_stock::after { content: "Na zamówienie"; display: block; font-size: .56rem; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; }
}

/* =========================================================================
   94. SLAJDER — kadrowanie grafik właściciela z 2026-09-06 (1748 × 900, urządzenie
   w prawej części kadru). Slajd ma 468 px wysokości przy pełnej szerokości, więc
   cover kadruje górę i dół — okno lekko opuszczone, żeby nie ucinać dołu
   urządzenia; na telefonie (375 × 455) cover kadruje boki — okno przesunięte
   w prawo, na urządzenie. Selektor po nazwie pliku w atrybucie style (moduł
   nie daje innego haka na konkretny slajd).
   ========================================================================= */
.el-slide__bg[style*="regulatory-dwunastawne-2026"] { background-position: 50% 60%; }
.el-slide__bg[style*="transformator-styropian-2026"] { background-position: 50% 55%; }
@media (max-width: 767px) {
    .el-slide__bg[style*="regulatory-dwunastawne-2026"] { background-position: 72% 50%; }
    .el-slide__bg[style*="transformator-styropian-2026"] { background-position: 66% 50%; }
}
/* 94.1 zasilacze DIN: słupy o zachodzie — słońce i horyzont w dolnej ćwiartce, więc okno opuszczone; na telefonie okno w prawo (słońce na 70 % szerokości) */
.el-slide__bg[style*="zasilacze-din-2026"] { background-position: 50% 72%; }
@media (max-width: 767px) { .el-slide__bg[style*="zasilacze-din-2026"] { background-position: 60% 50%; } }

/* =========================================================================
   95. SLAJDER — wysokość liczona od SZEROKOŚCI, nie od wysokości okna.
   Sekcja 34 dawała clamp(400px, 52vh, 560px): na ekranie 2048 px pas miał
   2048 × 468 = 4,4:1, a grafiki właściciela (2026-09-06) mają 1,94:1 — cover
   pokazywał 43 % wysokości zdjęcia i produkt był ucięty („tu ma być widać
   produkt na zdjęciu, dopasuj je"). Teraz 38vw (1366 → 519 px, 1536 → 584,
   2048 → 778; proporcja 2,63:1, widać 74 % wysokości zdjęcia), a pozycje okna
   przeliczone pod to: urządzenie na slajdzie regulatorów zajmuje 22–85 %
   wysokości, PCS 14–90 %, słońce i horyzont słupów 70–95 %, ZLDP 5–95 %,
   oprawa 30–70 %. Reguły desktopowe w @media, żeby nie nadpisać pozycji
   telefonu z sekcji 94. */
@media (min-width: 768px) {
    .el-slider { height: clamp(420px, 38vw, 780px); }
    .el-slide__bg[style*="regulatory-dwunastawne-2026"] { background-position: 50% 62%; }
    .el-slide__bg[style*="transformator-styropian-2026"] { background-position: 50% 52%; }
    .el-slide__bg[style*="zasilacze-din-2026"] { background-position: 50% 90%; }
    .el-slide__bg[style*="zldp-2026"] { background-position: 50% 50%; }
    .el-slide__bg[style*="oswietlenie-2026"] { background-position: 50% 50%; }
}
@media (max-width: 767px) {
    .el-slide__bg[style*="zldp-2026"] { background-position: 55% 50%; }
    .el-slide__bg[style*="oswietlenie-2026"] { background-position: 70% 50%; }
}
/* 95.1 telefon: okno 375 × 455 pokazuje 42 %% szerokości zdjęcia — regulator (55–87 %% szerokości) i PCS (45–97 %%) wyśrodkowane w oknie */
@media (max-width: 767px) {
    .el-slide__bg[style*="regulatory-dwunastawne-2026"] { background-position: 76% 50%; }
    .el-slide__bg[style*="transformator-styropian-2026"] { background-position: 80% 50%; }
}

/* =========================================================================
   96. SLAJDER — WYMIARY Z POWROTEM jak w sekcji 34 (właściciel: „nie chodziło
   mi o powiększenie galerii, tylko dopasowanie zdjęcia; wymiary mają wrócić"),
   a produkt dopasowany inaczej: zdjęcie skalowane na WYSOKOŚĆ pasa (auto 100 %),
   dosunięte do prawej, reszta pasa w kolorze lewej krawędzi zdjęcia (próbki GD
   z lewych 6 px: regulator #000000, PCS #1D1D1D, ZLDP #101112) z miękkim
   przejściem (::before o proporcji zdjęcia, gradient na lewych 32 %). Produkt
   jest widoczny w całości przy każdej szerokości pasa (2048 × 468 = 909 px
   zdjęcia + 1139 px tła; 1366 × 468 = 909 + 457), a tytuł i przycisk leżą na
   jednolitym tle. Słupy zostają w cover (pejzaż, okno 50 % 90 % z sekcji 95).
   Telefon bez zmian (pozycje x z 94 / 95.1). Uchyla regułę wysokości z 95.
   ========================================================================= */
@media (min-width: 768px) {
    .el-slider { height: clamp(400px, 52vh, 560px); }
    .el-slide__bg[style*="regulatory-dwunastawne-2026"],
    .el-slide__bg[style*="transformator-styropian-2026"],
    .el-slide__bg[style*="zldp-2026"] { background-size: auto 100%; background-position: right center; background-repeat: no-repeat; }
    .el-slide__bg[style*="regulatory-dwunastawne-2026"] { background-color: #000000; --el-edge: #000000; --el-ar: 1.942; }
    .el-slide__bg[style*="transformator-styropian-2026"] { background-color: #1D1D1D; --el-edge: #1D1D1D; --el-ar: 1.951; }
    .el-slide__bg[style*="zldp-2026"] { background-color: #101112; --el-edge: #101112; --el-ar: 1.874; }
    .el-slide__bg[style*="regulatory-dwunastawne-2026"]::before,
    .el-slide__bg[style*="transformator-styropian-2026"]::before,
    .el-slide__bg[style*="zldp-2026"]::before {
        content: ""; position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: var(--el-ar) / 1;
        background: linear-gradient(90deg, var(--el-edge) 0%, var(--el-edge) 5%, transparent 32%);
        pointer-events: none;
    }
}

/* =========================================================================
   97. LOGO — „ma się ruszać cały czas, fancy animacja, a po najechaniu zielone
   pioruny" (szef właściciela, 2026-09-06). Znacznik: w header.tpl za
   .el-brand__mark leży <svg class="el-brand__fx"> (100 × 100, viewBox 0 0 100 100,
   kafel logo zajmuje 24–76) z pierścieniem-orbitą (pathLength 100) i sześcioma
   piorunami-łamanymi wokół kafla. Spoczynek: kafel lekko płynie (±3 px, ±2°),
   po obwodzie kafla krąży zielona iskra (kreska 12/100, 3,2 s), ikona pioruna
   oddycha poświatą (3 s), zielony dywiz w nazwie mruga jak dioda (2,4 s).
   Najechanie / fokus: pioruny rysują się od zewnątrz do kafla (stroke-dashoffset
   100 → 0 w 0,2 s, kolejno co 70 ms) i migają w pętli 1,2 s, iskra przyspiesza
   (0,9 s), kafel drga (±5°, 0,5 s), ikona szarpie (±9°) z białą poświatą, cień
   kafla neonowy. Ruch zostaje TAKŻE przy ograniczonym ruchu (wyraźne życzenie:
   „cały czas") — sekcja 65 gasiła animację kafla, tu przywrócona; sheen z 65.3
   dalej wyłączony przy ograniczonym ruchu. clip-path zamiast overflow: hidden,
   bo pioruny leżą poza kaflem (są rodzeństwem, nie dzieckiem kafla).
   ========================================================================= */
.el-hmain .el-brand { position: relative; }
.el-hmain .el-brand__mark {
    overflow: visible; clip-path: inset(0 round 16px);
    animation: elGlow 12s var(--el-out) 3s infinite, elLogoFloat 5.5s ease-in-out infinite;
    transition: box-shadow var(--tm), background var(--tm);
}
.el-hmain .el-brand__mark i {
    position: relative; z-index: 1;
    animation: elBoltBreath 3s ease-in-out infinite;
    transition: filter var(--tf);
}
.el-hmain .el-brand__name em { display: inline-block; animation: elLedBlink 2.4s ease-in-out infinite; }
.el-brand__fx {
    position: absolute; left: -24px; top: 50%; width: 100px; height: 100px;
    transform: translateY(-50%); pointer-events: none; overflow: visible; z-index: 2;
}
.el-brand__fx .el-fx__orbit {
    fill: none; stroke: var(--g-neon); stroke-width: 1.8; stroke-linecap: round;
    stroke-dasharray: 12 88; stroke-dashoffset: 0;
    filter: drop-shadow(0 0 3px rgba(34,201,137,.9));
    animation: elOrbit 3.2s linear infinite;
    opacity: .9;
}
.el-brand__fx .el-fx__bolt {
    fill: none; stroke: var(--g-neon); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
    filter: drop-shadow(0 0 4px rgba(34,201,137,.95)) drop-shadow(0 0 10px rgba(34,201,137,.5));
}
/* najechanie / fokus */
.el-hmain .el-brand:hover .el-brand__mark, .el-hmain .el-brand:focus-visible .el-brand__mark {
    animation: elLogoJolt .5s ease-in-out infinite;
    box-shadow: 0 0 0 3px rgba(34,201,137,.35), 0 10px 28px rgba(34,201,137,.6), 0 0 18px rgba(34,201,137,.55);
    background: linear-gradient(140deg, #4BF0A9, var(--g));
}
.el-hmain .el-brand:hover .el-brand__mark i, .el-hmain .el-brand:focus-visible .el-brand__mark i {
    animation: elBoltJolt .4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #FFFFFF) drop-shadow(0 0 14px rgba(34,201,137,.9));
}
.el-hmain .el-brand:hover .el-fx__orbit, .el-hmain .el-brand:focus-visible .el-fx__orbit { animation-duration: .9s; stroke-dasharray: 22 78; stroke-width: 2.4; opacity: 1; }
.el-hmain .el-brand:hover .el-fx__bolt, .el-hmain .el-brand:focus-visible .el-fx__bolt { animation: elBoltStrike 1.2s ease-out infinite; }
.el-hmain .el-brand:hover .el-fx__bolt:nth-child(2), .el-hmain .el-brand:focus-visible .el-fx__bolt:nth-child(2) { animation-delay: .07s; }
.el-hmain .el-brand:hover .el-fx__bolt:nth-child(3), .el-hmain .el-brand:focus-visible .el-fx__bolt:nth-child(3) { animation-delay: .14s; }
.el-hmain .el-brand:hover .el-fx__bolt:nth-child(4), .el-hmain .el-brand:focus-visible .el-fx__bolt:nth-child(4) { animation-delay: .21s; }
.el-hmain .el-brand:hover .el-fx__bolt:nth-child(5), .el-hmain .el-brand:focus-visible .el-fx__bolt:nth-child(5) { animation-delay: .28s; }
.el-hmain .el-brand:hover .el-fx__bolt:nth-child(6), .el-hmain .el-brand:focus-visible .el-fx__bolt:nth-child(6) { animation-delay: .35s; }
.el-hmain .el-brand:hover .el-fx__bolt:nth-child(7), .el-hmain .el-brand:focus-visible .el-fx__bolt:nth-child(7) { animation-delay: .42s; }
.el-hmain .el-brand:hover .el-brand__name em, .el-hmain .el-brand:focus-visible .el-brand__name em { animation-duration: .5s; }
/* klatki */
@keyframes elLogoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-3px) rotate(-2deg); }
    65%      { transform: translateY(2px) rotate(1.5deg); }
}
@keyframes elLogoJolt {
    0%, 100% { transform: rotate(-5deg) scale(1.08); }
    50%      { transform: rotate(5deg) scale(1.1); }
}
@keyframes elBoltBreath {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); transform: scale(1.07); }
}
@keyframes elBoltJolt {
    0%, 100% { transform: rotate(-9deg) scale(1.12); }
    50%      { transform: rotate(9deg) scale(1.16); }
}
@keyframes elLedBlink {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(34,201,137,.9); }
    50%      { opacity: .45; text-shadow: 0 0 0 rgba(34,201,137,0); }
}
@keyframes elOrbit { to { stroke-dashoffset: -100; } }
@keyframes elBoltStrike {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    8%   { opacity: 1; }
    18%  { stroke-dashoffset: 0; opacity: 1; }
    26%  { opacity: .35; }
    34%  { opacity: 1; }
    48%  { opacity: .2; }
    56%  { opacity: .9; }
    72%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 100; opacity: 0; }
}
/* telefon: kafel 42 px (36 po przewinięciu) — efekty skalowane do kafla */
@media (max-width: 767px) {
    .el-hmain .el-brand__mark { clip-path: inset(0 round 12px); }
    .el-brand__fx { left: -29px; transform: translateY(-50%) scale(.81); }
    #header.is-scrolled .el-brand__fx { left: -32px; transform: translateY(-50%) scale(.69); }
    #header.is-scrolled .el-hmain .el-brand__mark { clip-path: inset(0 round 10px); }
}
/* ograniczony ruch: życzenie „cały czas" — ruch logo zostaje (sekcja 65 go gasiła) */
@media (prefers-reduced-motion: reduce) {
    .el-hmain .el-brand__mark { animation: elGlow 12s var(--el-out) 3s infinite, elLogoFloat 5.5s ease-in-out infinite !important; }
    .el-hmain .el-brand:hover .el-brand__mark, .el-hmain .el-brand:focus-visible .el-brand__mark { animation: elLogoJolt .5s ease-in-out infinite !important; }
}

/* =========================================================================
   98. LOGO — pioruny „filmowe" na płótnie (custom.js: blok PIORUNY LOGO) zamiast
   łamanych SVG z sekcji 97 (właściciel: „średnie te pioruny, to ma być na skalę
   filmową efektów specjalnych"). Płótno sięga 80 px poza znak, leży nad
   wszystkim w nagłówku i nie łapie zdarzeń; kafel przy uderzeniu rozjaśniony
   (is-struck na 120 ms), napis dostaje zieloną poświatę przy najechaniu. Stare
   polyline usunięte z header.tpl; orbita-iskra z 97 zostaje.
   ========================================================================= */
.el-brand__storm { position: absolute; pointer-events: none; z-index: 4; }
.el-brand__fx .el-fx__bolt { display: none; }
.el-hmain .el-brand__mark { transition: box-shadow var(--tm), background var(--tm), filter 90ms ease-out; }
.el-hmain .el-brand__mark.is-struck { filter: brightness(1.7) saturate(1.3); box-shadow: 0 0 0 4px rgba(140,255,205,.45), 0 0 34px rgba(34,201,137,.9); }
.el-hmain .el-brand:hover .el-brand__name, .el-hmain .el-brand:focus-visible .el-brand__name { text-shadow: 0 0 14px rgba(34,201,137,.45); }
/* 98.1 burza na cały ekran, raz na wejście (właściciel: „widać box animacji — na całą stronę, tylko raz, potem F5"):
   płótno doczepiane do <body>, position: fixed, ponad nagłówkiem; JS tworzy je przy pierwszym najechaniu i usuwa po burzy */
.el-brand__storm { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.el-hmain .el-brand.is-storm .el-brand__name { text-shadow: 0 0 18px rgba(34,201,137,.7), 0 0 4px rgba(255,255,255,.6); }
/* 98.2 wydajność (właściciel: „strona się zacina, niech będzie 120 fps"): dwa płótna — poświata w 1/3 rozdzielczości
   rozmywana przez GPU (filter: blur), ostre kreski bez shadowBlur; oba na cały ekran (canvas to element zastępowany,
   więc inset: 0 nie rozciąga — potrzebne width/height 100 %) */
.el-brand__storm { width: 100%; height: 100%; will-change: transform; }
.el-brand__storm--glow { filter: blur(7px); z-index: 9998; }
/* 98.3 tylko komputery (właściciel: na telefonie po tapnięciu w logo czarna ramka fokusu i burza — „tylko klienci z PC"):
   na urządzeniach dotykowych bez efektów hover/fokusu logo (burzę blokuje też JS: matchMedia hover:hover + pointer:fine) */
@media (hover: none), (pointer: coarse) {
    .el-hmain .el-brand:hover .el-brand__mark, .el-hmain .el-brand:focus-visible .el-brand__mark, .el-hmain .el-brand:focus .el-brand__mark {
        animation: elGlow 12s var(--el-out) 3s infinite, elLogoFloat 5.5s ease-in-out infinite;
        box-shadow: 0 8px 20px rgba(18,146,95,.4); background: linear-gradient(140deg, var(--g-neon), var(--g-dark));
    }
    .el-hmain .el-brand:hover .el-brand__mark i, .el-hmain .el-brand:focus-visible .el-brand__mark i, .el-hmain .el-brand:focus .el-brand__mark i { animation: elBoltBreath 3s ease-in-out infinite; filter: none; }
    .el-hmain .el-brand:hover .el-fx__orbit, .el-hmain .el-brand:focus-visible .el-fx__orbit { animation-duration: 3.2s; stroke-dasharray: 12 88; stroke-width: 1.8; opacity: .9; }
    .el-hmain .el-brand:hover .el-brand__name em, .el-hmain .el-brand:focus-visible .el-brand__name em { animation-duration: 2.4s; }
    .el-hmain .el-brand:hover .el-brand__name, .el-hmain .el-brand:focus-visible .el-brand__name { text-shadow: none; }
    .el-hmain .el-brand:focus, .el-hmain .el-brand:focus-visible { outline: none; box-shadow: none; }
}

/* =========================================================================
   99. PANEL KLIENTA („Twoje konto") — właściciel 2026-09-06: „te rzeczy są do
   napisania od nowa i wkomponowania do strony; tryb biały i ciemny; działać
   i być responsywne na komputerze i telefonie". Zakres: pulpit konta (kafle
   były białymi prostokątami z szarym wersalikiem, także w ciemnym), formularze
   danych osobowych i adresu (pary pól obok siebie, kalendarz dla daty urodzenia,
   selecty w języku strony), lista adresów (karty + kafel „dodaj"), odsyłacze
   „Powrót / Strona główna" jako pastylki, strona list życzeń (moduł
   blockwishlist malował na niebiesko #24B9D7) i RODO (psgdpr: białe pudła
   z niewidocznym nagłówkiem w ciemnym; tytuł po angielsku — szablon nadpisany
   w themes/elsklep/modules/psgdpr). Wszystko na tokenach (--w, --s-50, --s-200,
   --k-900…), więc tryb ciemny wychodzi z tych samych reguł; wyjątki oznaczone.
   Szablony: customer/my-account.tpl (powitanie, kafle, wyloguj),
   _partials/form-fields.tpl (birthday → type=date), moduł psgdpr (tytuł PL).
   Format adresu PL w bazie: „Customer:email" (renderował select „Customer")
   zastąpione „Country:name".
   ========================================================================= */
/* 99.0 pulpit: powitanie */
#my-account #content.page-content { padding: 1.5rem; }
.el-acc__hello { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--s-200); }
.el-acc__avatar {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(140deg, var(--g-neon), var(--g-dark)); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; text-transform: uppercase;
}
.el-acc__who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.el-acc__who strong { color: var(--k-900); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.el-acc__who span { color: var(--s-600); font-size: .9rem; overflow-wrap: anywhere; }
.el-acc__logout {
    margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .5rem 1.05rem;
    border: 1px solid var(--s-300); border-radius: var(--pill); background: var(--w); color: var(--k-800) !important;
    font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: border-color var(--tf), color var(--tf), background-color var(--tf);
}
.el-acc__logout i { font-size: 18px; }
.el-acc__logout:hover, .el-acc__logout:focus-visible { border-color: #C1303E; color: #C1303E !important; }
html[data-el-theme="dark"] .el-acc__logout { background: var(--s-50); border-color: rgba(255,255,255,.16); }

/* 99.1 pulpit: kafle (specyficzność jak w classic: .page-my-account #content .links a span.link-item) */
#my-account #content .row { margin: 0; }
#my-account #content .links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
#my-account #content .links > a { float: none; width: auto; max-width: none; flex: none; padding: 0; margin: 0; display: block; text-decoration: none; min-width: 0; }
#my-account #content .links a span.link-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; height: 100%;
    padding: 1.35rem 1.4rem 1.4rem; background: var(--s-50); border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: none;
    color: var(--k-900); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; text-align: left; line-height: 1.3;
    transition: border-color var(--tf), transform var(--tm), box-shadow var(--tm);
}
#my-account #content .links a span.link-item i {
    display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px;
    background: var(--g-50); color: var(--g-deep); font-size: 24px; padding: 0; margin: 0;
    transition: background-color var(--tf), color var(--tf), transform var(--tm);
}
#my-account #content .links a span.link-item::after { display: block; margin-top: -.3rem; color: var(--s-600); font-size: .86rem; font-weight: 500; line-height: 1.45; }
#my-account #identity-link span.link-item::after { content: "Imię, e-mail, hasło i data urodzenia"; }
#my-account #address-link span.link-item::after { content: "Dane do wysyłki i faktury"; }
#my-account #addresses-link span.link-item::after { content: "Twoje adresy dostawy i do faktury"; }
#my-account #wishlist-link span.link-item::after { content: "Zapisane produkty — do porównania i zapytań"; }
#my-account #psgdpr-link span.link-item::after { content: "Pobierz swoje dane lub poproś o ich usunięcie"; }
#my-account #history-link span.link-item::after { content: "Zamówienia, faktury i status realizacji"; }
#my-account #order-slips-link span.link-item::after { content: "Dokumenty korygujące"; }
#my-account #discounts-link span.link-item::after { content: "Twoje kody rabatowe"; }
#my-account #returns-link span.link-item::after { content: "Zgłoszenia zwrotu towaru"; }
#my-account #content .links a:hover span.link-item, #my-account #content .links a:focus-visible span.link-item { border-color: var(--g); transform: translateY(-3px); box-shadow: var(--sh-2); }
#my-account #content .links a:hover span.link-item i { background: var(--g); color: #FFFFFF; transform: scale(1.06); }
html[data-el-theme="dark"] #my-account #content .links a span.link-item { border-color: rgba(255,255,255,.12); }
html[data-el-theme="dark"] #my-account #content .links a span.link-item i { background: rgba(34,201,137,.14); color: var(--g-neon); }
html[data-el-theme="dark"] #my-account #content .links a:hover span.link-item i { background: var(--g-neon); color: #0B1A12; }
html[data-el-theme="dark"] #my-account #content .links a:hover span.link-item { border-color: var(--g-neon); }
@media (max-width: 991px) { #my-account #content .links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    #my-account #content.page-content { padding: 1.1rem; }
    #my-account #content .links { grid-template-columns: 1fr; gap: .75rem; }
    #my-account #content .links a span.link-item { flex-direction: row; align-items: center; gap: .9rem; padding: 1rem 1.1rem; flex-wrap: wrap; }
    #my-account #content .links a span.link-item i { width: 42px; height: 42px; flex: 0 0 42px; }
    #my-account #content .links a span.link-item::after { flex-basis: 100%; margin: -.2rem 0 0; }
    .el-acc__hello { flex-wrap: wrap; }
    .el-acc__logout { margin-left: 0; flex-basis: 100%; justify-content: center; }
}

/* 99.2 odsyłacze pod kartą (Powrót do konta / Strona główna / Wyloguj) jako pastylki — także na stronach modułów */
body.page-customer-account .page-footer, #module-blockwishlist-lists .wishlist-footer-links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.5rem 0 0; padding: 0;
}
body.page-customer-account .page-footer .account-link, body.page-customer-account .page-footer .text-sm-center a,
#module-blockwishlist-lists .wishlist-footer-links a, body.page-customer-account .page-footer > a {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem 1.15rem;
    border: 1px solid var(--s-300); border-radius: var(--pill); background: var(--w); color: var(--k-800) !important;
    font-size: .9rem; font-weight: 600; text-decoration: none !important; background-image: none !important; background-size: auto !important;
    transition: border-color var(--tf), color var(--tf), background-color var(--tf), transform var(--tf);
}
body.page-customer-account .page-footer .account-link .material-icons, #module-blockwishlist-lists .wishlist-footer-links a .material-icons { font-size: 18px; transform: none !important; }
body.page-customer-account .page-footer .account-link:hover, body.page-customer-account .page-footer .account-link:focus-visible,
#module-blockwishlist-lists .wishlist-footer-links a:hover, body.page-customer-account .page-footer > a:hover { border-color: var(--g); color: var(--g-deep) !important; transform: translateY(-1px); }
html[data-el-theme="dark"] body.page-customer-account .page-footer .account-link, html[data-el-theme="dark"] #module-blockwishlist-lists .wishlist-footer-links a,
html[data-el-theme="dark"] body.page-customer-account .page-footer > a { background: var(--s-50); border-color: rgba(255,255,255,.16); }
html[data-el-theme="dark"] body.page-customer-account .page-footer .account-link:hover, html[data-el-theme="dark"] #module-blockwishlist-lists .wishlist-footer-links a:hover { color: var(--g-neon) !important; border-color: var(--g-neon); }
body.page-customer-account .page-footer .text-sm-center { display: contents; }

/* 99.3 formularze: pary pól obok siebie od 576 px (imię/nazwisko, kod/miasto, telefony, NIP UE/NIP) */
@media (min-width: 576px) {
    body.page-customer-account .js-customer-form > div:not(.form-group), body.page-customer-account .js-address-form .form-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
    body.page-customer-account .js-customer-form > div:not(.form-group) > *, body.page-customer-account .js-address-form .form-fields > * { grid-column: 1 / -1; min-width: 0; }
    body.page-customer-account .form-group.row:has(input[name="firstname"]), body.page-customer-account .form-group.row:has(input[name="lastname"]),
    body.page-customer-account .form-group.row:has(input[name="postcode"]), body.page-customer-account .form-group.row:has(input[name="city"]),
    body.page-customer-account .form-group.row:has(input[name="phone"]), body.page-customer-account .form-group.row:has(input[name="phone_mobile"]),
    body.page-customer-account .form-group.row:has(input[name="vat_number"]), body.page-customer-account .form-group.row:has(input[name="dni"]) { grid-column: auto; }
}
/* select w języku strony (kraj, tytuł) */
body.page-customer-account select.form-control, body.page-customer-account .form-control-select {
    appearance: none; -webkit-appearance: none; min-height: 48px; padding-right: 2.6rem; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5160' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
}
html[data-el-theme="dark"] body.page-customer-account select.form-control { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C8D0D9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
/* data urodzenia: natywny kalendarz (type=date z form-fields.tpl); podpowiedź „(Np.: 1970-05-31)" zbędna */
body.page-customer-account input[type="date"].form-control { min-height: 48px; padding-right: .9rem; }
body.page-customer-account input[type="date"].form-control::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
html[data-el-theme="dark"] body.page-customer-account input[type="date"].form-control { color-scheme: dark; }
body.page-customer-account #field-birthday + .form-control-comment { display: none; }
/* pole „Customer" z formatu adresu (gdyby wróciło z aktualizacją formatów) — nie ma czego wybierać */
body.page-customer-account .form-group.row:has(#field-id_customer) { display: none !important; }
/* zgoda i newsletter: odstęp od pól */
body.page-customer-account .form-group.row:has(.custom-checkbox) { margin-top: .4rem; }

/* 99.4 lista adresów: karty + kafel „dodaj" */
#addresses #content.page-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem; }
#addresses #content.page-content > aside, #addresses #content.page-content > .alert, #addresses #content.page-content > .clearfix, #addresses #content.page-content > .addresses-footer, #addresses #content.page-content > h1 { grid-column: 1 / -1; }
#addresses #content.page-content > .clearfix { display: none; }
#addresses #content.page-content > [class*="col-"] { float: none; width: auto; max-width: none; flex: none; padding: 0; margin: 0; min-width: 0; }
#addresses .address { height: 100%; margin: 0; background: var(--s-50); border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: none; display: flex; flex-direction: column; overflow: hidden; }
#addresses .address .address-body { padding: 1.25rem 1.35rem; flex: 1 1 auto; }
#addresses .address .address-body h4 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 800; color: var(--k-900); }
#addresses .address .address-body address { margin: 0; color: var(--s-600); font-size: .92rem; line-height: 1.6; font-style: normal; }
#addresses .address .address-footer { display: flex; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid var(--s-200); background: transparent; }
#addresses .address .address-footer a {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .4rem .9rem; border-radius: var(--pill);
    border: 1px solid var(--s-300); background: var(--w); color: var(--k-800) !important; font-size: .84rem; font-weight: 600; text-decoration: none;
    transition: border-color var(--tf), color var(--tf);
}
#addresses .address .address-footer a .material-icons { font-size: 17px; }
#addresses .address .address-footer a:hover { border-color: var(--g); color: var(--g-deep) !important; }
#addresses .address .address-footer a[data-link-action="delete-address"]:hover { border-color: #C1303E; color: #C1303E !important; }
#addresses .addresses-footer { margin: 0; }
#addresses .addresses-footer a {
    display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 64px; padding: 1rem;
    border: 2px dashed var(--s-300); border-radius: var(--r); background: transparent; color: var(--g-deep) !important;
    font-weight: 700; font-size: .95rem; text-decoration: none; transition: border-color var(--tf), background-color var(--tf);
}
#addresses .addresses-footer a:hover { border-color: var(--g); background: var(--g-50); }
#addresses .addresses-footer a .material-icons { font-size: 22px; }
#addresses #content.page-content > .alert.alert-info { margin: 0; padding: 1rem 1.2rem; border: 0; border-left: 4px solid var(--g); border-radius: var(--r-sm); background: var(--g-50); color: var(--k-900); font-size: .95rem; }
#addresses #content.page-content > .alert.alert-info a { color: var(--g-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html[data-el-theme="dark"] #addresses .address { border-color: rgba(255,255,255,.12); }
html[data-el-theme="dark"] #addresses .address .address-footer a { background: var(--s-50); border-color: rgba(255,255,255,.16); }
html[data-el-theme="dark"] #addresses .addresses-footer a { border-color: rgba(255,255,255,.2); color: var(--g-neon) !important; }
html[data-el-theme="dark"] #addresses .addresses-footer a:hover { background: rgba(34,201,137,.1); border-color: var(--g-neon); }
html[data-el-theme="dark"] #addresses #content.page-content > .alert.alert-info { background: rgba(34,201,137,.12); color: var(--k-900); }
html[data-el-theme="dark"] #addresses #content.page-content > .alert.alert-info a { color: var(--g-neon); }
@media (max-width: 991px) { #addresses #content.page-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { #addresses #content.page-content { grid-template-columns: 1fr; padding: 1.1rem; gap: .75rem; } }

/* 99.5 listy życzeń (moduł blockwishlist, aplikacja Vue w .wishlist-container) */
#module-blockwishlist-lists .wishlist-container-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
#module-blockwishlist-lists .wishlist-container-header h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; color: var(--k-900); }
#module-blockwishlist-lists .wishlist-add-to-new, #module-blockwishlist-lists .wishlist-add-to-new.text-primary {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1.2rem; border-radius: var(--pill);
    background: var(--g-dark); color: #FFFFFF !important; font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; text-decoration: none; transition: background-color var(--tf), transform var(--tf);
}
#module-blockwishlist-lists .wishlist-add-to-new:hover { background: #0B6E47; transform: translateY(-1px); }
#module-blockwishlist-lists .wishlist-add-to-new .material-icons { font-size: 20px; }
#module-blockwishlist-lists #content.page-content.card, #module-blockwishlist-lists #content.page-content { padding: 1.25rem; background: var(--w); border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: none; margin: 0; }
#module-blockwishlist-lists .wishlist-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
#module-blockwishlist-lists .wishlist-list-item { margin: 0; padding: 0; background: var(--s-50); border: 1px solid var(--s-200); border-radius: var(--r-sm); transition: border-color var(--tf), transform var(--tm); }
#module-blockwishlist-lists .wishlist-list-item:hover { border-color: var(--g); transform: translateY(-2px); }
#module-blockwishlist-lists .wishlist-list-item-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.15rem; color: var(--k-900) !important; text-decoration: none; cursor: pointer; }
#module-blockwishlist-lists .wishlist-list-item-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--k-900); }
#module-blockwishlist-lists .wishlist-list-item-title span { color: var(--s-500); font-weight: 500; }
#module-blockwishlist-lists .wishlist-list-item-right { display: flex; gap: .4rem; }
#module-blockwishlist-lists .wishlist-list-item-right button {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--s-300); background: var(--w); color: var(--k-800);
    display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: border-color var(--tf), color var(--tf);
}
#module-blockwishlist-lists .wishlist-list-item-right button .material-icons { font-size: 19px; }
#module-blockwishlist-lists .wishlist-list-item-right button:hover { border-color: var(--g); color: var(--g-deep); }
#module-blockwishlist-lists .text-primary { color: var(--g-deep) !important; }
#module-blockwishlist-lists .wishlist-list-empty, #module-blockwishlist-lists .wishlist-empty { color: var(--s-600); padding: 1rem 0; }
html[data-el-theme="dark"] #module-blockwishlist-lists .text-primary { color: var(--g-neon) !important; }
html[data-el-theme="dark"] #module-blockwishlist-lists .wishlist-list-item { border-color: rgba(255,255,255,.12); }
html[data-el-theme="dark"] #module-blockwishlist-lists .wishlist-list-item-right button { background: var(--s-50); border-color: rgba(255,255,255,.16); }
/* okna modułu (nowa lista, zmiana nazwy, udostępnij): zieleń zamiast błękitu */
.wishlist-modal .modal-content { background: var(--w); color: var(--k-900); border: 1px solid var(--s-200); border-radius: var(--r); }
.wishlist-modal .modal-header, .wishlist-modal .modal-footer { border-color: var(--s-200); }
.wishlist-modal .btn-primary, .wishlist-modal .wishlist-modal-btn-primary { background: var(--g-dark) !important; border-color: var(--g-dark) !important; color: #FFFFFF !important; border-radius: var(--pill); }
.wishlist-modal .btn-secondary, .wishlist-modal .wishlist-modal-btn-secondary { background: transparent !important; border: 1px solid var(--s-300) !important; color: var(--k-800) !important; border-radius: var(--pill); }
.wishlist-modal .form-control { background: var(--s-50); color: var(--k-900); border: 1px solid var(--s-300); border-radius: var(--r-sm); min-height: 46px; }
.wishlist-modal .form-control:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-50); }
@media (max-width: 575px) {
    #module-blockwishlist-lists .wishlist-container-header { flex-direction: column; align-items: stretch; }
    #module-blockwishlist-lists .wishlist-add-to-new { justify-content: center; }
}

/* 99.6 RODO (moduł psgdpr) */
#module-psgdpr-gdpr #content .container { padding: 0; max-width: none; width: auto; }
#module-psgdpr-gdpr .page_content { display: grid; gap: 1rem; margin: 0; }
#module-psgdpr-gdpr .page_content::before, #module-psgdpr-gdpr .page_content::after { display: none; }
#module-psgdpr-gdpr .psgdprinfo17, #module-psgdpr-gdpr .psgdprinfo16 {
    float: none; width: auto; max-width: none; margin: 0; padding: 1.4rem 1.5rem; box-shadow: none;
    background: var(--s-50) !important; border: 1px solid var(--s-200); border-radius: var(--r); color: var(--k-900) !important;
}
#module-psgdpr-gdpr .psgdprinfo17 h2 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.005em; text-transform: none; color: var(--k-900) !important; }
#module-psgdpr-gdpr .psgdprinfo17 p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--s-600) !important; }
#module-psgdpr-gdpr .psgdprinfo17 p a { color: var(--g-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#module-psgdpr-gdpr .psgdprinfo17 .psgdprgetdatabtn17, #module-psgdpr-gdpr .btn.psgdprgetdatabtn17 {
    float: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 1rem .5rem 0 0; padding: .6rem 1.2rem;
    border: 0; border-radius: var(--pill); box-shadow: none; background: var(--g-dark) !important; color: #FFFFFF !important;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color var(--tf), transform var(--tf);
}
#module-psgdpr-gdpr .psgdprinfo17 .psgdprgetdatabtn17:hover { background: #0B6E47 !important; transform: translateY(-1px); }
html[data-el-theme="dark"] #module-psgdpr-gdpr .psgdprinfo17 { border-color: rgba(255,255,255,.12); }
html[data-el-theme="dark"] #module-psgdpr-gdpr .psgdprinfo17 p a { color: var(--g-neon); }
@media (max-width: 575px) {
    #module-psgdpr-gdpr .psgdprinfo17 { padding: 1.1rem 1.15rem; }
    #module-psgdpr-gdpr .psgdprinfo17 .psgdprgetdatabtn17 { width: 100%; margin: .75rem 0 0; }
}

/* 99.7 po pomiarze: pulpit ma klasę body page-my-account (nie page-customer-account) — pastylki odsyłaczy także tam;
   przyciski RODO układały się jeden pod drugim (pudło 452 px, dwa przyciski 448 px + biały znak) — flex z zawijaniem */
#my-account .page-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.5rem 0 0; padding: 0; }
#my-account .page-footer .account-link, #my-account .page-footer > a {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem 1.15rem;
    border: 1px solid var(--s-300); border-radius: var(--pill); background: var(--w); color: var(--k-800) !important;
    font-size: .9rem; font-weight: 600; text-decoration: none !important; background-image: none !important; background-size: auto !important;
    transition: border-color var(--tf), color var(--tf), background-color var(--tf), transform var(--tf);
}
#my-account .page-footer .account-link .material-icons { font-size: 18px; transform: none !important; }
#my-account .page-footer .account-link:hover, #my-account .page-footer .account-link:focus-visible { border-color: var(--g); color: var(--g-deep) !important; transform: translateY(-1px); }
html[data-el-theme="dark"] #my-account .page-footer .account-link { background: var(--s-50); border-color: rgba(255,255,255,.16); }
html[data-el-theme="dark"] #my-account .page-footer .account-link:hover { color: var(--g-neon) !important; border-color: var(--g-neon); }
#module-psgdpr-gdpr .psgdprinfo17 { display: flex; flex-wrap: wrap; gap: .6rem; }
#module-psgdpr-gdpr .psgdprinfo17 h2, #module-psgdpr-gdpr .psgdprinfo17 p { flex: 1 1 100%; }
#module-psgdpr-gdpr .psgdprinfo17 h2 { margin-bottom: 0; }
#module-psgdpr-gdpr .psgdprinfo17 .psgdprgetdatabtn17, #module-psgdpr-gdpr .btn.psgdprgetdatabtn17 { flex: 1 1 200px; margin: .5rem 0 0; }
@media (max-width: 575px) { #module-psgdpr-gdpr .psgdprinfo17 .psgdprgetdatabtn17 { flex-basis: 100%; width: auto; margin: .4rem 0 0; } }