/*
Theme Name:   Plexipol Commerce (Astra Child)
Theme URI:    https://plexipol.pl/
Description:  Motyw potomny Astra dla sklepu Plexipol — tworzywa sztuczne i usługi CNC.
Author:       Plexipol
Author URI:   https://plexipol.pl/
Template:     astra
Version:      1.2.0
License:      GNU General Public License v2 or later
Text Domain:  plexipol
*/

/* ============================================================
   Paleta marki
   ============================================================ */
:root {
  --plx-granat:   #0D0E35;
  --plx-koral:    #D14632;  /* STR-090: bylo #F05139 = 3,53:1 z biala czcionka, ponizej WCAG AA. Odcien glebszy o 13%, kontrast 4,53. Decyzja wlasciciela 2026-09-05 (wariant A). */

  --plx-koral-hover: #B03A2A;  /* STR-110: stan :hover korala. Wprowadzony przy STR-105 jako
                                  wartosc luzem — audyt palety (`audyt_astry.php`) slusznie zglosil go
                                  jako kolor spoza systemu, wiec dostaje nazwe. Ciemniejszy od bazowego,
                                  czyli kontrast moze tylko rosnac. Astra trzyma te sama wartosc w bazie
                                  (`link-h-color`) — tam nie da sie uzyc zmiennej CSS. */
  --plx-navy:     #294592;
  --plx-gold:     #F9B731;
  --plx-ink:      #14163A;
  --plx-muted:    #4A5568;
  --plx-muted-2:  #5A6779;  /* STR-080: bylo #718096 = 4,02:1 na bialym, ponizej WCAG AA */
  --plx-line:     #E2E8F0;
  --plx-bg:       #F8F9FA;
  --plx-ok:       #1F8A3A;
  --plx-font-head: 'Space Grotesk', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --plx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --plx-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --plx-on-dark:       #C3C9E6;
  --plx-on-dark-muted: #94A3B8;
  --plx-granat-2:      #212D5E;

  /* STR-064: paleta spektrum i odcienie pomocnicze — nazwy robocze,
     do potwierdzenia przy przegladzie designu. Wartosci wziete z kodu,
     nie wymyslone: kazdy kolor wystepowal >=4x w stylach inline. */
  --plx-spektrum-mag:    #D52362;  /* spektrum: magenta */
  --plx-spektrum-pomarancz: #F68C2C;  /* spektrum: pomarancz */
  --plx-spektrum-bursztyn: #F59E0B;  /* spektrum: bursztyn */
  --plx-navy-2:          #3B58A8;  /* navy jasniejszy */
  --plx-navy-3:          #8993C4;  /* navy przygaszony */
  --plx-szary:           #64748B;  /* tekst pomocniczy */
  --plx-szary-ciemny:    #334155;  /* tekst pomocniczy ciemny */
  --plx-linia-2:         #CBD5E1;  /* obramowanie jasne */
  --plx-bg-2:            #EDF1F6;  /* tlo alternatywne */
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--plx-font-body);
  color: var(--plx-ink);
  background: var(--plx-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--plx-font-head);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--plx-ink);
  line-height: 1.18;
}
a { color: var(--plx-navy); }
a:hover { color: var(--plx-koral); }
img { max-width: 100%; height: auto; }

/* ============================================================
   Astra container override
   ============================================================ */
.ast-container,
.ast-page-builder-template .ast-container { max-width: 1280px; }

/* Tło obszaru treści = JASNE (design). Astra-import ustawił .site-content na
   var(--ast-global-color-4)=#14163A (granat) → granatowe tło na sklepie/konfiguratorze.
   Sekcje na froncie mają własne tła, więc to ich nie dotyczy. */
body.ast-plain-container,
body.ast-plain-container .site-content,
body.ast-page-builder-template .site-content { background-color: #F8F9FA !important; }

/* ============================================================
   HEADER
   ============================================================ */
#plx-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--plx-granat);
  box-shadow: 0 2px 16px rgba(13,14,53,.18);
}
.plx-hd-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 70px; display: flex; align-items: center; gap: 18px;
}
/* Logo */
.plx-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.plx-logo-img { height: 38px; width: auto; }
.plx-logo-text { font-family: var(--plx-font-head); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -.03em; }
.plx-logo-sub { font-family: var(--plx-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #7a83b8; display: block; margin-top: -3px; }

/* Nav */
.plx-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.plx-nav a, .plx-nav button {
  font-family: var(--plx-font-body); font-size: 15px; font-weight: 600; color: var(--plx-on-dark);
  text-decoration: none; padding: 8px 13px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  transition: color .15s, background .15s;
}
.plx-nav a:hover, .plx-nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.plx-nav .plx-nav-cta { background: var(--plx-koral); color: #fff; padding: 8px 16px; }
.plx-nav .plx-nav-cta:hover { background: #d94028; }

/* Dropdown */
.plx-nav-item { position: relative; }
.plx-nav-item:hover > .plx-dropdown { display: block; }
.plx-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--plx-line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(13,14,53,.12); padding: 8px;
}
.plx-dropdown a {
  display: block; padding: 10px 13px; font-size: 15px; color: var(--plx-ink);
  border-radius: 8px; text-decoration: none;
}
.plx-dropdown a:hover { background: var(--plx-bg); color: var(--plx-koral); }

/* Header icons */
.plx-hd-icons { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.plx-hd-icon {
  width: 40px; height: 40px; border-radius: 9px; background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center; color: var(--plx-on-dark);
  text-decoration: none; position: relative; transition: background .15s;
}
.plx-hd-icon:hover { background: rgba(255,255,255,.13); color: #fff; }
.plx-hd-icon .plx-badge {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--plx-koral); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Hamburger */
.plx-burger { display: none; cursor: pointer; background: none; border: 0; color: var(--plx-on-dark); padding: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
#plx-footer { background: var(--plx-granat); color: var(--plx-on-dark); padding: 56px 0 0; border-top: 1px solid #1a1c44; }
.plx-ft-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 24px 44px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.plx-ft-logo { height: 44px; width: auto; margin-bottom: 14px; }
.plx-ft-tagline { font-size: 15px; line-height: 1.6; color: #9aa3d0; margin-bottom: 16px; }
.plx-ft-meta { font-family: var(--plx-font-mono); font-size: 13px; color: #7782b0; line-height: 1.9; }
.plx-ft-col h3 {
  font-family: var(--plx-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #7a83b8; margin: 0 0 14px;
}
.plx-ft-col a {
  display: block; color: var(--plx-on-dark); text-decoration: none; font-size: 15px; padding: 4px 0;
  transition: color .15s;
}
.plx-ft-col a:hover { color: #fff; }
.plx-ft-contact { display: flex; flex-direction: column; gap: 4px; }
.plx-ft-contact a { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--plx-on-dark); text-decoration: none; }
.plx-ft-badge {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 14px;
  margin-top: 12px; font-size: 13px; color: var(--plx-on-dark);
}
.plx-ft-bot {
  border-top: 1px solid #1a1c44; max-width: 1280px; margin: 0 auto; padding: 18px 24px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 13px; color: var(--plx-navy-3);  /* STR-113: bylo #5a6290 = 3,17:1 na granacie stopki.
     --plx-navy-3 (#8993C4) daje 6,22:1 i jest juz w palecie, wiec nie wprowadzam nowej wartosci. */
}
.plx-ft-bot a { color: #7782b0; text-decoration: none; }
.plx-ft-bot a:hover { color: #fff; }
.plx-ft-map { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 14px 24px; border-top: 1px solid #1a1c44; color: var(--plx-on-dark); text-decoration: none; font-family: var(--plx-font-mono); font-size: 13px; transition: color .15s, background .15s; }
.plx-ft-map:hover { color: #fff; background: rgba(255,255,255,.03); }
.plx-ft-map svg { flex: 0 0 auto; }

/* ============================================================
   SEKCJE TREŚCI
   ============================================================ */
.plx-hero {
  background: radial-gradient(120% 120% at 82% 0%, var(--plx-granat-2), var(--plx-granat) 65%);
  padding: 46px 0 50px; border-bottom: 1px solid var(--plx-granat-2);
}
.plx-hero .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.plx-hero .crumb {
  font-family: var(--plx-font-mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: #7a83b8; margin-bottom: 14px;
}
.plx-hero .crumb a { color: #7a83b8; text-decoration: none; }
.plx-hero .crumb a:hover { color: #fff; }
.plx-hero .crumb span { color: var(--plx-gold); }
.plx-hero h1 { font-size: 42px; color: #fff; margin: 0 0 14px; }
.plx-hero p { margin: 0; font-size: 17px; color: var(--plx-on-dark); max-width: 680px; line-height: 1.6; }
.plx-hero p.mono { font-family: var(--plx-font-mono); font-size: 13px; }

.plx-wrap { max-width: 1080px; margin: 0 auto; padding: 42px 24px 70px; }
.plx-wrap.narrow { max-width: 880px; }

.plx-card {
  background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 26px;
}
.plx-card h2 {
  font-family: var(--plx-font-head); font-weight: 600; font-size: 22px;
  color: var(--plx-ink); margin: 0 0 14px;
}
.plx-card p { font-size: 15px; color: var(--plx-muted); line-height: 1.7; margin: 0 0 13px; }
.plx-card p:last-child { margin-bottom: 0; }

.plx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.plx-4col { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.plx-stat { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 22px; }
.plx-stat .big { font-family: var(--plx-font-head); font-weight: 700; font-size: 34px; }
.plx-stat .lab { font-size: 15px; color: var(--plx-muted); margin-top: 4px; }
.plx-note-box {
  background: rgba(249,183,49,.12); border: 1px solid rgba(249,183,49,.5);
  border-radius: 10px; padding: 14px 16px; display: flex; gap: 11px;
  align-items: flex-start; margin-bottom: 28px;
}
.plx-note-box svg { flex: 0 0 auto; margin-top: 1px; }
.plx-note-box p { margin: 0; font-size: 13px; color: #7a5a14; line-height: 1.55; }
.plx-cta-band {
  background: var(--plx-granat); border-radius: 16px; padding: 30px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  justify-content: space-between; margin-top: 26px;
}
.plx-cta-band .t {
  font-family: var(--plx-font-head); font-weight: 600; font-size: 22px;
  color: #fff; margin-bottom: 5px;
}
.plx-cta-band p { margin: 0; font-size: 15px; color: var(--plx-on-dark); }
.plx-legal {
  background: #fff; border: 1px solid var(--plx-line); border-radius: 14px;
  padding: 34px 38px; display: flex; flex-direction: column; gap: 24px;
}
.plx-legal h2 {
  font-family: var(--plx-font-head); font-weight: 600; font-size: 17px;
  color: var(--plx-ink); margin: 0 0 9px;
}
.plx-legal p { margin: 0; font-size: 15px; color: var(--plx-muted); line-height: 1.7; }
.plx-row-table { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; overflow: hidden; }
.plx-row-table .row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid #EDF1F6; align-items: center;
}
.plx-row-table .row:last-child { border-bottom: 0; }
.plx-row-table .row.head {
  background: #F8FAFC; font-family: var(--plx-font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--plx-muted-2); padding: 15px 20px;
}
.plx-step { display: flex; gap: 13px; align-items: flex-start; }
.plx-step .n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--plx-granat);
  color: #fff; font-family: var(--plx-font-head); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.plx-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 13px;
}

/* Buttony */
.btn, .plx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--plx-font-head); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 10px; border: 0; cursor: pointer;
  text-decoration: none; transition: filter .12s, transform .1s;
}
.btn:hover, .plx-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-koral, .plx-btn-primary { background: var(--plx-koral); color: #fff; }
.btn-outline, .plx-btn-outline {
  background: #fff; border: 1.5px solid var(--plx-line); color: var(--plx-ink);
}

/* WooCommerce overrides */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button { background: var(--plx-koral); color: #fff; border-radius: 10px; font-family: var(--plx-font-head); font-weight: 600; }
.woocommerce .button:hover { background: #d94028; color: #fff; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--plx-koral); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--plx-font-head); }
.woocommerce ul.products li.product .price { color: var(--plx-koral); font-family: var(--plx-font-head); font-weight: 600; }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--plx-koral); color: #fff; border-color: var(--plx-koral); }
form.cart .qty { border-radius: 8px; border: 1.5px solid var(--plx-line); }

/* Skróty mono */
.mono { font-family: var(--plx-font-mono); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 900px) {
  .plx-nav { display: none; }
  .plx-burger { display: flex; }
  .plx-2col { grid-template-columns: 1fr; }
  .plx-4col { grid-template-columns: repeat(2,1fr); }
  .plx-ft-grid { grid-template-columns: 1fr 1fr; }
  .plx-hero h1 { font-size: 30px; }
  .plx-legal { padding: 22px 18px; }
}
@media (max-width: 600px) {
  .plx-4col { grid-template-columns: 1fr; }
  .plx-ft-grid { grid-template-columns: 1fr; }
  .plx-row-table .row { grid-template-columns: 1fr; gap: 4px; }
  .plx-cta-band { flex-direction: column; }
}

/* Mobile drawer */
#plx-drawer {
  position: fixed; inset: 0; z-index: 300; background: var(--plx-granat);
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding: 24px;
  overflow-y: auto;
}
#plx-drawer.open { transform: translateX(0); }
#plx-drawer .plx-dw-close { align-self: flex-end; background: none; border: 0; color: var(--plx-on-dark); cursor: pointer; padding: 8px; }
#plx-drawer a {
  color: var(--plx-on-dark); text-decoration: none; font-size: 17px; font-weight: 600;
  padding: 15px 0; border-bottom: 1px solid #1a1c44; display: block;
}
#plx-drawer a:hover { color: #fff; }

/* ============================================================
   PORT 1:1 z projektu — header + strona główna
   ============================================================ */
@keyframes plxFloat { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-13px) rotate(calc(var(--r,0deg) + 8deg)); } }
@keyframes plxPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* Header 1:1 */
.plx-topbar { position: sticky; top: 0; z-index: 60; background: #0D0E35; border-bottom: 1px solid var(--plx-granat-2); }
.plx-topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 74px; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.plx-logo-img { height: 38px; width: auto; display: block; max-width: 200px; }
.plx-topnav { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: nowrap; min-width: 0; flex: 0 1 auto; justify-content: flex-end; }
.plx-navlinks { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; min-width: 0; }
/* ponytail: tagline kolidowała z rozbudowanym menu (PL/EN/DE+ikony+CTA) — kontener capowany do 1280px,
   więc nav (nowrap) przelewał się w lewo NA tagline. Chowamy całkiem; samo logo „PLEXIPOL" wystarcza.
   (overflow:hidden NIE dawać — przycięłoby rozwijane .plx-submenu) */
.plx-logo-bar { width: 1px; height: 24px; background: #F9B731; display: inline-block; }
.plx-logo-tag { font-family: var(--plx-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #F9B731; display: inline-block; }
@media (max-width: 900px) { .plx-logo-tag, .plx-logo-bar { display: none !important; } }
.plx-navlink { position: relative; color: var(--plx-on-dark); text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .15s, transform .08s; }
/* białe linki — nadpisuje globalne a{color:navy}; dotyczy też <a> wewnątrz span.plx-navlink */
.plx-navlink, .plx-navlink > a, .plx-navlink > a:visited { color: var(--plx-on-dark) !important; text-decoration: none; }
.plx-navlink:hover, .plx-navlink:hover > a, .plx-navlink > a:hover { color: #fff !important; }
/* hover: koralowe podkreślenie wjeżdżające od lewej */
.plx-navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--plx-koral); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; border-radius: 2px; }
.plx-navlink:hover::after { transform: scaleX(1); }
/* animacja po kliknięciu */
.plx-navlink:active { transform: translateY(1px) scale(.96); }
.plx-haschild > .plx-submenu { display: none; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); min-width: 240px; background: #fff; border: 1px solid var(--plx-line); border-radius: 12px; box-shadow: 0 16px 44px rgba(13,14,53,.16); padding: 8px; z-index: 70; }
.plx-haschild:hover > .plx-submenu { display: block; }
.plx-submenu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.plx-submenu a { display: block; padding: 10px 13px; font-size: 15px; color: #14163A; border-radius: 8px; text-decoration: none; font-weight: 500; }
.plx-submenu a:hover { background: #F8F9FA; color: #D14632; }
.plx-langwrap { display: flex; align-items: center; gap: 2px; padding: 2px; background: rgba(255,255,255,.05); border-radius: 7px; }
.plx-langbtn { cursor: pointer; border: 0; background: none; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 6px; color: #8993c4; text-decoration: none; }
.plx-langbtn.active { background: #D14632; color: #fff; }
.plx-iconbtn { position: relative; background: none; border: 0; cursor: pointer; color: var(--plx-on-dark); display: flex; padding: 4px; }
.plx-iconbtn:hover { color: #fff; }
.plx-iconbtn .plx-cnt { position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.plx-search { display: flex; align-items: center; }
.plx-search input { width: 0; opacity: 0; padding: 0; border: 0; outline: 0; background: rgba(255,255,255,.08); color: #fff; border-radius: 7px; height: 34px; transition: width .25s, opacity .2s, padding .2s; font-size: 13px; font-family: inherit; }
.plx-search:focus-within input { width: 180px; opacity: 1; padding: 0 12px; }
.plx-cta-btn { background: #D14632; color: #fff; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 8px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.plx-cta-btn:hover { background: #D94028; color: #fff; }
.plx-burger2 { display: none; background: none; border: 0; cursor: pointer; color: #fff; padding: 6px; align-items: center; }
.plx-drawer2 { display: none; border-top: 1px solid var(--plx-granat-2); background: #0D0E35; padding: 10px 16px 18px; }
.plx-drawer2.open { display: block; }
.plx-drawer2 .plx-dw-link { color: var(--plx-on-dark); text-decoration: none; font-size: 17px; font-weight: 500; padding: 13px 6px; border-bottom: 1px solid #1a1c4a; display: block; }
.plx-drawer2 .plx-dw-link:hover { color: #fff; }

/* Home grids 1:1 */
.plx-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 70px 24px 78px; }
.plx-cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.plx-usl { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.plx-diff { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.plx-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.plx-folie { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; }
.plx-cyk { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.plx-cykben { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.plx-real { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.plx-offcuts { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; margin-top: 26px; }

/* Hover bez JS */
.plx-cat-card { transition: box-shadow .18s, transform .18s; }
.plx-cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(13,14,53,.12); }
.plx-usl-card { transition: box-shadow .18s, border-color .18s; }
.plx-usl-card:hover { box-shadow: 0 14px 30px rgba(13,14,53,.1); border-color: var(--plx-on-dark); }

/* FAQ natywne (details) 1:1 */
.plx-faq details { border: 1px solid var(--plx-line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.plx-faq summary { list-style: none; cursor: pointer; padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 17px; color: #14163A; }
.plx-faq summary::-webkit-details-marker { display: none; }
.plx-faq summary::after { content: "+"; color: #D14632; font-size: 22px; line-height: 1; flex: 0 0 auto; transition: transform .2s; }
.plx-faq details[open] summary::after { transform: rotate(45deg); }
.plx-faq details p { margin: 0; padding: 0 18px 18px; font-size: 15px; color: #4A5568; line-height: 1.6; }

@media (max-width: 1080px) { .plx-cats { grid-template-columns: repeat(2,1fr); } .plx-diff { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 960px) {
  .plx-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .plx-usl { grid-template-columns: 1fr 1fr; } .plx-steps { grid-template-columns: 1fr 1fr; }
  .plx-folie { grid-template-columns: 1fr; } .plx-cyk { grid-template-columns: 1fr 1fr; }
  .plx-cykben { grid-template-columns: 1fr 1fr; } .plx-real { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) { .plx-navlinks { display: none; } .plx-burger2 { display: flex; } .plx-hideicon { display: none; } }
@media (max-width: 640px) {
  .plx-cats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .plx-usl, .plx-diff, .plx-steps, .plx-cyk, .plx-cykben, .plx-real { grid-template-columns: 1fr; }
  .plx-h1 { font-size: clamp(30px,8vw,44px) !important; }
  .plx-h2 { font-size: clamp(24px,6vw,32px) !important; }
}

/* ============================================================
   C — WooCommerce 1:1 (sklep / koszyk / checkout / konto)
   ============================================================ */
.plx-woo-hero { background: radial-gradient(120% 120% at 82% 0%, var(--plx-granat-2), #0D0E35 65%); border-bottom: 1px solid var(--plx-granat-2); }
.plx-woo-hero-in { max-width: 1280px; margin: 0 auto; padding: 46px 24px 50px; }
.plx-woo-eyebrow { font-family: var(--plx-font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8993c4; margin-bottom: 12px; }
.plx-woo-title { font-family: var(--plx-font-head); font-weight: 700; font-size: 38px; letter-spacing: -.02em; color: #fff; margin: 0 0 6px; }
.plx-woo-sub { margin: 0; color: var(--plx-on-dark); font-size: 17px; }

/* WAŻNE: scope do .site-content — bez tego goły `.woocommerce` trafiał też w <body class="woocommerce">
   i boksował header/stopkę/całą stronę do 1280px (home nie ma tej klasy → był full-width). */
.site-content .woocommerce, .woocommerce-page .site-content .woocommerce { max-width: 1280px; margin: 0 auto; padding: 40px 24px 70px; }
/* Ceny Woo = brandowy mono (audyt: dziedziczyły stack Astry zamiast JetBrains Mono) */
.woocommerce-Price-amount, .woocommerce .price, .woocommerce .amount, .woocommerce .price .amount bdi, .woocommerce-Price-amount bdi { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* notyfikacje Woo (np. pusty koszyk) — brand zamiast szarej domyślnej ikony */
.woocommerce-info, .woocommerce-message, .woocommerce-error, .cart-empty.woocommerce-info { background: #fff; border: 1px solid var(--plx-line); border-top: 3px solid var(--plx-koral); border-radius: 10px; color: var(--plx-ink); }
.woocommerce-info::before, .woocommerce-message::before, .cart-empty.woocommerce-info::before { color: var(--plx-koral); }
/* /sklep/ — ukryj natywny nagłówek Woo (mamy własne H1 w hero) → bez duplikatu H1 */
.woocommerce-products-header { display: none; }
/* a11y: focus-visible na polach formularzy (Astra ustawia outline:none) */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--plx-koral); outline-offset: 2px; }

/* facade mapy na /kontakt/ (klik → Mapy Google, bez ciężkiego iframe) */
.plx-mapfacade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  max-width: 1080px; margin: 0 auto 50px; padding: 56px 24px; border-radius: 16px; border: 1px solid var(--plx-line);
  background: repeating-linear-gradient(45deg, #EDF1F6 0 14px, #F4F7FB 14px 28px); transition: box-shadow .15s, transform .15s; }
.plx-mapfacade:hover { box-shadow: 0 14px 36px rgba(13,14,53,.12); transform: translateY(-2px); }
.plx-mapfacade__pin { width: 46px; height: 46px; border-radius: 50%; background: var(--plx-koral); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(240,81,57,.35); }
.plx-mapfacade__addr { font-family: var(--plx-font-head); font-weight: 600; font-size: 17px; color: var(--plx-ink); }
.plx-mapfacade__cta { font-family: var(--plx-font-mono); font-size: 13px; color: var(--plx-koral); font-weight: 600; }

/* ============================================================
   HUB KONFIGURATORA (/konfigurator/) — karty 1:1 z designem
   ============================================================ */
.plx-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 28px; }
.plx-hubcard { background: #fff; border: 1px solid var(--plx-line); border-radius: 16px; overflow: hidden; display: flex; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.plx-hubcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13,14,53,.13); }
.plx-hubcard__media { width: 140px; flex: 0 0 140px; position: relative; overflow: hidden; background: #EEF1F5; }
.plx-hubcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plx-hubcard__media--accent { background: repeating-linear-gradient(45deg,#EEF1F5 0 10px,#F6F8FB 10px 20px); }
.plx-hubcard__media--accent span { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; clip-path: polygon(0 0,100% 0,60% 100%,0 100%); opacity: .85; }
.plx-hubcard__body { padding: 22px; flex: 1; min-width: 0; }
.plx-hubcard__eyebrow { font-family: var(--plx-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--plx-muted-2); margin-bottom: 8px; }
.plx-hubcard__title { font-family: var(--plx-font-head); font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin-bottom: 7px; color: var(--plx-ink); }
.plx-hubcard__desc { margin: 0 0 14px; font-size: 15px; color: var(--plx-muted); line-height: 1.55; }
.plx-hubcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plx-hubcard__pill { font-family: var(--plx-font-mono); font-size: 11px; color: var(--plx-navy); background: #F0F4F8; padding: 4px 8px; border-radius: 5px; }
.plx-hubcard__cta { color: var(--plx-koral); font-weight: 600; font-size: 15px; white-space: nowrap; }
.plx-hub-legal { background: rgba(249,183,49,.12); border: 1px solid rgba(249,183,49,.5); border-radius: 12px; padding: 18px 22px; font-size: 13px; color: #7a5a14; line-height: 1.6; }
.plx-hub-legal strong { color: var(--plx-ink); }

/* ============================================================
   System cp* — podstrony info (dostawa / jak-zamawiac / obsluga-firm)
   Te szablony używały klas cp* które nie były ostylowane → render bez stylów.
   Dociągamy do designu (spójnie z .plx-hero/.plx-wrap/.plx-card).
   ============================================================ */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 8px; text-decoration: none; cursor: pointer; border: 0; font-family: var(--plx-font-head); transition: filter .12s, background .12s; }
.btn-koral { background: var(--plx-koral); color: #fff; }
.btn-koral:hover { filter: brightness(1.06); color: #fff; }

.cphero { background: radial-gradient(120% 120% at 82% 0%, var(--plx-granat-2), var(--plx-granat) 65%); padding: 46px 0 50px; border-bottom: 1px solid var(--plx-granat-2); }
.cphero .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.cphero .crumb { font-family: var(--plx-font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7a83b8; margin-bottom: 14px; }
.cphero .crumb a { color: #7a83b8; text-decoration: none; }
.cphero .crumb a:hover { color: #fff; }
.cphero .crumb b { color: var(--plx-gold); font-weight: 400; }
.cphero h1 { font-size: 42px; color: #fff; margin: 0 0 14px; }
.cphero p { margin: 0; font-size: 17px; color: var(--plx-on-dark); max-width: 680px; line-height: 1.6; }

.cpwrap { max-width: 1080px; margin: 0 auto; padding: 42px 24px 70px; }
.cpcard { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 24px; }
.cpcard h2 { font-family: var(--plx-font-head); font-size: 22px; color: var(--plx-ink); margin: 0 0 16px; }

.cp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cp4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* wiersze (tabela dostaw) */
.cprow { display: grid; grid-template-columns: 1.7fr 1fr auto; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #EDF1F6; }
.cprow:last-child { border-bottom: 0; }
.cprow.head { background: var(--plx-granat); color: #fff; font-family: var(--plx-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cprow.head span { color: #8993c4; }

/* stat / feature */
.cpstat { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 22px; }
.cpico { width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-bottom: 14px; }

/* kroki */
.cpstep { display: flex; gap: 14px; align-items: flex-start; }
.cpstep .n { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--plx-koral); color: #fff; font-family: var(--plx-font-head); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }

/* CTA band (dark) */
.cpband { background: radial-gradient(120% 120% at 15% 10%, var(--plx-granat-2), var(--plx-granat) 60%); border-radius: 18px; padding: 36px 40px; color: var(--plx-on-dark); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cpband h2 { font-family: var(--plx-font-head); color: #fff; font-size: 26px; margin: 0 0 8px; }
.cpband p { margin: 0; font-size: 17px; color: var(--plx-on-dark); }
.cpband .t { font-family: var(--plx-font-head); font-weight: 700; color: #fff; font-size: 22px; letter-spacing: -.01em; }

.cpstat .t, .cpstep .t { font-family: var(--plx-font-head); }

/* strony prawne (regulamin/polityka/reklamacje) */
.cpwrap.narrow { max-width: 880px; }
.cphero .meta { font-family: var(--plx-font-mono); font-size: 13px; color: #8993c4; margin: 6px 0 0; }
.cpnote { display: flex; gap: 12px; align-items: flex-start; background: rgba(183,121,31,.08); border: 1px solid rgba(183,121,31,.3); border-radius: 12px; padding: 16px 18px; margin-bottom: 26px; }
.cpnote svg { flex: 0 0 auto; margin-top: 1px; }
.cpnote p { margin: 0; font-size: 15px; color: var(--plx-ink); line-height: 1.55; }
.cplegal { display: flex; flex-direction: column; gap: 22px; }
.cplegal h2 { font-family: var(--plx-font-head); font-size: 17px; color: var(--plx-ink); margin: 0 0 8px; }
.cplegal p { margin: 0; font-size: 15px; color: var(--plx-muted); line-height: 1.7; }

/* ============================================================
   FAZA 1 — polish WooCommerce (sklep / koszyk / konto)
   ============================================================ */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--plx-koral) !important; outline: none; box-shadow: 0 0 0 3px rgba(240,81,57,.12); }
.woocommerce select, .woocommerce-ordering select { border: 1.5px solid var(--plx-line); border-radius: 8px; min-height: 44px; padding: 8px 12px; background: #fff; color: var(--plx-ink); font-family: var(--plx-font-body); }
.woocommerce .woocommerce-result-count { color: var(--plx-muted-2); font-size: 15px; }
.woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 24px 26px; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--plx-line); }
.woocommerce .quantity .qty { border: 1.5px solid var(--plx-line); border-radius: 8px; min-height: 44px; }
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--plx-koral); }
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #d94028; }

@media (max-width: 860px) { .cp4 { grid-template-columns: 1fr 1fr; } .cp2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cp4 { grid-template-columns: 1fr; } .cphero h1 { font-size: 30px; } .cprow { grid-template-columns: 1fr auto; } }
@media (max-width: 860px) { .plx-hub { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .plx-hubcard { flex-direction: column; }
  .plx-hubcard__media { width: 100%; flex: 0 0 150px; height: 150px; }
  .plx-hubcard__media--accent span { width: 100%; height: 38%; bottom: auto; clip-path: polygon(0 0,100% 0,100% 60%,0 100%); }
}
/* ponytail: grid nav+treść TYLKO dla zalogowanego — wylogowany ma własny layout formularzy (inaczej login ściska się do 240px) */
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 30px; align-items: start; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 13px 18px; color: var(--plx-ink); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 1px solid #EDF1F5; }
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--plx-bg); color: var(--plx-koral); box-shadow: inset 3px 0 0 var(--plx-koral); }
.woocommerce-MyAccount-navigation li a:hover { background: var(--plx-bg); }

/* === Moje konto — widok wylogowany: 2 równe karty (login / rejestracja) === */
.woocommerce-account:not(.logged-in) #customer_login.u-columns,
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; max-width: 920px; margin: 0 auto; }
/* clearfix WooCommerce (::before/::after display:table) staje się grid-itemem i rozbija układ na skos — wyłączamy */
.woocommerce-account:not(.logged-in) #customer_login.u-columns::before,
.woocommerce-account:not(.logged-in) #customer_login.u-columns::after,
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns::before,
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns::after { display: none; }
/* przebijamy woocommerce-layout-grid.min.css (float + width:48% remisuje specyficznością → !important) */
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2,
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 24px 26px; }
.woocommerce-account:not(.logged-in) .u-columns h2 { font-family: var(--plx-font-head); margin-top: 0; font-size: 22px; color: var(--plx-ink); }
.woocommerce-account form.woocommerce-form-login .button, .woocommerce-account form.woocommerce-form-register .button { background: var(--plx-koral); color: #fff; border: 0; border-radius: 8px; min-height: 46px; padding: 0 22px; font-family: var(--plx-font-head); font-weight: 600; cursor: pointer; }
.woocommerce-account form.woocommerce-form-login .button:hover, .woocommerce-account form.woocommerce-form-register .button:hover { background: #d94028; }
/* przycisk do dołu karty → równa wysokość mimo różnej treści */
.woocommerce-account:not(.logged-in) form.woocommerce-form { flex: 1; display: flex; flex-direction: column; }
.woocommerce-account:not(.logged-in) form.woocommerce-form .button { margin-top: auto; }
.woocommerce-account:not(.logged-in) .u-columns input.input-text { border: 1.5px solid var(--plx-line); border-radius: 8px; min-height: 46px; padding: 10px 12px; }
@media (max-width: 720px) { .woocommerce-account:not(.logged-in) #customer_login.u-columns, .woocommerce-account:not(.logged-in) .woocommerce > .u-columns { grid-template-columns: 1fr; } }

.woocommerce table.shop_table { border: 1px solid var(--plx-line); border-radius: 14px; border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--plx-font-head); color: var(--plx-ink); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-order-details__title { font-family: var(--plx-font-head); }
.woocommerce #payment, .woocommerce .cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 6px 18px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .select2-container .select2-selection--single { border: 1.5px solid var(--plx-line) !important; border-radius: 8px !important; min-height: 46px; padding: 10px 12px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { border-top-color: var(--plx-koral); border-radius: 10px; }

/* Konto firmowe — dashboard */
.plx-acct-dash { display: flex; flex-direction: column; gap: 18px; }
.plx-acct-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.plx-acct-card { background: #fff; border: 1px solid var(--plx-line); border-radius: 14px; padding: 18px; }
.plx-acct-card .k { font-size: 13px; color: var(--plx-on-dark-muted); margin-bottom: 3px; }
.plx-acct-card .v { font-weight: 600; font-size: 15px; color: var(--plx-ink); }

@media (max-width: 840px) {
  .plx-woo-title { font-size: 30px; }
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .plx-acct-cards { grid-template-columns: 1fr; }
}

/* ponytail: stop poziomego scrolla na mobile (clip = sticky-safe, nie psuje nagłówka) */
html { overflow-x: clip; }
@media (max-width: 640px) { img, video, iframe { max-width: 100%; height: auto; } }

/* ============================================================
   Dostępność — skip-link, focus-visible, klawiatura w podmenu
   ============================================================ */
.plx-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--plx-koral); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; font-size: 15px; text-decoration: none; }
.plx-skip:focus { left: 0; }
.plx-haschild:focus-within > .plx-submenu { display: block; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--plx-gold); outline-offset: 2px; border-radius: 6px; }



/* STR-059 (2026-09-05): usunieto martwy klaster "FAST LEAD ROUTER" (--pxp-*).
   Zero klas .pxp-* w szablonach, a jego reguly h1..h6 nadpisywaly kanoniczny --plx-font-head
   krojem Barlow, ktorego NIE ladujemy — wiec wszystkie naglowki renderowaly sie domyslnym
   sans-serif przegladarki. Paleta #0284C7/#D97706 byla sprzeczna z kanonem (koral+granat).
   Backup: ~/backups/plexipol.pl/style.css.bak-str059-przed-usunieciem-pxp */


/* FULL-WIDTH & NO-BOXED RESET (Ecosystem Master) */
html,
body,
body.ast-desktop,
body.ast-plain-container,
body.ast-separate-container,
body.ast-boxed-container,
#page,
.site,
.site-content,
.ast-container,
.entry-content,
#primary,
#main {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* DEFINITIVE DESKTOP BAR REMOVAL */
.rzp-mobile-bar, .cdz-mobile-bar, .fol-mobile-bar, .pnw-mobile-bar, .pxp-mobile-bar, 
.plr-mobile-bar, .pol-mobile-bar, .rwz-mobile-bar, .stj-mobile-bar, .szy-mobile-bar, 
.czp-sticky-cta, #rzp-sticky-cta, #rw-sticky-cta, .plx-sticky-cta, .s24-sticky-mobile-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Zapobieganie łamaniu waluty zł do nowej linii */
.plx-total-value, .plx-total-row td, .plx-price-val, .woocommerce-Price-amount, .amount, .plx-pr b, .plx-price, .plx-bom-table .plx-text-right {
  white-space: nowrap !important;
}


/* ============================================================
 * STR-069 — klasy wyekstrahowane ze stylow inline front-page.php.
 * Ekstrahowane WYLACZNIE z elementow bez class/id, po sprawdzeniu,
 * ze zaden selektor typu w tym arkuszu nie ustawia tych wlasciwosci.
 * Dzieki temu przeniesienie z inline do klasy nie zmienia wyniku.
 * ============================================================ */
.plx-u1 { display:flex;align-items:center;gap:8px; }
.plx-u2 { display:inline-flex;align-items:center;gap:8px; }
.plx-u3 { font-size:30px;margin-bottom:12px; }
.plx-u4 { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; }
.plx-u5 { display:flex;align-items:center;gap:12px;border-top:1px solid #F1F5F9;padding-top:14px; }
.plx-u6 { opacity:.3; }
.plx-u7 { display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px; }


/* ============================================================
 * STR-073 — klasy wyekstrahowane ze stylow inline front-page.php.
 * Wylacznie elementy bez class/id, wartosci powtarzalne >=2x.
 * Rownowaznosc zweryfikowana EMPIRYCZNIE: porownanie getComputedStyle
 * 658 elementow przed i po, na wyrenderowanej stronie.
 * ============================================================ */
.plx-x1 { max-width:1280px;margin:0 auto;padding:0 24px; }
.plx-x2 { font-family:var(--plx-font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--plx-muted-2);display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.plx-x3 { font-family:var(--plx-font-head);font-weight:600;font-size:17px;margin-bottom:6px; }
.plx-x4 { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:22px; }
.plx-x5 { font-family:var(--plx-font-head);font-weight:600;font-size:17px;color:#fff;margin-bottom:7px; }
.plx-x6 { margin:0;font-size:15px;color:var(--plx-on-dark);line-height:1.55; }
.plx-x7 { text-align:left;padding:16px 18px;font-family:var(--plx-font-head);font-size:17px;font-weight:600; }
.plx-x8 { padding:14px 18px;color:var(--plx-muted); }
.plx-x9 { background:#fff;border:1px solid var(--plx-line);border-radius:14px;padding:22px; }
.plx-x10 { margin:0;font-size:15px;color:var(--plx-muted);line-height:1.55; }
.plx-x11 { background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:26px; }
.plx-x12 { font-family:var(--plx-font-head);font-size:17px;font-weight:700;color:#fff;margin:0 0 8px; }
.plx-x13 { font-size:13px;color:var(--plx-on-dark-muted);line-height:1.55;margin:0; }
.plx-x14 { background:#fff;border:1px solid var(--plx-line);border-radius:14px;padding:26px;box-shadow:0 4px 18px rgba(13,14,53,0.04);display:flex;flex-direction:column;justify-content:space-between; }
.plx-x15 { color:var(--plx-spektrum-bursztyn);font-size:15px;letter-spacing:2px; }
.plx-x16 { font-size:11px;color:var(--plx-on-dark-muted);font-family:var(--plx-font-mono); }
.plx-x17 { font-size:15px;color:var(--plx-szary-ciemny);line-height:1.6;margin:0 0 18px;font-style:italic; }
.plx-x18 { font-size:13px;font-weight:700;color:var(--plx-granat); }
.plx-x19 { font-size:11px;color:var(--plx-szary); }
.plx-x20 { position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--plx-gold),var(--plx-spektrum-pomarancz),var(--plx-koral),var(--plx-spektrum-mag),var(--plx-navy-2),var(--plx-navy)); }
.plx-x21 { background:var(--plx-bg);padding:64px 0;border-bottom:1px solid var(--plx-line); }
.plx-x22 { max-width:1280px;margin:0 auto; }
.plx-x23 { color:var(--plx-on-dark); }
.plx-x24 { font-family:var(--plx-font-mono); }
.plx-x25 { width:22px;height:2px;background:var(--plx-gold); }
.plx-x26 { font-family:var(--plx-font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--plx-muted-2);margin-bottom:10px; }
.plx-x27 { margin:0;color:var(--plx-muted);font-size:17px; }


/* ============================================================
 * STR-076 — warstwa utility. Wylacznie deklaracje BEZ wariantu wartosci
 * (binarne i semantyczne). Rozmiary czcionek i odstepy NIE sa tu ujete —
 * to wartosci ad-hoc (13/14/15/16/17/18/21/22/34/54 px), a ich uporzadkowanie
 * wymaga skali typograficznej i zgody projektowej, nie skryptu.
 * ============================================================ */
.u-ai-c { align-items:center; }
.u-flex { display:flex; }
.u-fw6 { font-weight:600; }
.u-fw7 { font-weight:700; }
.u-grid { display:grid; }
.u-head { font-family:var(--plx-font-head); }
.u-iflex { display:inline-flex; }
.u-jc-c { justify-content:center; }
.u-jc-sb { justify-content:space-between; }
.u-mono { font-family:var(--plx-font-mono); }
.u-nodec { text-decoration:none; }
.u-rel { position:relative; }
.u-ta-c { text-align:center; }
.u-white { color:#fff; }

/* ============================================================
 * STR-085 — SKALA TYPOGRAFICZNA I PRZESTRZENNA (design system)
 * Zdefiniowana na podstawie realnego rozkladu wartosci w szablonach,
 * nie wymyslona. Wartosci ulamkowe zostaly juz znormalizowane (STR-084).
 *
 * UWAGA: tokeny sa ZDEFINIOWANE, ale NIE zostaly jeszcze podstawione
 * pod 16 istniejacych rozmiarow. Zsunniecie 16 stopni do 8 zmienia
 * hierarchie typograficzna na calej stronie — to decyzja projektowa,
 * nie usuniecie defektu. Po jej podjeciu podstawienie jest mechaniczne.
 * ============================================================ */
:root {
  /* typografia — 10 stopni, WDROZONE w calym motywie (STR-087/089).
     Wartosci wyprowadzone z realnego rozkladu; ruch przy normalizacji <=2 px. */
  --plx-fs-xs:   11px;
  --plx-fs-sm:   13px;
  --plx-fs-base: 15px;
  --plx-fs-md:   17px;
  --plx-fs-lg:   22px;
  --plx-fs-xl:   26px;
  --plx-fs-2xl:  30px;
  --plx-fs-3xl:  34px;
  --plx-fs-4xl:  38px;
  --plx-fs-hero: clamp(30px, 8vw, 54px);

  /* odstepy — skala 4-punktowa pokrywajaca obecne 30 wartosci */
  --plx-sp-1:  4px;
  --plx-sp-2:  8px;
  --plx-sp-3: 12px;
  --plx-sp-4: 16px;
  --plx-sp-5: 24px;
  --plx-sp-6: 32px;
  --plx-sp-7: 48px;
  --plx-sp-8: 64px;
}


/* ============================================================
 * STR-113 — WooCommerce uzywa wlasnego #777 na bialym tle: 4,48:1,
 * czyli tuz pod progiem 4,5. Dociagamy do tokenu, ktory juz mamy.
 * ============================================================ */
.woocommerce .quantity input, .woocommerce small, .woocommerce .woocommerce-Price-taxLabel,
.woocommerce table.shop_table td small, .woocommerce-page small { color: var(--plx-muted) !important; }