/*
Theme Name:   Linkovo Child
Theme URI:    https://linkovo.pl
Description:  Child theme dla Astry — strona główna, blog, sklep WooCommerce i wspólny styl formularzy dla linkovo.pl. v2.1.0: klimat czarno-złoty (ciemny header/hero/stopka + żółto-złoty akcent) na strukturze pełnego redesignu wg BRIEF-LINKOVO.txt.
Author:       linkovo.pl
Author URI:   https://linkovo.pl
Template:     astra
Version:      2.1.39
Text Domain:  linkovo-child
*/

/* =========================================================================
   1) DESIGN TOKENY
   v2.1.0 — na życzenie klienta powrót do klimatu czarno-złotego (ciemny
   header/hero/stopka, cieplejsze jasne sekcje) zamiast płaskiej bieli z
   v2.0.0 — struktura i wszystkie funkcje z v2.0.0 (BOOST, przełączniki
   widoczności, reskin sklepu) zostają bez zmian, zmienia się warstwa
   kolorystyczna. Kolory NIE są spięte ze zmiennymi Astry
   (--ast-global-color-*) — Astra ma tam własne, fabryczne wartości, które
   nadpisywały nasz akcent w v1. Kolory są tu na sztywno; edycja bez kodu
   jest przez WŁASNY panel Customizera "Kolory i czcionka" (patrz
   inc/customizer.php → lnk_output_brand_css()).
   ========================================================================= */
:root{
  /* 14.09.2026: BEZ tej linii przeglądarka (gdy system/Chrome ma włączony
     ciemny motyw) potrafi samodzielnie, na poziomie silnika renderującego,
     malować NATYWNE kontrolki formularzy (pole <select>, jego rozwijaną
     listę, checkboxy) na czarno z białym tekstem — CAŁKOWICIE pomijając
     nasze reguły CSS (nawet z !important), bo to nie jest kolor z arkusza
     stylów tylko domyślny, systemowy "dark chrome" przeglądarki używany
     gdy strona nie deklaruje wprost, w jakim trybie ma się wyświetlać.
     Zgłoszone jako czarne tło na polu "Kraj / region" w formularzu
     zamówienia. Wymuszenie jasnego trybu tutaj naprawia to raz na zawsze,
     niezależnie od ustawień systemu/przeglądarki klienta końcowego. */
  color-scheme: light;
  --bg:#FFFFFF;
  --bg-alt:#F7F5EF;
  --ink:#0A1B33;
  --ink-soft:#5B6472;
  --ink-faint:#8A8A8A;
  --border:#E7E4D8;
  --yellow:#FFD600;
  --yellow-deep:#B58A00;
  --black:#000000;
  --charcoal:#15151A;
  --charcoal-2:#212227;
  --white:#FFFFFF;
  --cream:#FBF3D6;
  --green:#1E8E4F;
  --red:#D14343;
  --font-display:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --maxw:1240px;
  --r-card:14px;
  --r-sm:10px;
}

/* =========================================================================
   2) RESET DROBIAZGÓW / WSPÓLNE (zasięg: strona główna, .lnk)
   Fonty i komponenty są scelowo OGRANICZONE do .lnk (strona główna),
   .lnk-blog (lista wpisów) i .woocommerce (sklep) — NIE do całej witryny.
   To świadoma ostrożność: globalne reguły na "h1/h2/body" mogłyby wejść
   w konflikt z istniejącymi, niezależnymi od motywu podstronami (np.
   "Kontakt"/"Oferta"), które już raz się rozjechały — nie chcemy ryzykować
   drugi raz tym samym mechanizmem.
   ========================================================================= */
/* Siatka bezpieczeństwa dla pełnoszerokościowego hero niżej (sekcja 5) —
   technika "100vw" potrafi u niektórych przeglądarek dodać kilka pikseli
   szerokości (licząc pasek przewijania), stąd blokada poziomego scrolla na
   poziomie CAŁEJ strony. Bez wpływu na wygląd jakiejkolwiek podstrony —
   wycina tylko niewidoczny, przypadkowy nadmiar w poziomie. */
body{overflow-x:hidden;}
.lnk *{box-sizing:border-box;}
.lnk img,.lnk svg{max-width:100%;display:block;}
.lnk h1,.lnk h2,.lnk h3,.lnk h4{font-family:var(--font-display);font-weight:800;text-wrap:balance;letter-spacing:-.01em;color:var(--ink);margin:0;}
.lnk p{margin:0;font-family:var(--font-body);}
.lnk a{color:inherit;}
.lnk ul{margin:0;padding:0;}
.lnk .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.lnk .wrap{padding:0 20px;}}
.lnk .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.lnk .eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--yellow);flex:none;}
.lnk .on-dark{background:var(--black);color:#fff;}
.lnk .on-dark h1,.lnk .on-dark h2,.lnk .on-dark h3,.lnk .on-dark h4{color:#fff;}
.lnk .on-dark p{color:#B9BAC0;}
.lnk .on-dark .eyebrow{color:#fff;}
.lnk section{padding:96px 0;}
.lnk section.lnk-tight{padding:64px 0;}
.lnk .hd{max-width:680px;margin:0 0 44px;}
.lnk .hd h2{font-size:clamp(28px,3.6vw,38px);margin-top:12px;}
.lnk .hd p{margin-top:14px;color:var(--ink-soft);font-size:16.5px;}
.lnk .on-dark .hd p{color:#B9BAC0;}
.lnk .link-more{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.lnk .link-more:hover{color:var(--yellow-deep);}
.lnk .link-more svg{width:14px;height:14px;}

.lnk .btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:9px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.lnk .btn:hover{transform:translateY(-1px);}
.lnk .btn-yellow{background:var(--yellow);color:var(--black);}
.lnk .btn-yellow:hover{background:var(--yellow-deep);}
.lnk .btn-black{background:var(--black);color:#fff;}
.lnk .btn-black:hover{background:#000;}
.lnk .btn-outline{background:transparent;color:var(--ink);border-color:var(--border);}
.lnk .btn-outline:hover{border-color:var(--ink);}
.lnk .btn-white{background:#fff;color:var(--black);border-color:#fff;}
.lnk .btn-white:hover{background:#eee;}
.lnk .btn-sm{padding:9px 16px;font-size:13.5px;border-radius:8px;}

/* =========================================================================
   3) HEADER — menu Astry (natywne, budowane w Wygląd → Menu) tylko
   przestylowane pod klimat czarno-złoty + doklejone ikony koszyka/konta +
   żółty CTA (patrz inc/header.php). v2.1.0: wracamy do CIEMNEGO nagłówka
   (na życzenie klienta) — wymuszony na czarno z !important, żeby nie
   powtórzyć błędu z v2.0.x (niespójność między naszym kodem a ustawieniem
   koloru w Astrze powodowała niewidoczne ikony).
   ========================================================================= */
#masthead,.site-header{background:var(--black)!important;position:sticky;top:0;z-index:99;}
#masthead{border-bottom:1px solid var(--line-dark, #262626);}

.main-header-menu .sub-menu{
  position:absolute;top:calc(100% + 20px);background:#0B0B0B;border:1px solid #262626;
  border-radius:12px;padding:16px;display:none;flex-wrap:wrap;gap:4px 28px;
  min-width:240px;max-width:360px;list-style:none;margin:0;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.65);z-index:50;
}
.main-header-menu .menu-item:hover > .sub-menu{display:flex;}
.main-header-menu .sub-menu li{width:100%;}
.main-header-menu .sub-menu a{display:block;font-size:13.5px;color:#fff;opacity:.82;padding:6px 0;}
.main-header-menu .sub-menu a:hover{opacity:1;color:var(--yellow);}

.lnk-navicons{display:flex;align-items:center;gap:16px;margin-left:18px;}
.lnk-navicon{
  position:relative;color:#fff!important;text-decoration:none;
  display:flex!important;align-items:center;justify-content:center;
  opacity:.85!important;visibility:visible!important;
}
.lnk-navicon:hover{opacity:1!important;color:var(--yellow)!important;}
.lnk-navicon svg{width:19px;height:19px;}
.lnk-cart-count{
  position:absolute;top:-7px;right:-8px;background:var(--yellow);color:#171200;
  font-family:var(--font-mono);font-size:10px;font-weight:700;width:16px;height:16px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.lnk-cart-count.is-zero{display:none;}
/* .lnk-header-cta renderuje się w nagłówku Astry — POZA sekcją ".lnk"
   (tą, w której są zdefiniowane wspólne klasy .btn/.btn-yellow/.btn-sm),
   więc do tej pory nie łapał się na nie w ogóle i był zwykłym,
   niestylowanym linkiem (stąd "nie widać CTA", zgłoszone 09.09.2026) —
   wymuszony tu wygląd przycisku wprost, niezależnie od zasięgu ".lnk". */
a.lnk-header-cta{
  font-family:var(--font-body);display:inline-flex!important;align-items:center;justify-content:center;
  background:var(--yellow)!important;color:var(--black)!important;font-weight:700;
  padding:9px 16px!important;font-size:13.5px!important;border-radius:8px!important;
  text-decoration:none!important;white-space:nowrap;opacity:1!important;
}
a.lnk-header-cta:hover{background:var(--yellow-deep)!important;color:var(--black)!important;}

/* =========================================================================
   4) OKRUSZKI (breadcrumbs) — wszystkie podstrony poza stroną główną
   ========================================================================= */
.lnk-crumbs{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  max-width:var(--maxw);margin:18px auto 0;padding:0 32px;
}
.lnk-crumbs a{color:var(--ink-soft);text-decoration:none;}
.lnk-crumbs a:hover{color:var(--yellow-deep);text-decoration:underline;}
.lnk-crumbs .sep{color:var(--border);}
.lnk-crumbs .cur,.lnk-crumbs span:last-child{color:var(--ink);font-weight:600;}

/* =========================================================================
   5) HERO — v2.1.0: ciemne tło (on-dark) + grafika hero, jak w wersji
   sprzed redesignu (na życzenie klienta). Struktura (nagłówek/lede/CTA/
   hasła pod przyciskami) zostaje z v2.0.0, edytowalna z Customizera.
   ========================================================================= */
/* Hero na pełną szerokość ekranu (nie tylko szerokość kontenera Astry) —
   niezależne od tego, jak głęboko Astra zagnieżdża swoje kontenery/paddingi,
   bo liczy się wyłącznie względem szerokości okna (vw), a nie względem
   rodzica. Wewnątrz .wrap i tak wraca do zwykłej, wyśrodkowanej szerokości
   treści (--maxw) — bleeduje tylko czarne tło, nie układ. */
.lnk .hero{padding:64px 0 60px;overflow:hidden;position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;}
.lnk .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media (max-width:980px){.lnk .hero-grid{grid-template-columns:1fr;} .lnk .hero{padding:44px 0 40px;}}
.lnk .badge-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid #2A2A2A;color:#fff;border-radius:999px;padding:7px 14px 7px 10px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.03em;}
.lnk .badge-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);border:2px solid #C9A600;flex:none;}
.lnk .hero h1{font-size:clamp(32px,4.4vw,50px);line-height:1.08;margin-top:20px;font-weight:900;}
.lnk .hero .lede{margin-top:22px;font-size:18px;max-width:46ch;font-family:var(--font-body);color:#B9BAC0;}
.lnk .hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.lnk .hero-ctas svg{width:15px;height:15px;}
.lnk .hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;font-family:var(--font-mono);font-size:12.5px;color:#B9BAC0;}
.lnk .on-dark .btn-outline{color:#fff;border-color:#3A3A3A;}
.lnk .on-dark .btn-outline:hover{border-color:var(--yellow);color:var(--yellow);}

.lnk .hero-stats{display:flex;gap:30px;margin-top:36px;flex-wrap:wrap;}
.lnk .hero-stats div{display:flex;flex-direction:column;gap:5px;}
.lnk .hero-stats .num{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--yellow);line-height:1;}
.lnk .hero-stats .lbl{font-family:var(--font-mono);font-size:11px;color:#8C8D93;letter-spacing:.01em;}

.lnk .hero-visual{position:relative;}
.lnk .hero-img{width:100%;height:auto;border-radius:16px;}
.lnk .hero-img-cap{margin-top:12px;font-family:var(--font-mono);font-size:11.5px;color:#8C8D93;text-align:center;}

/* =========================================================================
   6) PASEK KORZYŚCI
   ========================================================================= */
.lnk .benefitbar{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.lnk .benefitbar .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0 32px;}
@media (max-width:920px){.lnk .benefitbar .wrap{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.lnk .benefitbar .wrap{grid-template-columns:1fr;}}
.lnk .bitem{display:flex;gap:12px;align-items:flex-start;padding:26px 20px;border-left:1px solid var(--border);}
.lnk .bitem:first-child{border-left:none;}
@media (max-width:920px){.lnk .bitem:nth-child(2n+1){border-left:none;}}
@media (max-width:560px){.lnk .bitem{border-left:none !important;border-top:1px solid var(--border);} .lnk .bitem:first-child{border-top:none;}}
.lnk .bitem .ico{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;}
.lnk .bitem .ico svg{width:17px;height:17px;}
.lnk .bitem h5{font-size:13.5px;font-weight:700;font-family:var(--font-display);}
.lnk .bitem p{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.4;}

/* =========================================================================
   7) NASZA OFERTA
   ========================================================================= */
.lnk .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.lnk .offer-grid{grid-template-columns:1fr;}}
.lnk .offer-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:30px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
.lnk .offer-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(10,10,10,.2);}
.lnk .offer-card.feat{background:#FFFCEA;border:1.5px solid var(--yellow);}
.lnk .offer-badge{position:absolute;top:-12px;right:24px;background:var(--black);color:var(--yellow);font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;}
.lnk .offer-card .ico{width:44px;height:44px;border-radius:11px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.lnk .offer-card.feat .ico{background:var(--yellow);}
.lnk .offer-card .ico svg{width:21px;height:21px;}
.lnk .offer-card h3{font-size:20px;font-family:var(--font-display);}
.lnk .offer-card p{margin-top:10px;color:var(--ink-soft);font-size:14.5px;}
.lnk .offer-card ul{margin-top:16px;display:flex;flex-direction:column;gap:9px;font-size:13.5px;flex:1;}
.lnk .offer-card ul li{display:flex;gap:9px;align-items:flex-start;}
.lnk .offer-card ul li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--green);}
.lnk .offer-card .price{margin-top:20px;font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);}
.lnk .offer-card .price b{color:var(--ink);font-size:15px;}
.lnk .offer-card .btn{margin-top:16px;justify-content:center;}

/* =========================================================================
   7b) "MASZ STRONĘ I NIE ZARABIASZ?" — problem / rozwiązanie / efekt, na
   bazie grafik social media klienta (08.09.2026). Ciemna sekcja, ta sama
   ".on-dark" co hero — patrz sekcja 2 wyżej dla ogólnych reguł tekstu.
   ========================================================================= */
.lnk .problem-hd{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
.lnk .problem-hd .eyebrow{justify-content:center;}
.lnk .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px;}
@media (max-width:900px){.lnk .problem-grid{grid-template-columns:1fr;}}
.lnk .problem-col{background:var(--charcoal-2);border:1px solid #2E2F35;border-radius:var(--r-card);padding:26px;}
.lnk .problem-col h4{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#8C8D93;margin:0 0 16px;font-weight:600;}
.lnk .problem-list{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0;}
.lnk .problem-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#D6D7DC;}
.lnk .problem-list li svg{width:16px;height:16px;flex:none;margin-top:2px;}
.lnk .problem-list li.is-ok svg{color:var(--green);}
.lnk .problem-list li.is-bad svg{color:var(--red);}
.lnk .problem-list.is-solution li svg,
.lnk .problem-list.is-result li svg{color:var(--yellow);}
.lnk .problem-flag{margin-top:18px;background:rgba(209,67,67,.12);border:1px solid rgba(209,67,67,.4);color:#FF8585;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:11px 14px;border-radius:9px;text-align:center;}
.lnk .problem-cta{text-align:center;margin-top:36px;}

/* =========================================================================
   8) DLACZEGO LINKOVO
   ========================================================================= */
.lnk .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
@media (max-width:900px){.lnk .why-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.lnk .why-grid{grid-template-columns:1fr;}}
.lnk .why-item .n{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--ink-faint);}
.lnk .why-item h4{font-size:16.5px;margin-top:10px;font-family:var(--font-display);}
.lnk .why-item p{margin-top:10px;font-size:14px;color:var(--ink-soft);}
.lnk .why-item .rule{width:28px;height:3px;background:var(--yellow);border-radius:2px;margin-bottom:16px;}

/* =========================================================================
   9) JAK TO DZIAŁA
   ========================================================================= */
.lnk .steps-band{background:var(--bg-alt);}
.lnk .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
@media (max-width:900px){.lnk .steps-grid{grid-template-columns:1fr 1fr;gap:28px;}}
@media (max-width:560px){.lnk .steps-grid{grid-template-columns:1fr;}}
.lnk .step{position:relative;padding:0 24px 0 0;}
.lnk .step:not(:last-child)::after{content:"";position:absolute;top:19px;right:0;width:24px;height:1px;background:var(--border);}
@media (max-width:900px){.lnk .step:not(:last-child)::after{display:none;}}
.lnk .step .stepnum{width:38px;height:38px;border-radius:50%;background:var(--black);color:var(--yellow);font-family:var(--font-mono);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.lnk .step h4{font-size:15.5px;margin-top:16px;font-family:var(--font-display);}
.lnk .step p{margin-top:8px;font-size:13.5px;color:var(--ink-soft);}

/* =========================================================================
   10) SEKCJA BOOST — karty jako produkty WooCommerce (stretched card)
   ========================================================================= */
.lnk .boost-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
@media (max-width:920px){.lnk .boost-grid{grid-template-columns:1fr;}}
.lnk .boost-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;}
@media (max-width:560px){.lnk .boost-cards{grid-template-columns:1fr;}}
.lnk .boost-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:22px 18px;text-align:left;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;}
.lnk .boost-card.mid{padding:30px 20px;border:1.5px solid var(--yellow);position:relative;box-shadow:0 24px 48px -28px rgba(10,10,10,.18);}
.lnk .boost-card:hover{transform:translateY(-4px);box-shadow:0 20px 38px -24px rgba(10,10,10,.22);border-color:var(--yellow-deep);}
.lnk .boost-card.mid:hover{border-color:var(--yellow);}
.lnk .boost-card-cover{position:absolute;inset:0;z-index:1;border-radius:var(--r-card);cursor:pointer;}
.lnk .boost-card .pop,.lnk .boost-card .tag,.lnk .boost-card h4,.lnk .boost-card .qty,.lnk .boost-card .dot-fill{position:relative;z-index:2;}
.lnk .boost-card .pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--black);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;white-space:nowrap;z-index:3;}
.lnk .boost-card .tag{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.lnk .boost-card h4{font-size:22px;margin-top:8px;font-weight:900;font-family:var(--font-display);}
.lnk .boost-card .qty{font-size:13px;color:var(--ink-soft);margin-top:6px;font-family:var(--font-mono);}
.lnk .boost-card .dot-fill{display:flex;gap:4px;margin-top:14px;}
.lnk .boost-card .dot-fill span{width:7px;height:7px;border-radius:50%;background:var(--border);display:block;}
.lnk .boost-card .dot-fill span.on{background:var(--yellow-deep);}

/* =========================================================================
   11) WŁASNE ZAPLECZE SEO (odwrócone kolory)
   ========================================================================= */
.lnk .infra{background:var(--charcoal);color:#fff;}
/* Nagłówek i etykieta w tej sekcji dziedziczyłyby domyślny ciemny kolor
   (.lnk .eyebrow / .lnk h2 są pisane pod jasne tło) — sekcja 2 wyżej ma
   już taki override, ale tylko dla ".on-dark", a ta sekcja nie ma tej
   klasy w markupie, więc trzeba go powtórzyć tu wprost. */
.lnk .infra .eyebrow{color:#fff;}
.lnk .infra h2,.lnk .infra h3,.lnk .infra h4{color:#fff;}
.lnk .infra-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center;}
@media (max-width:920px){.lnk .infra-grid{grid-template-columns:1fr;}}
.lnk .infra-diagram{background:var(--charcoal-2);border:1px solid #2E2F35;border-radius:18px;padding:36px 28px;}
.lnk .idom{display:flex;flex-direction:column;gap:14px;}
.lnk .idom .row{display:flex;align-items:center;gap:14px;}
.lnk .idom .box{flex:1;background:#fff;color:var(--black);border-radius:10px;padding:12px 14px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:9px;}
.lnk .idom .box svg{width:15px;height:15px;flex:none;}
.lnk .idom .arrow{color:#5A5C64;flex:none;}
.lnk .idom .arrow svg{width:18px;height:18px;}
.lnk .idom .target{margin-top:6px;background:var(--yellow);color:var(--black);border-radius:10px;padding:14px;font-family:var(--font-mono);font-size:13px;font-weight:700;text-align:center;}
.lnk .infra-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;}
@media (max-width:560px){.lnk .infra-boxes{grid-template-columns:1fr;}}
.lnk .ibox{background:var(--charcoal-2);border:1px solid #2E2F35;border-radius:12px;padding:18px;}
.lnk .ibox .tag{font-family:var(--font-mono);font-size:11px;color:var(--yellow);letter-spacing:.04em;}
.lnk .ibox h5{font-size:15px;margin-top:8px;color:#fff;font-family:var(--font-display);}
.lnk .infra ul.checks{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.lnk .infra ul.checks li{display:flex;gap:10px;font-size:14px;color:#D6D7DC;align-items:flex-start;}
.lnk .infra ul.checks li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--yellow);}

/* =========================================================================
   12) OPINIE
   ========================================================================= */
.lnk .testi-note{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-faint);margin-top:8px;}
.lnk .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:880px){.lnk .testi-grid{grid-template-columns:1fr;}}
.lnk .testi{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:24px;}
.lnk .testi .stars{color:var(--yellow-deep);font-size:14px;letter-spacing:2px;}
.lnk .testi p{margin-top:14px;font-size:14.5px;color:var(--ink);}
.lnk .testi .who{margin-top:16px;font-size:12.5px;color:var(--ink-soft);font-family:var(--font-mono);}

/* =========================================================================
   13) BLOG — siatka 3 najnowszych wpisów na stronie głównej
   ========================================================================= */
.lnk .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:880px){.lnk .blog-grid{grid-template-columns:1fr;}}
.lnk .blog-grid .blog-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
.lnk .blog-grid .blog-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(10,10,10,.2);}
.lnk .blog-grid .blog-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#1a1a1a,#000);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lnk .blog-grid .blog-thumb svg{width:34px;height:34px;opacity:.85;}
.lnk .blog-grid .blog-thumb img{width:100%;height:100%;object-fit:cover;}
.lnk .blog-grid .blog-body{padding:20px 22px 22px;}
.lnk .blog-grid .blog-tag{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--yellow-deep);}
.lnk .blog-grid h4{font-size:16.5px;margin-top:9px;line-height:1.35;font-family:var(--font-display);}
.lnk .blog-grid .excerpt{margin-top:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;font-family:var(--font-body);}
.lnk .blog-grid .more{margin-top:14px;display:inline-flex;font-size:13.5px;font-weight:600;color:var(--ink);}
.lnk .blog-grid .blog-card:hover .more{color:var(--yellow-deep);}
.lnk .blog-more{text-align:center;margin-top:40px;}

/* =========================================================================
   14) CTA KOŃCOWE — pkt. 12 briefu: duży żółty prostokąt, wyśrodkowany
   ========================================================================= */
.lnk .final{background:var(--yellow);border-radius:22px;padding:64px 56px;text-align:center;}
@media (max-width:640px){.lnk .final{padding:48px 26px;}}
.lnk .final h2{font-size:clamp(26px,3.6vw,38px);color:var(--black);max-width:20ch;margin:0 auto;}
.lnk .final p{margin-top:14px;color:#1a1600;font-size:16px;max-width:52ch;margin-left:auto;margin-right:auto;font-family:var(--font-body);}
.lnk .final .ctas{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

/* =========================================================================
   15) FOOTER
   ========================================================================= */
.lnk-footer{background:var(--black);color:#fff;padding:64px 0 32px;font-family:var(--font-body);}
.lnk-footer a{color:#A9AAB0;text-decoration:none;}
.lnk-footer a:hover{color:#fff;}
.lnk-footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media (max-width:800px){.lnk-footer .fgrid{grid-template-columns:1fr 1fr;}}
.lnk-footer h5{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--yellow);margin-bottom:16px;font-weight:600;}
.lnk-footer p{font-size:13.5px;color:#A9AAB0;}
.lnk-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.lnk-footer .fbottom{margin-top:52px;padding-top:24px;border-top:1px solid #2A2B30;display:flex;justify-content:space-between;font-size:12.5px;color:#7C7D84;flex-wrap:wrap;gap:10px;font-family:var(--font-mono);max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;}

/* =========================================================================
   16) BLOG — archiwum (archive.php / home.php), patrz inc/blog-loop.php
   ========================================================================= */
.lnk-blog .shop-grid{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start;}
@media (max-width:760px){.lnk-blog .shop-grid{grid-template-columns:1fr;}}
.lnk-blog .shop-side h5{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 12px;}
.lnk-blog .shop-side ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;}
.lnk-blog .shop-side a{text-decoration:none;color:var(--ink-soft);}
.lnk-blog .shop-side a:hover{color:var(--ink);}
.lnk-blog .shop-side a.active{color:var(--ink);font-weight:700;}
.lnk-blog .shop-head h1{font-size:clamp(24px,2.8vw,32px);font-family:var(--font-display);font-weight:800;}
.lnk-blog .shop-head p{margin-top:10px;color:var(--ink-soft);font-size:14.5px;max-width:64ch;}
.lnk-blog .shop-count{margin:20px 0 18px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);}
.lnk-blog .post-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:680px){.lnk-blog .post-grid{grid-template-columns:1fr;}}
.lnk-blog .post-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;}
.lnk-blog .post-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(10,10,10,.2);border-color:var(--yellow-deep);}
/* .post-cover to niewidoczny link na całą kartę (efekt "cała karta
   klikalna") — .post-body miało z-index WYŻSZY niż .post-cover, więc to
   ONO przechwytywało kliknięcia nad tytułem/opisem i nic się nie działo;
   klikało tylko zdjęcie (bez z-index, więc niżej niż .post-cover).
   Zgłoszone 09.09.2026 ("jak się klika na grafikę to przechodzi, a tytuł?").
   Fix: .post-body bez z-index nad .post-cover — teraz cała karta,
   łącznie z tytułem, jest klikalna. */
.lnk-blog .post-cover{position:absolute;inset:0;z-index:2;}
.lnk-blog .post-thumb{height:150px;background:linear-gradient(135deg,#1a1a1a,#000);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lnk-blog .post-thumb img{width:100%;height:100%;object-fit:cover;}
.lnk-blog .post-thumb svg{width:32px;height:32px;}
.lnk-blog .post-body{position:relative;z-index:1;padding:18px 20px 20px;}
.lnk-blog .post-tag{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--yellow-deep);}
.lnk-blog .post-card h2{font-size:16px;margin-top:8px;line-height:1.32;font-family:var(--font-display);font-weight:700;}
.lnk-blog .post-excerpt{margin-top:8px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.lnk-blog .post-meta{margin-top:14px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap;}
.lnk-blog .post-meta .author{color:var(--yellow-deep);font-weight:700;}
.lnk-blog .pagination{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13px;}
.lnk-blog .pagination a,.lnk-blog .pagination span{padding:8px 14px;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--ink);}
.lnk-blog .pagination .current{background:var(--black);color:var(--yellow);border-color:var(--black);}

/* =========================================================================
   16b) POJEDYNCZY WPIS — Astra renderuje go swoim własnym single.php
   (motyw go nie nadpisuje, świadomie — patrz zasada z sekcji 1). Zasięg:
   `body.single-post`, natywna klasa WordPressa, więc bez zgadywania
   wewnętrznej struktury kontenerów Astry.
   Szerokość: samo ustawienie "Bez paska bocznego" w Dostosuj nie zawsze
   wystarczyło (zależnie od wybranej opcji zostawiało puste miejsce po
   prawej, tam gdzie byłby pasek boczny) — więc dodatkowo wymuszamy to
   też tutaj, na dwóch bardzo stabilnych, wieloletnich ID z rdzenia
   Astry/_s (#primary/#secondary — używane w każdej wersji tego motywu,
   niezależnie od tego, czy układ renderuje się we flex czy w grid), a
   samą treść ograniczamy do wygodnej szerokości czytelniczej (nie na
   pełne 100% kontenera — długie linie tekstu na całą szerokość ekranu
   źle się czyta).
   ========================================================================= */
body.single-post #secondary{display:none!important;}
body.single-post #primary{width:100%!important;max-width:100%!important;flex:0 0 100%!important;}

/* Znaleziony prawdziwy powód wąskiej, "połamanej" kolumny z okruszkiem
   obok treści (zgłoszone 09.09.2026, potwierdzone źródłem strony klienta):
   Astra odpala hak "astra_content_top" (na nim wisi nasz okruszek i
   obrazek główny) ZANIM otworzy #primary — więc oba nasze elementy lądują
   jako RODZEŃSTWO #primary wewnątrz ".ast-container", a ten kontener jest
   flexboxem (display:flex, od 922px szerokości - patrz CSS Astry). Bez
   własnej szerokości okruszek/obrazek kurczyły się do szerokości treści
   (stąd łamanie tekstu w pionową kolumnę), a #primary dzielił z nimi
   wiersz zamiast być pod spodem na pełną szerokość.
   Dotyczy nie tylko pojedynczego wpisu, ale KAŻDEJ strony, na której nasz
   okruszek trafia w ten sam sposób do Astry — np. zwykłych Stron (jak
   "Oferta", zgłoszone 09.09.2026) — więc bez ograniczania do
   body.single-post. Żeby NIE ruszać prawdziwego układu z paskiem bocznym
   tam, gdzie faktycznie jest potrzebny (np. sklep), zawijanie wiersza
   włączamy tylko na ".ast-container", który ma nasz okruszek jako
   bezpośrednie dziecko (selektor :has) — więc to nigdy nie dotyczy
   kontenerów bez naszego okruszka. */
.ast-container:has(> .lnk-crumbs){flex-wrap:wrap!important;}
.ast-container > .lnk-crumbs,
.ast-container > .lnk-single-grid{flex:0 0 100%!important;width:100%!important;max-width:100%!important;}

/* Astra ma WŁASNĄ, wbudowaną funkcję okruszków (osobną od naszej,
   poznaje się po separatorze ">" zamiast naszego "»") - u klienta włączona
   jako element nagłówka pojedynczego wpisu (".ast-breadcrumbs-wrapper"
   wewnątrz ".entry-header", potwierdzone źródłem strony 09.09.2026). To
   ona razem z naszą dawała "2 okruszki". Nasza już działa i wygląda
   spójnie z resztą motywu, więc chowamy tę natywną z Astry zamiast prosić
   o szukanie przełącznika w Dostosuj (który już raz było trudno znaleźć). */
body.single-post .entry-header .ast-breadcrumbs-wrapper{display:none!important;}
body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .entry-meta,
body.single-post .entry-footer,
body.single-post .comments-area{max-width:760px;margin-left:auto!important;margin-right:auto!important;}

/* 17.09.2026 — obrazek wyróżniający PRZEBUDOWANY na życzenie klienta:
   zamiast pełnej szerokości NAD tytułem, teraz to mała miniaturka
   (300×300, przycinana przez object-fit, żeby różne proporcje zdjęć nie
   psuły kwadratu) w LEWYM GÓRNYM ROGU treści wpisu, oblewana tekstem z
   prawej (float:left) — dokładana teraz przez filtr "the_content"
   (patrz lnk_single_featured_image() w inc/breadcrumbs.php), więc ląduje
   WEWNĄTRZ ".entry-content", nie jako osobny blok nad tytułem. Link
   prowadzi do pełnego rozmiaru i łapie go wtyczka SimpleLightbox.
   ".entry-content::after" z clear:both pilnuje, żeby float nie
   "wyciekł" pod stopkę wpisu, gdyby tekst był krótszy niż wysokość
   zdjęcia. Poniżej 480px (wąskie telefony) miniaturka przechodzi na
   pełną szerokość bloku, żeby nie ściskać tekstu do wąskiej kolumny. */
body.single-post .entry-content::after{content:"";display:table;clear:both;}
body.single-post .lnk-single-thumb{float:left;width:300px;height:300px;margin:4px 24px 16px 0;}
body.single-post .lnk-single-thumb a{display:block;width:100%;height:100%;}
body.single-post .lnk-single-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-card);}
@media (max-width:480px){
  body.single-post .lnk-single-thumb{float:none;width:100%;height:auto;max-width:300px;margin:0 auto 20px;}
  body.single-post .lnk-single-thumb img{height:auto;aspect-ratio:1/1;}
}
body.single-post .entry-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;}
body.single-post .entry-content{font-family:var(--font-body);font-size:16.5px;line-height:1.75;color:var(--ink-soft);}
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4{font-family:var(--font-display);color:var(--ink);margin-top:1.6em;margin-bottom:.5em;}
body.single-post .entry-content p{margin-bottom:1.3em;}
body.single-post .entry-content a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow-deep);text-underline-offset:2px;}
body.single-post .entry-content a:hover{color:var(--yellow-deep);}
body.single-post .entry-content blockquote{border-left:3px solid var(--yellow);padding:4px 0 4px 20px;margin:1.6em 0;color:var(--ink);font-style:italic;}
body.single-post .entry-content ul,
body.single-post .entry-content ol{padding-left:1.3em;margin-bottom:1.3em;}
body.single-post .entry-content img{border-radius:var(--r-sm);}
body.single-post .entry-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}

/* 17.09.2026 — kolumna z paskiem bocznym na pojedynczym wpisie, na
   życzenie klienta ("menu takie jak na stronie bloga: kategorie +
   popularne wpisy"). Otwierana/zamykana hakami astra_content_top(20)/
   astra_content_bottom w inc/breadcrumbs.php (patrz komentarz tam) —
   ".lnk-single-grid" opakowuje #primary (Astra wypisuje go jako
   pierwsze dziecko, zaraz po otwarciu diva) oraz nasz ".lnk-single-
   sidebar" (drugie dziecko). Ten sam układ 230px/1fr co na blogu
   (".shop-grid"), a "order:-1" na sidebarze wizualnie przenosi go na
   LEWĄ stronę (tak jak na blogu), mimo że w kodzie HTML jest DRUGI —
   treść wpisu zostaje pierwsza w DOM (lepiej pod SEO/czytniki ekranu),
   a wygląda tak samo jak na liście wpisów. Style linków/nagłówków są
   powtórzone z ".lnk-blog .shop-side" (sekcja 16), bo pojedynczy wpis
   nie ma klasy ".lnk-blog" na kontenerze. */
body.single-post .lnk-single-grid{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start;}
body.single-post .lnk-single-sidebar{order:-1;}
@media (max-width:760px){body.single-post .lnk-single-grid{grid-template-columns:1fr;}}
body.single-post .lnk-single-sidebar h5{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 12px;}
body.single-post .lnk-single-sidebar ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;}
body.single-post .lnk-single-sidebar a{text-decoration:none;color:var(--ink-soft);}
body.single-post .lnk-single-sidebar a:hover{color:var(--ink);}
body.single-post .lnk-single-sidebar a.active{color:var(--ink);font-weight:700;}

/* 17.09.2026 — cytowany kod (blok "Kod" z edytora WP / <pre><code>) miał
   czarne tło z czarnym/ciemnym tekstem na nim (nieczytelne — zgłoszenie
   klienta, mówi że prosił o to już wcześniej). W CAŁYM motywie NIE było
   dotąd ŻADNEJ reguły CSS na "pre"/"code"/".wp-block-code" — czyli
   czarne tło pochodziło z domyślnych stylów samej Astry (jej paleta
   kolorów), nie z naszego kodu. Naprawione jasnym, neutralnym tłem
   niezależnym od palety Astry. Bez ograniczania do pojedynczego wpisu —
   ".entry-content" dotyczy też Stron, więc kod cytowany będzie czytelny
   wszędzie. */
.entry-content pre,
.entry-content .wp-block-code{
  background:#f4f4f4!important;
  color:var(--ink)!important;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:16px;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
.entry-content pre code{background:transparent!important;padding:0;border:0;}
.entry-content code{
  background:#f0f0f0;
  color:var(--ink)!important;
  padding:2px 6px;
  border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  font-size:.92em;
}

/* =========================================================================
   17) FORMULARZE — jeden wspólny styl w CAŁYM motywie: kontakt (nasz
   formularz fallback), checkout, moje konto, wyszukiwarka, komentarze.
   Celowo BEZ .lnk z przodu, żeby zadziałało wszędzie.
   ========================================================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea,
.lnk .field input,
.lnk .field textarea,
.lnk .field select{
  width:100%!important;font-family:var(--font-body);font-size:14.5px;color:var(--ink)!important;
  background:#fff!important;border:1px solid var(--border)!important;border-radius:9px!important;
  padding:12px 14px!important;outline:none;transition:border-color .15s,box-shadow .15s;
  color-scheme:light; /* 14.09.2026 — patrz komentarz przy :root wyżej */
}
.woocommerce form .form-row textarea,
.wpcf7-form textarea,
.comment-form textarea,
.lnk .field textarea{resize:vertical;min-height:100px;}
/* 15.09.2026 — UWAGA, historia tej reguły: w 2.1.34 same POLA (input/
   textarea/select/select2) zostały na chwilę zmienione na czarne tło +
   żółty tekst — klient sprecyzował, że chodziło o czarne tło
   FORMULARZA (karty/sekcji, w której siedzą pola), a NIE każdego
   pojedynczego pola z osobna (zgłoszone zrzutem ekranu "Szczegóły
   konta" z czarnymi "pigułkami", 15.09.2026: "tło miało być czarne
   formularzy a nie pól tekstowych"). Dlatego same pola wróciły tu do
   zwykłego, jasnego wyglądu (czytelne białe pole niezależnie od tła
   dookoła) — czarno-złoty akcent przeniesiony jest teraz na kontener
   (patrz sekcja "Moje konto" niżej oraz ".woocommerce-billing-fields/
   .woocommerce-shipping-fields" na checkoucie, ta sama sekcja 17). */
.woocommerce form .form-row input.input-text:focus,
.woocommerce-account form input:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.lnk .field input:focus,
.lnk .field textarea:focus,
.lnk .field select:focus{
  border-color:var(--yellow-deep)!important;box-shadow:0 0 0 3px rgba(255,214,0,.25);
}
.lnk .field{margin-bottom:16px;}
.lnk .field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:7px;}

/* Etykiety pól (np. "Adres e-mail *") na formularzach WooCommerce (logowanie,
   rejestracja, checkout, edycja adresu/konta) i komentarzy — bez tej reguły
   dziedziczyły jakiś niewidoczny (biały-na-białym) kolor tekstu, którego
   źródłem NIE jest ten motyw (zgłoszone zrzutem ekranu, 08.09.2026 — ten
   sam objaw co wcześniej na dashboardzie "Moje konto"). Wymuszone na
   stabilnym, natywnym markupie WooCommerce/WP, żeby nie zależeć od tego,
   co dokładnie je przyciemniało. */
.woocommerce form label,
.woocommerce-account form label,
.comment-form label{
  color:var(--ink)!important;font-family:var(--font-body);font-weight:600;
  display:block;margin-bottom:6px;
}
.woocommerce form label .required,
.comment-form label .required{color:#D14343!important;}

/* 15.09.2026 — zgłoszone zrzutem ekranu strony checkout ("Dane
   rozliczeniowe"): sekcja z polami adresu rozliczeniowego/wysyłkowego
   miała zostać czarna, tak jak reszta motywu — poprzednia próba (patrz
   wyżej, "historia tej reguły") pomyliła to z czarnym tłem KAŻDEGO
   pojedynczego pola, co klient słusznie odrzucił. To poprawka na
   właściwym poziomie: kontener sekcji (stabilne, natywne klasy
   WooCommerce ".woocommerce-billing-fields"/".woocommerce-shipping-
   fields"/".woocommerce-additional-fields" — te same na każdym
   sklepie WooCommerce, niezależnie od układu strony), same pola w
   środku zostają jasne/czytelne jak wyżej w tej sekcji. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  background:var(--black)!important;border:1px solid var(--black);
  border-radius:var(--r-card);padding:24px;margin-bottom:24px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{color:var(--yellow)!important;margin-top:0;}
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label,
.woocommerce-checkout .woocommerce-additional-fields label{color:var(--yellow)!important;}
.woocommerce-checkout .woocommerce-billing-fields label .required,
.woocommerce-checkout .woocommerce-shipping-fields label .required,
.woocommerce-checkout .woocommerce-additional-fields label .required{color:#FF6B6B!important;}
.woocommerce-checkout .woocommerce-billing-fields .woocommerce-input-wrapper .description,
.woocommerce-checkout .woocommerce-shipping-fields .woocommerce-input-wrapper .description{color:rgba(255,214,0,.65)!important;}

/* 14.09.2026 — belt & suspenders dla wbudowanego "Dark Mode" Astry
   (klasa "astra-dark-mode-enable"). Ta klasa jest teraz blokowana też
   przez JS w functions.php (lnk_kill_astra_dark_mode_js — usuwa ją z
   <html> natychmiast i pilnuje, żeby nie wróciła), ale na wypadek
   ułamka sekundy zanim ten JS zdąży zadziałać, nadpisujemy tu wprost
   też regułę Astry, która pod tą klasą maluje pole <select>
   (zwykłe i select2/selectWoo z checkoutu — np. "Kraj / region") na
   czarno z jasnym tekstem — zgłoszone jako czarne tło na checkout,
   14.09.2026. (Komunikaty WooCommerce mają OSOBNĄ, bezwarunkową
   regułę niżej — patrz komentarz przy ".woocommerce-message" — bo
   tam klient chce czarne tło NA STAŁE, a nie tylko jako efekt Dark
   Mode Astry.) */
.astra-dark-mode-enable select,
.astra-dark-mode-enable .select2-container .select2-selection--single,
.astra-dark-mode-enable .select2-dropdown{
  background-color:#fff!important;color:var(--ink)!important;border-color:var(--border)!important;
}
/* 17.09.2026 — brakujący kawałek powyższej reguły: sam TEKST wybranej
   wartości w select2 (np. "Polska" po wybraniu kraju) siedzi w
   ZAGNIEŻDŻONYM ".select2-selection__rendered", nie w
   ".select2-selection--single" — a Astra ma WŁASNĄ, bezpośrednią
   regułę na ten zagnieżdżony element (kolor biały). Reguła na
   rodzicu nie nadpisuje koloru dziecka, które ma swój własny, jawny
   kolor — stąd białe na białym, zgłoszone 17.09.2026 ("jak wybiorę
   kraj to nie widać go wcale"), potwierdzone na żywo w przeglądarce. */
.astra-dark-mode-enable .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink)!important;
}

/* 17.09.2026 — DALSZY CIĄG: skoro "astra-dark-mode-enable" jest teraz
   trwale usuwana przez JS (patrz lnk_kill_astra_dark_mode_js() w
   functions.php), reguły wyżej (warunkowane TĄ klasą) w praktyce prawie
   nigdy się nie uruchomią. Problem: to WŁAŚNIE ta klasa dotąd
   (przypadkiem, przy okazji naprawiania innego błędu) nadawała polu
   Select2 "Kraj / region" na checkoucie biały spód i ciemny tekst.
   Zgłoszone zrzutem ekranu PO wgraniu poprawki na dark-mode: pole
   "Kraj / region" na czarnej karcie "Dane rozliczeniowe" stoi teraz bez
   żadnego tła, z jasnoszarym (prawie niewidocznym) tekstem — bo Select2
   renderuje WŁASNE divy zamiast prawdziwego <select> (zwykła reguła
   ".woocommerce form .form-row select" go nie dotyczy), a jedyny styl,
   jaki kiedykolwiek na nie działał, zależał od klasy, którą właśnie
   trwale usuwamy. Ta reguła działa ZAWSZE (nie tylko pod
   "astra-dark-mode-enable") — pole Select2 na checkoucie/w "Moje
   konto" ma wyglądać tak samo jak każde inne pole formularza. */
.woocommerce .select2-container .select2-selection--single,
.woocommerce .select2-dropdown{
  background-color:#fff!important;border:1px solid var(--border)!important;border-radius:9px!important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink)!important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--ink) transparent transparent transparent!important;
}
.woocommerce .select2-results__option{color:var(--ink)!important;background:#fff;}
.woocommerce .select2-results__option--highlighted[aria-selected]{background:var(--yellow)!important;color:var(--ink)!important;}

/* 14.09.2026 — komunikaty WooCommerce (błąd / info / sukces, np. "Potwierdź
   swój adres email...", "Żadne zamówienia nie zostały jeszcze złożone...")
   mają wyglądać w stylu marki: czarne/grafitowe tło + żółty tekst, tak jak
   autorski "Panel klienta" (zakładka "Moje projekty") — zgłoszone zrzutem
   ekranu tych bloków w "Moje konto → Zamówienia", z prośbą "kolega woli
   czarne tło, czcionka w nich żółta". W PIERWSZEJ wersji tej łatki (patrz
   wyżej) te same selektory były nadpisywane na biało, ale TYLKO pod klasą
   "astra-dark-mode-enable" (czyli tylko gdy Astra sama włączała dark mode).
   Tutaj, na stronie konta, tej klasy mogło w ogóle nie być — więc powyższa
   reguła nie miała zastosowania, a te elementy nie miały żadnego jawnie
   ustawionego koloru tekstu z naszej strony: dziedziczyły zwykły ciemny
   kolor tekstu motywu, co na czarnym tle dawało tekst niemal tego samego
   koloru co tło (czyli niewidoczny, "widoczny dopiero po zaznaczeniu" —
   zgłoszone 14.09.2026). Dlatego ta reguła jest teraz BEZWARUNKOWA (nie
   zależy od klasy dark-mode) i ustawia jawnie zarówno tło, jak i kolor
   tekstu — dzięki temu tekst jest widoczny zawsze, niezależnie od tego,
   czy Astra dorzuci swoją klasę dark-mode, czy nie. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message{
  background-color:var(--charcoal-2)!important;
  border:1px solid var(--black)!important;
  border-radius:var(--r-sm)!important;
  color:var(--yellow)!important;
  padding:16px 20px!important;
}
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li{
  color:var(--yellow)!important;
}
.woocommerce-error a:not(.button):not([class*="button" i]):not([class*="btn" i]),
.woocommerce-info a:not(.button):not([class*="button" i]):not([class*="btn" i]),
.woocommerce-message a:not(.button):not([class*="button" i]):not([class*="btn" i]){
  color:var(--yellow)!important;text-decoration:underline;
}

/* 15.09.2026 — zgłoszone: przycisk/link "Wyślij ponownie e-mail
   weryfikacyjny" (żółta "pigułka" bez widocznego napisu) w komunikacie
   "Potwierdź swój adres email...". PRZYCZYNA: to nie jest zwykły link
   tekstowy, tylko coś stylizowanego już jak przycisk (żółte tło z
   jakiejś wtyczki/Astry) — ale bez klasy dokładnie ".button", więc
   reguła wyżej (żółty tekst dla linków w komunikacie) malowała mu
   tekst na żółto na żółtym tle = niewidoczny. Tu wymuszamy dla
   KAŻDEGO linku w tych komunikatach, który ma w swojej klasie słowo
   "button" lub "btn" (niezależnie od reszty nazwy klasy), taki sam
   wygląd jak nasze zwykłe przyciski WooCommerce — czarny tekst na
   żółtym tle. */
.woocommerce-error a[class*="button" i],
.woocommerce-error a[class*="btn" i],
.woocommerce-info a[class*="button" i],
.woocommerce-info a[class*="btn" i],
.woocommerce-message a[class*="button" i],
.woocommerce-message a[class*="btn" i]{
  color:var(--black)!important;
  background:var(--yellow)!important;
  text-decoration:none!important;
  font-weight:600!important;
  border-radius:9px!important;
  padding:10px 18px!important;
  display:inline-block!important;
}

/* 15.09.2026 — zgłoszone: na checkoucie ikonka (czerwony wykrzyknik/
   znak "wstrzymane") przed pierwszym błędem ("Imię rozliczeniowy...")
   nachodziła na tekst i go zasłaniała. PRZYCZYNA: tę ikonkę dokłada
   Astra/WooCommerce jako pseudo-element ::before, wyliczony pod
   WŁASNY, szerszy padding-left tych komunikatów — a nasza reguła
   wyżej (z 14.09.2026) nadpisała padding na własny, węższy, więc
   zabrakło miejsca na ikonkę i zaczęła nachodzić na tekst. Najprościej
   i najbezpieczniej: ukrywamy tę ikonkę całkowicie (i tak niepotrzebna
   przy naszym czarno-złotym stylu komunikatów). */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error li::before,
.woocommerce-info li::before,
.woocommerce-message li::before{
  display:none!important;content:none!important;
}

/* 15.09.2026 — zgłoszone: menu boczne "Moje konto" ma mieć czarne tło i
   żółty tekst NA STAŁE. Reguła TUTAJ (dodana najpierw) okazała się
   przegrywać na "Adresach"/innych zakładkach z DUŻO starszą, bardziej
   szczegółową regułą ".woocommerce-account .woocommerce-MyAccount-
   navigation ul li a" (sekcja "Moje konto" niżej w pliku, z 08.09.2026),
   która wymuszała BIAŁE tło — wtedy to była naprawa innego błędu
   (czarne na czarnym), teraz stoi w sprzeczności z tym, czego chce
   klient. Zamiast dwóch konkurujących ze sobą reguł, właściwa poprawka
   jest scalona wprost w tamtej, starszej (i faktycznie wygrywającej)
   regule — patrz sekcja "Moje konto" niżej. */

/* 15.09.2026 — zgłoszone: kółko ładowania (np. przy aktualizacji
   koszyka) ma być naszym logo (złoty łańcuszek), kręcącym się, na
   PRZEZROCZYSTYM tle zamiast czarnego. Sprawdzone wprost w plikach
   WooCommerce (woocommerce.css): spinner to pseudo-element
   ".blockUI.blockOverlay::before" z obrazkiem tła i animacją obrotu
   "spin" (już zdefiniowaną przez WooCommerce), a przyciemnione tło
   to sam ".blockUI.blockOverlay" (kolor/przezroczystość ustawiane
   przez skrypt blockUI inline — nadpisywalne tylko przez regułę CSS
   z !important, tak jak niżej). logo-icon.webp miało na sztywno
   czarne tło "wypalone" w pliku (bez kanału alfa), więc na potrzeby
   tego spinnera przygotowany osobny plik z przezroczystym tłem:
   logo-icon-transparent.png. */
.woocommerce .blockUI.blockOverlay,
.blockUI.blockOverlay{
  background:transparent!important;
  opacity:1!important;
}
.woocommerce .blockUI.blockOverlay::before,
.blockUI.blockOverlay::before{
  width:1.2em!important;
  height:1.2em!important;
  margin-left:-0.6em!important;
  margin-top:-0.6em!important;
  background:url('assets/images/logo-icon-transparent.png') center center no-repeat!important;
  background-size:contain!important;
  animation:spin 1.2s linear infinite!important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wpcf7-submit{
  background:var(--yellow)!important;color:var(--black)!important;border:none!important;
  font-family:var(--font-body)!important;font-weight:600!important;
  border-radius:9px!important;padding:12px 20px!important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wpcf7-submit:hover{background:var(--yellow-deep)!important;}

/* =========================================================================
   17b) FORMULARZ KONTAKTOWY na czarnej karcie — strona "Kontakt", treść
   wklejona bezpośrednio przez klienta (blok HTML z ID "#formularz", tło
   #111), z formularzem Contact Form 7 osadzonym w środku przez shortcode.
   Zgłoszone 13.09.2026: nie widać ani etykiet pól, ani tego co się wpisuje.
   PRAWDZIWA PRZYCZYNA: etykiety/opisy generowane przez CF7 to zwykły tekst
   bez własnego koloru — dziedziczyły ciemny kolor tekstu motywu (--ink), a
   na czarnym tle karty to ciemny-na-czarnym = niewidoczne (ten sam rodzaj
   błędu co wcześniej na "Moje konto", patrz sekcja 17 wyżej). Same pola
   miały tylko cienką, jasną ramkę (ledwo widoczną na czarnym tle). Naprawa:
   jasny tekst na etykiety/opisy w tym formularzu + wyraźna, złota ramka
   pól (grubsza, kolor --yellow) i czarny akcent na przycisku — dokładnie
   jak poprosił klient ("ramki żółte/złote z dodatkowym czarnym"). Celowo
   zawężone do "#formularz", żeby nie zmieniać wyglądu tego samego CF7,
   gdyby był kiedyś użyty gdzie indziej na jasnym tle (sekcja 17 wyżej
   zostaje bez zmian dla wszystkich INNYCH formularzy w motywie).
   ========================================================================= */
#formularz .wpcf7-form,
#formularz .wpcf7-form p{color:#f1f1f1;}
#formularz .wpcf7-form label,
#formularz .wpcf7-form .wpcf7-list-item-label{color:#f1f1f1!important;font-weight:600;}
#formularz .wpcf7-form input[type="text"],
#formularz .wpcf7-form input[type="email"],
#formularz .wpcf7-form input[type="tel"],
#formularz .wpcf7-form input[type="url"],
#formularz .wpcf7-form input[type="number"],
#formularz .wpcf7-form select,
#formularz .wpcf7-form textarea{
  background:#fff!important;color:var(--ink)!important;
  border:2px solid var(--yellow)!important;border-radius:10px!important;
  padding:13px 15px!important;
}
#formularz .wpcf7-form input[type="text"]:focus,
#formularz .wpcf7-form input[type="email"]:focus,
#formularz .wpcf7-form input[type="tel"]:focus,
#formularz .wpcf7-form input[type="url"]:focus,
#formularz .wpcf7-form input[type="number"]:focus,
#formularz .wpcf7-form select:focus,
#formularz .wpcf7-form textarea:focus{
  border-color:var(--yellow-deep)!important;box-shadow:0 0 0 4px rgba(255,214,0,.3)!important;
}
#formularz .wpcf7-form ::placeholder{color:#8a8a8a;opacity:1;}
#formularz .wpcf7-submit{
  background:var(--yellow)!important;color:var(--black)!important;
  border:2px solid var(--black)!important;font-weight:700!important;
}
#formularz .wpcf7-submit:hover{background:var(--yellow-deep)!important;}
#formularz .wpcf7-not-valid-tip{color:#ff8080!important;font-weight:600;}
#formularz .wpcf7-response-output{color:#f1f1f1!important;border-color:var(--yellow)!important;border-radius:10px!important;}

/* =========================================================================
   17c) „POWIĄZANE WPISY" pod pojedynczym wpisem — natywna funkcja Astry
   (włączona przez klienta w Dostosuj), NIE nasz kod. Błąd był po stronie
   Astry: na tej instalacji zmienna --ast-global-color-2 = #ffffff, a Astra
   używa TEJ SAMEJ zmiennej i dla tła sekcji (białe), i dla koloru tekstu
   tytułu sekcji/tytułów wpisów/zajawek — czyli biały tekst na białym tle
   (niewidoczny). To nie ma nic wspólnego z Dark Mode Astry (u nas i tak na
   stałe wyłączony przez lnk_disable_astra_dark_mode()) — to kolizja w
   domyślnej kolorystyce samej Astry. Nadpisujemy tylko kolor tekstu na
   nasz --ink, zostawiając resztę (odstępy, siatkę 3 kolumn) bez zmian.
   13.09.2026.
   ========================================================================= */
.ast-related-posts-title,
.ast-related-post-content .entry-header .ast-related-post-title,
.ast-related-post-content .entry-header .ast-related-post-title a,
.ast-related-post-excerpt{color:var(--ink)!important;}
.ast-related-post-content .entry-header .ast-related-post-title a:hover{color:var(--yellow-deep)!important;}

/* 17.09.2026 — miniaturki w tej samej sekcji "Powiązane wpisy" (osobny
   problem od koloru tekstu wyżej): patrz obszerny komentarz przy
   lnk_fix_related_posts_thumbnail() w functions.php — poza brakującym
   <img> (naprawionym w PHP), na pojedynczym wpisie jest jeszcze obca
   reguła CSS (nie z tego motywu) chowająca obrazki po klasach typu
   ".wp-post-image". Nasz <img> dostaje teraz inną klasę
   ("lnk-related-thumb-img"), więc ta reguła go nie złapie, ale
   dokładamy tu jeszcze rozmiar/wygląd (Astra sama, bez wp-post-image,
   mogłaby zostawić obrazek bez żadnego stylu szerokości). */
.ast-related-post-featured-section img{
  display:block!important;width:100%!important;height:auto!important;
  border-radius:var(--r-sm);
}

/* =========================================================================
   18) SKLEP / WOOCOMMERCE — reskin na natywnym, stabilnym markupie
   WooCommerce (bez nadpisywania plików szablonów woocommerce/*.php —
   patrz uzasadnienie w inc/woocommerce.php). Panel boczny z kategoriami
   z mockupu = natywny sidebar Astry (Dostosuj → WooCommerce → Układ
   sklepu) + widżet "Kategorie produktów" w Wygląd → Widżety.
   ========================================================================= */
.woocommerce,.woocommerce input,.woocommerce button,.woocommerce select,.woocommerce textarea{font-family:var(--font-body);}
.woocommerce h1,.woocommerce h2,.woocommerce h3,.woocommerce .product_title{font-family:var(--font-display);color:var(--ink);}

.woocommerce nav.woocommerce-breadcrumb{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  max-width:var(--maxw);margin:18px auto 0;padding:0 32px;
}
.woocommerce nav.woocommerce-breadcrumb a{color:var(--ink-soft);}

/* --- siatka produktów (sklep/kategoria) --- */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px;margin:0!important;padding:0!important;}
@media (max-width:920px){.woocommerce ul.products{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.woocommerce ul.products{grid-template-columns:1fr;}}
.woocommerce ul.products li.product{
  position:relative;width:100%!important;margin:0!important;padding:16px!important;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  float:none!important;
}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(10,10,10,.2);border-color:var(--ink);}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{text-decoration:none;color:inherit;display:block;}
.woocommerce ul.products li.product img{aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--bg-alt);margin-bottom:14px!important;}
.woocommerce ul.products li.product .product-cat{display:block;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--yellow-deep);margin-bottom:4px;}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14.5px!important;font-weight:700;margin:0 0 6px!important;font-family:var(--font-display);color:var(--ink);}
.woocommerce ul.products li.product .price{font-family:var(--font-mono);font-weight:600;font-size:16px;color:var(--ink);}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--ink);}
.woocommerce ul.products li.product .price del{color:var(--ink-faint);opacity:.7;}
.woocommerce ul.products li.product .star-rating{color:var(--yellow-deep);margin:6px 0 0;}
.woocommerce ul.products li.product .button{width:100%;justify-content:center;margin-top:12px!important;display:flex;}
.woocommerce ul.products li.product .stock{position:absolute;top:24px;left:24px;background:#fff;border:1px solid var(--border);color:var(--ink-soft);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.03em;padding:4px 8px;border-radius:999px;z-index:2;margin:0;}
.woocommerce span.onsale{background:var(--black)!important;color:var(--yellow)!important;font-family:var(--font-mono);font-weight:700;top:12px;left:12px;min-height:auto;min-width:auto;line-height:1;padding:6px 10px;border-radius:999px;}

/* --- strona pojedynczego produktu --- */
.woocommerce div.product div.images{border-radius:16px;overflow:hidden;}
.woocommerce div.product div.images img{border-radius:16px;}
.woocommerce div.product .pdp-cat{display:block;font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--yellow-deep);margin-bottom:6px;}
.woocommerce div.product .product_title{font-size:clamp(22px,2.6vw,28px);font-weight:800;}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--font-mono);font-size:26px;font-weight:600;color:var(--ink);}
.woocommerce div.product .woocommerce-product-rating{margin:10px 0;}
.woocommerce div.product .star-rating{color:var(--yellow-deep);}
.woocommerce div.product div.summary p.stock{font-family:var(--font-mono);font-size:12.5px;}
.woocommerce div.product form.cart .quantity input.qty{border-radius:9px;padding:11px;border:1px solid var(--border);text-align:center;font-family:var(--font-mono);}
.woocommerce div.product form.cart .button{padding:13px 24px!important;}
.woocommerce .pdp-trust{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;}
.woocommerce .pdp-trust div{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-soft);}
.woocommerce .pdp-trust svg{width:15px;height:15px;color:var(--yellow-deep);flex:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--border);padding:0;margin:44px 0 0;display:flex;gap:28px;background:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{padding:0!important;margin:0!important;background:none!important;border:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:16px 2px!important;font-size:14px!important;font-weight:600!important;color:var(--ink-faint)!important;background:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--ink)!important;border-bottom:2px solid var(--yellow)!important;}
.woocommerce div.product .woocommerce-tabs .panel{padding:22px 2px;color:var(--ink-soft)!important;font-size:14.5px;max-width:68ch;background:none!important;}
.woocommerce div.product .woocommerce-tabs .panel h2{color:var(--ink)!important;font-size:18px!important;margin-bottom:14px!important;}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{color:var(--ink-soft)!important;}
.woocommerce div.product .woocommerce-tabs .panel table th{color:var(--ink)!important;}
.woocommerce div.product .woocommerce-tabs .panel table td{color:var(--ink-soft)!important;}
/* --- zakładka "Opinie" (recenzje) na stronie produktu --- */
.woocommerce #reviews.woocommerce-Reviews{background:none!important;}
.woocommerce #reviews .woocommerce-Reviews-title{color:var(--ink)!important;font-family:var(--font-display);font-size:18px;margin-bottom:16px;}
.woocommerce #reviews ol.commentlist{list-style:none;margin:0;padding:0;}
.woocommerce #reviews ol.commentlist li{margin-bottom:18px;}
.woocommerce #reviews .comment-text{background:#fff!important;border:1px solid var(--border);border-radius:var(--r-sm);padding:16px 18px;}
.woocommerce #reviews .comment-text p.meta{color:var(--ink-soft)!important;font-size:13px;margin-bottom:8px;}
.woocommerce #reviews .comment-text .description,
.woocommerce #reviews .comment-text .description p{color:var(--ink)!important;}
.woocommerce #reviews .star-rating{color:var(--yellow-deep)!important;}
.woocommerce #review_form label{color:var(--ink)!important;}
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input{color:var(--ink)!important;background:#fff!important;border:1px solid var(--border);border-radius:var(--r-sm);}
.woocommerce #review_form #respond .comment-form-rating .stars a{color:var(--yellow-deep)!important;}
.woocommerce p.no-reviews{color:var(--ink-soft)!important;}
.woocommerce div.product .related.products{margin-top:64px;}
.woocommerce div.product .related.products h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:24px;}

/* --- koszyk --- */
.woocommerce table.cart{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;border-collapse:separate;width:100%;}
.woocommerce table.cart thead{display:none;}
.woocommerce table.cart td,.woocommerce table.cart th{border:none;border-bottom:1px solid var(--border);padding:16px 18px;}
.woocommerce table.cart tr:last-child td{border-bottom:none;}
.woocommerce table.cart td.product-thumbnail img{width:56px;border-radius:9px;}
.woocommerce table.cart td.product-name a{font-weight:600;color:var(--ink);text-decoration:none;}
.woocommerce table.cart td.product-price,.woocommerce table.cart td.product-subtotal{font-family:var(--font-mono);font-size:14px;}
.woocommerce table.cart td.actions{background:var(--bg-alt);}
.woocommerce table.cart .coupon input#coupon_code{width:auto;min-width:180px;}
.woocommerce table.cart td.actions .button{background:var(--yellow)!important;}
.woocommerce a.remove{color:var(--ink-faint)!important;border-radius:50%;}
.woocommerce a.remove:hover{background:#D14343!important;color:#fff!important;}
.woocommerce .cart-collaterals .cart_totals{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-card);padding:26px;float:none;width:100%;max-width:380px;margin-left:auto;}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-Address h3{background:none!important;color:var(--ink)!important;font-size:16px;font-weight:700;padding:0 0 .7em!important;margin:0 0 12px;border-bottom:1px solid var(--border);}
.woocommerce .cart_totals table{border:none;}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td{border:none!important;padding:10px 0;font-size:14px;color:var(--ink)!important;background:none!important;}
.woocommerce .cart_totals .order-total{border-top:1px solid var(--border);font-family:var(--font-mono);font-weight:700;}
.woocommerce .cart_totals .woocommerce-shipping-destination{color:var(--ink-soft)!important;}
.woocommerce .cart_totals .shipping-calculator-button{color:var(--ink)!important;font-weight:600;text-decoration:underline;}
.woocommerce .wc-proceed-to-checkout a.checkout-button{width:100%;justify-content:center;display:flex;text-align:center;}

/* --- "Moje konto" (dashboard + nawigacja) — po zalogowaniu ten fragment
   renderował się z czarnym tłem i prawie niewidocznym, ciemnoszarym
   tekstem (zgłoszone przez klienta zrzutem ekranu, 08.09.2026) — źródło
   tego przyciemnienia nie jest naszym kodem (motyw nigdy wcześniej nie
   celował w te klasy), więc zamiast zgadywać skąd się bierze, wymuszamy
   tu, na stabilnym, natywnym markupie WooCommerce, taką samą jasną kartę
   jak na ekranie logowania/rejestracji (który już wyglądał dobrze) —
   spójnie z resztą reskinu sklepu.
   15.09.2026 — ZMIANA NA ŻYCZENIE: klient jednak chce, żeby to menu
   (Kokpit/Zamówienia/Moje projekty/Pobrania/Adresy/Szczegóły konta/
   Wyloguj się) było na stałe czarne z żółtym tekstem, na wszystkich
   podstronach "Moje konto" — nie tylko białe jak w naprawie z 08.09.
   Ta reguła jest tu bardziej szczegółowa (".woocommerce-account" +
   "ul li a") niż nowsza próba wyżej w pliku, więc to ONA faktycznie
   wygrywa w przeglądarce — stąd poprawka scalona bezpośrednio tutaj,
   zamiast w osobnym, przegrywającym bloku. */
.woocommerce-account .woocommerce-MyAccount-navigation{background:var(--charcoal-2)!important;border:1px solid var(--black);border-radius:var(--r-card);padding:8px;margin-bottom:24px;}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--black);}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child{border-bottom:none;}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{display:block;padding:12px 16px;background:transparent!important;color:var(--yellow)!important;text-decoration:none;font-weight:600;font-size:14px;border-left:3px solid transparent;}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{background:var(--black)!important;color:var(--yellow)!important;}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{background:var(--black)!important;border-left-color:var(--yellow);color:var(--yellow)!important;font-weight:700;}
/* 15.09.2026 — zgłoszone zrzutami ekranu "Adresy" i "Szczegóły konta":
   ten panel (cała prawa/główna kolumna "Moje konto" — dashboard,
   zamówienia, adresy, edycja konta) miał zostać czarny jak nawigacja
   obok, a nie biały. Karta zmienia tło na czarne, a cały tekst w środku
   (poza osadzonym panelem klienta ":not([class*="lcp"])", patrz niżej)
   dostaje jawny jasny/żółty kolor — bez tego dziedziczyłby domyślny
   ciemny kolor motywu i wychodziłby ciemny-na-czarnym (ten sam błąd,
   który już kilka razy naprawialiśmy gdzie indziej w tym motywie). */
.woocommerce-account .woocommerce-MyAccount-content{background:var(--black)!important;border:1px solid var(--black);border-radius:var(--r-card);padding:28px;color:var(--yellow)!important;}
.woocommerce-account .woocommerce-MyAccount-content h1:not([class*="lcp"]),
.woocommerce-account .woocommerce-MyAccount-content h2:not([class*="lcp"]),
.woocommerce-account .woocommerce-MyAccount-content h3:not([class*="lcp"]){color:var(--yellow)!important;}
.woocommerce-account .woocommerce-MyAccount-content p:not([class*="lcp"]){color:rgba(255,214,0,.75)!important;}
.woocommerce-account .woocommerce-MyAccount-content a:not([class*="lcp"]){color:var(--yellow)!important;font-weight:600;text-decoration:underline;}
.woocommerce-account .woocommerce-MyAccount-content a:hover:not([class*="lcp"]){color:#fff!important;}
.woocommerce-account .woocommerce-MyAccount-content strong:not([class*="lcp"]){color:var(--yellow)!important;}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table{border:1px solid var(--charcoal-2);border-radius:var(--r-sm);overflow:hidden;border-collapse:separate;}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{border:none;border-bottom:1px solid var(--charcoal-2);color:var(--yellow)!important;}
/* 15.09.2026 — strona "Adresy": karty "Adres rozliczeniowy"/"Adres do
   wysyłki" (znacznik WooCommerce ".woocommerce-Address", z nagłówkiem
   h2 w ".woocommerce-Address-title") miały WŁASNE, jasnoszare tło z
   Astry — na czarnym panelu wyżej wyglądałyby jak przypadkowo
   zapomniana jasna plama. Dostały tu spójny, ciemniejszy niż tło karty
   odcień (żeby było widać, że to osobne "podkarty"), z tą samą
   kolorystyką tekstu co reszta panelu. Selektor celowo ograniczony do
   wnętrza ".woocommerce-MyAccount-content", żeby NIE ruszać identycznie
   nazwanego bloku adresu na stronie potwierdzenia zamówienia (tam
   zostaje jasny styl z reguły ".woocommerce-Address h3" wyżej w pliku). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{background:var(--charcoal-2)!important;border:1px solid var(--black)!important;border-radius:var(--r-sm);padding:20px;}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title{border-bottom:1px solid var(--black);margin:0 0 12px;padding:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3{color:var(--yellow)!important;margin:0;font-size:16px;}
.woocommerce-account .woocommerce-MyAccount-content address{color:rgba(255,214,0,.8)!important;font-style:italic;}
/* 15.09.2026 — etykiety pól W TYM panelu (np. "Imię *"/"Nazwisko *" na
   "Szczegóły konta") dziedziczyłyby regułę ".woocommerce-account form
   label" niżej (ciemny kolor, myślana dla jasnego tła logowania/
   rejestracji) — na czarnym tle wyszłyby ciemne-na-czarnym. Ten
   selektor jest bardziej szczegółowy (dodatkowa klasa
   ".woocommerce-MyAccount-content"), więc wygrywa tylko tutaj, nie
   ruszając etykiet na logowaniu/rejestracji (tam nie ma tej klasy). */
.woocommerce-account .woocommerce-MyAccount-content form label{color:var(--yellow)!important;}
.woocommerce-account .woocommerce-MyAccount-content form label .required{color:#FF6B6B!important;}
/* 14.09.2026: panel klienta do śledzenia indeksacji (osobne, zewnętrzne
   narzędzie klienta osadzone jako zakładka w "Moje konto", nie nasz kod —
   klasy zaczynające się od "lcp") ma WŁASNĄ, ciemną kolorystykę (jasny
   tekst na ciemnym tle). Reguły wyżej wymuszały na WSZYSTKICH linkach/
   pogrubieniach w "Moje konto" ciemny kolor tekstu (var(--ink)) z
   podkreśleniem — w tym panelu klienta to wychodziło jako ciemny tekst
   na ciemnym tle (np. tytuł artykułu "Pożyczka pod zastaw..." prawie
   niewidoczny). Wykluczone przez :not([class*="lcp"]), żeby panel klienta
   mógł pokazywać własne kolory bez przebicia przez nasze !important. */

/* --- panel boczny sklepu (widget area natywny WordPressa/Astry) --- */
#secondary.widget-area .widget-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 12px;}
#secondary.widget-area ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;}
#secondary.widget-area ul a{text-decoration:none;color:var(--ink-soft);}
#secondary.widget-area ul a:hover{color:var(--ink);}

/* =========================================================================
   19) OFERTA — treść strony "Oferta" wklejona przez klienta bezpośrednio w
   edytorze WP (blok Niestandardowy HTML), własne klasy "linkovo-*".
   09.09.2026: pierwsza wersja tylko "dopasowała kolorystycznie" (v2.1.18),
   klient słusznie zauważył że to za mało jak na stronę OFERTOWĄ, która ma
   sprzedawać — więc przeprojektowane bardziej "marketingowo": mocniejszy
   hero, karty z hover-liftem, pakiety BOOST jako prawdziwe karty
   porównawcze (reużyte te same .boost-card co w sekcji BOOST na stronie
   głównej — sekcja 10 — dla spójności z resztą serwisu), kolorowe kafle
   cen odnowienia (zielony/żółty/czerwony = "im wcześniej, tym taniej") i
   pasek zaufania nad przyciskiem CTA. Trzeba dopisać klasę "lnk" do
   sekcji-głównej ("linkovo-offer" → "linkovo-offer lnk") — patrz sekcja 2
   po wspólną typografię (.lnk h1/h2/p) — i podmienić treść na wersję z
   czatu (nowa struktura pakietów BOOST i cennika odnowień).
   ========================================================================= */
.lnk .linkovo-offer{display:block;padding:56px 0 90px;}
.lnk .linkovo-offer > *{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;}
@media (max-width:640px){.lnk .linkovo-offer > *{padding-left:20px;padding-right:20px;}}
.lnk .linkovo-offer a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--yellow-deep);text-underline-offset:2px;}
.lnk .linkovo-offer a:hover{color:var(--yellow-deep);}

/* --- Wstęp (linkovo-hero) — plakietka + większy, mocniejszy nagłówek --- */
.lnk .linkovo-hero{max-width:760px!important;margin-bottom:60px;}
.lnk .linkovo-label{display:inline-flex;align-items:center;gap:8px;background:var(--black);color:var(--yellow);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:22px;}
.lnk .linkovo-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none;}
.lnk .linkovo-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin-bottom:20px;}
.lnk .linkovo-hero > p,.lnk .linkovo-hero{color:var(--ink-soft);font-size:17.5px;line-height:1.7;}

/* --- Trzy filary (linkovo-pillars / linkovo-card) — karty z akcentem u
   góry i unoszeniem na hover, ten sam język co karty bloga (.post-card). --- */
.lnk .linkovo-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:70px;}
@media (max-width:860px){.lnk .linkovo-pillars{grid-template-columns:1fr;}}
.lnk .linkovo-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:32px 28px;font-size:14.5px;color:var(--ink-soft);line-height:1.6;overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;}
.lnk .linkovo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.lnk .linkovo-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(10,10,10,.22);border-color:var(--yellow-deep);}
.lnk .linkovo-card:hover::before{transform:scaleX(1);}
.lnk .linkovo-icon{font-family:var(--font-display);font-size:16px;font-weight:900;color:var(--yellow);background:var(--ink);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;margin-bottom:18px;}
.lnk .linkovo-card h2{font-size:19px;margin-bottom:10px;}
.lnk .linkovo-card > p{margin-bottom:6px;}
.lnk .linkovo-card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.lnk .linkovo-card ul li{position:relative;padding-left:18px;}
.lnk .linkovo-card ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--yellow);}

/* --- Sekcje ogólne (linkovo-section) --- */
.lnk .linkovo-section{margin-bottom:70px;}
.lnk .linkovo-section h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px;}
.lnk .linkovo-section > p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;max-width:70ch;margin-bottom:0;}

/* --- Pakiety BOOST jako prawdziwe karty porównawcze — reużywamy DOKŁADNIE
   te same klasy ".boost-cards/.boost-card/.tag/.qty/.dot-fill/.pop" co w
   sekcji BOOST na stronie głównej (sekcja 10), żeby wyglądały spójnie z
   resztą serwisu; ".linkovo-boost-cards" tylko poszerza siatkę do 4
   kolumn (na głównej są 3 pakiety, tu 4). --- */
.lnk .linkovo-boost-cards.boost-cards{grid-template-columns:repeat(4,1fr)!important;align-items:stretch!important;}
@media (max-width:980px){.lnk .linkovo-boost-cards.boost-cards{grid-template-columns:repeat(2,1fr)!important;}}
@media (max-width:560px){.lnk .linkovo-boost-cards.boost-cards{grid-template-columns:1fr!important;}}
.lnk .linkovo-boost-cards .boost-card{display:flex;flex-direction:column;}
.lnk .linkovo-boost-detail{position:relative;z-index:2;font-size:13px;color:var(--ink-soft);margin-top:10px;font-family:var(--font-body);}
.lnk .linkovo-boost-total{position:relative;z-index:2;margin-top:auto;padding-top:14px;font-size:13px;color:var(--ink-soft);border-top:1px solid var(--border);}
.lnk .linkovo-boost-total strong{font-family:var(--font-mono);font-size:20px;color:var(--ink);margin-right:6px;}
.lnk .linkovo-boost-cards .boost-card.mid .linkovo-boost-total strong{color:var(--yellow-deep);}

/* --- Ewolucja Sieci (linkovo-network-grid) — ten sam język kart co filary
   wyżej, dla spójności wizualnej całej strony. --- */
.lnk .linkovo-network-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;}
@media (max-width:860px){.lnk .linkovo-network-grid{grid-template-columns:1fr;}}
.lnk .linkovo-network-grid > div{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:26px 24px;font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.lnk .linkovo-network-grid > div strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:16px;font-weight:800;margin-top:4px;margin-bottom:8px;}
.lnk .linkovo-network-grid > div p{margin:0;}

/* --- Sekcja ciemna "Utrzymanie Mocy" (linkovo-dark) — ta sama warstwa co
   ".on-dark" gdzie indziej w motywie, na pełną szerokość ekranu jak hero
   (patrz sekcja 5) — dlatego musi nadpisać !important ogólny padding/
   max-width z reguły ".linkovo-offer > *" wyżej. --- */
.lnk .linkovo-dark{
  background:var(--black);color:#fff;
  position:relative;left:50%;right:50%;width:100vw;
  margin-left:-50vw!important;margin-right:-50vw!important;
  padding:70px 32px!important;max-width:none!important;
}
.lnk .linkovo-dark > *{max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.lnk .linkovo-dark h2{color:#fff;}
.lnk .linkovo-dark > p{color:#B9BAC0;max-width:70ch;}
.lnk .linkovo-dark-note{background:rgba(255,255,255,.06);border-left:3px solid var(--yellow);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 22px;margin:28px auto;color:#B9BAC0;font-size:14.5px;line-height:1.65;max-width:var(--maxw);}

/* --- Cennik przedłużeń — kolorowe kafle: im wcześniej, tym taniej (zielony
   → żółty → czerwony), żeby wizualnie zachęcać do przedłużania z
   wyprzedzeniem (Early Bird), zamiast neutralnej listy jak wcześniej. --- */
.lnk .linkovo-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px auto;max-width:var(--maxw);}
@media (max-width:860px){.lnk .linkovo-pricing{grid-template-columns:1fr;}}
.lnk .linkovo-price-tier{background:var(--charcoal);border:1px solid #2A2B30;border-top:3px solid var(--border);border-radius:var(--r-card);padding:26px 22px;text-align:center;}
.lnk .linkovo-price-tier strong{display:block;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-bottom:8px;}
.lnk .linkovo-price-when{display:block;font-size:12.5px;color:#8C8D93;margin-bottom:18px;min-height:32px;}
.lnk .linkovo-price-pct{display:block;font-family:var(--font-display);font-size:44px;font-weight:900;line-height:1;}
.lnk .linkovo-price-note{display:block;font-size:12.5px;color:#8C8D93;margin-top:6px;}
.lnk .linkovo-price-tier.good{border-top-color:var(--green);}
.lnk .linkovo-price-tier.good .linkovo-price-pct{color:var(--green);}
.lnk .linkovo-price-tier.neutral{border-top-color:var(--yellow);}
.lnk .linkovo-price-tier.neutral .linkovo-price-pct{color:var(--yellow);}
.lnk .linkovo-price-tier.warn{border-top-color:var(--red);}
.lnk .linkovo-price-tier.warn .linkovo-price-pct{color:var(--red);}
/* 15.09.2026 — sekcje ".linkovo-dark" (stary wstęp "Utrzymanie mocy") i
   ".linkovo-section" z kaflami ".linkovo-pricing" WYŻEJ zostały na
   stronie "Oferta" ZASTĄPIONE jedną, nową sekcją ".linkovo-renewal"
   (patrz niżej) — klient przesłał gotowy mockup nowej treści/wyglądu
   ("Utrzymanie Mocy: model 12-miesięczny", inne % przedłużenia: 20/30/
   40% aktualnej ceny zamiast -20%/100%/+20% od ceny bazowej). Reguły
   ".linkovo-dark/.linkovo-pricing/.linkovo-price-tier" wyżej ZOSTAJĄ w
   pliku nietknięte (na wypadek, gdyby były jeszcze gdzieś użyte), ale
   po podmianie treści strony "Oferta" na nową (patrz instrukcja w
   czacie) nie renderują się już nigdzie na tej stronie.

   --- Nowa sekcja "Utrzymanie Mocy" (linkovo-renewal) — jedna czarna
   karta z zaokrąglonymi rogami (NIE na pełną szerokość ekranu, w
   odróżnieniu od starej ".linkovo-dark"), z dwoma akapitami, trzema
   "podkartami" stref przedłużenia i akapitem zamykającym. --- */
.lnk .linkovo-renewal{
  background:var(--black);color:#fff;border-radius:22px;
  padding:48px 56px;margin:32px auto;max-width:var(--maxw);
}
@media (max-width:640px){.lnk .linkovo-renewal{padding:32px 24px;}}
.lnk .linkovo-renewal h2{color:var(--yellow);font-size:clamp(22px,3vw,30px);margin:0 0 14px;}
.lnk .linkovo-renewal > p{color:#B9BAC0;font-size:15.5px;line-height:1.65;max-width:90ch;margin:0;}
.lnk .linkovo-renewal-divider{border:none;border-top:1px solid rgba(255,255,255,.14);margin:26px 0;}
.lnk .linkovo-renewal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:0;}
@media (max-width:860px){.lnk .linkovo-renewal-grid{grid-template-columns:1fr;}}
.lnk .linkovo-renewal-tier{background:var(--charcoal-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);padding:22px 24px;}
.lnk .linkovo-renewal-tier h3{color:var(--yellow);font-size:17px;font-weight:800;margin:0 0 10px;}
.lnk .linkovo-renewal-when{display:block;color:#8C8D93;font-size:13.5px;line-height:1.5;margin-bottom:14px;min-height:38px;}
.lnk .linkovo-renewal-price{display:block;color:#fff;font-weight:700;font-size:15px;line-height:1.4;}
.lnk .linkovo-renewal-footer{margin-top:0;}

/* --- CTA końcowe (linkovo-cta) — ten sam żółty prostokąt co ".final"
   (sekcja 14) + pasek zaufania nad przyciskiem. --- */
.lnk .linkovo-cta{background:var(--yellow);border-radius:22px;padding:64px 56px;text-align:center;color:#1a1600;font-size:16px;}
@media (max-width:640px){.lnk .linkovo-cta{padding:48px 26px;}}
.lnk .linkovo-cta h2{color:var(--black);max-width:24ch;margin:0 auto 14px;}
.lnk .linkovo-cta p{max-width:52ch;margin:0 auto;}
.lnk .linkovo-cta-points{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:24px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:#4a3e00;}
.lnk .linkovo-cta a{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:9px;text-decoration:none!important;
  background:var(--black);color:#fff!important;transition:transform .15s ease,background .15s ease;
}
.lnk .linkovo-cta a:hover{background:#000;color:#fff!important;transform:translateY(-1px);}