/* ══════════════════════════════════════════════════════════════
NUZA — WARIANT B: „KATALOG"
Model: Notino / Douglas — sklep konwersyjny, duży asortyment.
Gęsto, jasno, cena i promocja na pierwszym planie.
Familjen Grotesk (nagłówki) + Instrument Sans (UI)
══════════════════════════════════════════════════════════════ */
:root{
--bg: #FFFFFF;
--surf: #F5F3F8; /* neutralne przechylone w fiolet, nie szare */
--surf-2: #EDE9F3;
--ink: #16121C;
--ink-2: #574E63;
--ink-3: #8C849A;
--line: #E4E0EC;
--violet: #6B2E8F;
--violet-d:#4B1A66;
--violet-l:#F3EAF9;
--sale: #C7262B;
--mint: #0F7A5A;
--wrap: 1340px;
--gut: clamp(14px, 2.6vw, 34px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,select,input{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer; text-align:left}
:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.dsp{font-family:"Familjen Grotesk", ui-sans-serif, sans-serif}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0; font-family:"Familjen Grotesk", ui-sans-serif, sans-serif;
font-weight:700; line-height:1.1; letter-spacing:-.02em}
/* nagłówek sekcji */
.sh{display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-bottom:16px; flex-wrap:wrap}
.sh h2{font-size:clamp(20px,2.4vw,27px); text-transform:uppercase; letter-spacing:-.01em}
.sh .all{font-size:13px; font-weight:600; color:var(--violet); display:inline-flex;
align-items:center; gap:6px; min-height:36px}
.sh .all:hover{text-decoration:underline}
.sec{margin-top:clamp(36px,4.5vw,60px)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-height:46px; padding:0 22px; background:var(--violet); color:#fff;
font-size:14px; font-weight:600; border-radius:2px; transition:background .16s}
.btn:hover{background:var(--violet-d)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink); color:#fff}
.btn.white{background:#fff; color:var(--violet)}
.btn.white:hover{background:var(--violet-l)}
.tagp{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:2px; line-height:1.2}
.tagp.sale{background:var(--sale); color:#fff}
.tagp.new{background:var(--violet); color:#fff}
.tagp.out{background:var(--ink); color:#fff}
.tagp.stock{background:#E4F3EE; color:var(--mint)}
/* ═══ PASEK KODU ═══ */
.code{background:var(--violet); color:#fff}
.code .wrap{display:flex; align-items:center; justify-content:center; gap:14px;
min-height:44px; flex-wrap:wrap; text-align:center; font-size:13.5px; padding-block:8px}
.code b{font-weight:700}
.code .kod{border:1px dashed rgba(255,255,255,.6); padding:3px 10px; font-weight:700;
letter-spacing:.1em; border-radius:2px}
.code a{text-decoration:underline; font-size:12.5px; opacity:.85}
/* ═══ RAIL ═══ */
.rail{background:var(--surf); border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2)}
.rail .wrap{display:flex; align-items:center; gap:22px; min-height:38px; flex-wrap:wrap}
.rail span{display:inline-flex; align-items:center; gap:7px}
.rail svg{color:var(--mint); flex:none}
.rail .r{margin-left:auto; display:flex; gap:18px}
.mk{font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
border:1px solid var(--violet); color:var(--violet); padding:3px 8px; border-radius:2px;
flex:none}
.rail .r a:hover{color:var(--violet)}
/* ═══ HEADER ═══ */
.hdr{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:70}
.hdr .wrap{display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); min-height:76px}
.logo img{height:46px; width:auto}
.finder{flex:1; max-width:620px; display:flex; border:2px solid var(--ink); border-radius:2px;
overflow:hidden; background:#fff}
.finder select{border:0; background:var(--surf); padding:0 30px 0 12px; font-size:13px;
font-weight:600; min-height:44px; border-right:1px solid var(--line); cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2316121C' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 11px center}
.finder input{flex:1; border:0; outline:0; padding:0 14px; min-height:44px; font-size:14.5px}
.finder input::placeholder{color:var(--ink-3)}
.finder button{background:var(--ink); color:#fff; padding:0 20px; min-height:44px;
display:grid; place-items:center; transition:background .16s}
.finder button:hover{background:var(--violet)}
.hicons{margin-left:auto; display:flex; gap:2px}
.hic{position:relative; min-width:46px; min-height:46px; display:grid; place-items:center;
gap:3px; align-content:center; border-radius:2px; transition:background .15s}
.hic:hover{background:var(--surf)}
.hic small{font-size:10px; font-weight:600; letter-spacing:.02em; color:var(--ink-2)}
.hic .cnt{position:absolute; top:3px; right:6px; min-width:17px; height:17px; padding:0 4px;
background:var(--sale); color:#fff; font-size:10px; font-weight:700; border-radius:9px;
display:grid; place-items:center; line-height:1}
.burger{display:none}
/* ═══ MEGA NAV ═══ */
.mega{border-bottom:1px solid var(--line); background:var(--bg)}
.mega .wrap{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.mega .wrap::-webkit-scrollbar{display:none}
.mega a{white-space:nowrap; font-size:13px; font-weight:600; padding:13px 13px;
border-bottom:3px solid transparent; transition:border-color .15s, color .15s}
.mega a:hover{border-color:var(--violet); color:var(--violet)}
.mega a.hot{color:var(--sale)}
.mega a.hot:hover{border-color:var(--sale)}
/* ═══ DRZEWO KATEGORII W HERO ═══ */
.cats{border:1px solid var(--line); border-radius:3px; background:var(--bg);
display:flex; flex-direction:column; overflow:hidden; align-self:stretch}
.cats .chd{background:var(--ink); color:#fff; padding:13px 15px; font-size:11.5px;
font-weight:700; letter-spacing:.13em; text-transform:uppercase;
display:flex; align-items:center; gap:11px}
.cats .chd .bars{display:flex; flex-direction:column; gap:3px; flex:none}
.cats .chd .bars i{display:block; width:14px; height:2px; background:currentColor; border-radius:1px}
.cats ul{list-style:none; margin:0; padding:0}
.cats > ul{flex:1}
.cats > ul > li{border-bottom:1px solid var(--line)}
.crow{width:100%; display:grid; grid-template-columns:1fr auto auto; align-items:center;
gap:9px; min-height:44px; padding:0 15px; font-size:13.5px; font-weight:600;
transition:background .15s, color .15s}
.crow:hover{background:var(--violet-l); color:var(--violet)}
.crow .c{font-size:12px; font-weight:500; color:var(--ink-3)}
.crow .chev{width:7px; height:7px; border-right:1.7px solid currentColor;
border-bottom:1.7px solid currentColor; transform:rotate(-45deg); opacity:.45;
transition:transform .22s ease, opacity .2s}
.crow[aria-expanded="true"]{background:var(--violet-l); color:var(--violet)}
.crow[aria-expanded="true"] .chev{transform:rotate(45deg); opacity:1}
.crow .hot{background:var(--sale); color:#fff; font-size:9.5px; font-weight:700;
letter-spacing:.07em; padding:2px 6px; border-radius:2px; text-transform:uppercase}
.csub{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease;
background:var(--surf)}
.crow[aria-expanded="true"] + .csub{grid-template-rows:1fr}
.csub > div{overflow:hidden}
.csub ul{padding:5px 0 9px}
.csub a{display:flex; justify-content:space-between; gap:10px; padding:7px 15px 7px 27px;
font-size:12.5px; color:var(--ink-2)}
.csub a:hover{color:var(--violet); background:#fff}
.csub a span{color:var(--ink-3); font-size:11.5px}
.cats .allc{display:block; padding:13px 15px; border-top:1px solid var(--line);
font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--violet)}
.cats .allc:hover{background:var(--violet-l)}
/* ═══ HERO ═══ */
.hero{display:grid; grid-template-columns:262px minmax(0,1fr) 266px; gap:10px; margin-top:16px}
.bigp{position:relative; background:var(--violet); color:#fff; border-radius:3px;
display:grid; grid-template-columns:1.1fr .9fr; align-items:center; overflow:hidden;
min-height:390px}
.bigp .tx{padding:clamp(22px,3vw,44px); position:relative; z-index:2}
.bigp .eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:#E4C7F5}
.bigp h1{margin:12px 0 0; font-size:clamp(28px,3.6vw,46px); color:#fff}
.bigp p{margin:12px 0 0; color:rgba(255,255,255,.78); font-size:15px; max-width:34ch}
.bigp .pr{display:flex; align-items:baseline; gap:12px; margin-top:20px}
.bigp .pr .now{font-family:"Familjen Grotesk",sans-serif; font-size:40px; font-weight:700; line-height:1}
.bigp .pr .was{text-decoration:line-through; color:rgba(255,255,255,.55); font-size:15px}
.bigp .cta{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.bigp .shot{position:relative; align-self:stretch; display:grid; place-items:center; padding:20px}
.bigp .shot img{max-height:330px; width:auto;
filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.bigp .disc{position:absolute; top:18px; right:18px; z-index:3; width:74px; height:74px;
border-radius:50%; background:var(--sale); color:#fff; display:grid; place-items:center;
font-family:"Familjen Grotesk",sans-serif; font-size:21px; font-weight:700; line-height:1}
.side{display:grid; grid-template-rows:1fr 1fr; gap:10px}
.stile{position:relative; border-radius:3px; overflow:hidden; display:flex; align-items:flex-end;
min-height:190px; color:#fff}
.stile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.stile::after{content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(22,18,28,.1) 30%,rgba(22,18,28,.82) 100%)}
.stile .t{position:relative; z-index:2; padding:18px}
.stile b{display:block; font-family:"Familjen Grotesk",sans-serif; font-size:19px; font-weight:700}
.stile span{font-size:12.5px; color:rgba(255,255,255,.8)}
/* ═══ USŁUGI ═══ */
.svcs{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:3px; margin-top:10px; overflow:hidden}
.svc{background:var(--bg); padding:16px 18px; display:flex; gap:13px; align-items:center}
.svc svg{color:var(--violet); flex:none}
.svc b{display:block; font-size:13.5px; font-weight:600}
.svc span{font-size:12.5px; color:var(--ink-3)}
/* ═══ KAFLE KAMPANIJNE ═══ */
.camps{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.camp{position:relative; border-radius:3px; overflow:hidden; min-height:260px;
display:flex; align-items:flex-end; color:#fff}
.camp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .5s ease}
.camp::after{content:""; position:absolute; inset:0;
background:linear-gradient(175deg,rgba(22,18,28,.05) 25%,rgba(22,18,28,.85) 100%)}
.camp:hover img{transform:scale(1.05)}
.camp .t{position:relative; z-index:2; padding:22px}
.camp .kick{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:#E4C7F5}
.camp h3{margin:8px 0 0; font-size:23px; color:#fff}
.camp p{margin:6px 0 0; font-size:13.5px; color:rgba(255,255,255,.8)}
.camp .lnk{display:inline-block; margin-top:14px; font-size:12.5px; font-weight:700;
border-bottom:1.5px solid #fff; padding-bottom:3px}
/* ═══ ZAKŁADKI + SIATKA PRODUKTÓW ═══ */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.tab{min-height:40px; padding:0 17px; border:1.5px solid var(--line); border-radius:2px;
font-size:13.5px; font-weight:600; color:var(--ink-2); transition:.15s}
.tab:hover{border-color:var(--ink); color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.pgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.pc{position:relative; border:1px solid var(--line); border-radius:3px; background:var(--bg);
display:flex; flex-direction:column; transition:border-color .18s, box-shadow .18s}
.pc:hover{border-color:var(--ink); box-shadow:0 8px 24px rgba(22,18,28,.08)}
.pc .im{position:relative; aspect-ratio:1/1; display:grid; place-items:center; padding:16px}
.pc .im img{max-height:100%; width:auto; transition:transform .3s}
.pc:hover .im img{transform:scale(1.05)}
.pc .flags{position:absolute; top:8px; left:8px; display:flex; flex-direction:column;
gap:4px; align-items:flex-start; z-index:2}
.pc .wish{position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px;
display:grid; place-items:center; color:var(--ink-3); background:#fff; border-radius:50%;
border:1px solid var(--line)}
.pc .wish:hover{color:var(--sale); border-color:var(--sale)}
.pc .bd{padding:0 13px 14px; display:flex; flex-direction:column; flex:1}
.pc .br{margin:0; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-3)}
.pc h4{margin:4px 0 0; font-size:14.5px; font-weight:600; line-height:1.25; letter-spacing:0;
font-family:"Instrument Sans",sans-serif}
.pc .cap{font-size:12px; color:var(--ink-3); margin-top:2px}
.pc .rate{display:flex; align-items:center; gap:5px; margin-top:7px; font-size:11.5px; color:var(--ink-3)}
.pc .rate .st{color:#E0A020; letter-spacing:1px; font-size:11px}
.pc .prow{margin-top:auto; padding-top:11px}
.pc .was{font-size:12px; color:var(--ink-3); text-decoration:line-through}
.pc .now{font-family:"Familjen Grotesk",sans-serif; font-size:21px; font-weight:700; display:block}
.pc .now.red{color:var(--sale)}
.pc .low{font-size:10.5px; color:var(--ink-3); margin-top:2px}
.pc .add{margin-top:10px; width:100%; min-height:42px; background:var(--surf);
color:var(--ink); font-size:13px; font-weight:600; border-radius:2px;
display:flex; align-items:center; justify-content:center; gap:7px; transition:.16s}
.pc:hover .add{background:var(--violet); color:#fff}
/* ═══ BUDŻET ═══ */
.bud{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.bd-t{border:1.5px solid var(--line); border-radius:3px; padding:20px 18px; transition:.16s;
background:var(--bg)}
.bd-t:hover{border-color:var(--violet); background:var(--violet-l)}
.bd-t b{display:block; font-family:"Familjen Grotesk",sans-serif; font-size:26px; font-weight:700}
.bd-t span{font-size:12.5px; color:var(--ink-3)}
.bd-t em{display:block; font-style:normal; margin-top:10px; font-size:12.5px; font-weight:600;
color:var(--violet)}
/* ═══ MARKI ═══ */
.brands{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:3px; overflow:hidden}
.brands a{background:#fff; min-height:88px; display:grid; place-items:center; padding:12px}
.brands img{max-height:52px; width:auto; opacity:.62; transition:opacity .18s}
.brands a:hover img{opacity:1}
/* ═══ PORADNIKI ═══ */
.posts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.post .im{aspect-ratio:16/10; overflow:hidden; border-radius:3px; background:var(--surf)}
.post .im img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.post:hover .im img{transform:scale(1.05)}
.post .k{margin:11px 0 0; font-size:11px; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--violet)}
.post h4{margin:5px 0 0; font-size:15px; font-weight:600; line-height:1.3;
font-family:"Instrument Sans",sans-serif; letter-spacing:0}
/* ═══ NEWSLETTER ═══ */
.nl{background:var(--surf); border-radius:3px; padding:clamp(24px,3.5vw,44px);
display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,44px); align-items:center}
.nl h2{font-size:clamp(20px,2.4vw,27px)}
.nl p{margin:8px 0 0; color:var(--ink-2); font-size:14px; max-width:46ch}
.nl form{display:flex; gap:8px}
.nl input{min-height:48px; padding:0 15px; border:2px solid var(--ink); border-radius:2px;
background:#fff; font-size:14.5px; min-width:250px; outline:0}
.nl input:focus{border-color:var(--violet)}
/* ═══ SEO ═══ */
.seo{border-top:1px solid var(--line); padding-top:26px}
.seo h3{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3);
font-weight:700; margin-bottom:12px}
.seo .cloud{display:flex; flex-wrap:wrap; gap:7px}
.seo a{font-size:12.5px; color:var(--ink-2); background:var(--surf); padding:6px 12px;
border-radius:2px; transition:.15s}
.seo a:hover{background:var(--violet); color:#fff}
/* ═══ STOPKA ═══ */
.ft{background:var(--surf); margin-top:clamp(40px,5vw,64px); padding-top:40px;
border-top:1px solid var(--line)}
.ft .cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding-bottom:34px}
.ft h5{margin:0 0 13px; font-size:12px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ft li a{font-size:13.5px; color:var(--ink-2)}
.ft li a:hover{color:var(--violet)}
.ft .cnt{font-size:13.5px; color:var(--ink-2); line-height:1.8}
.ft .cnt a{font-weight:600; color:var(--ink)}
.fsoc{display:flex; gap:8px; margin-top:14px}
.fsoc a{width:40px; height:40px; border:1px solid var(--line); border-radius:2px;
display:grid; place-items:center; color:var(--ink-2); background:#fff}
.fsoc a:hover{background:var(--violet); border-color:var(--violet); color:#fff}
.fpay{display:flex; gap:26px; align-items:flex-end; flex-wrap:wrap;
border-top:1px solid var(--line); padding:24px 0}
.fpay .lbl{display:block; margin-bottom:8px; font-size:10.5px; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.fpay .pl{background:#fff; border:1px solid var(--line); border-radius:2px;
padding:7px 10px; display:inline-block}
.fpay .pl img{height:28px; width:auto}
.fpay .ceneo{margin-left:auto}
.fpay .ceneo img{height:50px; width:auto}
.fbot{border-top:1px solid var(--line); padding:16px 0 24px; font-size:12px; color:var(--ink-3);
display:flex; gap:18px; flex-wrap:wrap}
/* ═══ RWD ═══ */
@media (max-width:1180px){
.hero{grid-template-columns:238px minmax(0,1fr)}
.side{grid-column:1/-1; grid-template-rows:none; grid-template-columns:1fr 1fr}
.pgrid{grid-template-columns:repeat(3,1fr)}
.posts{grid-template-columns:repeat(2,1fr)}
.brands{grid-template-columns:repeat(3,1fr)}
.ft .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
.hero{grid-template-columns:1fr}
.cats{order:2}
.side{grid-column:auto; grid-template-rows:none; grid-template-columns:1fr 1fr}
.bigp{grid-template-columns:1fr; min-height:0}
.bigp .shot{order:-1; padding-top:30px}
.bigp .shot img{max-height:210px}
.svcs{grid-template-columns:1fr 1fr}
.camps{grid-template-columns:1fr}
.bud{grid-template-columns:1fr 1fr}
.nl{grid-template-columns:1fr}
.finder select{display:none}
}
@media (max-width:640px){
.hdr .wrap{flex-wrap:wrap; padding-block:10px; min-height:0; gap:10px}
.finder{order:3; flex-basis:100%; max-width:none}
.hicons{margin-left:auto}
.hic small{display:none}
.pgrid{grid-template-columns:repeat(2,1fr)}
.side{grid-template-columns:1fr}
.posts{grid-template-columns:1fr}
.svcs{grid-template-columns:1fr}
.bud{grid-template-columns:1fr}
.ft .cols{grid-template-columns:1fr}
.fpay .ceneo{margin-left:0}
.nl form{flex-direction:column}
.nl input{min-width:0; width:100%}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important; transition-duration:.01ms !important}
html{scroll-behavior:auto}
}
:root{
--pg-bg:var(--bg); --pg-surf:var(--surf); --pg-card:var(--bg);
--pg-ink:var(--ink); --pg-ink2:var(--ink-2); --pg-ink3:var(--ink-3);
--pg-line:var(--line); --pg-line2:var(--line);
--pg-acc:var(--violet); --pg-acc-l:var(--violet-l); --pg-warn:var(--sale); --pg-ok:var(--mint);
--pg-r:3px; --pg-rs:3px; --pg-rp:2px;
--pg-sh:0 6px 20px rgba(22,18,28,.06); --pg-shl:0 12px 32px rgba(22,18,28,.1);
--pg-bd:1px solid var(--line);
--pg-dsp:"Familjen Grotesk",ui-sans-serif,sans-serif;
--pg-caps:.06em;
}
/* ══ PODSTRONY — wspólne komponenty na moście tokenów ══ */
.pg{padding-block:clamp(20px,2.6vw,34px) clamp(40px,5vw,72px)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px;
color:var(--pg-ink3); margin-bottom:18px}
.crumbs a:hover{color:var(--pg-acc)}
.crumbs i{font-style:normal; opacity:.5}
.pg-head{margin-bottom:22px}
.pg-head h1{font-size:clamp(26px,3.4vw,40px)}
.pg-head .sub{margin:8px 0 0; color:var(--pg-ink2); font-size:14.5px; max-width:66ch}
.pg-tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:var(--pg-rp);
line-height:1.3}
.pg-tag.sale{background:var(--pg-warn); color:#fff}
.pg-tag.new{background:var(--pg-acc); color:#fff}
.pg-tag.ok{background:var(--pg-acc-l); color:var(--pg-acc)}
.pg-btn2{display:inline-flex; align-items:center; justify-content:center; gap:9px;
min-height:48px; padding:0 22px; border:1.5px solid var(--pg-ink); color:var(--pg-ink);
background:var(--pg-card); border-radius:var(--pg-rp); font-size:13.5px; font-weight:600;
transition:.18s; cursor:pointer}
.pg-btn2:hover{background:var(--pg-acc-l); border-color:var(--pg-acc); color:var(--pg-acc)}
/* ── siatka produktów ── */
.pgrid2{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.p2{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); overflow:hidden; display:flex; flex-direction:column;
transition:box-shadow .2s, transform .2s, border-color .2s}
.p2:hover{box-shadow:var(--pg-shl); transform:translateY(-3px); border-color:var(--pg-ink)}
.p2 .im{position:relative; aspect-ratio:1/1; background:var(--pg-bg); display:grid;
place-items:center; padding:20px}
.p2 .im img{max-height:100%; width:auto; transition:transform .3s}
.p2:hover .im img{transform:scale(1.05)}
.p2 .fl{position:absolute; top:11px; left:11px; display:flex; flex-direction:column; gap:5px;
align-items:flex-start}
.p2 .bd{padding:0 17px 18px; display:flex; flex-direction:column; flex:1}
.p2 .br{margin:0; font-size:10.5px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:var(--pg-ink3)}
.p2 h3{margin:5px 0 0; font-size:16.5px; line-height:1.25}
.p2 .cap{margin:3px 0 0; font-size:12.5px; color:var(--pg-ink3)}
.p2 .rate{display:flex; gap:6px; align-items:center; margin-top:8px; font-size:12px;
color:var(--pg-ink3)}
.p2 .rate .st{color:#D79B3C; letter-spacing:1px; font-size:11.5px}
.p2 .end{margin-top:auto; padding-top:14px; display:flex; align-items:flex-end;
justify-content:space-between; gap:10px}
.p2 .was{display:block; font-size:12px; color:var(--pg-ink3); text-decoration:line-through}
.p2 .now{font-family:var(--pg-dsp); font-size:21px; font-weight:700}
.p2 .now.red{color:var(--pg-warn)}
.p2 .add2{min-width:44px; min-height:44px; border-radius:var(--pg-rp); background:var(--pg-surf);
display:grid; place-items:center; color:var(--pg-ink); transition:.18s; flex:none}
.p2:hover .add2{background:var(--pg-acc); color:#fff}
/* ── layout kategorii ── */
.catlay{display:grid; grid-template-columns:262px minmax(0,1fr); gap:clamp(18px,2.4vw,32px);
align-items:start}
.filters{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); overflow:hidden; position:sticky; top:96px}
.fg{border-bottom:1px solid var(--pg-line2); padding:16px 18px}
.fg:last-of-type{border-bottom:0}
.fg h2{font-size:12px; font-weight:700; letter-spacing:var(--pg-caps); text-transform:uppercase;
font-family:inherit; margin-bottom:11px}
.fg ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fg label{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--pg-ink2);
cursor:pointer; min-height:26px}
.fg label:hover{color:var(--pg-acc)}
.fg input[type=checkbox]{width:17px; height:17px; accent-color:var(--pg-acc); flex:none; margin:0}
.fg label .n{margin-left:auto; font-size:12px; color:var(--pg-ink3);
font-variant-numeric:tabular-nums}
.fprice{display:flex; gap:8px; align-items:center}
.fprice input{width:100%; min-height:40px; padding:0 11px; border:1px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:13.5px; outline:0}
.fprice input:focus{border-color:var(--pg-acc)}
.fchips{display:flex; flex-wrap:wrap; gap:7px}
.fchips button{font-size:12.5px; padding:6px 12px; border:1px solid var(--pg-line);
border-radius:var(--pg-rp); color:var(--pg-ink2); background:var(--pg-bg); transition:.16s}
.fchips button:hover,.fchips button[aria-pressed=true]{border-color:var(--pg-acc);
color:var(--pg-acc); background:var(--pg-acc-l)}
.freset{display:block; width:100%; padding:14px 18px; border-top:1px solid var(--pg-line2);
font-size:12.5px; font-weight:600; color:var(--pg-acc); text-align:center}
.toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;
padding-bottom:14px; border-bottom:1px solid var(--pg-line)}
.toolbar .cnt{font-size:13.5px; color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.toolbar .act{display:flex; gap:7px; flex-wrap:wrap}
.toolbar .act span{display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
background:var(--pg-acc-l); color:var(--pg-acc); padding:5px 11px; border-radius:var(--pg-rp)}
.toolbar .act span b{cursor:pointer; opacity:.6; font-weight:700}
.toolbar .act span b:hover{opacity:1}
.toolbar .sort{margin-left:auto; display:flex; align-items:center; gap:9px; font-size:13px;
color:var(--pg-ink3)}
.toolbar select{min-height:42px; padding:0 34px 0 13px; border:1px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-card); font-size:13.5px; cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center}
.pager{display:flex; gap:7px; align-items:center; justify-content:center; margin-top:34px}
.pager a,.pager span{min-width:44px; min-height:44px; display:grid; place-items:center;
border:1px solid var(--pg-line); border-radius:var(--pg-rs); font-size:14px;
font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--pg-acc); color:var(--pg-acc)}
.pager .on{background:var(--pg-ink); border-color:var(--pg-ink); color:var(--pg-bg)}
.pager .gap{border:0; min-width:24px}
.seotext{margin-top:44px; padding-top:26px; border-top:1px solid var(--pg-line);
color:var(--pg-ink2); font-size:14.5px; max-width:78ch}
.seotext h2{font-size:19px; margin-bottom:10px}
.seotext p{margin:0 0 12px}
/* ── karta produktu ── */
.prod{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(24px,3.4vw,54px); align-items:start}
.gal{display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px}
.gthumbs{display:grid; gap:10px; align-content:start}
.gthumbs button{aspect-ratio:1/1; background:var(--pg-card); border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); padding:7px; display:grid; place-items:center; overflow:hidden}
.gthumbs button[aria-current=true]{border-color:var(--pg-acc)}
.gthumbs img{max-height:100%; max-width:100%; width:auto; object-fit:contain}
.gmain{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); aspect-ratio:1/1; display:grid; place-items:center; padding:30px;
position:relative; overflow:hidden}
.gmain img{max-height:100%; width:auto; object-fit:contain}
.gmain .fl{position:absolute; top:16px; left:16px}
.pinfo .br{margin:0; font-size:12px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--pg-ink3)}
.pinfo h1{margin:7px 0 0; font-size:clamp(25px,3.2vw,38px)}
.pinfo .cap{margin:7px 0 0; color:var(--pg-ink3); font-size:14.5px}
.pinfo .rate{display:flex; align-items:center; gap:9px; margin-top:13px; font-size:13px;
color:var(--pg-ink3)}
.pinfo .rate .st{color:#D79B3C; letter-spacing:1.5px; font-size:13px}
.prices{display:flex; align-items:baseline; gap:14px; margin-top:20px; flex-wrap:wrap}
.prices .now{font-family:var(--pg-dsp); font-size:38px; font-weight:700; color:var(--pg-acc);
line-height:1; font-variant-numeric:tabular-nums}
.prices .was{font-size:16px; color:var(--pg-ink3); text-decoration:line-through;
font-variant-numeric:tabular-nums}
.lowest{margin:7px 0 0; font-size:12px; color:var(--pg-ink3)}
.opt{margin-top:22px}
.opt h2{font-size:12px; font-weight:700; letter-spacing:var(--pg-caps); text-transform:uppercase;
font-family:inherit; margin-bottom:10px}
.opt .row{display:flex; gap:9px; flex-wrap:wrap}
.opt .row button{min-height:48px; padding:0 18px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rp); background:var(--pg-card); font-size:13.5px; font-weight:600;
display:flex; flex-direction:column; justify-content:center; line-height:1.2; transition:.16s}
.opt .row button small{font-weight:400; font-size:11.5px; color:var(--pg-ink3)}
.opt .row button:hover{border-color:var(--pg-acc)}
.opt .row button[aria-pressed=true]{border-color:var(--pg-acc); background:var(--pg-acc-l);
color:var(--pg-acc)}
.opt .row button[aria-pressed=true] small{color:var(--pg-acc)}
.buyrow{display:flex; gap:11px; margin-top:24px; align-items:stretch; flex-wrap:wrap}
.qty{display:flex; align-items:center; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rp); overflow:hidden; background:var(--pg-card)}
.qty button{width:46px; min-height:48px; display:grid; place-items:center; font-size:18px;
color:var(--pg-ink2)}
.qty button:hover{background:var(--pg-surf); color:var(--pg-acc)}
.qty span{min-width:38px; text-align:center; font-size:15px; font-weight:600;
font-variant-numeric:tabular-nums}
.buyrow .btn{flex:1; min-width:190px}
.psafe{display:grid; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid var(--pg-line)}
.psafe div{display:flex; gap:11px; align-items:center; font-size:13.5px; color:var(--pg-ink2)}
.psafe svg{color:var(--pg-ok); flex:none}
.pyr{margin-top:26px; border-top:1px solid var(--pg-line)}
.pyr > div{display:flex; gap:18px; padding:13px 0; border-bottom:1px solid var(--pg-line2)}
.pyr dt{flex:none; width:84px; font-size:11px; font-weight:700; letter-spacing:.13em;
text-transform:uppercase; color:var(--pg-ink3); padding-top:3px}
.pyr dd{margin:0; font-size:15px}
.ptabs{margin-top:clamp(36px,4.4vw,64px); border-top:1px solid var(--pg-line); padding-top:26px}
.ptabs .tl{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px}
.ptabs .tl button{min-height:44px; padding:0 17px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rp); font-size:13.5px; font-weight:600; color:var(--pg-ink2);
background:var(--pg-card); transition:.16s}
.ptabs .tl button[aria-selected=true]{background:var(--pg-ink); border-color:var(--pg-ink);
color:var(--pg-bg)}
.tpane{display:none}
.tpane.on{display:block}
.tpane p{margin:0 0 13px; color:var(--pg-ink2); font-size:15px; max-width:74ch}
.spec{width:100%; border-collapse:collapse; max-width:620px}
.spec th,.spec td{text-align:left; padding:11px 0; border-bottom:1px solid var(--pg-line2);
font-size:14px}
.spec th{width:190px; color:var(--pg-ink3); font-weight:500}
.rvs{display:grid; gap:14px; max-width:760px}
.rv2{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:20px}
.rv2 .top{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.rv2 .av{width:36px; height:36px; border-radius:50%; background:var(--pg-acc-l);
color:var(--pg-acc); display:grid; place-items:center; font-size:12.5px; font-weight:700}
.rv2 .top b{display:block; font-size:14px}
.rv2 .top span{font-size:12px; color:var(--pg-ink3)}
.rv2 .st{margin-left:auto; color:#D79B3C; letter-spacing:1.5px; font-size:12px}
.rv2 q{quotes:none; font-size:14.5px; color:var(--pg-ink2)}
/* ── checkout ── */
.steps2{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:26px;
padding-bottom:20px; border-bottom:1px solid var(--pg-line)}
.steps2 .s{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--pg-ink3)}
.steps2 .s b{width:28px; height:28px; border-radius:50%; border:1.5px solid var(--pg-line);
display:grid; place-items:center; font-size:12.5px}
.steps2 .s.done b{background:var(--pg-ok); border-color:var(--pg-ok); color:#fff}
.steps2 .s.on{color:var(--pg-ink); font-weight:600}
.steps2 .s.on b{background:var(--pg-ink); border-color:var(--pg-ink); color:var(--pg-bg)}
.steps2 .ar{color:var(--pg-ink3); opacity:.5}
.cklay{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:clamp(20px,2.8vw,40px);
align-items:start}
.ckbox{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:24px; margin-bottom:16px}
.ckbox h2{font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:10px}
.ckbox h2 i{font-style:normal; width:26px; height:26px; border-radius:50%;
background:var(--pg-acc-l); color:var(--pg-acc); display:grid; place-items:center;
font-size:12.5px; font-weight:700; flex:none; font-family:inherit}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.fld2{display:flex; flex-direction:column; gap:6px}
.fld2.full{grid-column:1/-1}
.fld2 label{font-size:12.5px; font-weight:600; color:var(--pg-ink2)}
.fld2 input{min-height:48px; padding:0 14px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:14.5px; outline:0}
.fld2 input:focus{border-color:var(--pg-acc)}
.fld2 .hint{font-size:11.5px; color:var(--pg-ink3)}
.opts{display:grid; gap:10px}
.opt2{display:flex; align-items:center; gap:13px; padding:14px 16px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); cursor:pointer; transition:.16s}
.opt2:hover{border-color:var(--pg-acc)}
.opt2:has(input:checked){border-color:var(--pg-acc); background:var(--pg-acc-l)}
.opt2 input{width:19px; height:19px; accent-color:var(--pg-acc); flex:none; margin:0}
.opt2 .lg{width:52px; display:grid; place-items:center; flex:none}
.opt2 .lg img{max-height:26px; width:auto}
.opt2 .tx{flex:1}
.opt2 .tx b{display:block; font-size:14.5px}
.opt2 .tx span{font-size:12.5px; color:var(--pg-ink3)}
.opt2 .pr{font-weight:700; font-size:14.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.opt2 .pr.free{color:var(--pg-ok)}
.chk{display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--pg-ink2);
cursor:pointer; padding:7px 0}
.chk input{width:18px; height:18px; accent-color:var(--pg-acc); flex:none; margin:2px 0 0}
.chk a{text-decoration:underline}
.summary{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:22px; position:sticky; top:96px}
.summary h2{font-size:18px; margin-bottom:16px}
.sitem{display:grid; grid-template-columns:62px 1fr auto; gap:13px; align-items:center;
padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--pg-line2)}
.sitem .im{width:62px; height:62px; background:var(--pg-bg); border-radius:var(--pg-rs);
display:grid; place-items:center; padding:6px; overflow:hidden}
.sitem .im img{max-height:100%; width:auto}
.sitem b{display:block; font-size:13.5px; font-weight:600; line-height:1.3}
.sitem span{font-size:12px; color:var(--pg-ink3)}
.sitem .pr{font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.promo2{display:flex; gap:8px; margin:16px 0}
.promo2 input{flex:1; min-height:44px; padding:0 13px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:13.5px; outline:0}
.promo2 input:focus{border-color:var(--pg-acc)}
.promo2 button{min-height:44px; padding:0 16px; border:1.5px solid var(--pg-ink);
border-radius:var(--pg-rs); font-size:13px; font-weight:600}
.promo2 button:hover{background:var(--pg-ink); color:var(--pg-bg)}
.srow{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px;
color:var(--pg-ink2)}
.srow span:last-child{font-variant-numeric:tabular-nums}
.srow.disc{color:var(--pg-ok)}
.stotal{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
margin-top:13px; padding-top:15px; border-top:1.5px solid var(--pg-line)}
.stotal b{font-size:15px}
.stotal .v{font-family:var(--pg-dsp); font-size:28px; font-weight:700; color:var(--pg-acc);
font-variant-numeric:tabular-nums}
.summary .btn{width:100%; margin-top:16px}
.ssafe{display:grid; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--pg-line2)}
.ssafe div{display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--pg-ink3)}
.ssafe svg{color:var(--pg-ok); flex:none}
/* ── polecane ── */
.also{margin-top:clamp(40px,5vw,70px); padding-top:28px; border-top:1px solid var(--pg-line)}
.also h2{font-size:clamp(20px,2.6vw,28px); margin-bottom:18px}
@media (max-width:1080px){
.catlay{grid-template-columns:1fr}
.filters{position:static}
.cklay{grid-template-columns:1fr}
.summary{position:static}
.prod{grid-template-columns:1fr}
.pgrid2{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
.pgrid2{grid-template-columns:1fr 1fr}
.frow{grid-template-columns:1fr}
.gal{grid-template-columns:1fr}
.gthumbs{grid-template-columns:repeat(4,1fr); order:2}
.toolbar .sort{margin-left:0; width:100%}
}
@media (max-width:520px){
.pgrid2{grid-template-columns:1fr}
.buyrow .btn{min-width:0}
}
/* ── link pomijający nawigację (dostępność) ── */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff;
padding:12px 20px; font-size:14px; font-weight:600}
.skip:focus{left:8px; top:8px}
/* logo klienta ma cienki napis i duzo swiatla w pliku — przy 46 px bylo nieczytelne */
.nuza-logo-img{height:56px; width:auto}
.hdr .logo img{height:56px; width:auto}
/* odstęp pod przyklejonym nagłówkiem, gdy WordPress pokazuje pasek administratora */
body.admin-bar .hdr{top:32px}
@media (max-width:782px){ body.admin-bar .hdr{top:46px} }
/* ══════════════════════════════════════════════════════════
WooCommerce — ostylowanie własnego kodu wtyczki
w języku wizualnym wariantu B.
══════════════════════════════════════════════════════════ */
/* ── filtry: pozycja jako „checkbox" ── */
.fcheck{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--pg-ink2);
min-height:30px; line-height:1.3}
.fcheck .box{width:17px; height:17px; border:1.5px solid var(--pg-line); border-radius:3px;
flex:none; position:relative; background:var(--pg-card); transition:.15s}
.fcheck:hover{color:var(--pg-acc)}
.fcheck:hover .box{border-color:var(--pg-acc)}
.fcheck.on{color:var(--pg-acc); font-weight:600}
.fcheck.on .box{background:var(--pg-acc); border-color:var(--pg-acc)}
.fcheck.on .box::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg)}
.fcheck .n{margin-left:auto; font-size:12px; color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.fg ul{display:grid; gap:4px}
.fprice .pbtn{min-height:40px; padding:0 14px; border:1.5px solid var(--pg-ink); background:var(--pg-card);
border-radius:var(--pg-rs); font-size:13px; font-weight:600; cursor:pointer; flex:none}
.fprice .pbtn:hover{background:var(--pg-ink); color:var(--pg-bg)}
/* ── pusty listing ── */
.pusto{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:clamp(30px,5vw,60px); text-align:center}
.pusto h2{font-size:24px; margin-bottom:10px}
.pusto p{margin:0 auto 22px; color:var(--pg-ink2); max-width:48ch}
/* ── ceny Woo ── */
.woocommerce-Price-amount{font-variant-numeric:tabular-nums}
.p2 .now del,.p2 .now ins{text-decoration:none}
.p2 .now del{display:block; font-size:12px; color:var(--pg-ink3); text-decoration:line-through;
font-weight:400; font-family:"Instrument Sans",sans-serif}
.p2 .now ins{background:none; color:inherit}
.prices .now del{display:none}
.prices .now ins{background:none; text-decoration:none}
/* ── przycisk „do koszyka” w siatce ── */
.p2 .add2.loading{opacity:.55; pointer-events:none}
.p2 .add2.added{background:var(--pg-ok); color:#fff; border-color:var(--pg-ok)}
.p2 .added_to_cart{display:none}
/* ── formularz dodawania do koszyka ── */
.pinfo form.cart{display:flex; gap:11px; align-items:stretch; flex-wrap:wrap; margin-top:24px}
.pinfo form.cart .quantity{display:flex; align-items:center; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rp); overflow:hidden; background:var(--pg-card)}
.pinfo form.cart .quantity input{width:72px; min-height:48px; border:0; text-align:center;
font-size:15px; font-weight:600; background:none; outline:0; font-variant-numeric:tabular-nums;
-moz-appearance:textfield}
.pinfo form.cart .quantity input::-webkit-outer-spin-button,
.pinfo form.cart .quantity input::-webkit-inner-spin-button{opacity:1; height:30px}
.pinfo form.cart button[type=submit]{flex:1; min-width:200px; min-height:48px; padding:0 26px;
background:var(--pg-acc); color:#fff; border:0; border-radius:var(--pg-rp); font-size:14px;
font-weight:600; cursor:pointer; transition:background .18s}
.pinfo form.cart button[type=submit]:hover{background:var(--pg-ink)}
.pinfo .stock.out-of-stock{color:var(--pg-warn); font-weight:600; margin-top:16px}
/* ── komunikaty ── */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
list-style:none; margin:0 0 20px; padding:15px 18px; border-radius:var(--pg-rs);
border:var(--pg-bd); background:var(--pg-card); box-shadow:var(--pg-sh); font-size:14.5px;
display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.woocommerce-message{border-left:3px solid var(--pg-ok)}
.woocommerce-info{border-left:3px solid var(--pg-acc)}
.woocommerce-error{border-left:3px solid var(--pg-warn); flex-direction:column; align-items:flex-start}
.woocommerce-error li{margin:3px 0}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}
/* ── przyciski Woo ── */
.woocommerce .button,.woocommerce-page .button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .return-to-shop .button{
display:inline-flex; align-items:center; justify-content:center; min-height:46px;
padding:0 22px; background:var(--pg-ink); color:var(--pg-bg); border:0;
border-radius:var(--pg-rp); font-size:13.5px; font-weight:600; cursor:pointer;
text-decoration:none; transition:background .18s}
.woocommerce .button:hover{background:var(--pg-acc); color:#fff}
.wc-proceed-to-checkout .checkout-button{width:100%; background:var(--pg-acc); min-height:52px;
font-size:15px; margin-top:14px}
.wc-proceed-to-checkout .checkout-button:hover{background:var(--pg-ink)}
/* ── koszyk ── */
.woocommerce-cart-form{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:8px 20px 20px}
.woocommerce-cart table.shop_table{width:100%; border-collapse:collapse}
.woocommerce-cart table.shop_table th{text-align:left; padding:16px 10px; font-size:11.5px;
font-weight:700; letter-spacing:var(--pg-caps); text-transform:uppercase; color:var(--pg-ink3);
border-bottom:1px solid var(--pg-line)}
.woocommerce-cart table.shop_table td{padding:16px 10px; border-bottom:1px solid var(--pg-line2);
vertical-align:middle; font-size:14.5px}
.woocommerce-cart td.product-thumbnail img{width:68px; height:auto; border-radius:var(--pg-rs)}
.woocommerce-cart td.product-name a{font-weight:600}
.woocommerce-cart td.product-name a:hover{color:var(--pg-acc)}
.woocommerce-cart .product-remove a{display:grid; place-items:center; width:30px; height:30px;
border-radius:50%; background:var(--pg-surf); color:var(--pg-ink3); font-size:17px;
text-decoration:none; line-height:1}
.woocommerce-cart .product-remove a:hover{background:var(--pg-warn); color:#fff}
.woocommerce-cart .quantity input{width:70px; min-height:42px; text-align:center;
border:1.5px solid var(--pg-line); border-radius:var(--pg-rs); background:var(--pg-bg);
font-variant-numeric:tabular-nums}
.woocommerce-cart .coupon{display:flex; gap:9px; flex-wrap:wrap; padding:16px 0}
.woocommerce-cart .coupon input[type=text]{min-height:46px; padding:0 14px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:14px; outline:0; min-width:200px}
.woocommerce-cart .coupon input[type=text]:focus{border-color:var(--pg-acc)}
.woocommerce-cart .actions > button[name=update_cart]{margin-left:auto}
.cart-collaterals{margin-top:26px}
.cart_totals{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:24px; max-width:420px; margin-left:auto}
.cart_totals h2{font-size:19px; margin-bottom:16px}
.cart_totals table{width:100%; border-collapse:collapse}
.cart_totals th{text-align:left; padding:9px 0; font-size:14px; color:var(--pg-ink2); font-weight:500}
.cart_totals td{text-align:right; padding:9px 0; font-size:14px; font-variant-numeric:tabular-nums}
.cart_totals .order-total th,.cart_totals .order-total td{border-top:1.5px solid var(--pg-line);
padding-top:15px; font-size:16px; font-weight:700}
.cart_totals .order-total td .woocommerce-Price-amount{font-family:var(--pg-dsp); font-size:26px;
color:var(--pg-acc)}
.woocommerce-shipping-methods{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.woocommerce-shipping-methods li{display:flex; align-items:center; gap:9px; font-size:13.5px}
.woocommerce-shipping-destination{font-size:12.5px; color:var(--pg-ink3); margin-top:9px}
/* ── zamawianie ── */
.woocommerce-checkout form.checkout{display:grid; grid-template-columns:minmax(0,1fr) 380px;
gap:clamp(20px,2.8vw,38px); align-items:start}
.woocommerce-checkout form.checkout > #customer_details{grid-column:1; grid-row:1 / span 2}
.woocommerce-checkout form.checkout > #order_review_heading{grid-column:2; grid-row:1}
.woocommerce-checkout form.checkout > #order_review{grid-column:2; grid-row:2}
.woocommerce-checkout .col2-set#customer_details{display:block; width:100%}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%; float:none; margin:0 0 16px; padding:0}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); box-shadow:var(--pg-sh); padding:24px; margin-bottom:16px}
.woocommerce-checkout h3{font-size:18px; margin-bottom:16px}
.woocommerce-checkout .form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:13px}
.woocommerce-checkout .form-row label{font-size:12.5px; font-weight:600; color:var(--pg-ink2)}
.woocommerce-checkout .form-row .required{color:var(--pg-warn); text-decoration:none}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-selection--single{min-height:48px; padding:0 14px;
border:1.5px solid var(--pg-line) !important; border-radius:var(--pg-rs); background:var(--pg-bg);
font-size:14.5px; outline:0; width:100%; font-family:inherit}
.woocommerce-checkout .form-row textarea{padding:12px 14px; min-height:86px; resize:vertical}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus{border-color:var(--pg-acc) !important}
.woocommerce-checkout .select2-selection--single{display:flex; align-items:center}
.woocommerce-checkout .select2-selection__arrow{top:50% !important; transform:translateY(-50%)}
.woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{width:100%; float:none}
@media (min-width:600px){
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{display:grid;
grid-template-columns:1fr 1fr; gap:0 13px}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field{grid-column:1/-1}
}
#order_review_heading{font-size:18px; margin:0 0 16px}
.woocommerce-checkout-review-order{background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); box-shadow:var(--pg-sh); padding:24px; position:sticky; top:96px}
.woocommerce-checkout-review-order-table{width:100%; border-collapse:collapse; margin-bottom:8px}
.woocommerce-checkout-review-order-table th{text-align:left; padding:8px 0; font-size:12px;
letter-spacing:var(--pg-caps); text-transform:uppercase; color:var(--pg-ink3);
border-bottom:1px solid var(--pg-line)}
.woocommerce-checkout-review-order-table td{padding:11px 0; font-size:14px;
border-bottom:1px solid var(--pg-line2); font-variant-numeric:tabular-nums}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{text-align:right}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{border-bottom:0; padding-top:15px;
border-top:1.5px solid var(--pg-line); font-size:16px; font-weight:700}
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{
font-family:var(--pg-dsp); font-size:26px; color:var(--pg-acc)}
.woocommerce-checkout-review-order-table .product-name{font-weight:500}
.woocommerce-checkout-review-order-table .product-quantity{color:var(--pg-ink3); font-weight:400}
#payment{background:transparent}
#payment ul.payment_methods{list-style:none; margin:0 0 16px; padding:16px 0 0;
border-top:1px solid var(--pg-line); display:grid; gap:9px}
#payment ul.payment_methods li{display:block}
#payment ul.payment_methods li label{display:flex; align-items:center; gap:12px; padding:14px 16px;
border:1.5px solid var(--pg-line); border-radius:var(--pg-rs); cursor:pointer; font-size:14.5px;
transition:.16s}
#payment ul.payment_methods li label:hover{border-color:var(--pg-acc)}
#payment ul.payment_methods li input[type=radio]{width:19px; height:19px; accent-color:var(--pg-acc);
flex:none; margin:0}
#payment ul.payment_methods li input[type=radio]:checked + label{border-color:var(--pg-acc);
background:var(--pg-acc-l)}
#payment .payment_box{background:var(--pg-surf); border-radius:var(--pg-rs); padding:13px 16px;
font-size:13.5px; color:var(--pg-ink2); margin:0 0 4px}
#payment .payment_box p{margin:0}
#payment .place-order{padding-top:6px}
#payment #place_order{width:100%; min-height:54px; background:var(--pg-acc); color:#fff; border:0;
border-radius:var(--pg-rp); font-size:15px; font-weight:700; cursor:pointer; transition:background .18s}
#payment #place_order:hover{background:var(--pg-ink)}
.woocommerce-terms-and-conditions-wrapper{font-size:13px; color:var(--pg-ink2); margin-bottom:12px}
.woocommerce-privacy-policy-text{font-size:12.5px; color:var(--pg-ink3)}
/* ── podziękowanie i konto ── */
.woocommerce-order{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:clamp(24px,3.4vw,40px)}
.woocommerce-order-overview{list-style:none; margin:20px 0; padding:20px 0;
border-block:1px solid var(--pg-line); display:flex; gap:28px; flex-wrap:wrap}
.woocommerce-order-overview li{font-size:12px; letter-spacing:var(--pg-caps); text-transform:uppercase;
color:var(--pg-ink3)}
.woocommerce-order-overview li strong{display:block; margin-top:5px; font-size:16px;
letter-spacing:0; text-transform:none; color:var(--pg-ink)}
.woocommerce-MyAccount-navigation ul{list-style:none; margin:0 0 22px; padding:0; display:flex;
gap:7px; flex-wrap:wrap}
.woocommerce-MyAccount-navigation a{display:inline-flex; min-height:42px; align-items:center;
padding:0 16px; border:1.5px solid var(--pg-line); border-radius:var(--pg-rp); font-size:13.5px;
font-weight:600}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--pg-ink); border-color:var(--pg-ink);
color:var(--pg-bg)}
.woocommerce form.login,.woocommerce form.register{background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); box-shadow:var(--pg-sh); padding:24px; max-width:480px}
.woocommerce form.login .form-row,.woocommerce form.register .form-row{display:flex;
flex-direction:column; gap:6px; margin-bottom:14px}
.woocommerce form.login input.input-text,.woocommerce form.register input.input-text{
min-height:48px; padding:0 14px; border:1.5px solid var(--pg-line); border-radius:var(--pg-rs);
background:var(--pg-bg); font-size:14.5px; outline:0}
/* ── galeria produktu ── */
.gmain .woocommerce-product-gallery{width:100% !important; margin:0 !important}
.gmain img{max-height:100%; width:auto; object-fit:contain}
/* ── sortowanie i wyniki ── */
.woocommerce-notices-wrapper:empty{display:none}
.screen-reader-text,.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* ── RWD ── */
@media (max-width:1080px){
.woocommerce-checkout form.checkout{grid-template-columns:1fr}
.woocommerce-checkout-review-order{position:static}
.cart_totals{max-width:none; margin-left:0}
}
@media (max-width:700px){
.woocommerce-cart table.shop_table thead{display:none}
.woocommerce-cart table.shop_table tr{display:grid; grid-template-columns:72px 1fr auto;
gap:4px 14px; padding:14px 0; border-bottom:1px solid var(--pg-line2); align-items:center}
.woocommerce-cart table.shop_table td{border:0; padding:0}
.woocommerce-cart td.product-remove{grid-column:3; grid-row:1}
.woocommerce-cart td.product-thumbnail{grid-column:1; grid-row:1/4}
.woocommerce-cart td.product-name{grid-column:2; grid-row:1}
.woocommerce-cart td.product-price{display:none}
.woocommerce-cart td.product-quantity{grid-column:2; grid-row:2}
.woocommerce-cart td.product-subtotal{grid-column:2/4; grid-row:3; font-weight:700}
.woocommerce-cart table.shop_table td.actions{display:block; grid-column:1/-1}
.woocommerce-cart .coupon{flex-direction:column}
.woocommerce-cart .coupon input[type=text]{min-width:0; width:100%}
.woocommerce-cart .actions > button[name=update_cart]{margin-left:0; width:100%}
}
/* ── filtry: kategorie i „pokaż więcej” ───────────────────── */
.fcats{display:grid; gap:2px}
.fcats a{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--pg-ink2);
padding:5px 0; line-height:1.3}
.fcats a:hover{color:var(--pg-acc)}
.fcats .n{margin-left:auto; font-size:12px; color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.fg-more li.x{display:none}
.fg-more.open li.x{display:block}
.fmore{margin-top:8px; background:none; border:0; padding:0; cursor:pointer;
font:inherit; font-size:12.5px; color:var(--pg-acc); text-decoration:underline;
text-underline-offset:3px}
.fmore:hover{opacity:.75}
/* ── szuflada filtrów na mobile ───────────────────────────── */
.fhead,.fclose,.fdone,.fbtn{display:none}
@media (max-width:860px){
.fbtn{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px;
border:1.5px solid var(--pg-ink); border-radius:999px; background:var(--pg-card);
font:inherit; font-size:13.5px; font-weight:600; color:var(--pg-ink); cursor:pointer}
.fbtn:hover{background:var(--pg-ink); color:var(--pg-bg)}
.filters{position:fixed; left:0; right:0; top:0; bottom:0; z-index:120;
background:var(--pg-bg); overflow-y:auto; -webkit-overflow-scrolling:touch;
padding:0 18px 96px; margin:0; border:0; border-radius:0;
transform:translateY(100%); transition:transform .28s ease; visibility:hidden}
.filters.open{transform:none; visibility:visible}
.fhead{display:flex; align-items:center; justify-content:space-between;
position:sticky; top:0; z-index:2; background:var(--pg-bg);
padding:16px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--pg-line)}
.fhead strong{font-size:17px; letter-spacing:-.01em}
.fclose{display:block; background:none; border:0; font-size:30px; line-height:1;
color:var(--pg-ink2); cursor:pointer; padding:0 4px}
.fdone{display:block; position:fixed; left:18px; right:18px; bottom:18px; z-index:3;
min-height:50px; border:0; border-radius:999px; background:var(--pg-acc); color:#fff;
font:inherit; font-size:15px; font-weight:600; cursor:pointer;
box-shadow:0 10px 26px rgba(0,0,0,.22)}
body.filtry-otwarte{overflow:hidden}
}
/* ── mapa strony ──────────────────────────────────────────── */
.mapa{display:grid; gap:40px; margin:0 0 60px}
.mapa h2{font-size:clamp(20px,2vw,25px); letter-spacing:-.015em; margin:0 0 16px;
padding-bottom:10px; border-bottom:1px solid var(--pg-line)}
.mdrzewo{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 28px}
.mdrzewo > li > a{font-weight:600; font-size:15px}
.mdrzewo ul{margin:7px 0 0; padding-left:14px; border-left:1px solid var(--pg-line); display:grid; gap:5px}
.mdrzewo ul a{font-size:13.5px; color:var(--pg-ink2)}
.mdrzewo span{font-size:12px; color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.mdrzewo a:hover,.mmarki a:hover,.mstrony a:hover{color:var(--pg-acc)}
.mmarki{display:flex; flex-wrap:wrap; gap:7px 10px}
.mmarki a{display:inline-block; padding:6px 13px; border:1px solid var(--pg-line);
border-radius:999px; font-size:13px; background:var(--pg-card)}
.mmarki a:hover{border-color:var(--pg-acc)}
.mstrony{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 24px}
.mstrony a{font-size:14px}
/* ── zamówienie: metody płatności i przycisk ──────────────── */
.wc_payment_methods{list-style:none; margin:18px 0 0; padding:18px 0 0;
border-top:1px solid var(--pg-line); display:grid; gap:10px}
.wc_payment_methods li{border:1.5px solid var(--pg-line); border-radius:var(--pg-rs);
padding:14px 16px; transition:border-color .16s, background .16s}
.wc_payment_methods li:has(input:checked){border-color:var(--pg-acc); background:var(--pg-surf)}
.wc_payment_methods label{font-size:14.5px; font-weight:600; cursor:pointer; margin-left:8px}
.wc_payment_methods .payment_box{margin:10px 0 0; font-size:13px; line-height:1.55;
color:var(--pg-ink2); background:none; padding:0}
.wc_payment_methods .payment_box p{margin:0 0 6px}
.wc_payment_methods .payment_box::before{display:none}
#payment .form-row.place-order{margin-top:18px}
#place_order{width:100%; min-height:54px; border:0; border-radius:999px; cursor:pointer;
background:var(--pg-acc); color:#fff; font:inherit; font-size:16px; font-weight:600;
transition:background .18s}
#place_order:hover{background:var(--pg-ink)}
.woocommerce-privacy-policy-text,.woocommerce-terms-and-conditions-wrapper{font-size:12.5px;
color:var(--pg-ink3); line-height:1.6; margin-top:14px}
.woocommerce-form-login,.checkout_coupon{background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); padding:20px 24px; margin:0 0 16px}
.woocommerce-form-coupon-toggle,.woocommerce-form-login-toggle{margin-bottom:14px}
@media (max-width:980px){
.woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr)}
.woocommerce-checkout form.checkout > #customer_details,
.woocommerce-checkout form.checkout > #order_review_heading,
.woocommerce-checkout form.checkout > #order_review{grid-column:1; grid-row:auto}
.woocommerce-checkout-review-order{position:static}
}
/* ── opis produktu z importu: okiełznanie obcego HTML-a ──── */
.tpane{max-width:78ch}
.tpane img{max-width:320px !important; max-height:320px; width:auto !important; height:auto !important;
display:block; margin:18px auto; border-radius:var(--pg-rs); border:1px solid var(--pg-line)}
.tpane > div > div{display:block !important; width:auto !important; float:none !important}
.tpane table{width:100%; border-collapse:collapse; font-size:14px; margin:14px 0}
.tpane table td,.tpane table th{border:1px solid var(--pg-line); padding:8px 10px; text-align:left}
.tpane iframe,.tpane video{max-width:100%}
.tpane p{margin:0 0 12px}
.tpane h1,.tpane h2,.tpane h3,.tpane h4{font-size:18px; margin:20px 0 10px; letter-spacing:-.01em}
.tpane ul,.tpane ol{margin:0 0 14px; padding-left:20px}
.tpane li{margin-bottom:5px}
.tpane *{max-width:100%}
.tpane [style*="width"]{width:auto !important}
/* treść stron informacyjnych z importu */
.entry-content img{max-width:100%; height:auto}
.entry-content table{width:100%; border-collapse:collapse; font-size:14px; margin:16px 0}
.entry-content table td,.entry-content table th{border:1px solid var(--pg-line); padding:9px 11px}
.entry-content [style*="width"]{width:auto !important}
/* komunikaty Woo — bez znaczka z ikony, która nie zawsze się ładuje */
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{display:none !important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{padding-left:20px !important}
/* ── mobile: poprawki układu ───────────────────────────────── */
@media (max-width:860px){
/* drzewo kategorii to kluczowy element — na górze, nie na końcu hero */
.hero{display:flex; flex-direction:column}
.hero .cats{order:-1}
.hero .bigp{order:0}
.hero .side{order:1}
}
@media (max-width:560px){
.prod{grid-template-columns:1fr}
.gal{display:flex; flex-direction:column-reverse; gap:10px}
.gthumbs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.gthumbs button{flex:0 0 64px; width:64px}
.pinfo{padding:20px 18px}
.pyr div{grid-template-columns:1fr; gap:2px}
.ptabs .tl{overflow-x:auto; -webkit-overflow-scrolling:touch}
.pager{flex-wrap:wrap; gap:6px}
.pgrid2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.p2 .pb{padding:12px 12px 14px}
.crumbs{overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.toolbar{flex-wrap:wrap; gap:10px}
.toolbar .sort{margin-left:auto}
.toolbar .act{order:3; flex-basis:100%}
}
/* ── neutralizacja pływań WooCommerce (gdyby arkusz layout wrócił) ── */
.woocommerce div.product div.summary,
.woocommerce div.product .pinfo,
.woocommerce div.product div.images,
.woocommerce div.product .gal,
.woocommerce #content div.product div.summary,
.woocommerce #content div.product div.images{float:none; width:auto; margin:0; clear:none}
.woocommerce div.product .woocommerce-tabs{clear:none}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,.woocommerce-page .col2-set .col-2{float:none; width:100%}
.woocommerce .cart-collaterals .cross-sells,
.woocommerce .cart-collaterals .cart_totals{float:none; width:auto}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{float:none; width:auto; margin:0}
.woocommerce ul.products{display:grid; margin:0; padding:0; list-style:none}
.woocommerce .related ul.products,.woocommerce .up-sells ul.products{display:grid}
/* ── moje konto: przyciski i układ ─────────────────────────── */
.woocommerce form.login .button,.woocommerce form.register .button,
.woocommerce form.lost_reset_password .button,
.woocommerce-EditAccountForm .button,.woocommerce-address-fields .button{
min-height:48px; padding:0 24px; border:0; border-radius:999px; cursor:pointer;
background:var(--pg-acc); color:#fff; font:inherit; font-size:14.5px; font-weight:600;
transition:background .18s}
.woocommerce form.login .button:hover,.woocommerce form.register .button:hover,
.woocommerce-EditAccountForm .button:hover,.woocommerce-address-fields .button:hover{
background:var(--pg-ink)}
.woocommerce-account .woocommerce{display:grid; gap:28px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; gap:8px}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:inline-flex; align-items:center;
min-height:40px; padding:0 16px; border:1.5px solid var(--pg-line); border-radius:999px;
font-size:13.5px; font-weight:600; color:var(--pg-ink2); background:var(--pg-card)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
background:var(--pg-ink); border-color:var(--pg-ink); color:var(--pg-bg)}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{border-color:var(--pg-acc); color:var(--pg-acc)}
@media (min-width:860px){
/* Wąska kolumna jest po to, żeby zmieścić menu konta. Gdy klient nie jest
zalogowany, menu nie ma, a w tej kolumnie lądował formularz logowania
ściśnięty do dwustu pikseli. Dwie kolumny tylko wtedy, gdy menu istnieje. */
.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr); gap:36px;
align-items:start}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
grid-template-columns:230px minmax(0,1fr)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{flex-direction:column; gap:4px}
.woocommerce-account .woocommerce-MyAccount-navigation a{width:100%; border:0; border-radius:var(--pg-rs);
background:none; justify-content:flex-start}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--pg-surf);
color:var(--pg-acc)}
}
.woocommerce-account form.login,.woocommerce-account form.register{max-width:460px}
.woocommerce .woocommerce-MyAccount-content table.shop_table{width:100%; border-collapse:collapse}
.woocommerce .woocommerce-MyAccount-content table.shop_table th,
.woocommerce .woocommerce-MyAccount-content table.shop_table td{padding:11px 10px; font-size:14px;
border-bottom:1px solid var(--pg-line2); text-align:left}
/* ── galeria produktu: zdjęcie zawsze mieści się w kadrze ─── */
.gmain{aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden}
.gmain img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.gthumbs button img{width:100%; height:100%; object-fit:contain}
@media (max-width:560px){
.gal{display:flex; flex-direction:column; gap:10px}
.gthumbs{order:2}
.gmain{order:1}
}
/* ── komunikaty Woo: przyciski i układ w jednej linii ─────── */
.woocommerce-message,.woocommerce-info,.woocommerce-error{display:flex; flex-wrap:wrap;
align-items:center; gap:4px 10px; background:var(--pg-card); border:var(--pg-bd);
border-left:3px solid var(--pg-acc); border-radius:var(--pg-rs); padding:14px 18px;
margin:0 0 16px; font-size:14.5px; list-style:none}
.woocommerce-error{border-left-color:var(--pg-sale, #C7262B)}
.woocommerce-message{border-left-color:var(--pg-mint, #0F7A5A)}
.woocommerce-message a,.woocommerce-info a{color:var(--pg-acc); font-weight:600}
.woocommerce-message .button,.woocommerce-info .button,
.woocommerce a.button.wc-forward,.woocommerce .return-to-shop .button{
margin-left:auto; min-height:42px; display:inline-flex; align-items:center;
padding:0 20px; border-radius:999px; background:var(--pg-ink); color:var(--pg-bg) !important;
font-size:13.5px; font-weight:600; text-decoration:none; border:0; cursor:pointer}
.woocommerce-message .button:hover,.woocommerce-info .button:hover,
.woocommerce a.button.wc-forward:hover{background:var(--pg-acc)}
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info{display:block}
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a{display:inline}
/* ── drzewo kategorii: głębsze poziomy ─────────────────────── */
.cats .csub ul{display:grid; gap:0; margin:0; padding:0; list-style:none}
.cats .csub li{list-style:none}
.cats li.lvl2 > .crow,.cats li.lvl3 > .crow{display:flex; align-items:center; gap:10px;
width:100%; padding:8px 18px 8px 30px; background:none; border:0; cursor:pointer;
font:inherit; font-size:13px; font-weight:500; color:var(--pg-ink2); text-align:left;
text-decoration:none}
.cats li.lvl3 > .crow{padding-left:44px; font-size:12.5px; opacity:.9}
.cats li.lvl2 > .crow:hover,.cats li.lvl3 > .crow:hover{color:var(--pg-acc); background:var(--pg-surf)}
.cats li.lvl2 > .crow .c,.cats li.lvl3 > .crow .c{margin-left:auto; font-size:11.5px;
color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.cats li.lvl2 > .crow .chev,.cats li.lvl3 > .crow .chev{flex:0 0 auto}
.cats li.wszystko a{font-weight:600; color:var(--pg-acc)}
/* ── hero: przyciski obok siebie ───────────────────────────── */
.bigp .cta{flex-wrap:wrap; gap:10px}
.bigp .cta .btn{flex:0 0 auto; white-space:nowrap}
@media (min-width:980px){
.bigp{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}
/* ── karta produktu: przycisk dopasowany do treści ──────────── */
.pinfo form.cart{display:flex; align-items:center; gap:11px; flex-wrap:wrap;
justify-content:flex-start}
.pinfo form.cart button[type=submit].single_add_to_cart_button{flex:0 0 auto; min-width:0;
width:auto; padding:0 34px; white-space:nowrap}
/* hero: na wąskich ekranach przyciski na pełną szerokość */
@media (max-width:560px){
.bigp .cta{display:grid; grid-template-columns:1fr; gap:9px}
.bigp .cta .btn{width:100%; justify-content:center}
}
/* ── „Podobne zapachy": cztery kafle w rzędzie, bez sieroty ── */
@media (min-width:1100px){
.also .pgrid2{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:1099px){
.also .pgrid2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── produkt z jednym zdjęciem: brak kolumny miniatur ─────── */
.gal.gal-solo{grid-template-columns:minmax(0,1fr)}
.gal:not(:has(.gthumbs)){grid-template-columns:minmax(0,1fr)}
/* ── kafelki produktów: proporcje zdjęć ────────────────────
WordPress wstawia do ![]()
atrybuty width/height (np. 400×400).
Reguła „max-height:100%; width:auto" z makiety nie neutralizowała
atrybutu height, więc max-width:100% ścinał samą szerokość
i butelki wychodziły spłaszczone. Poniżej jawnie zwalniamy obie osie. */
.p2 .im,.pc .im,.sitem .im{min-height:0; overflow:hidden}
.p2 .im img,.pc .im img,.sitem .im img{
width:auto; height:auto; max-width:100%; max-height:100%;
object-fit:contain; object-position:center}
/* ── systemowa poprawka proporcji obrazków ─────────────────
Makieta miała „img{max-width:100%}" bez „height:auto". Obrazki
WordPressa niosą atrybuty width/height, więc wysokość zostawała
sztywna, a max-width ścinał samą szerokość — zdjęcia wychodziły
zniekształcone. Globalne height:auto usuwa to u źródła. */
img{height:auto}
.bigp .shot img{width:auto; height:auto; max-width:100%; max-height:330px; object-fit:contain}
@media (max-width:860px){
.bigp .shot img{max-height:210px}
}
/* ── Opis produktu po rozbiorze ────────────────────────────── */
.pdesc{max-width:72ch; display:grid; gap:18px}
.pdesc p{margin:0; font-size:15.5px; line-height:1.72; color:var(--pg-ink2)}
.pdesc .lead{font-size:17.5px; line-height:1.6; color:var(--pg-ink)}
.piramida{margin-top:6px}
.piramida h3,.pstan h3{font-size:12px; letter-spacing:var(--pg-caps); text-transform:uppercase;
color:var(--pg-ink3); margin:0 0 14px; font-weight:600}
.pwarstwy{display:grid; gap:1px; background:var(--pg-line); border:1px solid var(--pg-line);
border-radius:var(--pg-r); overflow:hidden}
.pw{background:var(--pg-card); padding:16px 18px; display:grid; gap:5px}
.pw .pl{font-size:11.5px; letter-spacing:var(--pg-caps); text-transform:uppercase;
color:var(--pg-acc); font-weight:600}
.pw p{font-size:14.5px; line-height:1.55; color:var(--pg-ink)}
@media (min-width:720px){
.pwarstwy{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pstan ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.pstan li{position:relative; padding-left:20px; font-size:14.5px; color:var(--pg-ink2)}
.pstan li::before{content:""; position:absolute; left:3px; top:9px; width:6px; height:6px;
border-radius:50%; background:var(--pg-acc)}
.pnota{font-size:12.5px !important; line-height:1.6 !important; color:var(--pg-ink3) !important;
padding:14px 16px; background:var(--pg-surf); border-radius:var(--pg-rs)}
/* ── koszyk: przyciski kuponu i aktualizacji ───────────────── */
.woocommerce .coupon .button,
.kkupon .button,
.woocommerce button[name="update_cart"],
.woocommerce .actions .button{
min-height:46px; padding:0 20px; border:1.5px solid var(--pg-ink); border-radius:999px;
background:var(--pg-card); color:var(--pg-ink); font:inherit; font-size:13.5px;
font-weight:600; cursor:pointer; transition:background .18s, color .18s}
.woocommerce .coupon .button:hover,
.kkupon .button:hover,
.woocommerce button[name="update_cart"]:not([disabled]):hover{
background:var(--pg-ink); color:var(--pg-bg)}
.woocommerce button[name="update_cart"][disabled]{opacity:.45; cursor:default;
border-color:var(--pg-line); color:var(--pg-ink3)}
/* ── siatka produktów na stronie głównej ───────────────────── */
.pc .im{text-decoration:none}
.pc h4 a{color:inherit; text-decoration:none}
.pc h4 a:hover{color:var(--pg-acc)}
.pc .add{display:inline-flex; align-items:center; justify-content:center; width:100%;
min-height:40px; margin-top:10px; border:1.5px solid var(--pg-ink); border-radius:999px;
background:var(--pg-card); color:var(--pg-ink); font-size:13px; font-weight:600;
text-decoration:none; cursor:pointer; transition:background .18s, color .18s}
.pc .add:hover{background:var(--pg-ink); color:var(--pg-bg)}
.pc .add.loading{opacity:.6}
.pc .added_to_cart{display:none}
.nuza-panel[hidden]{display:none}
.pgrid.nuza-panel{margin-top:4px}
@media (max-width:1100px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }
/* ══ KOSZYK ═══════════════════════════════════════════════════ */
.koszyk{display:grid; gap:clamp(20px,2.6vw,34px); align-items:start; margin-bottom:60px}
@media (min-width:1140px){ .koszyk{grid-template-columns:minmax(0,1fr) 370px} }
.klista{list-style:none; margin:0; padding:0; background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); overflow:hidden}
.kpoz-item{display:grid; grid-template-columns:84px minmax(0,1fr) auto auto 32px;
gap:16px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--pg-line2)}
.kpoz-item:last-child{border-bottom:0}
.kim{width:84px; height:84px; background:var(--pg-bg); border:1px solid var(--pg-line);
border-radius:var(--pg-rs); display:grid; place-items:center; padding:7px; overflow:hidden}
.kim img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.ktx{min-width:0}
.ktx .br{margin:0; font-size:10.5px; font-weight:700; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3)}
.ktx h3{margin:3px 0 0; font-size:15px; font-weight:600; line-height:1.3}
.ktx h3 a{color:inherit; text-decoration:none}
.ktx h3 a:hover{color:var(--pg-acc)}
.ktx .cap{margin:3px 0 0; font-size:12.5px; color:var(--pg-ink3)}
.ktx .brak{margin:5px 0 0; font-size:12.5px; color:var(--pg-sale,#C7262B); font-weight:600}
.kqty .quantity{display:flex; align-items:center}
.kqty input.qty{width:62px; min-height:42px; text-align:center; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:14.5px; font-family:inherit}
.kqty .jeden{display:inline-grid; place-items:center; width:62px; height:42px;
border:1.5px solid var(--pg-line); border-radius:var(--pg-rs); font-size:14.5px}
.kcena{text-align:right; display:grid; gap:2px; min-width:96px}
.kcena .suma{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.kcena .szt{font-size:11.5px; color:var(--pg-ink3)}
.kusun .usun{display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
color:var(--pg-ink3); font-size:20px; line-height:1; text-decoration:none;
border:1px solid transparent; transition:color .16s, border-color .16s}
.kusun .usun:hover{color:var(--pg-sale,#C7262B); border-color:var(--pg-sale,#C7262B)}
.kakcje{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px}
.kkupon{display:flex; gap:8px; flex:1 1 280px}
.kkupon input{flex:1; min-height:46px; padding:0 14px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-card); font-size:14px; font-family:inherit; outline:0}
.kkupon input:focus{border-color:var(--pg-acc)}
.kwroc{font-size:13.5px; font-weight:600; color:var(--pg-ink2); text-decoration:none}
.kwroc:hover{color:var(--pg-acc)}
.kakcje .nuza-update{margin-left:auto}
/* podsumowanie */
.ksuma{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:24px; position:sticky; top:96px}
.ksuma h2{font-size:17px; margin:0 0 18px; letter-spacing:-.01em}
.kwiersz{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:9px 0; font-size:14px; color:var(--pg-ink2); border-bottom:1px solid var(--pg-line2)}
.kwiersz .w{font-variant-numeric:tabular-nums; color:var(--pg-ink); font-weight:600}
.kwiersz.kkod{color:var(--pg-mint,#0F7A5A)}
.kwiersz.krazem{border-bottom:0; border-top:1.5px solid var(--pg-ink); margin-top:8px;
padding-top:15px; font-size:16px; color:var(--pg-ink); font-weight:700}
.kwiersz.krazem .w{font-size:24px; color:var(--pg-acc); font-family:var(--pg-dsp)}
.kwysylka{padding:12px 0; border-bottom:1px solid var(--pg-line2)}
.kwysylka .et{display:block; font-size:12px; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3); margin-bottom:9px; font-weight:600}
.kwysylka ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.kwysylka li{display:flex; align-items:center; gap:9px; font-size:13.5px}
.kwysylka label{cursor:pointer}
.kwysylka .amount{font-weight:600}
.ksuma .checkout-button{display:flex; align-items:center; justify-content:center; width:100%;
min-height:54px; margin-top:18px; border:0; border-radius:999px; background:var(--pg-acc);
color:#fff !important; font-size:16px; font-weight:600; text-decoration:none;
transition:background .18s}
.ksuma .checkout-button:hover{background:var(--pg-ink)}
.kzaufanie{list-style:none; margin:18px 0 0; padding:20px 22px; display:grid; gap:11px;
background:var(--pg-surf); border-radius:var(--pg-r)}
.kzaufanie li{display:flex; gap:10px; align-items:flex-start; font-size:13px;
line-height:1.5; color:var(--pg-ink2)}
.kzaufanie svg{flex:0 0 auto; margin-top:2px; color:var(--pg-mint,#0F7A5A)}
/* pasek darmowej dostawy */
.kdost{background:var(--pg-surf); border-radius:var(--pg-r); padding:14px 18px; margin-bottom:16px}
.kdost p{margin:0 0 9px; font-size:13.5px; color:var(--pg-ink2); display:flex; align-items:center; gap:8px}
.kdost strong{color:var(--pg-ink)}
.kdost .ktor{display:block; height:6px; border-radius:999px; background:var(--pg-line); overflow:hidden}
.kdost .kwyp{display:block; height:100%; border-radius:999px; background:var(--pg-acc);
transition:width .4s ease}
.kdost.pelny .kwyp{background:var(--pg-mint,#0F7A5A)}
.kdost.pelny svg{color:var(--pg-mint,#0F7A5A)}
/* pusty koszyk */
.kpusty{text-align:center; padding:70px 20px 80px; max-width:520px; margin:0 auto}
.kpusty h2{font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; margin:0 0 12px}
.kpusty p{margin:0 0 26px; color:var(--pg-ink2); line-height:1.65}
.kpusty-akcje{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
@media (max-width:620px){
.kpoz-item{grid-template-columns:70px minmax(0,1fr) auto; column-gap:12px; row-gap:12px;
padding:16px; align-items:start}
.kim{width:70px; height:70px}
.ktx{grid-column:2; grid-row:1}
.kusun{grid-column:3; grid-row:1; justify-self:end}
.kqty{grid-column:2; grid-row:2; justify-self:start; align-self:center}
.kcena{grid-column:3; grid-row:2; align-self:center; text-align:right; min-width:0;
white-space:nowrap}
.kakcje{gap:10px}
.kakcje .nuza-update{margin-left:0; width:100%}
.kwroc{width:100%}
.ksuma{position:static}
}
/* ══ MINIKOSZYK ═══════════════════════════════════════════════ */
.mtlo{position:fixed; inset:0; z-index:140; background:rgba(22,18,28,.42);
opacity:0; transition:opacity .26s ease}
.mtlo.on{opacity:1}
.mini{position:fixed; top:0; right:0; bottom:0; z-index:150; width:min(400px,92vw);
background:var(--pg-bg); box-shadow:-18px 0 50px rgba(22,18,28,.18);
display:flex; flex-direction:column; transform:translateX(100%);
transition:transform .28s cubic-bezier(.4,0,.2,1)}
.mini.on{transform:none}
body.mini-otwarty{overflow:hidden}
.mhead{display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:20px 22px; border-bottom:1px solid var(--pg-line)}
.mhead strong{font-size:17px; letter-spacing:-.01em}
.mclose{background:none; border:0; font-size:30px; line-height:1; color:var(--pg-ink2);
cursor:pointer; padding:0 4px}
.mclose:hover{color:var(--pg-acc)}
.widget_shopping_cart_content{display:flex; flex-direction:column; min-height:0; flex:1}
.mini .kdost{margin:18px 22px 0}
.mlista{list-style:none; margin:0; padding:6px 22px 18px; overflow-y:auto; flex:1;
-webkit-overflow-scrolling:touch}
.mpoz{display:grid; grid-template-columns:62px minmax(0,1fr) 26px; gap:13px;
align-items:center; padding:14px 0; border-bottom:1px solid var(--pg-line2)}
.mpoz:last-child{border-bottom:0}
.mim{width:62px; height:62px; background:var(--pg-card); border:1px solid var(--pg-line);
border-radius:var(--pg-rs); display:grid; place-items:center; padding:5px; overflow:hidden}
.mim img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.mtx{min-width:0}
.mtx .br{margin:0; font-size:10px; font-weight:700; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3)}
.mtx .nm{margin:2px 0 0; font-size:13.5px; font-weight:600; line-height:1.3}
.mtx .nm a{color:inherit; text-decoration:none}
.mtx .nm a:hover{color:var(--pg-acc)}
.mtx .il{margin:3px 0 0; font-size:12.5px; color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.musun{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
color:var(--pg-ink3); font-size:18px; line-height:1; text-decoration:none}
.musun:hover{color:var(--pg-sale,#C7262B)}
.mstopka{padding:18px 22px 22px; border-top:1px solid var(--pg-line); background:var(--pg-card)}
.msuma{display:flex; align-items:baseline; justify-content:space-between; font-size:15px;
font-weight:700}
.msuma .num{font-size:22px; font-family:var(--pg-dsp); color:var(--pg-acc)}
.mnota{margin:4px 0 14px; font-size:12px; color:var(--pg-ink3)}
.mprzyciski{display:grid; gap:9px}
.mprzyciski .btn,.mprzyciski .btn2{display:flex; align-items:center; justify-content:center;
min-height:48px; border-radius:999px; font-size:14.5px; font-weight:600; text-decoration:none}
.mprzyciski .btn{background:var(--pg-acc); color:#fff; border:0}
.mprzyciski .btn:hover{background:var(--pg-ink)}
.mprzyciski .btn2{background:var(--pg-card); color:var(--pg-ink); border:1.5px solid var(--pg-ink)}
.mprzyciski .btn2:hover{background:var(--pg-ink); color:var(--pg-bg)}
.mpusty{padding:50px 22px; text-align:center; display:grid; gap:18px; justify-items:center}
.mpusty p{margin:0; color:var(--pg-ink2)}
/* ── Ulubione ─────────────────────────────────────────────── */
.wish{position:absolute; top:8px; right:8px; z-index:3; width:34px; height:34px;
display:grid; place-items:center; padding:0; cursor:pointer;
color:var(--pg-ink3); background:var(--pg-card); border:1px solid var(--pg-line);
border-radius:50%; transition:color .16s, border-color .16s, transform .16s, background .16s}
.wish:hover{color:var(--pg-sale,#C7262B); border-color:var(--pg-sale,#C7262B)}
.wish.on{color:#fff; background:var(--pg-sale,#C7262B); border-color:var(--pg-sale,#C7262B)}
.wish.on svg{fill:currentColor}
.wish.puls{animation:nuza-puls .42s ease}
@keyframes nuza-puls{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.p2{position:relative}
.p2 .wish{top:12px; right:12px}
/* serce przy przycisku zakupu na karcie produktu */
.pakcje{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pakcje .wish{position:static; width:48px; height:48px; flex:0 0 auto}
.pakcje form.cart{flex:1 1 auto; margin:0}
/* strona z listą */
.ulubione-pusto{padding:60px 20px 70px}
#nuza-ulubione .pgrid{margin-bottom:60px}
/* ── plakietki ────────────────────────────────────────────── */
.pg-tag{display:inline-block; padding:4px 9px; border-radius:3px; font-size:10.5px;
font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.3}
.pg-tag.sale{background:var(--pg-sale,#C7262B); color:#fff}
.pg-tag.new{background:var(--pg-ink,#16121C); color:#fff}
.pg-tag.ok{background:var(--pg-mint,#0F7A5A); color:#fff}
.pg-tag.warn{background:#B8860B; color:#fff}
.p2 .fl,.pc .flags,.gmain .fl{position:absolute; top:10px; left:10px; z-index:2;
display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.pc .flags{top:8px; left:8px}
.gmain .fl{top:16px; left:16px}
/* ── kolekcje w drzewie kategorii ─────────────────────────── */
.cats .kolh{padding:14px 18px 7px; margin-top:4px; border-top:1px solid var(--pg-line);
font-size:10.5px; font-weight:700; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3)}
.cats .kolekcje{list-style:none; margin:0; padding:0 0 4px; display:grid}
.cats .kolekcje a{display:flex; align-items:center; gap:10px; padding:7px 18px;
font-size:13px; color:var(--pg-ink2); text-decoration:none}
.cats .kolekcje a:hover{color:var(--pg-acc); background:var(--pg-surf)}
.cats .kolekcje .c{margin-left:auto; font-size:11.5px; color:var(--pg-ink3);
font-variant-numeric:tabular-nums}
/* ══ ZAMÓWIENIE — jedna strona ════════════════════════════════ */
.woocommerce-checkout form.checkout.ck1{display:grid; gap:clamp(18px,2.4vw,30px);
align-items:start; grid-template-columns:minmax(0,1fr); margin-bottom:60px}
@media (min-width:1000px){
.woocommerce-checkout form.checkout.ck1{grid-template-columns:minmax(0,1fr) 390px}
}
.ckkol{display:grid; gap:16px; min-width:0}
.ckbox{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:clamp(18px,2.2vw,26px)}
.ckbox h2{display:flex; align-items:center; gap:11px; margin:0 0 18px;
font-size:17px; letter-spacing:-.01em}
.ckbox h2 i{display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto;
border-radius:50%; background:var(--pg-ink); color:var(--pg-bg);
font-size:12.5px; font-weight:700; font-style:normal}
.ckbox h2 small{margin-left:auto; font-size:11.5px; font-weight:500; color:var(--pg-ink3);
text-transform:uppercase; letter-spacing:var(--pg-caps)}
.ckinfo{margin:0 0 16px; padding:13px 16px; background:var(--pg-surf);
border-left:3px solid var(--pg-acc); border-radius:var(--pg-rs);
font-size:13.5px; color:var(--pg-ink2)}
.ckinfo a{color:var(--pg-acc); font-weight:600; margin-left:6px}
.ckprzel{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:18px;
border:1.5px solid var(--pg-line); border-radius:999px; overflow:hidden; background:var(--pg-bg)}
.ckprzel .ckp{padding:12px 14px; border:0; background:none; cursor:pointer;
font:inherit; font-size:13.5px; font-weight:600; color:var(--pg-ink2);
transition:background .18s, color .18s}
.ckprzel .ckp.on{background:var(--pg-ink); color:var(--pg-bg)}
.ckprzel .ckp:not(.on):hover{color:var(--pg-acc)}
.ckfirma[hidden]{display:none}
.ckfirma{padding:4px 0 2px; animation:nuza-zjazd .22s ease}
@keyframes nuza-zjazd{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.woocommerce-checkout .frow{display:grid; gap:0 14px; grid-template-columns:1fr}
@media (min-width:620px){
.woocommerce-checkout .frow{grid-template-columns:1fr 1fr}
.woocommerce-checkout .frow .form-row-wide,
.woocommerce-checkout .frow #billing_address_1_field,
.woocommerce-checkout .frow #billing_address_2_field,
.woocommerce-checkout .frow #billing_country_field{grid-column:1/-1}
}
.ckbox .chk{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer}
#ck-uwagi textarea{min-height:92px}
/* kolumna podsumowania */
.ckpods{min-width:0}
.cksticky{position:sticky; top:96px; background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); box-shadow:var(--pg-sh); padding:clamp(18px,2.2vw,24px)}
.ckpods-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
margin:0 0 16px; font-size:17px}
.ckpods-h a{font-size:12.5px; font-weight:600; color:var(--pg-acc); text-decoration:none}
.ckprod{border-bottom:1px solid var(--pg-line2)}
.ckprod > summary,.ckkupon > summary{list-style:none; cursor:pointer; display:flex;
align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0;
font-size:13.5px; font-weight:600; color:var(--pg-ink2)}
.ckprod > summary::-webkit-details-marker,.ckkupon > summary::-webkit-details-marker{display:none}
.ckprod > summary::after{content:"▾"; margin-left:4px; color:var(--pg-ink3); font-size:11px}
.ckprod[open] > summary::after{content:"▴"}
.ckpozycje{list-style:none; margin:0; padding:4px 0 12px; display:grid; gap:12px}
.ckpozycje li{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:11px; align-items:center}
.ckpozycje .im{width:48px; height:48px; background:var(--pg-bg); border:1px solid var(--pg-line);
border-radius:var(--pg-rs); display:grid; place-items:center; padding:4px; overflow:hidden}
.ckpozycje .im img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.ckpozycje .tx{min-width:0; display:grid; gap:1px}
.ckpozycje .br{font-size:9.5px; font-weight:700; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3)}
.ckpozycje .nm{font-size:13px; font-weight:600; line-height:1.25}
.ckpozycje .il{font-size:11.5px; color:var(--pg-ink3); font-variant-numeric:tabular-nums}
.ckpozycje .kw{font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ckkupon{border-bottom:1px solid var(--pg-line2)}
.ckkupon summary{color:var(--pg-acc)}
.ckkupon .kkupon{padding:4px 0 14px}
.ckwys{padding:14px 0; border-bottom:1px solid var(--pg-line2)}
.cksumy{padding-top:6px}
.woocommerce-checkout #payment{background:none; border-radius:0; margin-top:18px;
padding-top:18px; border-top:1px solid var(--pg-line)}
.woocommerce-checkout #payment .wc_payment_methods{border-top:0; padding-top:0; margin-top:0}
.woocommerce-checkout .cksticky .kzaufanie{margin-top:16px; padding:16px 18px}
@media (max-width:999px){ .cksticky{position:static} }
/* komunikaty walidacji w układzie dwukolumnowym */
.woocommerce-checkout form.checkout.ck1 > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout.ck1 > .woocommerce-error,
.woocommerce-checkout form.checkout.ck1 > .woocommerce-message{grid-column:1/-1}
.woocommerce-checkout form.checkout.ck1 > .woocommerce-error{display:block}
.woocommerce-checkout form.checkout.ck1 > .woocommerce-error li{margin:0 0 4px; font-size:14px}
.ckkonto{margin-top:16px; padding-top:16px; border-top:1px solid var(--pg-line2)}
.ckkonto .create-account{margin-top:12px}
/* ══ KONTO KLIENTA ════════════════════════════════════════════ */
.woocommerce-account .kontohead{display:flex; align-items:center; gap:12px; padding:16px 18px;
margin-bottom:14px; background:var(--pg-surf); border-radius:var(--pg-r)}
.woocommerce-account .kontohead .aw{display:grid; place-items:center; width:42px; height:42px;
flex:0 0 auto; border-radius:50%; background:var(--pg-acc); color:#fff;
font-size:17px; font-weight:700}
.woocommerce-account .kontohead .kt{display:grid; min-width:0}
.woocommerce-account .kontohead b{font-size:14.5px; line-height:1.25}
.woocommerce-account .kontohead small{font-size:12px; color:var(--pg-ink3);
overflow:hidden; text-overflow:ellipsis}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:flex; align-items:center; gap:10px}
.woocommerce-account .woocommerce-MyAccount-navigation svg{flex:0 0 auto; opacity:.7}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active svg{opacity:1}
.kontopulpit h2{font-size:clamp(22px,2.4vw,28px); letter-spacing:-.02em; margin:0 0 6px}
.kontopulpit .lead{margin:0 0 24px; color:var(--pg-ink2)}
.kontokafle{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
margin-bottom:34px}
.kkafel{display:grid; gap:4px; padding:18px 20px; background:var(--pg-card); border:var(--pg-bd);
border-radius:var(--pg-r); text-decoration:none; transition:border-color .16s, box-shadow .16s}
.kkafel:hover{border-color:var(--pg-acc); box-shadow:var(--pg-sh)}
.kkafel .n{font-size:26px; font-weight:700; font-family:var(--pg-dsp); color:var(--pg-acc);
line-height:1.1}
.kkafel .n svg{color:var(--pg-mint,#0F7A5A)}
.kkafel .e{font-size:12.5px; color:var(--pg-ink3)}
.kontoostatnie .sh{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
margin-bottom:14px}
.kontoostatnie h3{font-size:16px; margin:0}
.kontoostatnie .sh a{font-size:12.5px; font-weight:600; color:var(--pg-acc); text-decoration:none}
.zamlista{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--pg-line);
border:1px solid var(--pg-line); border-radius:var(--pg-r); overflow:hidden}
.zamlista li{display:grid; grid-template-columns:auto auto 1fr auto auto; gap:14px;
align-items:center; padding:14px 18px; background:var(--pg-card); font-size:13.5px}
.zamlista .nr{font-weight:700}
.zamlista .dt{color:var(--pg-ink3)}
.zamlista .st{justify-self:start; padding:3px 10px; border-radius:999px; font-size:11.5px;
font-weight:600; background:var(--pg-surf); color:var(--pg-ink2)}
.zamlista .st.s-processing{background:#E7F3EE; color:var(--pg-mint,#0F7A5A)}
.zamlista .st.s-completed{background:var(--pg-ink); color:var(--pg-bg)}
.zamlista .st.s-cancelled,.zamlista .st.s-failed{background:#FBE9EA; color:var(--pg-sale,#C7262B)}
.zamlista .kw{font-weight:700; font-variant-numeric:tabular-nums}
.zamlista .lk{font-size:12.5px; font-weight:600; color:var(--pg-acc); text-decoration:none}
@media (max-width:620px){
.zamlista li{grid-template-columns:auto 1fr; row-gap:6px}
.zamlista .st{grid-column:2; justify-self:end}
.zamlista .kw{grid-column:1}
.zamlista .lk{grid-column:2; justify-self:end}
}
/* logowanie i rejestracja */
.kontologowanie{display:grid; gap:18px; max-width:520px}
.kontologowanie.dwie{max-width:none; grid-template-columns:1fr}
@media (min-width:860px){ .kontologowanie.dwie{grid-template-columns:1fr 1fr; gap:24px} }
.klbox{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
box-shadow:var(--pg-sh); padding:clamp(20px,2.4vw,30px)}
.klbox h2{font-size:19px; margin:0 0 6px; letter-spacing:-.01em}
.klbox .lead{margin:0 0 20px; font-size:13.5px; color:var(--pg-ink2); line-height:1.6}
.klbox .form-row{display:grid; gap:6px; margin-bottom:14px}
.klbox label{font-size:12.5px; font-weight:600; color:var(--pg-ink2)}
.klbox .input-text{min-height:48px; padding:0 14px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:14.5px; font-family:inherit; outline:0}
.klbox .input-text:focus{border-color:var(--pg-acc)}
.klbox .klrow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.klbox .chk{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; cursor:pointer}
.klzapomn{font-size:12.5px; color:var(--pg-acc); text-decoration:none; font-weight:600}
.klbox .button{width:100%; min-height:50px}
.klinfo{font-size:12.5px; color:var(--pg-ink3); background:var(--pg-surf); padding:12px 14px;
border-radius:var(--pg-rs); margin:0 0 14px}
.klrej{background:var(--pg-surf); border-style:dashed}
/* konto: nagłówki, adresy, formularz danych */
.kontoh2{font-size:clamp(20px,2.2vw,25px); letter-spacing:-.02em; margin:0 0 6px}
.kontolead{margin:0 0 20px; font-size:13.5px; color:var(--pg-ink2); line-height:1.6}
.zamlista.zamduza li{grid-template-columns:auto auto auto 1fr auto auto}
.zamlista .il{color:var(--pg-ink3); font-size:12.5px}
@media (max-width:760px){
.zamlista.zamduza li{grid-template-columns:auto 1fr; row-gap:6px}
.zamlista.zamduza .il{grid-column:1}
}
.adresy{display:grid; gap:16px}
@media (min-width:720px){ .adresy.k2{grid-template-columns:1fr 1fr} }
.adrbox{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r); padding:20px 22px}
.adrbox header{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--pg-line2)}
.adrbox h3{margin:0; font-size:15px}
.adrbox header a{font-size:12.5px; font-weight:600; color:var(--pg-acc); text-decoration:none}
.adrbox address{font-style:normal; font-size:14px; line-height:1.65; color:var(--pg-ink2)}
.adrbox .brak{margin:0; font-size:13.5px; color:var(--pg-ink3)}
.kontoform{display:grid; gap:16px; max-width:720px}
.kfbox{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
padding:clamp(18px,2.2vw,24px)}
.kfbox h3{margin:0 0 14px; font-size:15px}
.kontoform .frow{display:grid; gap:0 14px; grid-template-columns:1fr}
@media (min-width:620px){
.kontoform .frow{grid-template-columns:1fr 1fr}
.kontoform .form-row-wide{grid-column:1/-1}
}
.kontoform .form-row{display:grid; gap:6px; margin-bottom:14px}
.kontoform label{font-size:12.5px; font-weight:600; color:var(--pg-ink2)}
.kontoform .input-text{min-height:48px; padding:0 14px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-size:14.5px; font-family:inherit; outline:0}
.kontoform .input-text:focus{border-color:var(--pg-acc)}
.kontoform .hint{font-size:12px; color:var(--pg-ink3)}
.kontozapisz{margin:0}
.kontozapisz .button{min-width:200px}
/* ── Baner w hero ─────────────────────────────────────────── */
.bigp:has(.hban){padding:0; display:block; position:relative; overflow:hidden}
.hban{position:absolute; inset:0; display:flex}
.hban-tlo{position:absolute; inset:0; display:block}
.hban-tlo picture,.hban-tlo img{display:block; width:100%; height:100%;
object-fit:cover; object-position:center}
.hban-tx{position:relative; z-index:2; display:flex; flex-direction:column;
align-items:flex-start; justify-content:center; gap:10px; max-width:min(520px,62%);
padding:clamp(24px,3.4vw,48px); pointer-events:none}
.hban.poz-srodek{justify-content:center; text-align:center}
.hban.poz-srodek .hban-tx{align-items:center; max-width:min(620px,80%)}
.hban.poz-prawo{justify-content:flex-end}
.hban.poz-prawo .hban-tx{align-items:flex-start}
.hban .eyebrow{margin:0; font-size:11.5px; font-weight:700; letter-spacing:var(--pg-caps);
text-transform:uppercase; opacity:.85}
.hban h1{margin:0; font-size:clamp(28px,3.6vw,46px); line-height:1.05; letter-spacing:-.03em}
.hban .op{margin:0; font-size:clamp(14px,1.2vw,16px); line-height:1.5; opacity:.92}
.hban .cta{margin-top:8px}
.hban .cta .btn{pointer-events:none}
.hban.kol-jasny{color:#fff}
.hban.kol-jasny .hban-tlo::after{content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(22,18,28,.68) 0%, rgba(22,18,28,.34) 48%, rgba(22,18,28,0) 78%)}
.hban.kol-jasny.poz-srodek .hban-tlo::after{background:rgba(22,18,28,.42)}
.hban.kol-jasny.poz-prawo .hban-tlo::after{
background:linear-gradient(270deg, rgba(22,18,28,.68) 0%, rgba(22,18,28,.34) 48%, rgba(22,18,28,0) 78%)}
.hban.kol-ciemny{color:var(--pg-ink)}
.hban.kol-ciemny .hban-tlo::after{content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 80%)}
.hban.kol-ciemny .cta .btn{background:var(--pg-ink); color:var(--pg-bg)}
@media (max-width:860px){
.hban{min-height:420px}
.hban-tx{max-width:none; padding:22px}
.hban.kol-jasny .hban-tlo::after{
background:linear-gradient(0deg, rgba(22,18,28,.72) 0%, rgba(22,18,28,.28) 55%, rgba(22,18,28,.1) 100%)}
.hban-tx{justify-content:flex-end}
}
/* ── metody płatności: jedna ramka, nie dwie ──────────────── */
/* arkusz z makiety ma własną regułę #payment ul.payment_methods li label,
dlatego poniżej nadpisujemy ją w całości */
#payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods{list-style:none; margin:0; padding:16px 0 0;
display:grid; gap:10px; border-top:1px solid var(--pg-line)}
#payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li{position:relative; display:block;
margin:0; padding:0; background:var(--pg-card);
border:1.5px solid var(--pg-line); border-radius:var(--pg-rs);
transition:border-color .16s, background .16s}
#payment ul.payment_methods li > input[type=radio]{position:absolute; left:16px; top:17px;
margin:0; accent-color:var(--pg-acc)}
#payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li label{display:block; width:auto;
margin:0; padding:14px 16px 14px 44px; border:0; border-radius:0; background:none;
font-size:14.5px; font-weight:600; color:var(--pg-ink); cursor:pointer}
#payment ul.payment_methods li label img{max-height:22px; width:auto; margin-left:8px;
vertical-align:middle}
#payment ul.payment_methods li .payment_box,
.woocommerce-checkout #payment ul.payment_methods li .payment_box{margin:0;
padding:0 16px 14px 44px; background:none; border:0; border-radius:0;
font-size:13px; line-height:1.55; color:var(--pg-ink2)}
#payment ul.payment_methods li .payment_box::before{display:none}
#payment ul.payment_methods li .payment_box p:last-child{margin-bottom:0}
#payment ul.payment_methods li:has(input:checked){border-color:var(--pg-acc); background:var(--pg-surf)}
/* ── podsumowanie: drobne porządki ────────────────────────── */
.ckprod > summary::after,.ckkupon > summary::after{content:""; width:8px; height:8px;
margin-left:6px; border-right:1.6px solid var(--pg-ink3); border-bottom:1.6px solid var(--pg-ink3);
transform:rotate(45deg) translateY(-2px); transition:transform .18s}
.ckprod[open] > summary::after,.ckkupon[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.ckwys .woocommerce-shipping-totals th,
.ckwys > table th{display:none}
.ckwys .et{display:block; font-size:12px; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3); margin-bottom:9px; font-weight:600}
.ckwys table,.ckwys tbody,.ckwys tr,.ckwys td{display:block; width:100%; padding:0; border:0}
.woocommerce-privacy-policy-text{margin-top:14px}
.woocommerce-privacy-policy-text p{font-size:12px; line-height:1.55; color:var(--pg-ink3); margin:0}
/* kraj bez ramki — mamy tylko Polskę */
#billing_country_field,#shipping_country_field{display:grid; gap:4px}
#billing_country_field strong,#shipping_country_field strong{font-size:14.5px; font-weight:600}
/* ── dostawa i płatność jako sekcje formularza ────────────── */
#ck-dostawa .kwysylka,#ck-dostawa .ckwys2{padding:0; border:0}
.ckwys2 ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ckwys2 li{position:relative; margin:0; padding:0; background:var(--pg-card);
border:1.5px solid var(--pg-line); border-radius:var(--pg-rs);
transition:border-color .16s, background .16s}
.ckwys2 li input[type=radio]{position:absolute; left:16px; top:50%; transform:translateY(-50%);
margin:0; accent-color:var(--pg-acc)}
.ckwys2 li label{display:flex; align-items:center; gap:10px; width:100%; margin:0;
padding:15px 16px 15px 44px; font-size:14.5px; font-weight:600; color:var(--pg-ink);
cursor:pointer; border:0; background:none}
.ckwys2 li label .amount{margin-left:auto; font-weight:700; white-space:nowrap}
.ckwys2 li:has(input:checked){border-color:var(--pg-acc); background:var(--pg-surf)}
.ckwys2 table,.ckwys2 tbody,.ckwys2 tr,.ckwys2 td{display:block; width:100%; padding:0; border:0}
.ckwys2 th{display:none}
.ckwys2 .woocommerce-shipping-destination{margin:12px 0 0; font-size:12.5px; color:var(--pg-ink3)}
.ckwys2 .shipping-calculator-button{font-size:12.5px; color:var(--pg-acc); font-weight:600}
#ck-platnosc #payment ul.payment_methods{border-top:0; padding-top:0}
/* zgody i przycisk pod podsumowaniem */
.ckfinal{margin-top:18px; padding-top:18px; border-top:1px solid var(--pg-line)}
.ckregulamin{margin:0 0 14px; font-size:12.5px; line-height:1.55; color:var(--pg-ink3)}
.ckregulamin a{color:var(--pg-acc); font-weight:600}
.ckzamow{width:100%; min-height:56px; border:0; border-radius:999px; cursor:pointer;
background:var(--pg-acc); color:#fff; font:inherit; font-size:16px; font-weight:600;
transition:background .18s}
.ckzamow:hover{background:var(--pg-ink)}
.woocommerce-checkout .cksticky .kzaufanie{margin-top:14px}
.ckinny{margin-top:16px; padding-top:16px; border-top:1px solid var(--pg-line2)}
.ckinny .shipping_address{margin-top:14px}
.ckwys2 .woocommerce-shipping-totals > th,
.ckwys2 tr > th,#ck-dostawa th{display:none !important}
.cksumy .kwiersz small{color:var(--pg-ink3); font-weight:400}
/* ── stepper ilości ───────────────────────────────────────── */
.qstep{display:inline-flex; align-items:center; border:1.5px solid var(--pg-line);
border-radius:999px; overflow:hidden; background:var(--pg-bg)}
.qstep .qbtn{width:40px; min-height:48px; border:0; background:none; cursor:pointer;
font:inherit; font-size:18px; line-height:1; color:var(--pg-ink2); transition:color .16s}
.qstep .qbtn:hover{color:var(--pg-acc)}
.qstep input.qty{width:46px; min-height:48px; border:0 !important; background:none;
text-align:center; font-size:15px; -moz-appearance:textfield}
.qstep input.qty::-webkit-outer-spin-button,.qstep input.qty::-webkit-inner-spin-button{
-webkit-appearance:none; margin:0}
.kqty .qstep .qbtn{min-height:42px; width:34px}
.kqty .qstep input.qty{min-height:42px; width:40px}
/* ── omnibus i tabela szczegółów ──────────────────────────── */
.omnibus{margin:-4px 0 14px; font-size:12px; color:var(--pg-ink3)}
.spec{width:100%; border-collapse:collapse; font-size:14px; max-width:620px}
.spec th,.spec td{padding:11px 0; text-align:left; border-bottom:1px solid var(--pg-line2);
vertical-align:top}
.spec th{width:40%; font-weight:600; color:var(--pg-ink3); font-size:12.5px;
letter-spacing:.02em; padding-right:16px}
.spec td{color:var(--pg-ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.pyr-nuty dt{color:var(--pg-acc)}
/* opinie w zakładce */
#t3 .comment-form{display:grid; gap:12px; max-width:620px; margin-top:18px}
#t3 .comment-form p{margin:0}
#t3 .comment-form label{display:block; font-size:12.5px; font-weight:600;
color:var(--pg-ink2); margin-bottom:5px}
#t3 .comment-form input[type=text],#t3 .comment-form input[type=email],#t3 .comment-form textarea{
width:100%; min-height:48px; padding:12px 14px; border:1.5px solid var(--pg-line);
border-radius:var(--pg-rs); background:var(--pg-bg); font-family:inherit; font-size:14.5px; outline:0}
#t3 .comment-form textarea{min-height:110px}
#t3 .comment-form .submit{min-height:48px; padding:0 26px; border:0; border-radius:999px;
background:var(--pg-acc); color:#fff; font:inherit; font-weight:600; cursor:pointer; justify-self:start}
#t3 .commentlist{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:16px}
#t3 .commentlist li{background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r); padding:18px 20px}
#t3 .star-rating{color:var(--pg-acc)}
#t3 .woocommerce-noreviews{margin:0; color:var(--pg-ink2)}
/* ══ STRONA PODZIĘKOWANIA ════════════════════════════════════ */
.thx{max-width:860px; margin:0 auto 70px}
.thx-glowa{text-align:center; padding:46px 20px 36px}
.thx-glowa .ptak{display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px;
border-radius:50%; background:#E7F3EE; color:var(--pg-mint,#0F7A5A)}
.thx-glowa h1{margin:0 0 10px; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.025em}
.thx-glowa p{margin:0 auto; max-width:46ch; color:var(--pg-ink2); line-height:1.65}
.thx-glowa.zle .ptak{background:#FBE9EA; color:var(--pg-sale,#C7262B)}
.thx-karty{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
background:var(--pg-line); border:1px solid var(--pg-line); border-radius:var(--pg-r);
overflow:hidden; margin-bottom:34px}
.thx-k{background:var(--pg-card); padding:18px 20px; display:grid; gap:5px}
.thx-k .e{font-size:11px; letter-spacing:var(--pg-caps); text-transform:uppercase; color:var(--pg-ink3)}
.thx-k .w{font-size:16px; font-weight:700}
.thx-info,.thx-kroki,.thx-szczegoly{margin-bottom:34px}
.thx h2{font-size:17px; margin:0 0 16px; letter-spacing:-.01em}
.thx-info{background:var(--pg-surf); border-radius:var(--pg-r); padding:22px 24px}
.thx-info p{margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--pg-ink2)}
.thx-kroki ol{list-style:none; margin:0; padding:0; counter-reset:krok;
display:grid; gap:12px}
.thx-kroki li{counter-increment:krok; display:grid; grid-template-columns:34px 1fr; gap:14px;
align-items:start; background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r);
padding:16px 18px}
.thx-kroki li::before{content:counter(krok); display:grid; place-items:center; width:30px; height:30px;
border-radius:50%; background:var(--pg-ink); color:var(--pg-bg); font-size:13px; font-weight:700}
.thx-kroki b{display:block; font-size:14.5px; margin-bottom:2px}
.thx-kroki span{font-size:13.5px; color:var(--pg-ink2); line-height:1.55}
.thx-szczegoly .woocommerce-table--order-details,
.thx-szczegoly table.shop_table{width:100%; border-collapse:collapse; font-size:14px;
background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r); overflow:hidden}
.thx-szczegoly th,.thx-szczegoly td{padding:13px 18px; text-align:left;
border-bottom:1px solid var(--pg-line2)}
.thx-szczegoly thead th{font-size:11.5px; letter-spacing:var(--pg-caps); text-transform:uppercase;
color:var(--pg-ink3)}
.thx-szczegoly tfoot th{font-weight:600}
.thx-szczegoly td:last-child,.thx-szczegoly th:last-child{text-align:right}
.thx-szczegoly tfoot tr:last-child th,.thx-szczegoly tfoot tr:last-child td{
border-bottom:0; font-size:16px; font-weight:700}
.thx-szczegoly .woocommerce-customer-details{margin-top:22px}
.thx-szczegoly address{font-style:normal; font-size:14px; line-height:1.6; color:var(--pg-ink2);
background:var(--pg-card); border:var(--pg-bd); border-radius:var(--pg-r); padding:18px 20px}
.thx-szczegoly .woocommerce-column__title{font-size:13px; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3); margin:0 0 10px}
.thx-szczegoly .woocommerce-columns{display:grid; gap:16px}
@media (min-width:720px){ .thx-szczegoly .woocommerce-columns{grid-template-columns:1fr 1fr} }
.thx-akcje{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px}
/* ── przycisk „Kupuję i płacę" ────────────────────────────── */
/* WooCommerce ustawia #place_order na float:right i własny padding —
przez to przycisk wypadał z karty podsumowania i nie trzymał szerokości */
.woocommerce-checkout .ckfinal{display:block; overflow:hidden}
.woocommerce-checkout .ckfinal button#place_order,
.woocommerce-checkout .ckfinal button#place_order.ckzamow,
.woocommerce #place_order,
.woocommerce-page #place_order{float:none !important; display:flex !important;
align-items:center; justify-content:center; width:100% !important; max-width:none;
min-height:56px; padding:0 22px !important; margin:0; border:0; border-radius:999px;
background:var(--pg-acc); color:#fff; font-family:inherit; font-size:16px; font-weight:600;
letter-spacing:0; line-height:1.2; text-transform:none; cursor:pointer;
transition:background .18s, transform .12s}
.woocommerce-checkout .ckfinal button#place_order:hover{background:var(--pg-ink)}
.woocommerce-checkout .ckfinal button#place_order:active{transform:translateY(1px)}
.woocommerce-checkout .ckfinal button#place_order::after{display:none !important}
/* kartą jest .cksticky — #order_review nie ma być drugą ramką w ramce */
.woocommerce-checkout .cksticky .woocommerce-checkout-review-order{background:none;
border:0; box-shadow:none; padding:0; position:static}
/* — cena jednostkowa (Omnibus + ustawa o informowaniu o cenach) — */
.nuza-cj{display:block;font-size:12px;color:#6b6b6b;font-weight:500;letter-spacing:.01em}
.nuza-cj-wrap{margin:-6px 0 14px}
.nuza-cj-karta{font-size:13px}
.nuza-cj-kafel{margin-top:2px}
.nuza-cj-koszyk{font-size:11px}
/* — kolekcje tematyczne — */
.nuza-kol-lead{max-width:70ch}
.nuza-kol-ile{margin:0 0 18px;font-size:13px;color:#6b6b6b}
.nuza-kol-tekst{margin:46px auto 0;max-width:74ch;font-size:15px;line-height:1.7;color:#333}
.nuza-kol-tekst h2,.nuza-kol-tekst h3{font-family:var(--font-naglowki,inherit);margin:28px 0 10px;font-size:19px}
.nuza-kol-tekst a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.nuza-kol-inne{margin:46px 0 0;padding:26px 0 0;border-top:1px solid #e8e5e0}
.nuza-kol-inne h2{margin:0 0 14px;font-size:18px}
.nuza-kol-linki{display:flex;flex-wrap:wrap;gap:8px}
.nuza-kol-linki a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #e3dfd8;border-radius:999px;background:#fff;font-size:13px;color:#1b1b1b;text-decoration:none;transition:border-color .15s,background .15s}
.nuza-kol-linki a:hover{border-color:#1b1b1b;background:#faf8f5}
.nuza-kol-linki a span{font-size:11px;color:#8a8a8a}
@media (max-width:640px){.nuza-kol-tekst{font-size:14px}}
/* — cechy zapachu na karcie produktu — */
.nuza-cechy{margin:18px 0 22px;display:grid;gap:10px}
.nuza-cecha{display:flex;gap:12px;align-items:baseline;font-size:13px}
.nuza-cecha .et{flex:0 0 92px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
.nuza-cecha .wa{display:flex;flex-wrap:wrap;gap:6px}
.nuza-cecha .wa i{font-style:normal;padding:4px 10px;border:1px solid #e3dfd8;border-radius:999px;background:#fff;color:#2a2a2a}
/* — FAQ na karcie produktu — */
.nuza-faq details{border-bottom:1px solid #ece9e3;padding:14px 0}
.nuza-faq details:last-child{border-bottom:0}
.nuza-faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nuza-faq summary::-webkit-details-marker{display:none}
.nuza-faq summary::after{content:"+";font-weight:400;font-size:19px;line-height:1;color:#8a8a8a}
.nuza-faq details[open] summary::after{content:"–"}
.nuza-faq p{margin:10px 0 0;font-size:14px;line-height:1.65;color:#444;max-width:70ch}
@media (max-width:640px){.nuza-cecha{flex-direction:column;gap:5px}.nuza-cecha .et{flex:none}}
/* ── Poprawka: klamry WooCommerce w siatce konta ────────────────
WooCommerce dokleja do .woocommerce pseudoelementy ::before i ::after
(stary clearfix dla układu na floatach). Gdy kontener jest siatką, każdy
z nich staje się pełnoprawnym elementem siatki i zajmuje pierwszą komórkę —
menu konta lądowało wtedy w kolumnie treści, a treść pod spodem w wąskiej
kolumnie menu. Siatce te klamry nie są do niczego potrzebne. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{content:none}
/* ── Poprawki po przeglądzie podstron (19.10) ──────────────────
1. Koszyk na telefonie wychodził 4 px poza ekran. Siatka .koszyk nie miała
zadeklarowanej kolumny, więc kolumna rozciągała się do szerokości
najszerszego wiersza pozycji, zamiast zmieścić się w kontenerze.
Poprawka była za szeroka: stała niżej niż reguła dwukolumnowa z linii 1290
i przy tej samej swoistości wygrywała także na dużych ekranach, przez co
podsumowanie spadało pod listę. Ograniczamy ją do wąskich ekranów. */
@media (max-width:1139px){ .koszyk{grid-template-columns:minmax(0,1fr)} }
/* 2. Regulamin: długie adresy stron urzędowych wklejone jako link nie mają
gdzie się złamać i rozpychały stronę o 9 px. Łamiemy je w dowolnym
miejscu — to dotyczy wyłącznie linków w treści, nie nawigacji. */
main p a,main li a,.pg-tresc a{overflow-wrap:anywhere}
/* 3. Lista metod płatności w zamówieniu to też siatka, a WooCommerce dokleja
do niej ten sam stary clearfix co do konta. Na razie jest jednokolumnowa,
więc nic nie psuje, ale przy drugiej kolumnie rozjechałaby się tak samo. */
.woocommerce-checkout #payment ul.payment_methods::before,
.woocommerce-checkout #payment ul.payment_methods::after,
.woocommerce #payment ul.payment_methods::before,
.woocommerce #payment ul.payment_methods::after{content:none}
/* 4. Przycisk „Kontynuuj zakupy" z paska darmowej wysyłki (Flexible Shipping)
brał domyślne tło WooCommerce — biały tekst na bardzo jasnym liliowym,
czyli wyglądał na wyłączony i był nieczytelny. Selektor WooCommerce ma
wyższą swoistość niż nasza reguła dla .woocommerce-info .button, więc
celujemy w ten przycisk wprost. */
.woocommerce .fs-free-shipping-notice-continue-shopping-button-wrapper a.button{
background:var(--pg-ink); color:var(--pg-bg)}
.woocommerce .fs-free-shipping-notice-continue-shopping-button-wrapper a.button:hover{
background:var(--pg-acc); color:var(--pg-bg)}
/* ── Poprawki po uwagach klienta (20.10) ───────────────────────
1. Liczba przy wartości filtra łamała się na dwie linie — przy „Woda
perfumowana (EDP)" widać było „37" i pod spodem „6". Nazwa ma się
zwijać, liczba nigdy. */
.filters .fg li .fcheck{display:flex; align-items:flex-start; gap:8px}
.filters .fg li .fcheck .n{flex:0 0 auto; margin-left:auto; white-space:nowrap;
padding-left:8px; font-variant-numeric:tabular-nums}
/* 2. Pola ceny: jednostka przy polu, żeby „od" i „do" nie zostawiały
wątpliwości, czy chodzi o złotówki, czy o mililitry. */
.filters .fprice .pin{position:relative; display:inline-flex; align-items:center; flex:1 1 0; min-width:0}
.filters .fprice .pin input{width:100%; padding-right:30px}
.filters .fprice .pin i{position:absolute; right:10px; font-style:normal; font-size:12.5px;
color:var(--pg-ink3); pointer-events:none}
.filters .fg-cena .fprice{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.filters .fg-cena .pmysl{flex:0 0 auto; color:var(--pg-ink3)}
/* 5. Logo było pokazywane na 56 px wysokości, przy czym plik źródłowy ma
434×201 px — czyli miejsca na szczegóły nie brakowało, brakowało
rozmiaru. Przy flakonie z nutami i pisanym logotypie 56 px to za mało,
żeby rozpoznać, co znak przedstawia (uwaga klienta z 19.10). Podnosimy
logo i nagłówek proporcjonalnie, bez ruszania reszty układu. */
.hdr .wrap{min-height:86px}
.hdr .logo img,.nuza-logo-img{height:66px; width:auto}
@media (max-width:860px){
.hdr .wrap{min-height:0}
.hdr .logo img,.nuza-logo-img{height:52px}
}
/* ── Logo: nowy plik od klienta ────────────────────────────────
Historia tej reguły w trzech krokach: 46 px → 56 px → 66 px → 84 px,
bo klient trzy razy pisał, że znak jest za mały. Przy ostatniej
poprawce doszło jeszcze podrasowanie kreski czterema cieniami,
bo stary plik (434×201 px) miał cienki, jasny rysunek i nie dało się
go inaczej pogrubić.
22.10 klient przysłał własny, poprawiony znak: 3168×1344 px, czysty
rysunek na przezroczystym tle, grubsze kontury i mocniejszy fiolet.
Przeskalowany do 849×360 px, czyli ponad czterokrotności wysokości
wyświetlania — ostry także na ekranach retina.
Dlatego ZDEJMUJEMY cienie i podbicie kontrastu. Na pliku, który jest
już wyraźny, te filtry nie poprawiają czytelności, tylko rozmazują
krawędzie i brudzą fiolet. Zostaje sam rozmiar.
Nowy znak jest szerszy od starego (2,36 zamiast 2,16), więc przy tej
samej wysokości zajmuje około 17 px więcej — nagłówek ma na to zapas. */
.hdr .logo img,.nuza-logo-img{height:84px; filter:none}
.hdr .wrap{min-height:104px}
@media (max-width:860px){
.hdr .wrap{min-height:0}
.hdr .logo img,.nuza-logo-img{height:64px}
}
/* 6. Marka bez wgranego logotypu pokazuje się jako nazwa w tej samej
ramce co pozostałe — żeby pasek nie miał dziur, a klient widział,
dla których marek brakuje jeszcze oficjalnego pliku. */
.brands .brand-napis span{font-family:var(--pg-dsp); font-size:16px; font-weight:600;
letter-spacing:.06em; text-transform:uppercase; color:#8a8a8a; text-align:center;
line-height:1.2; transition:color .18s}
.brands .brand-napis:hover span{color:var(--pg-ink)}
/* 7. Logotypy marek: część nadesłanych plików jest bardzo szeroka
(Hugo Boss 873×104, Giorgio Armani 952×104), a reguła ograniczała
tylko wysokość — takie logo wychodziło poza kafel. Ograniczamy oba
wymiary. Odcienie ujednolica filtr: nadesłane pliki bywają granatowe,
a sześć ze starego sklepu jest szarych. */
.brands img{max-width:86%; width:auto; height:auto; object-fit:contain; filter:grayscale(1)}
.brands img.logo-szeroki{max-height:40px}
.brands img.logo-sredni{max-height:52px}
.brands img.logo-kwadrat{max-height:64px; max-width:64px}
/* ── Ulica i numer domu w jednym wierszu ───────────────────────
Numer domu jest osobnym polem (prośba klienta), ale razem z ulicą
tworzy jeden adres, więc stoją obok siebie. Nazwa ulicy dostaje
więcej miejsca, bo bywa długa, numer krótki wystarczy. */
@media (min-width:861px){
/* Wcześniejsza reguła rozciąga pole ulicy na całą szerokość, i robi to
selektorem z identyfikatorem — tutaj musimy użyć tego samego kalibru,
żeby ulica i numer stanęły obok siebie. */
.woocommerce-checkout .frow #billing_address_1_field,
.woocommerce-checkout .frow #shipping_address_1_field,
.kontoform .frow #billing_address_1_field,
.kontoform .frow #shipping_address_1_field{grid-column:1 / span 1}
.woocommerce-checkout .frow #billing_house_number_field,
.woocommerce-checkout .frow #shipping_house_number_field,
.kontoform .frow #billing_house_number_field,
.kontoform .frow #shipping_house_number_field{grid-column:2 / span 1}
/* Nazwa ulicy bywa długa, numer krótki — stąd nierówny podział wiersza. */
.frow:has(#billing_house_number_field),
.frow:has(#shipping_house_number_field){grid-template-columns:1.9fr 1fr}
}
/* ── logotypy płatności i lista banków PayU ──────────────────
Wtyczka PayU wstrzykuje własne obrazki w etykiety i nieostylowaną
siatkę banków w payment_box. Bez tych reguł rozjeżdża się jedno i drugie. */
/* logo dostawcy po prawej stronie etykiety, nie doklejone do tekstu */
#payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li label{display:flex;
align-items:center; gap:10px}
#payment ul.payment_methods li label img,
.woocommerce-checkout #payment ul.payment_methods li label img{
height:20px; width:auto; max-width:76px; object-fit:contain;
object-position:right center; margin:0 0 0 auto; flex:0 0 auto;
vertical-align:middle}
/* Visa + Mastercard to jeden szeroki plik - obcinamy go mocniej,
zeby nie przytlaczal pozostalych wierszy. */
#payment ul.payment_methods li.payment_method_payucreditcard label img{max-width:62px}
/* siatka banków i portfeli */
#payment .payu-list-banks{list-style:none; margin:12px 0 0; padding:0;
display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px}
#payment .payu-list-banks li.payu-bank{margin:0; padding:0; background:none; border:0}
#payment .payu-list-banks li.payu-bank label{display:flex; align-items:center;
justify-content:center; width:100%; margin:0; padding:8px 6px;
background:var(--pg-card); border:1.5px solid var(--pg-line);
border-radius:calc(var(--pg-rs) * .7); cursor:pointer;
transition:border-color .16s, box-shadow .16s}
#payment .payu-list-banks li.payu-bank label:hover{border-color:var(--pg-acc)}
#payment .payu-list-banks li.payu-bank input[type=radio]{position:absolute;
opacity:0; width:0; height:0; margin:0}
#payment .payu-list-banks li.payu-bank div{display:flex; align-items:center;
justify-content:center; width:100%; height:28px}
#payment .payu-list-banks li.payu-bank img{max-height:24px; max-width:100%;
width:auto; margin:0; object-fit:contain}
#payment .payu-list-banks li.payu-bank:has(input:checked) label{border-color:var(--pg-acc);
box-shadow:0 0 0 2px color-mix(in srgb, var(--pg-acc) 22%, transparent)}
/* karta płatnicza: pola w jednej kolumnie, bez skoków */
#payment .payu-card-form{display:grid; gap:10px; margin-top:12px}
#payment .payu-card-form iframe{width:100%; border:0}
@media (max-width:480px){
#payment .payu-list-banks{grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px}
#payment .payu-list-banks li.payu-bank img{max-height:20px}
}
/* ── sekcja dostawy w zamówieniu ──────────────────────────────
Kontener ma własną klasę (nuza-dostawa-sekcja), bo .nuza-dostawa
to plakietka terminu wysyłki na karcie produktu i jej style
rozjeżdżały listę metod. Tu pilnujemy tylko szerokości: lista metod
i pola wyboru punktu mają sięgać krawędzi sekcji. */
.nuza-dostawa-sekcja{display:block; width:100%; margin:0; padding:0;
border:0; background:none; font-size:inherit; line-height:inherit}
.nuza-dostawa-sekcja .kwysylka{width:100%}
.nuza-dostawa-sekcja .form-row{width:100%; max-width:none; box-sizing:border-box;
padding:0; margin:2px 0 8px}
.nuza-dostawa-sekcja .form-row .woocommerce-input-wrapper{display:block; width:100%}
.nuza-dostawa-sekcja .form-row select,
.nuza-dostawa-sekcja .form-row input[type=text]{width:100%; box-sizing:border-box}
/* select2 dokleja szerokość inline przy inicjalizacji, stąd !important */
.nuza-dostawa-sekcja .select2-container{width:100% !important}
/* Przycisk mapy InPostu i odnośnik mapy Orlenu w jednej linii pod polem. */
.nuza-dostawa-sekcja #open-geowidget{display:inline-flex; align-items:center;
justify-content:center; line-height:1.2; margin-top:2px}
.nuza-dostawa-sekcja #select-from-map,
.nuza-dostawa-sekcja #op-select-from-map{cursor:pointer; text-decoration:underline}
/* ── przyciski: tekst na środku ────────────────────────────────
Część przycisków dostaje sztywną wysokość (46 px) z arkuszy
WooCommerce i wtyczek, przy line-height równym rozmiarowi pisma.
Przy display:inline-block zostaje wtedy kilkanaście pikseli pustego
miejsca pod napisem i tekst wygląda, jakby przykleił się do góry.
Zamieniamy takie przyciski na inline-flex i centrujemy w obu osiach.
Pola pomijamy, bo tam przeglądarka centruje tekst sama. */
a.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
a.wc-forward,
.button.alt,
#open-geowidget{
display:inline-flex; align-items:center; justify-content:center;
line-height:1.2; text-align:center}
/* Przyciski rozciągnięte na całą szerokość mają zostać rozciągnięte. */
.klbox .button,
.kontozapisz .button[style*="width"],
.button.szeroki{display:flex}
/* ── zdjęcia produktów: nic nie ucinamy ───────────────────────
Ramki zdjęć mają aspect-ratio 1/1 i overflow:hidden, a same obrazki
dostawały tylko max-height:100%. W siatce procentowa wysokość nie ma
się do czego odnieść, więc wysokie zdjęcia (hurtownia fotografuje
w pionie) wychodziły poza ramkę i dół flakonu był obcinany:
na kafelku 396 px obrazu w ramce 307 px, czyli 108 px w błoto.
Dajemy obrazkom konkretne 100% obu wymiarów i object-fit:contain,
wtedy mieszczą się w całości, a wolne miejsce zostaje po bokach. */
.pc .im img,
.p2 .im img,
.sitem .im img,
.product .im img,
.kim img,
.mim img,
.ckpozycje .im img,
.gmain img,
.gthumbs button img{
width:100%; height:100%; min-width:0; min-height:0;
max-width:100%; max-height:100%;
object-fit:contain; object-position:center}
/* Powiększenie przy najechaniu zostaje, ale już bez wyjeżdżania poza kadr. */
.pc:hover .im img,
.product:hover .im img{transform:scale(1.04)}
/* ── plakietka terminu wysyłki na kafelku ─────────────────────
Ma stać pod ceną, nie obok niej. Cena i cena jednostkowa idą
w osobne wiersze, plakietka ląduje między nimi. */
.pc .end .now,
.product .end .now,
.sitem .end .now{display:block}
.pc .end .nuza-dostawa-mini,
.product .end .nuza-dostawa-mini,
.sitem .end .nuza-dostawa-mini{display:inline-block; margin:5px 0 0}
.pc .end .nuza-cj,
.product .end .nuza-cj,
.sitem .end .nuza-cj{display:block; margin-top:3px}
/* ═══ PORADNIKI ═══════════════════════════════════════════════
Lista wpisów i pojedynczy artykuł. Siatka .posts jest już
zdefiniowana wyżej, tu tylko warianty i typografia tekstu.
═══════════════════════════════════════════════════════════ */
.posts.posts-3{grid-template-columns:repeat(3,1fr)}
.posts.posts-lista{row-gap:30px}
.posts .zajawka{margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2)}
.art{max-width:980px; padding-bottom:10px}
.art-okruchy{margin-top:18px; font-size:12.5px; color:var(--ink-3); display:flex; gap:8px}
.art-okruchy a:hover{color:var(--violet); text-decoration:underline}
.art-head{margin-top:16px}
.art-kat{margin:0; font-size:11px; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--violet)}
.art-head h1{margin:8px 0 0; font-size:clamp(26px,4vw,42px); max-width:22ch}
.art-meta{margin:12px 0 0; font-size:13px; color:var(--ink-3); display:flex; gap:8px}
.art-foto{margin-top:22px; border-radius:3px; overflow:hidden; background:var(--surf)}
.art-foto img{width:100%; height:clamp(220px,32vw,400px); object-fit:cover;
object-position:center}
.art-tresc{margin-top:26px; max-width:72ch; font-size:16px; line-height:1.72; color:var(--ink-2)}
.art-tresc p{margin:0 0 17px}
.art-tresc .lead{font-size:18.5px; line-height:1.6; color:var(--ink); font-weight:500}
.art-tresc h2{margin:34px 0 12px; font-size:clamp(20px,2.3vw,25px); color:var(--ink)}
.art-tresc h3{margin:26px 0 9px; font-size:17px; color:var(--ink);
font-family:"Instrument Sans",sans-serif; font-weight:700; letter-spacing:0}
.art-tresc ul{margin:0 0 18px; padding-left:20px}
.art-tresc li{margin-bottom:8px}
.art-tresc strong{color:var(--ink); font-weight:600}
.art-tresc a{color:var(--violet); text-decoration:underline; text-underline-offset:2px}
.art-stopka{margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
.art-inne{margin-top:clamp(36px,4.5vw,56px)}
/* paginacja listy */
.pg .page-numbers{list-style:none; display:flex; flex-wrap:wrap; gap:7px;
margin:30px 0 0; padding:0; justify-content:center}
.pg .page-numbers li a,
.pg .page-numbers li span{display:inline-flex; align-items:center; justify-content:center;
min-width:40px; min-height:40px; padding:0 12px; border:1px solid var(--line);
border-radius:2px; font-size:14px; font-weight:600}
.pg .page-numbers li a:hover{border-color:var(--violet); color:var(--violet)}
.pg .page-numbers li span.current{background:var(--violet); border-color:var(--violet); color:#fff}
@media (max-width:1100px){
.posts.posts-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.posts.posts-3{grid-template-columns:1fr}
.art-tresc{font-size:15.5px}
}
/* ── Podsumowanie koszyka: opis metody wysyłki ─────────────────
Plakietka z czasem dostawy stała w tym samym wierszu co nazwa metody
i w kolumnie szerokiej na 370 px spychała etykietę do 107 px, przez co
„InPost Kurier: 17,99 zł" łamało się na trzy linie. Plakietka schodzi
do własnego wiersza, z wcięciem równym szerokości pola wyboru. */
/* Wiersz metody wysylki jako siatka, nie flex.
We flexboksie o zlamaniu wiersza decyduje szerokosc bazowa, zanim zadziala
przyciecie do tresci. Plakietka z flex-basis 100% i max-content wracala
wiec obok etykiety i sciskala ja do 85 px, przez co nazwa metody lamala sie
na kilka linii. W siatce kolumna z trescia jest jedna: etykieta w pierwszym
wierszu, plakietka w drugim i obejmuje tylko swoj tekst. */
.kwysylka:not(.ckwys2) li{display:grid; grid-template-columns:auto minmax(0,1fr);
column-gap:9px; row-gap:5px; align-items:start}
.kwysylka:not(.ckwys2) li input[type="radio"]{grid-column:1; margin-top:3px}
.kwysylka:not(.ckwys2) li label{grid-column:2; line-height:1.35}
.kwysylka:not(.ckwys2) li .shipping-method-description{grid-column:2; width:max-content;
max-width:100%; margin:0 0 2px}
/* Rowna gorna krawedz kolumn koszyka: lista pozycji zaczynala sie 9 px od gory
(odstep formularza), a podsumowanie 26 px nizej, bo WooCommerce daje
.cart-collaterals wlasny margines. Obie kolumny startuja teraz z tej samej
linii. */
.koszyk .woocommerce-cart-form{padding-top:0}
.kpods .cart-collaterals{margin-top:0}
/* Kroki na stronie podziekowania: li jest siatka 34px + 1fr, a numer, naglowek
i opis to trzy osobne elementy. Numer zajmowal pierwsza komorke, naglowek
druga, a opis przechodzil do nowego wiersza i ladowal w kolumnie szerokiej
na 34 px, przez co kazde slowo szlo do osobnej linii. Tekst ma stac
w kolumnie drugiej, pod naglowkiem. */
.thx-kroki b,.thx-kroki span{grid-column:2}
.thx-kroki li::before{grid-row:1}
/* Pasek znakow operatorow w stopce. Zastapil dwa stare obrazki zbiorcze,
wiec kazdy znak ma teraz wlasny kafelek o stalej wysokosci. SVG bez
wymiarow wlasnych zapadloby sie do zera, stad height na obrazku. */
.fpay .znaki{display:flex; flex-wrap:wrap; gap:8px}
.fpay .znak{display:inline-flex; align-items:center; justify-content:center;
min-width:62px; height:40px; padding:6px 10px; background:#fff;
border:1px solid var(--line); border-radius:3px}
.fpay .znak img{height:22px; width:auto; max-width:92px; object-fit:contain;
display:block}
@media (max-width:560px){
.fpay .znak{min-width:54px; height:36px; padding:5px 8px}
.fpay .znak img{height:19px}
}
/* Dane sprzedawcy w stopce. Operatorzy platnosci sprawdzaja przy wlaczaniu
kart, czy firma, adres i NIP sa widoczne na stronie. Dotad byly tylko
w regulaminie i na stronie kontaktu. */
.ft .fdane{display:block; margin-top:14px; font-size:12.5px; line-height:1.6;
color:var(--pg-ink3)}
/* Lista formularzy do pobrania na stronie Protokoly. Kazda pozycja to kafelek
z nazwa, formatem i krotkim wyjasnieniem, komu sluzy. */
.seotext ul.wzory{list-style:none; margin:14px 0 24px; padding:0; display:grid; gap:10px}
.seotext ul.wzory li{padding:14px 16px; border:1px solid var(--pg-line);
border-radius:var(--pg-r); background:var(--pg-card); transition:border-color .16s}
.seotext ul.wzory li:hover{border-color:var(--pg-acc)}
.seotext ul.wzory a{font-weight:600; color:var(--pg-ink); text-decoration:none}
.seotext ul.wzory a::before{content:"\2193\00a0"; color:var(--pg-acc); font-weight:700}
.seotext ul.wzory a:hover{color:var(--pg-acc)}
.seotext ul.wzory .meta{margin-left:8px; font-size:12px; color:var(--pg-ink3);
white-space:nowrap}
.seotext ul.wzory .opis{display:block; margin-top:4px; font-size:13px; color:var(--pg-ink2)}
/* Miniatura w koszyku. Reguly ogolnej nie wystarczylo: przy zdjeciach wyzszych
niz kwadrat obrazek zachowywal wysokosc z proporcji (102 px w kadrze 84 px)
i wychodzil poza ramke, wiec gora i dol sie ucinaly. Celujemy w sam koszyk
i narzucamy oba wymiary. */
.kpoz-item .kim{overflow:hidden;
/* Siatka domyslnie rozciaga wiersz do wysokosci tresci, wiec przy zdjeciu
wyzszym niz kadr obszar miał 102 px zamiast 68 i procenty liczyly sie
od zlej wartosci. Wiersz i kolumna maja trzymac sie kadru. */
grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr)}
/* Miedzy kadrem a zdjeciem jest jeszcze odnosnik do produktu. Nie mial zadnych
wymiarow, wiec height:100% na obrazku nie mialo do czego sie odniesc
i obrazek wracal do wysokosci z proporcji. Odnosnik musi wypelnic kadr. */
.kpoz-item .kim > a{display:block; width:100%; height:100%}
.kpoz-item .kim img{width:100%; height:100%; max-width:100%; max-height:100%;
object-fit:contain; object-position:center}
/* Oddech wokol miniatury w koszyku.
Kadr ma 84 px i 7 px wyciecia, wiec na zdjecie zostaje 68 px. Flakony
w kadrze pionowym, jak Afnan 9 pm czy Kenzo Poppy Bouquet, maja w pliku
zrodlowym ledwie kilka pikseli marginesu u dolu. Po przeskalowaniu do
68 px ten margines znika i zdjecie dotyka ramki, co wyglada jak przyciecie,
choc obrazek jest caly. Zostawiamy wiecej miejsca po bokach i u gory. */
.kpoz-item .kim{padding:10px}
.kpoz-item .kim img{max-width:92%; max-height:92%}
/* Oznaczenie pozycji sprowadzanej od dostawcy w koszyku.
Pod podsumowaniem jest zdanie o wydluzonej wysylce calego zamowienia,
ale przy kilku pozycjach klient nie wiedzial, ktora z nich to powoduje. */
.kpoz-sprowadzany{display:inline-flex; align-items:center; gap:5px;
margin:6px 0 0; padding:3px 8px; border-radius:999px;
background:#FDF4E3; color:#8A5A00; font-size:11.5px; font-weight:600;
line-height:1.3}
.kpoz-sprowadzany::before{content:"\25CF"; font-size:8px; line-height:1}
/* ── Zapachy w zestawie ────────────────────────────────────── */
.pzest{margin-top:6px; display:grid; gap:14px}
.pzest h3{font-size:12px; letter-spacing:var(--pg-caps); text-transform:uppercase;
color:var(--pg-ink3); margin:0; font-weight:600}
.pzest-item{border:1px solid var(--pg-line); border-radius:var(--pg-r);
background:var(--pg-card); padding:16px 18px; display:grid; gap:12px}
.pzest-item h4{margin:0; font-size:15.5px; line-height:1.35; color:var(--pg-ink); font-weight:600}
.pzest-item dl{margin:0; display:grid; gap:8px}
.pzest-item dl>div{display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:baseline}
.pzest-item dt{margin:0; font-size:11.5px; letter-spacing:var(--pg-caps); text-transform:uppercase;
color:var(--pg-acc); font-weight:600}
.pzest-item dd{margin:0; font-size:14.5px; line-height:1.55; color:var(--pg-ink2)}
@media (max-width:519px){
.pzest-item dl>div{grid-template-columns:minmax(0,1fr); gap:3px}
}
/* Nazwy metod płatności i wysyłki pod logotypami w stopce. */
.znaki-opis{margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--pg-ink3)}
/* ── DPD Pickup: wybór punktu ──────────────────────────────── */
.dpdp{margin:12px 0 0}
.dpdp-wybor{margin:0; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
justify-content:space-between; padding:12px 14px; border:1px solid var(--pg-line);
border-radius:var(--pg-r); background:var(--pg-card)}
.dpdp-wybor.ma{border-color:var(--pg-acc)}
.dpdp-etykieta{font-size:14px; line-height:1.5; color:var(--pg-ink2); flex:1 1 220px; min-width:0}
.dpdp-nazwa{color:var(--pg-ink)}
.dpdp-btn{flex:0 0 auto; border:1px solid var(--pg-ink); background:transparent; color:var(--pg-ink);
border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer}
.dpdp-btn:hover{background:var(--pg-ink); color:#fff}
.dpdp-okno{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
padding:16px}
.dpdp-okno[hidden]{display:none}
.dpdp-tlo{position:absolute; inset:0; background:rgba(16,16,20,.55)}
.dpdp-panel{position:relative; width:min(900px,100%); max-height:92vh; display:flex; flex-direction:column;
background:var(--pg-card); border-radius:var(--pg-r); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.28)}
.dpdp-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 16px; border-bottom:1px solid var(--pg-line)}
.dpdp-x{border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:var(--pg-ink2)}
.dpdp-mapa{flex:1 1 auto; min-height:420px; overflow:auto}
.dpdp-mapa iframe{display:block; width:100%; min-height:420px; border:0}
body.dpdp-otwarte{overflow:hidden}
.dpdp-info{margin:12px 0 0; font-size:14.5px; line-height:1.55}
/* Na wąskim ekranie w pasku zostaje sama darmowa dostawa. */
@media (max-width:719px){
.rail .wrap>span:not(.rail-free):not(.r){display:none}
}
/* ── Podstrony informacyjne ───────────────────────────────── */
/* Cennik dostawy */
.seotext .cennik{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.seotext .cennik th,.seotext .cennik td{text-align:left; padding:11px 14px;
border-bottom:1px solid var(--pg-line)}
.seotext .cennik thead th{font-size:11.5px; letter-spacing:var(--pg-caps);
text-transform:uppercase; color:var(--pg-ink3); font-weight:600}
.seotext .cennik tbody tr:last-child td{border-bottom:0}
.seotext .cennik td:nth-child(2){white-space:nowrap; font-weight:600; color:var(--pg-ink)}
@media (max-width:519px){
.seotext .cennik th:nth-child(3),.seotext .cennik td:nth-child(3){display:none}
}
/* Rozwijane pytania */
.seotext details.faq{border:1px solid var(--pg-line); border-radius:var(--pg-r);
background:var(--pg-card); margin:8px 0; overflow:hidden}
.seotext details.faq>summary{list-style:none; cursor:pointer; padding:13px 44px 13px 16px;
position:relative; font-weight:600; font-size:15px; line-height:1.45; color:var(--pg-ink)}
.seotext details.faq>summary::-webkit-details-marker{display:none}
.seotext details.faq>summary::after{content:""; position:absolute; right:18px; top:19px;
width:8px; height:8px; border-right:2px solid var(--pg-acc); border-bottom:2px solid var(--pg-acc);
transform:rotate(45deg); transition:transform .15s}
.seotext details.faq[open]>summary::after{transform:rotate(-135deg); top:22px}
.seotext details.faq[open]>summary{border-bottom:1px solid var(--pg-line)}
.seotext details.faq>p{margin:0; padding:14px 16px; font-size:14.5px; line-height:1.65;
color:var(--pg-ink2)}
/* Kroki procesu */
.seotext ol.kroki{margin:18px 0; padding:0; list-style:none; counter-reset:krok; display:grid; gap:14px}
.seotext ol.kroki>li{counter-increment:krok; position:relative; padding-left:46px}
.seotext ol.kroki>li::before{content:counter(krok); position:absolute; left:0; top:0;
width:30px; height:30px; border-radius:50%; background:var(--pg-acc); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700}
.seotext ol.kroki>li>strong{display:block; margin-bottom:4px; font-size:15.5px; color:var(--pg-ink)}
.seotext ol.kroki>li>p{margin:0; font-size:14.5px; line-height:1.6; color:var(--pg-ink2)}
/* Przyciski akcji w treści */
.seotext p.przyciski{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.seotext p.przyciski .btn{display:inline-flex; align-items:center; justify-content:center;
padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600; text-decoration:none;
background:var(--pg-ink); color:#fff; border:1px solid var(--pg-ink)}
.seotext p.przyciski .btn:hover{opacity:.88}
.seotext p.przyciski .btn2{background:transparent; color:var(--pg-ink)}
.seotext p.przyciski .btn2:hover{background:var(--pg-ink); color:#fff; opacity:1}
/* Cena przy metodzie dostawy: zawsze widoczna, wyrównana do prawej. */
.kwysylka .nuza-dost-cena{margin-left:8px; font-weight:600; white-space:nowrap; color:var(--pg-ink)}
.kwysylka .nuza-dost-cena.nuza-dost-free{color:var(--pg-ok)}
/*
* Etykieta metody jest blokiem i zmiana tego rozbijała układ pozycji,
* więc kwotę odsuwamy do prawej opływaniem, a nie układem elastycznym.
*/
.kwysylka:not(.ckwys2) li>label .nuza-dost-cena{float:right; margin-left:12px}
/* W zamówieniu etykieta też jest blokiem, więc ta sama zasada co w koszyku. */
.kwysylka.ckwys2 li>label .nuza-dost-cena{float:right; margin-left:12px}
/* ── Pas doradcy na stronie głównej ─────────────────────────────────
Stoi zaraz pod hero, więc musi być czytelny, a nie krzykliwy: ciemne
tło, jeden przycisk, żadnych dwóch wezwań obok siebie. Na wąskim
ekranie kolumna, bo trzy elementy w rzędzie robią się nieczytelne
poniżej 760 px. */
.dorpas{margin:28px 0}
.dorpas-in{display:flex;align-items:center;gap:22px;padding:22px 26px;
border-radius:14px;background:#2d1b3d;color:#fff}
.dorpas-ikona{flex:0 0 auto;width:46px;height:46px;color:#c9a7e8}
.dorpas-ikona svg{width:100%;height:100%;display:block}
.dorpas-tx{flex:1 1 auto;min-width:0}
.dorpas-tx h2{margin:0 0 4px;font-size:21px;line-height:1.25;color:#fff}
.dorpas-tx p{margin:0;font-size:15px;line-height:1.45;color:#e2d4ef}
.dorpas .btn.dark{flex:0 0 auto;background:#fff;color:#2d1b3d;border-color:#fff;
font-weight:600;white-space:nowrap}
.dorpas .btn.dark:hover{background:#f0e6f8;color:#2d1b3d}
.dorpas .dorpas-ikona+.dorpas-tx{margin:0}
@media (max-width:760px){
.dorpas-in{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
.dorpas-tx h2{font-size:19px}
.dorpas .btn.dark{width:100%;text-align:center}
}
/* Doradca w pasku kategorii: wyróżniony, ale nie jak promocja. */
.mega .wrap a.dor{color:#6b3fa0;font-weight:600}
/* ══ POPRAWKI MOBILNE ══════════════════════════════════════════════
Ze zgłoszenia z testów na telefonie, 2.11.2026. Każda reguła
odpowiada jednemu zmierzonemu błędowi, nie jest to ogólne
„poprawienie responsywności". */
/* ── Poziome przewijanie całej kasy ────────────────────────────────
Opis metody dostawy miał zakaz zawijania. Najdłuższy z nich,
„Dostawa 1–2 dni robocze, odbiór w wybranym punkcie", wyznaczał
przez to najmniejszą możliwą szerokość swojego kafelka, a ta
rozpychała sekcję kasy do 392 px przy ekranie 375 px. Skutek: cała
strona dawała się przewijać w bok, a zielony pasek wychodził poza
obramowanie. To jedna przyczyna kilku zgłoszonych objawów. */
.shipping-method-description,
.woocommerce-shipping-methods .shipping-method-description{
white-space:normal; overflow-wrap:anywhere; min-width:0; max-width:100%;
}
/*
* Element siatki ma domyślnie min-width:auto, czyli nie da się go
* zwęzić poniżej szerokości treści. Rodzic miał już min-width:0,
* ale to dziecko rozpycha rodzica, nie odwrotnie.
*/
.ckkol > .ckbox,
.ckbox{min-width:0}
.ckbox .woocommerce-shipping-methods,
.ckbox .woocommerce-shipping-methods li{min-width:0; max-width:100%}
@media (max-width:620px){
/* ── Koszyk: cena nachodziła na pole z liczbą sztuk ─────────────
Kolumna ceny miała szerokość „auto" i jednocześnie zakaz
zawijania, więc kwota czterocyfrowa wychodziła poza swoją kolumnę
i kładła się na przyciskach plus i minus. Kolumna dostaje
szerokość wyliczoną z treści, a nazwa produktu cały pozostały
wiersz, dzięki czemu łamie się na słowach. */
.kpoz-item{grid-template-columns:70px minmax(0,1fr) auto}
/*
Nazwa zostaje w swojej kolumnie. Rozciagnieta na dwie kolumny
psula wyliczenie szerokosci kolumny z cena, bo element rozpiety
na kilka kolumn nie bierze udzialu w ich indywidualnym sizingu
i kolumna ceny wychodzila wezsza niz sama cena.
*/
.kpoz-item .ktx{grid-column:2; grid-row:1; min-width:0}
.kpoz-item .kusun{grid-column:3; grid-row:1; justify-self:end; align-self:start; z-index:1}
/*
Licznik sztuk i cena dzielą jedną komórkę siatki, rozpiętą na cały
wiersz pod nazwą. Dwa elementy w tej samej komórce rozchodzą się na
przeciwne krawędzie przez justify-self, dzięki czemu szerokość ceny
nie konkuruje z szerokością kolumny i nie da się jej nałożyć na
przyciski plus i minus, niezależnie od długości kwoty.
*/
.kpoz-item .kqty{grid-column:1 / -1; grid-row:2; justify-self:start; align-self:center}
.kpoz-item .kcena{grid-column:1 / -1; grid-row:2; justify-self:end; align-self:center;
text-align:right; min-width:0; white-space:nowrap}
.kpoz-item .ktx h3,
.kpoz-item .ktx a{overflow-wrap:break-word; word-break:normal; hyphens:none}
/* ── Koszyk: przycisk kuponu wychodził poza obszar ───────────────
Pole i przycisk nie mieszczą się obok siebie przy 375 px.
Na wąskim ekranie kupon zajmuje dwa pełne wiersze. */
.kkupon{flex-wrap:wrap; gap:10px}
.kkupon > input[type="text"]{flex:1 1 100%; min-width:0; width:100%}
.kkupon > button,
.kkupon > .btn{flex:1 1 100%; width:100%}
}
/* ── Filtry: przycisk „Pokaż wyniki" zasłaniał listę ───────────────
Przycisk jest przyklejony do dołu ekranu i przy przewijaniu kładł się
na pozycjach listy oraz na odnośniku „Pokaż więcej". Sam przycisk
zostaje tam, gdzie był, bo ma być zawsze pod ręką, ale dostaje pod
sobą nieprzezroczysty pas w kolorze tła. Dzięki temu treść chowa się
za nim w sposób czytelny, a nie przebija przez litery. Pas respektuje
dolny bezpieczny obszar telefonu, żeby na iPhonie nie wchodził pod
pasek gestów. */
@media (max-width:980px){
.filters{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.filters.open::after{content:""; position:fixed; left:0; right:0; bottom:0; z-index:2;
height:calc(86px + env(safe-area-inset-bottom,0px));
background:linear-gradient(to top, var(--pg-bg) 68%, transparent);
pointer-events:none}
.fdone{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
/* ── Najwęższe telefony, 320 px ────────────────────────────────────
Przycisk „Do koszyka" na kafelku miał stałe odstępy wewnętrzne
i przy 320 px wystawał poza kafelek. Przy tej szerokości odstępy
maleją, a napis dostaje zgodę na zawinięcie. */
@media (max-width:340px){
/*
Kafelek ma cene i okragly przycisk w jednym wierszu. Przy 320 px
przycisk o stalej szerokosci 44 px wystawal poza kafelek, bo cena
zabierala reszte miejsca. Wiersz dostaje zgode na zawijanie, a sam
przycisk zwezenie do 40 px: nadal wygodny do kliknie, a miesci sie.
*/
.p2 .p2-stopka,.p2 .p2-cena-row{flex-wrap:wrap; gap:8px}
.p2 .add2{min-width:40px; width:40px; min-height:40px; flex:0 0 auto}
.add2,.kafel .add_to_cart_button{padding-left:10px; padding-right:10px;
font-size:13px; white-space:normal; max-width:100%}
}
/* Napis w przycisku filtrów stał przy lewej krawędzi. Button dziedziczy
text-align z rodzica, a panel ma wyrównanie do lewej, więc domyślne
wyśrodkowanie przycisku nie działało. Ustawiamy je wprost. */
.fdone{display:grid; place-items:center; text-align:center}
/* ── Stopka na telefonie ───────────────────────────────────────────
Przy 375 px stopka była jedną kolumną: cztery listy jedna pod drugą,
każda pozycja w osobnym wierszu, przez co prawa połowa szerokości
stała pusta, a sama stopka ciągnęła się na kilka ekranów.
Listy odnośników łamiemy na dwie kolumny. Wykorzystują szerokość,
stopka skraca się mniej więcej o połowę, a pozycje nadal mają
dobre pole dotyku. Blok z danymi firmy zostaje na pełnej szerokości,
bo adres i NIP źle się czytają w wąskiej kolumnie. */
@media (max-width:620px){
.ft .cols{gap:26px}
/*
display:block jest tu konieczne. Lista w stopce jest kontenerem
flex, a uklad wielokolumnowy nie dziala na flexie ani na gridzie:
wlasciwosc columns zostaje policzona, ale nie ma zadnego efektu
i wszystkie pozycje nadal stoja jedna pod druga.
*/
.ft .cols > div > ul{display:block; columns:2; column-gap:18px}
.ft .cols > div > ul > li{break-inside:avoid; margin-bottom:10px}
.ft .cols > div:first-child > ul{columns:1}
.ft h5{margin-bottom:12px}
/* Znaki płatności i wysyłki: etykieta nad rzędem, nie obok niego. */
.fznak,.fpay,.fship{flex-wrap:wrap; gap:10px 12px}
.ft .znaki{flex-wrap:wrap}
.ft .znaki-opis{overflow-wrap:anywhere}
}
/* ── Górny pasek na telefonie ──────────────────────────────────────
Pasek jest kontenerem flex z zawijaniem, a trzy odnośniki po prawej
mają margin-left:auto. Przy 375 px komunikat o darmowej dostawie
zajmuje dwie linie, odnośniki przechodzą przez to do osobnego
wiersza i margines automatyczny dopycha je do prawej krawędzi,
zostawiając z lewej pustą połowę. Stąd wrażenie rozjechanego paska.
Na telefonie układamy pasek w kolumnę: komunikat na swojej linii,
odnośniki pod nim, rozłożone na pełną szerokość. Znika margines
automatyczny, bo w kolumnie nie ma czego dopychać. */
@media (max-width:620px){
.rail .wrap{flex-direction:column; align-items:stretch; gap:7px;
padding-block:9px; min-height:0}
.rail .rail-free{align-items:flex-start; line-height:1.4}
.rail .rail-free svg{margin-top:3px}
/*
Odnosniki byly rozpychane na pelna szerokosc przez space-between.
Przy trzech krotkich pozycjach dawalo to wielkie dziury miedzy nimi
i pasek wygladal na rozsypany. Grupujemy je przy lewej krawedzi,
tak jak komunikat nad nimi, ze zwyklym odstepem.
*/
.rail .r{margin-left:0; width:100%; justify-content:flex-start;
flex-wrap:wrap; gap:6px 18px}
.rail .r a{white-space:nowrap}
}
/* ── Pasek kategorii na telefonie ──────────────────────────────────
Sześć pozycji nie mieści się w 347 px dostępnej szerokości, więc
pasek musi się przewijać. Problem nigdy nie polegał na samym
przewijaniu, bo to standard na telefonie, tylko na tym, że ostatnia
widoczna pozycja urywała się w połowie wyrazu i wyglądało to na błąd
układu. Zawijanie do dwóch wierszy rozwiązywało to kosztem wyglądu
i zostało odrzucone.
Zostaje jedna linia i trzy rzeczy, które mówią „przewiń":
1. Wygaszenie przy prawej krawędzi, krótkie i wyraźne, nie subtelne.
Rysowane na pasku, nie na jego zawartości, więc nie jedzie razem
z odnośnikami. Pierwsza wersja miała gradient do 78% i była
praktycznie niewidoczna; ta sięga 55% i widać ją od razu.
2. Zatrzaski przewijania: pozycja zatrzymuje się na swojej krawędzi,
więc po puszczeniu palca nigdy nie widać połowy wyrazu.
3. Odstęp na końcu listy, żeby ostatnia pozycja dała się przewinąć
spod wygaszenia, a nie kończyła dokładnie pod nim.
Wygaszenie nie znika po dojechaniu do końca, bo to wymagałoby skryptu
nasłuchującego przewijanie. Zostaje wtedy delikatny cień przy
krawędzi i to jest świadoma cena tego rozwiązania. */
@media (max-width:860px){
.mega{position:relative}
.mega::after{content:""; position:absolute; top:0; bottom:1px; right:0;
width:40px; pointer-events:none; z-index:2;
background:linear-gradient(to right, rgba(255,255,255,0), var(--bg) 55%)}
.mega .wrap{scroll-snap-type:x mandatory;
scroll-padding-left:14px; padding-right:44px}
.mega .wrap a{scroll-snap-align:start}
}