/* =========================================================================
   SPOJAK.sk — b2b.css
   Iba sekcie špecifické pre stránku „B2B nástroje" (hero, info banner,
   taby, hromadná objednávka, porovnanie .bcmp, uložené zoznamy).
   Zdieľaný základ (tokeny, .btn/.btn-out/.btn.sm, header, nav, footer,
   toast, .site-shell) je v base.css. Porovnanie je `.bcmp` (NIE `.cmp`),
   aby nekolidovalo s o-nas.css.
   ========================================================================= */

/* hero */
.bhero{background:var(--ink);color:#fff;padding:34px 48px;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px}
.bhero::after{content:'';position:absolute;top:0;right:0;width:6px;height:100%;background:var(--red)}
.bhero .chip{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-size:11px;padding:5px 11px;border-radius:6px;font-weight:600;letter-spacing:.4px;margin-bottom:11px}.bhero .chip [data-ic]{font-size:13px}
.bhero h1{font-size:28px;font-weight:500;letter-spacing:-0.6px;margin-bottom:7px}
.bhero p{font-size:14px;color:rgba(255,255,255,.72);max-width:560px;line-height:1.5}
.bhero .gold{background:var(--d0);border:1px solid #2A2A2A;border-radius:10px;padding:16px 20px;text-align:center;flex-shrink:0}
.bhero .gold .gl{font-size:10px;letter-spacing:.6px;color:rgba(255,255,255,.5);text-transform:uppercase}
.bhero .gold .gv{font-size:24px;font-weight:600;color:var(--lgreen);margin-top:3px}
.bhero .gold .gs{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}

/* B2B transparentnosť — info banner */
.b2b-notice{background:#FFF6EA;border-bottom:1px solid #F1DCB8;padding:11px 48px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:#5c4a2e;line-height:1.45}
.b2b-notice [data-ic]{font-size:17px;color:var(--amber);flex-shrink:0}
.b2b-notice b{font-weight:600}

/* tool tabs */
.btabs{background:#fff;border-bottom:1px solid var(--line);display:flex;gap:4px;padding:0 48px}
.btab{padding:15px 18px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px}
.btab [data-ic]{font-size:18px}.btab.on{color:var(--ink);border-bottom-color:var(--red)}.btab.on [data-ic]{color:var(--red)}.btab:hover{color:var(--ink)}
.panel{display:none;padding:26px 48px}.panel.on{display:block}
.psub{font-size:13px;color:var(--muted);margin-bottom:18px;max-width:680px;line-height:1.5}
.psub code{font-family:var(--mono);font-size:12px}

/* bulk order */
.bulk{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;align-items:start}
.bulk h3{font-size:15px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:7px}.bulk h3 [data-ic]{font-size:18px;color:var(--red)}
.bulk .hint{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.bulk .hint code{font-family:var(--mono)}
.bulk textarea{width:100%;height:230px;border:1.5px solid var(--line);border-radius:6px;padding:13px 15px;font-family:var(--mono);font-size:12.5px;line-height:1.7;resize:vertical;outline:none;color:var(--ink)}
.bulk textarea:focus{border-color:var(--red)}
.bulk .brow{display:flex;gap:8px;margin-top:10px}
.parsed{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.parsed .ph{background:var(--bg);padding:11px 15px;font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;letter-spacing:.3px}
.prow{display:flex;align-items:center;gap:12px;padding:11px 15px;border-top:1px solid var(--line);font-size:13px}
.prow .pic{width:34px;height:34px;border-radius:6px;background:var(--ph);display:flex;align-items:center;justify-content:center;flex-shrink:0}.prow .pic [data-ic]{font-size:17px;color:var(--ink)}
.prow.bad .pic{background:#FBEAEB}.prow.bad .pic [data-ic]{color:var(--red)}
.prow .pn{flex:1;min-width:0}.prow .pn .nm{font-weight:500}.prow .pn .cd{font-size:11px;color:var(--muted);font-family:var(--mono)}
.prow.bad .pn .nm{color:var(--red)}
.prow .pq{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .pp{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:70px;text-align:right}
.parsed .pf{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;border-top:2px solid var(--ink);background:var(--bg)}
.parsed .pf .tot{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}.parsed .pf .tl{font-size:12px;color:var(--muted)}
.empty{padding:40px 15px;text-align:center;color:var(--muted);font-size:13px}.empty [data-ic]{font-size:34px;color:var(--line);display:block;margin:0 auto 10px}
/* výsledok riadku: odkaz na produkt, dostupnosť, nejednoznačný kód, výsledok pridania */
.prow .pn a.nm{color:var(--ink);text-decoration:none}.prow .pn a.nm:hover{color:var(--red)}
.prow .cd b.bad{color:var(--red);font-weight:600}.prow .cd b.warn{color:#B45309;font-weight:600}
.prow.na .pn a.nm{color:var(--muted)}
.prow.amb .pic{background:#FFF6EA}.prow.amb .pic [data-ic]{color:var(--amber)}
.prow.amb .pn .nm{color:#8a5a12}
.prow .opts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12px}
.prow .opts a{color:var(--ink);text-decoration:none}.prow .opts a:hover{color:var(--red)}
.prow .pick{border:1px solid var(--line);background:#fff;border-radius:5px;padding:1px 8px;font:inherit;font-size:11px;cursor:pointer;margin-left:4px}.prow .pick:hover{border-color:var(--red);color:var(--red)}
.parsed .pf{flex-wrap:wrap;gap:10px}.parsed .pf .tot{white-space:nowrap}
.bulk-res{padding:12px 15px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5}
.bulk-res.ok{background:#F2FBF3;color:#2C7A3F}.bulk-res.err{background:#FFF6EA;color:#5c4a2e}
.bulk-res ul,.lists-msg ul{margin:4px 0 0;padding-left:18px}

/* comparison (.bcmp — vlastný namespace, nekoliduje s o-nas .cmp) */
.bcmp-wrap{overflow-x:auto}
.bcmp{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.bcmp th,.bcmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.bcmp thead th{background:var(--bg);font-weight:600;font-size:12px;position:relative}
.bcmp thead th.col{width:200px}
.bcmp thead .ph2{display:flex;flex-direction:column;gap:8px}
.bcmp thead .pimg{height:64px;background:var(--ph);border-radius:6px;display:flex;align-items:center;justify-content:center}.bcmp thead .pimg [data-ic]{font-size:30px;color:var(--ink)}
.bcmp thead .pnm{font-weight:600;font-size:12.5px;line-height:1.3}
.bcmp thead .rmcol{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}.bcmp thead .rmcol:hover{border-color:var(--red);color:var(--red)}.bcmp thead .rmcol [data-ic]{font-size:13px}
.bcmp tbody td:first-child{color:var(--muted);font-weight:500;width:180px}
.bcmp .yes{color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:5px}.bcmp .yes [data-ic]{font-size:15px}
.bcmp .no{color:#B0B0B0}
.bcmp .price{font-size:16px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}
.bcmp .best{background:var(--greenbg)}
.bcmp tfoot td{padding:14px}

/* Pozn.: tu bol druhý, STARŠÍ blok štýlov uložených zoznamov z mock verzie stránky
   (.lcard-h/.lcard-ic/.lcard-tt/.lcard-chev/.lcard-body/.lcard-f/.li-n/.li-q/.newlist).
   Žiadnu z tých tried už negeneruje ani b2b.js, ani šablóna, a `.lists`, `.lcard` a `.litem`
   v ňom KOLIDOVALI s platnými definíciami nižšie (3-stĺpcový grid vs. zvislý zoznam,
   justify-content:space-between vs. flex riadok). Odstránené — platí blok „saved lists
   (reálne zoznamy)" nižšie. */

/* ===== MOBILE (b2b) ===== */
@media(max-width:768px){
  .bhero{flex-direction:column;align-items:flex-start;padding:24px 16px}
  .b2b-notice{padding:11px 16px}
  .btabs{overflow-x:auto;scrollbar-width:none;padding:0 16px}.btabs::-webkit-scrollbar{display:none}
  .panel{padding:22px 16px}
  /* min-width:0 — bez neho grid item nespadne pod svoju min-content šírku
     a textarea (mono font) roztiahne stránku nad 390 px. */
  .bulk{grid-template-columns:1fr}.bulk>*{min-width:0}
  .bulk .brow{flex-wrap:wrap}.bulk .brow .btn{flex:1 1 auto;justify-content:center}
  .lists{grid-template-columns:1fr}
}

/* ===== ULOŽENÉ ZOZNAMY =====
   Reálne zoznamy zákazníka (saved_lists). Predtým tu boli tri natvrdo napísané so sumami,
   ktoré si zákazník nikdy neuložil, a tlačidlá nič nepridávali. */
.lists-save{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.lists-save input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:var(--rad);padding:9px 13px;font:inherit;font-size:14px}
.lists-save input:focus{outline:none;border-color:var(--red)}
.lists-msg{font-size:13px;border-radius:var(--rad);padding:10px 13px;margin-bottom:14px;line-height:1.5}
.lists-msg.ok{background:#F2FBF3;color:#2C7A3F;border:1px solid #CDEBD4}
.lists-msg.err{background:var(--pink);color:var(--red);border:1px solid var(--pink)}
.lists-loading{font-size:13px;color:var(--muted);padding:18px 0}

.lists{display:flex;flex-direction:column;gap:14px}
.lcard{border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;background:#fff}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap}
.lhead b{display:block;font-size:14.5px}
.lhead .lmeta{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.lacts{display:flex;gap:6px;flex-wrap:wrap}
.litems{display:flex;flex-direction:column}
/* `display:flex` prebíja atribút hidden — položky sa načítajú až po rozbalení, takže
   skrytý stav musí naozaj skrývať. */
.litems[hidden]{display:none}
.litems .lists-loading{padding:14px 16px}
.litem{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.litem:last-child{border-bottom:none}
.litem>[data-ic]{font-size:16px;color:var(--muted);flex-shrink:0}
.litem .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.litem .lq{color:var(--muted);flex-shrink:0}
.litem .lp{font-weight:600;flex-shrink:0;min-width:74px;text-align:right}
.litem .lp.na{color:var(--muted);font-weight:400;font-size:12px}
.litem.na .ln{color:var(--muted)}
.litem .lav{display:block;font-size:11px;color:var(--muted)}
.litem.na .lav{color:var(--red)}

.lists-empty{border:1px dashed var(--line);border-radius:var(--rad-lg);padding:38px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.lists-empty [data-ic]{font-size:30px;color:var(--muted);margin-bottom:6px}
.lists-empty b{font-size:14.5px}
.lists-empty span{font-size:13px;color:var(--muted);max-width:420px}

.lists-guest{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--rad-lg);padding:18px;flex-wrap:wrap}
.lists-guest>[data-ic]{font-size:22px;color:var(--muted)}
.lists-guest>div{flex:1;min-width:200px}
.lists-guest b{display:block;font-size:14.5px}
.lists-guest span{font-size:13px;color:var(--muted)}

@media(max-width:560px){
  .lhead{flex-direction:column;align-items:stretch}
  .lacts .btn{flex:1;justify-content:center}
  .litem .lp{min-width:0}
}