/* style.css - sklep, responsywny */
:root{--acc:#2563eb;--bg:#f4f6f9;--card:#fff;--line:#e3e8ef;--txt:#1f2937}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--txt)}
a{color:var(--acc);text-decoration:none}
img{max-width:100%}

/* header */
.top{display:flex;gap:14px;align-items:center;padding:12px 20px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);position:sticky;top:0;z-index:9;flex-wrap:wrap}
.logo{font-size:22px;font-weight:700;color:var(--txt)}
.logo img{max-height:44px;display:block}
.search{flex:1;min-width:160px;padding:10px 14px;border:1px solid var(--line);border-radius:8px}
.cartbtn,.accbtn{padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--txt)}
.cartbtn b{background:var(--acc);color:#fff;border-radius:10px;padding:1px 7px;margin-left:4px}

/* menu kategorii */
.cats{background:#1f2937}
.cats>ul{margin:0;padding:0 20px;list-style:none;display:flex;flex-wrap:wrap}
.cats li{position:relative}
.cats a{color:#dbe3ee;display:block;padding:11px 14px}
.cats a:hover{color:#fff;background:#374151}
.cats ul ul{display:none;position:absolute;background:#1f2937;min-width:190px;z-index:10;list-style:none;padding:0}
.cats li:hover>ul{display:block}
.cats ul ul ul{left:100%;top:0}

.wrap{max-width:1200px;margin:22px auto;padding:0 16px}
.ttl{font-size:20px;margin:18px 0 12px}
.banner{display:block;margin-bottom:12px}.banner img{width:100%;border-radius:10px}

/* siatki */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:10px}
.catcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 14px;text-align:center;font-weight:600;color:var(--txt);transition:.15s}
.catcard:hover{box-shadow:0 4px 14px rgba(37,99,235,.15);border-color:var(--acc)}

/* karta produktu */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;position:relative;transition:.15s}
.card:hover{box-shadow:0 4px 14px rgba(0,0,0,.09)}
.card img{height:160px;width:100%;object-fit:contain}
.cname{font-weight:600;color:var(--txt);margin:8px 0 4px;min-height:38px}
.cprice{font-size:18px;font-weight:700;color:var(--acc)}
.cprice s{color:#94a3b8;font-weight:400;font-size:13px}
.badge{position:absolute;top:8px;left:8px;background:#dc2626;color:#fff;font-size:12px;padding:2px 8px;border-radius:10px}
.pid{position:absolute;top:8px;right:8px;background:#0f172a;color:#cbd5e1;font-size:11px;padding:2px 7px;border-radius:9px}
.buy{width:100%;margin-top:8px;padding:9px;background:var(--acc);border:0;color:#fff;border-radius:8px;cursor:pointer}
.buy:hover{filter:brightness(.9)}

/* toolbar / pager / widoki */
.toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:10px}
.toolbar select{padding:8px;border:1px solid var(--line);border-radius:8px}
.viewsw{display:flex;gap:4px;margin-right:auto}
.vbtn{padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:#64748b;font-size:15px}
.vbtn.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* sidebar filtrow - widoczny w obu widokach (kafelki i prostokaty) */
.shopwrap{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.side{display:block}
.fbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.fbox h3{margin:0 0 10px;font-size:14px;color:#334155}
.fbox input{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;margin-bottom:8px}
.fbox select{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;margin-bottom:8px}
.frow{display:flex;gap:6px}
.fflags{margin:2px 0 8px}
.fflags label{display:flex;align-items:center;gap:6px;font-size:13px;margin:4px 0;cursor:pointer}
.fflags input{width:auto;margin:0}
/* podkategorie - boxy pod nazwa kategorii, nad lista produktow */
.catchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.catchip{padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:24px;
         font-size:13px;color:var(--txt);text-decoration:none}
.catchip span{color:#94a3b8;font-size:11px}
.catchip:hover{border-color:var(--acc);color:var(--acc)}
.catchip:hover span{color:var(--acc)}
/* drzewo kategorii z licznikami */
.cattree{list-style:none;margin:0 0 8px;padding:0}
.cattree .cattree{border-left:1px dashed #cbd5e1;margin-left:10px}
.cattree a{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 8px;
          font-size:13px;color:var(--txt);text-decoration:none;border-radius:6px}
.cattree a:hover{background:#f1f5f9;color:var(--acc)}
.cattree a.on{background:#eff6ff;color:var(--acc);font-weight:700}
.ccount{color:#94a3b8;font-size:11px}
.cattree a.on .ccount{color:var(--acc)}
/* parametry - grupy w ramkach, wartosci jako chipsy */
.fparams{margin-bottom:8px}
.fpgroup{border:1px solid var(--line);border-radius:8px;padding:7px 8px;margin-bottom:7px;background:#fbfdff}
.fpgroup b{display:block;font-size:11px;color:var(--acc);margin:0 0 5px;text-transform:uppercase;letter-spacing:.3px}
.fpchips{display:flex;flex-wrap:wrap;gap:5px}
.fpchip{position:relative;cursor:pointer}
.fpchip input{position:absolute;opacity:0;width:0;height:0;margin:0}
.fpchip span{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:20px;
            font-size:12px;background:#fff;color:#334155}
.fpchip:hover span{border-color:var(--acc)}
.fpchip input:checked+span{background:var(--acc);color:#fff;border-color:var(--acc)}
/* poziomy suwak parametru liczbowego - jeden uchwyt, skoki po realnych wartosciach */
.fpslider{padding:2px 0}
.fpsrow.sl{display:flex;align-items:center;gap:8px;margin:6px 4px 2px}
.fpsrow.sl em{font-style:normal;font-size:11px;color:#64748b;font-weight:700;min-width:28px;flex:none}
.fpsrow.sl em.fprv-hi{text-align:right}
.fpsel{text-align:center;font-size:12px;color:#64748b;margin-top:2px}
.fpsel b{color:var(--acc)}
.fpslider input[type=range]{flex:1;min-width:0;display:block;height:4px;margin:8px 0;padding:0;
        border:none;border-radius:2px;background:#cbd5e1;
        -webkit-appearance:none;appearance:none;cursor:pointer}
.fpslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
        border-radius:50%;background:var(--acc);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.fpslider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);
        border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.fpslider input[type=range]::-moz-range-track{height:4px;background:#cbd5e1;border-radius:2px}
.fclear{background:#94a3b8;margin-top:4px}
.sideban{display:block;margin-top:12px}
.sideban img{width:100%;border-radius:10px;border:1px solid var(--line)}

/* prostokatny wiersz produktu */
.rows{display:flex;flex-direction:column;gap:10px}
.prow{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;align-items:center}
.primg{position:relative;flex:0 0 110px}
.primg img{width:110px;height:90px;object-fit:contain}
.primg .badge{top:2px;left:2px}
.prmid{flex:1;min-width:0}
.prname{font-weight:600;color:var(--txt);font-size:15px}
.prmeta{font-size:12px;color:#64748b;margin:3px 0}
.prdesc{font-size:13px;color:#64748b}
.prright{text-align:right;flex:0 0 150px}
.prright .pold{color:#94a3b8;font-size:13px}
.prprice{font-size:20px;font-weight:700;color:var(--acc);margin-bottom:6px}
.nego-tag{color:#b45309;background:#fef3c7;padding:1px 7px;border-radius:8px;font-size:11px}

/* licznik promocji */
.promo{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:8px;padding:9px 12px;margin:8px 0;font-size:14px}
.count{font-variant-numeric:tabular-nums}
.count.mini{font-size:11px;color:#dc2626;margin-top:4px}
.count.mini:before{content:'\23F1 '}

/* negocjacja */
.nego{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 14px;margin:10px 0;font-size:14px}
.negoin{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.negoin input{padding:9px;border:1px solid var(--line);border-radius:8px;flex:1;min-width:130px}
#pager{margin:18px 0;text-align:center}
.pg{padding:8px 13px;margin:0 3px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer}
.pg.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* produkt + podobne z boku */
.prodwrap{display:grid;grid-template-columns:1fr 250px;gap:18px;align-items:start}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:26px;background:#fff;padding:20px;border-radius:12px;border:1px solid var(--line)}
.sim{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.sim h3{margin:0 0 10px;font-size:15px;color:#334155}
.simitem{display:block;padding:8px 6px;border-bottom:1px solid var(--line);color:var(--txt)}
.simitem:last-child{border-bottom:0}
.simitem:hover{background:#f8fafc;border-radius:8px}
.simitem img{width:52px;height:52px;object-fit:contain;float:left;margin-right:8px}
.simitem .sn{display:block;font-size:13px;font-weight:600;min-height:32px}
.simitem .sp{font-size:13px;font-weight:700;color:var(--acc)}
.simitem .sp s{color:#94a3b8;font-weight:400;font-size:11px}
.simitem .disc{color:#dc2626;font-size:11px;font-weight:700}
.gallery #mainImg{width:100%;max-height:420px;object-fit:contain}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{width:64px;height:64px;object-fit:cover;border:2px solid var(--line);border-radius:8px;cursor:pointer}
.thumb:hover{border-color:var(--acc)}
.pinfo h1{margin:0 0 10px;font-size:24px}
.price{font-size:28px;font-weight:700;color:var(--acc);margin-bottom:10px}
.price s{color:#94a3b8;font-size:16px;font-weight:400}
.pricebox{margin-bottom:10px}
.poldrow{font-size:14px;color:#64748b;margin-bottom:2px}
.poldrow s{color:#94a3b8;font-size:16px}
.price .badge{position:static;display:inline-block;font-size:15px;padding:3px 10px;vertical-align:middle}
.meta{margin:6px 0;color:#475569}
.buyrow{display:flex;gap:10px;margin:16px 0}
.buyrow input{width:70px;padding:9px;border:1px solid var(--line);border-radius:8px}
.btn{padding:10px 22px;background:var(--acc);border:0;color:#fff;border-radius:8px;cursor:pointer;font-size:15px}
.btn:hover{filter:brightness(.9)}
.crumbs{font-size:13px;color:#64748b;margin-bottom:8px}
.desc{background:#fff;padding:18px;border-radius:12px;border:1px solid var(--line)}
.short{color:#475569}

/* tabela parametrow - paski i strzalki */
/* parametry w siatce poziomej - 2/3/4 w rzedzie, ile sie zmiesci */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.pitem{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.pitem b{display:block;font-size:13px;color:#334155;margin-bottom:2px}
.pitem b:before{content:'\25B8 ';color:var(--acc)}
.pitem span{color:#0f172a;font-weight:600}
.pitem .unit{color:#64748b;font-style:normal;font-weight:400}
/* warianty kolorystyczne - pionowo z lewej strony zdjecia */
.galwrap{display:flex;gap:14px;align-items:flex-start}
.varcol{display:flex;flex-direction:column;gap:6px;min-width:74px}
.vcolor{padding:7px 8px;border:1px solid var(--line);border-radius:8px;font-size:12px;
        background:#fff;color:var(--txt);text-align:center;text-decoration:none}
.vcolor:hover{border-color:var(--acc)}
.vcolor.on{border-color:var(--acc);background:#eff6ff;font-weight:700;color:var(--acc)}
/* lightbox - zdjecie na caly ekran */
.lightbox{position:fixed;inset:0;background:rgba(2,6,23,.93);display:none;align-items:center;
          justify-content:center;z-index:300;cursor:zoom-out;padding:20px}
.lightbox.show{display:flex}
.lightbox img{max-width:96%;max-height:96%;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* koszyk */
.crow{display:flex;align-items:center;gap:14px;background:#fff;padding:10px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.crow img{width:56px;height:56px;object-fit:contain}
.crow a{flex:1;color:var(--txt)}
.crow input{width:64px;padding:7px;border:1px solid var(--line);border-radius:6px}
.cdel{background:none;border:0;font-size:20px;color:#dc2626;cursor:pointer}
.cartsum{font-size:20px;text-align:right;margin:14px 0}

/* auth + formularze */
.authbox{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.auth,.orderform{background:#fff;padding:20px;border-radius:12px;border:1px solid var(--line)}
.auth input,.orderform input{display:block;width:100%;margin:0 0 10px;padding:10px;border:1px solid var(--line);border-radius:8px}
.orderform{max-width:460px;margin-top:16px}
.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{padding:8px 12px;border:1px solid var(--line);text-align:left}
.tbl th{background:#eef2f7}

/* panele (program-partnerski, widoki ogolne) */
.err{color:#dc2626;font-weight:600}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cl{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:14px}
.cl input,.cl select{width:100%;padding:9px;border:1px solid var(--line);border-radius:7px;margin:4px 0}
.admhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff7ed;border:1px solid #fdba74;border-radius:10px;padding:12px 16px;margin-bottom:14px}
.ams{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.amenu{padding:9px 16px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--txt)}
.amenu.act{background:var(--acc);color:#fff;border-color:var(--acc)}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:130px}
.stat .v{font-size:20px;font-weight:700;color:var(--acc)}
.stat .l{font-size:12px;color:#64748b;margin-top:3px}
.tab{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.tab th,.tab td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.tab th{background:#eef2f7}
.mlink{font-size:12px}

/* program partnerski - zolty box po prawej karty/wiersza */
.affbox{background:#fef08a;border:1px solid #eab308;color:#713f12;border-radius:8px;
  padding:8px 10px;margin-top:8px;font-size:12px;text-align:center}
.affbox b{display:block;font-size:13px;margin-bottom:5px}
.affbox .affadd{background:#b45309;color:#fff;border:0;border-radius:7px;padding:7px 10px;
  width:100%;cursor:pointer;font-weight:600;font-size:12px}
.affbox .affadd:hover{background:#92400e}
.affin{color:#166534;font-weight:700;font-size:12px}
.pinfo .affbox{max-width:280px;margin:0 0 12px}
.affterms{background:#f8fafc;border:1px solid var(--line);border-radius:10px;
  padding:14px;margin-bottom:14px;font-size:13px;color:#475569;max-height:220px;overflow:auto}

/* box opiekuna / przyszly czat */
.chatbox{position:fixed;right:18px;bottom:18px;width:280px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:14px;z-index:50;font-size:14px}
.chatx{position:absolute;top:6px;right:8px;background:none;border:0;font-size:18px;color:#94a3b8;cursor:pointer}
.chatmsg{min-height:60px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:8px}
.chatin{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;box-sizing:border-box}

.foot{background:#1f2937;color:#94a3b8;text-align:center;padding:22px;margin-top:30px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 22px;border-radius:24px;opacity:0;transition:.25s;pointer-events:none;z-index:99}
.toast.show{opacity:1}

/* mobilne */
@media(max-width:700px){
  .shopwrap{grid-template-columns:1fr}
  .prow{flex-wrap:wrap}
  .prright{flex:1;text-align:left}
  .prodwrap{grid-template-columns:1fr}
  .prod{grid-template-columns:1fr}
  .authbox{grid-template-columns:1fr}
  .galwrap{flex-direction:column}
  .varcol{flex-direction:row;flex-wrap:wrap}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cols{grid-template-columns:1fr}
}