@charset "UTF-8";
/* ==========================================================================
   UPTLAC.SK — components.css
   Komponenty: mega menu, hero hárok, produktové karty, filtre, konfigurátor,
   modaly, drawer, toasty, accordion, taby, upload zóna.
   ========================================================================== */

/* ================================================================ MEGA MENU */
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:var(--z-mega);
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 18px 40px rgba(11,27,38,.12);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:none}
.mega__inner{
  display:grid;grid-template-columns:1fr 1fr 1fr 320px;gap:var(--sp-6);
  padding-block:var(--sp-6);
}
.mega__col h5{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3);
  padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.mega__link{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .5rem .5rem 0;
  border-radius:var(--r);font-size:var(--t-base);color:var(--ink-2);
  transition:color .15s,padding-left .18s var(--ease);
}
.mega__link:hover{color:var(--brand-700);padding-left:.35rem}
.mega__link .thumb{
  width:34px;height:34px;border-radius:var(--r-sm);flex:none;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);
}
.mega__link .thumb img{width:100%;height:100%;object-fit:contain;padding:2px}
.mega__link .count{
  margin-left:auto;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);
}
.mega__promo{
  background:var(--ink);color:#D5E2EB;border-radius:var(--r-lg);padding:var(--sp-5);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4);
  position:relative;overflow:hidden;
}
.mega__promo h4{color:#fff;font-size:var(--t-lg);margin-bottom:.5rem}
.mega__promo p{font-size:var(--t-sm);color:#9FB6C6;margin-bottom:0}
.mega__promo .controlstrip{position:absolute;left:0;right:0;bottom:0}

/* ------------------------------------------------------ MOBILNÉ OFF-CANVAS */
.overlay{
  position:fixed;inset:0;background:rgba(11,27,38,.5);z-index:calc(var(--z-drawer) - 1);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
  backdrop-filter:blur(2px);
}
.overlay.is-open{opacity:1;visibility:visible}

.offcanvas{
  position:fixed;top:0;bottom:0;left:0;width:min(88vw,400px);z-index:var(--z-drawer);
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .32s var(--ease-out);
}
.offcanvas.is-open{transform:none}
.offcanvas--right{left:auto;right:0;width:min(94vw,460px);transform:translateX(100%)}
.offcanvas--right.is-open{transform:none}
.offcanvas__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);flex:none;
}
.offcanvas__head h3{font-size:var(--t-lg)}
.offcanvas__body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.offcanvas__foot{padding:var(--sp-5);border-top:1px solid var(--line);flex:none;background:var(--paper-2)}

/* Viacúrovňové mobilné menu */
.mnav{position:relative;overflow-x:hidden}
.mnav__panel{padding:var(--sp-3) 0}
.mnav__panel--sub{
  position:absolute;inset:0;background:#fff;transform:translateX(100%);
  transition:transform .3s var(--ease-out);overflow-y:auto;
}
.mnav__panel--sub.is-open{transform:none}
.mnav__item{
  display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.85rem var(--sp-5);font-size:var(--t-md);color:var(--ink);
  border-bottom:1px solid var(--paper-3);
}
.mnav__item:hover{background:var(--paper-2);color:var(--brand-700)}
.mnav__item svg{width:16px;height:16px;flex:none;color:var(--muted)}
.mnav__item .chev{margin-left:auto}
.mnav__back{
  display:flex;align-items:center;gap:.6rem;width:100%;padding:.85rem var(--sp-5);
  font-weight:600;color:var(--brand-700);border-bottom:1px solid var(--line);
  background:var(--paper-2);font-size:var(--t-base);
}
.mnav__back svg{width:16px;height:16px}
.mnav__item .count{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.mnav__item strong{font-weight:600}
.offcanvas__contact{margin:.75rem 0 0;font-size:var(--t-xs);color:var(--muted);text-align:center}
.offcanvas__contact a{color:inherit}
.offcanvas__contact a:hover{color:var(--brand-700)}

/* ============================================================ VYHĽADÁVANIE */
.search{position:relative;flex:1;max-width:600px}
.search__form{display:flex;align-items:center;position:relative}
.search__input{
  width:100%;height:46px;padding:0 3rem 0 2.75rem;
  border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--paper-2);
  font-size:var(--t-base);transition:all .18s var(--ease);
}
.search__input:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050)}
.search__icon{position:absolute;left:.9rem;width:18px;height:18px;color:var(--muted);pointer-events:none}
.search__submit{
  position:absolute;right:5px;width:38px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--brand);color:#fff;transition:background .15s;
}
.search__submit:hover{background:var(--brand-600)}
.search__submit svg{width:16px;height:16px}

.suggest{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:var(--z-mega);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);max-height:min(70vh,560px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.suggest.is-open{opacity:1;visibility:visible;transform:none}
.suggest__group{padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.suggest__group + .suggest__group{border-top:1px solid var(--paper-3)}
.suggest__group h5{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem;font-weight:500;
}
.suggest__terms{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:var(--sp-2)}
.suggest__terms button{
  padding:.35rem .7rem;border:1px solid var(--line);border-radius:var(--r-full);
  font-size:var(--t-sm);color:var(--ink-2);transition:all .15s;
}
.suggest__terms button:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-050)}
.suggest__row{
  display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:var(--r);
  transition:background .12s;
}
.suggest__row:hover{background:var(--paper-2)}
.suggest__row .thumb{
  width:42px;height:42px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);
}
.suggest__row .thumb img{width:100%;height:100%;object-fit:contain;padding:2px}
.suggest__row .name{font-size:var(--t-base);color:var(--ink);line-height:1.35}
.suggest__row .cat{font-size:var(--t-xs);color:var(--muted);font-family:var(--f-mono)}
.suggest__row .price{margin-left:auto;font-family:var(--f-display);font-weight:600;font-size:var(--t-base);white-space:nowrap}
.suggest__all{
  display:block;padding:.9rem var(--sp-4);border-top:1px solid var(--line);
  background:var(--paper-2);font-weight:600;font-size:var(--t-sm);text-align:center;
}
.suggest__empty{padding:var(--sp-4) 0;color:var(--muted);font-size:var(--t-sm)}

/* ================================================================== HERO */
/* Signature: archový hárok v sútlači. Produkty sú nasadené na hárku
   s orezovými značkami; pri načítaní sa farebné výťažky doregistrujú. */
.hero{
  position:relative;overflow:hidden;background:var(--paper);
  padding-block:clamp(2.5rem,2rem + 3vw,4.5rem) clamp(3rem,2rem + 4vw,5rem);
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 82% -8%,rgba(0,146,202,.10),transparent 62%),
    radial-gradient(760px 420px at 6% 104%,rgba(200,0,125,.05),transparent 60%);
}
.hero__inner{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
.hero__title{margin-bottom:var(--sp-4)}
.hero__title em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.hero__lead{max-width:52ch;margin-bottom:var(--sp-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:var(--sp-5)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.hero__meta li{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--ink-3)}
.hero__meta svg{width:16px;height:16px;color:var(--brand);flex:none}

/* Hárok */
.sheet{
  position:relative;aspect-ratio:1/.92;background:#fff;
  border:1px solid var(--line);border-radius:2px;box-shadow:var(--sh-3);
  padding:26px;
}
.sheet__bleed{
  position:absolute;inset:14px;border:1px dashed var(--line-2);opacity:.7;pointer-events:none;
}
.sheet__grid{
  position:relative;height:100%;display:grid;gap:10px;
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);
}
.sheet__cell{
  overflow:hidden;background:var(--paper-2);border:1px solid var(--line);
  border-radius:2px;position:relative;
}
.sheet__cell img{width:100%;height:100%;object-fit:cover}
.sheet__cell--label{
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:.6rem .7rem;background:var(--ink);border-color:var(--ink);
}
.sheet__cell--label b{color:#fff;font-family:var(--f-display);font-size:clamp(.85rem,1.4vw,1.15rem);line-height:1.15;letter-spacing:-.02em}
.sheet__cell--label span{color:#7FD8F7;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.sheet__cell--brand{background:var(--brand);border-color:var(--brand);display:grid;place-items:center;padding:.75rem}
.sheet__cell--brand svg{width:60%;height:auto;color:#fff;opacity:.95}

.sheet__strip{position:absolute;left:26px;right:26px;bottom:8px;height:6px;display:flex;gap:2px}
.sheet__strip span{flex:1;border-radius:1px}
.sheet__marks .crop{opacity:.65}
.sheet__marks .crop--tl{top:6px;left:6px}
.sheet__marks .crop--tr{top:6px;right:6px}
.sheet__marks .crop--bl{bottom:6px;left:6px}
.sheet__marks .crop--br{bottom:6px;right:6px}
.sheet__reg{position:absolute;top:6px;left:50%;transform:translateX(-50%);color:var(--ink-3)}

/* Sútlač: výťažky sa zbiehajú do registra */
@keyframes registerIn{
  0%{transform:translate(var(--dx),var(--dy));opacity:0}
  60%{opacity:1}
  100%{transform:none;opacity:1}
}
.sheet__cell{animation:registerIn .9s var(--ease-out) both}
.sheet__cell:nth-child(4n+1){--dx:-9px;--dy:-6px;animation-delay:.05s}
.sheet__cell:nth-child(4n+2){--dx:7px;--dy:-8px;animation-delay:.11s}
.sheet__cell:nth-child(4n+3){--dx:-6px;--dy:9px;animation-delay:.17s}
.sheet__cell:nth-child(4n+4){--dx:8px;--dy:7px;animation-delay:.23s}

.sheet__tag{
  position:absolute;right:-14px;top:38px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-2);padding:.6rem .8rem;
  display:flex;align-items:center;gap:.55rem;
}
.sheet__tag b{font-family:var(--f-display);font-size:var(--t-base);white-space:nowrap}
.sheet__tag span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.sheet__tag svg{width:20px;height:20px;color:var(--ok);flex:none}

/* ======================================================== ZÁMEROVÉ KARTY */
.intent{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);
}
.intent__card{
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
  overflow:hidden;color:var(--ink);
}
.intent__card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.intent__card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand-100);color:var(--ink)}
.intent__card:hover::after{transform:scaleX(1)}
.intent__ico{
  width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand-700);
}
.intent__ico svg{width:22px;height:22px}
.intent__card h3{font-size:var(--t-md);line-height:1.25}
.intent__card p{font-size:var(--t-sm);color:var(--muted);margin:0;line-height:1.5}

/* ======================================================== PRODUKTOVÁ KARTA */
.pcard{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.pcard__media{
  position:relative;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden;display:block;
  border-bottom:1px solid var(--line);
}
.pcard__media img{
  width:100%;height:100%;object-fit:contain;padding:10%;
  transition:transform .5s var(--ease-out),opacity .3s;
}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__media img.alt{position:absolute;inset:0;opacity:0}
.pcard:hover .pcard__media img.alt{opacity:1}
/* Hlavný obrázok sa stmieva len vtedy, keď ho má čo nahradiť. Bez druhého
   obrázka by karta pri prejdení myšou zostala prázdna — vtedy stačí
   priblíženie, ktoré rieši pravidlo vyššie. */
.pcard__media:has(img.alt):hover img.main{opacity:0}

/* Lokálny placeholder — bez externých závislostí */
.ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    linear-gradient(135deg,var(--paper-2) 0%,#fff 55%,var(--paper-3) 100%);
}
.ph::before{
  content:'';position:absolute;inset:14%;border:1px dashed var(--line-2);border-radius:2px;
}
.ph__mark{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:var(--line-2);
}
.ph__mark svg{width:36px;height:36px}
.ph__mark span{
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}

.pcard__badges{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;z-index:2}
.pcard__tools{
  position:absolute;top:.6rem;right:.6rem;display:flex;flex-direction:column;gap:.35rem;z-index:2;
  opacity:0;transform:translateX(6px);transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.pcard:hover .pcard__tools,.pcard:focus-within .pcard__tools{opacity:1;transform:none}
.pcard__tool{
  width:34px;height:34px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-3);box-shadow:var(--sh-1);
  transition:all .15s;
}
.pcard__tool:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.pcard__tool.is-active{background:var(--ma);border-color:var(--ma);color:#fff}
.pcard__tool svg{width:16px;height:16px}

.pcard__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard__cat{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em}
.pcard__title{font-family:var(--f-display);font-size:var(--t-base);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pcard__title a{color:var(--ink)}
.pcard__title a:hover{color:var(--brand-700)}
.pcard__spec{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:.3rem .7rem;
}
.pcard__foot{margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem}
.pcard__price{display:flex;flex-direction:column;gap:.1rem;line-height:1.1}
.pcard__price .from{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.pcard__price .val{font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.pcard__price .vat{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.pcard__price .ondemand{font-family:var(--f-display);font-size:var(--t-base);font-weight:600;color:var(--brand-700)}
.pcard__stock{font-size:var(--t-xs);display:flex;align-items:center;gap:.35rem;color:var(--ok)}
.pcard__stock::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pcard__stock--order{color:var(--warn)}
.pcard__cta{margin-top:var(--sp-3)}

/* Zoznamové zobrazenie */
.plist .pcard{flex-direction:row}
.plist .pcard__media{width:200px;flex:none;aspect-ratio:1/1;border-bottom:0;border-right:1px solid var(--line)}
.plist .pcard__body{padding:var(--sp-5)}
.plist .pcard__foot{align-items:center}

/* ========================================================== KATEGÓRIE */
.ccard{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:var(--ink)}
.ccard__media{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
.ccard__media img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .55s var(--ease-out)}
.ccard:hover .ccard__media img{transform:scale(1.06)}
.ccard__body{padding:var(--sp-4)}
.ccard__body h3{font-size:var(--t-md);margin-bottom:.35rem}
.ccard__body p{font-size:var(--t-sm);color:var(--muted);margin:0;line-height:1.5}
.ccard__count{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--brand-700);
}
/* Výzva na vstup do kategórie. Celá dlaždica je odkaz, preto je to span
   so vzhľadom tlačidla — vnorené tlačidlo v odkaze by nebolo platné HTML. */
.ccard__more{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  margin-top:var(--sp-4);padding:.55rem 1rem;
  border:1.5px solid var(--line-2,var(--line));border-radius:var(--r);
  font-size:var(--t-sm);font-weight:600;line-height:1;color:var(--brand-700);
  background:#fff;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.ccard__more svg{width:1.05em;height:1.05em;flex:none;display:block;transition:transform .18s var(--ease)}
.ccard:hover .ccard__more{background:var(--brand);border-color:var(--brand);color:#fff}
.ccard:hover .ccard__more svg{transform:translateX(2px)}

/* Veľká kategória (editorial) */
.ccard--wide{display:grid;grid-template-columns:1fr 1fr}
.ccard--wide .ccard__media{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--line)}
.ccard--wide .ccard__body{padding:var(--sp-6);display:flex;flex-direction:column;justify-content:center}

/* ============================================================== PROCES */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4);position:relative}
.steps::before{
  content:'';position:absolute;top:26px;left:6%;right:6%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);
}
.step{position:relative;text-align:center}
.step__n{
  counter-increment:step;width:52px;height:52px;margin:0 auto var(--sp-3);
  border-radius:50%;background:#fff;border:1.5px solid var(--line-2);
  display:grid;place-items:center;position:relative;z-index:1;
  font-family:var(--f-mono);font-size:var(--t-md);font-weight:500;color:var(--ink-3);
  transition:all .3s var(--ease);
}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step.is-in .step__n{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.step h4{font-size:var(--t-base);margin-bottom:.35rem}
.step p{font-size:var(--t-sm);color:var(--muted);margin:0;line-height:1.5}

/* ============================================================ BENEFITY */
.benefit{display:flex;gap:var(--sp-3);align-items:flex-start}
.benefit__ico{
  width:40px;height:40px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand-700);
}
.section--ink .benefit__ico{background:rgba(255,255,255,.08);color:#7FD8F7}
.benefit__ico svg{width:20px;height:20px}
.benefit h4{font-size:var(--t-base);margin-bottom:.25rem}
.benefit p{font-size:var(--t-sm);color:var(--muted);margin:0;line-height:1.5}
.section--ink .benefit p{color:#8FA6B6}

/* ========================================================== ACCORDION */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:1.15rem 0;text-align:left;font-family:var(--f-display);font-weight:600;
  font-size:var(--t-md);color:var(--ink);transition:color .15s;letter-spacing:-.01em;
}
.acc__btn:hover{color:var(--brand-700)}
.acc__btn .ico{
  width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;transition:all .25s var(--ease);color:var(--ink-3);
}
.acc__btn[aria-expanded=true] .ico{background:var(--brand);border-color:var(--brand);color:#fff;transform:rotate(180deg)}
.acc__btn .ico svg{width:13px;height:13px}
.acc__panel{overflow:hidden;height:0;transition:height .3s var(--ease)}
.acc__panel-in{padding:0 0 1.25rem;color:var(--ink-3);max-width:78ch;font-size:var(--t-base)}
.acc__panel-in p + p{margin-top:.75rem}

/* =============================================================== TABY */
.tabs__list{display:flex;gap:.25rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__btn{
  padding:.85rem 1.1rem;font-weight:600;font-size:var(--t-base);color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .18s;
}
.tabs__btn:hover{color:var(--ink)}
.tabs__btn[aria-selected=true]{color:var(--brand-700);border-color:var(--brand)}
.tabs__panel{padding-top:var(--sp-5)}
.tabs__panel[hidden]{display:none}

/* ============================================================== FILTRE */
.catlayout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:var(--sp-6);align-items:start}
.filters{position:sticky;top:calc(var(--header-h) + 16px)}
.filters__group{border-bottom:1px solid var(--line);padding-block:var(--sp-4)}
.filters__group:first-child{padding-top:0}
.filters__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);font-weight:500;padding-bottom:.5rem;
}
.filters__head svg{width:14px;height:14px;color:var(--muted);transition:transform .25s var(--ease)}
.filters__head[aria-expanded=false] svg{transform:rotate(-90deg)}
.filters__body{display:flex;flex-direction:column;gap:.55rem;padding-top:.4rem}
.filters__body[hidden]{display:none}
.filters__opt{display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm);cursor:pointer;color:var(--ink-2)}
.filters__opt:hover{color:var(--ink)}
.filters__opt .n{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .5rem .35rem .7rem;
  background:var(--brand-050);color:var(--brand-700);border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:500;
}
.chip button{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:currentColor;transition:background .15s}
.chip button:hover{background:rgba(0,146,202,.18)}
.chip button svg{width:9px;height:9px}
.chip--clear{background:transparent;color:var(--muted);text-decoration:underline;padding:.35rem .3rem}

.toolbar{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding-block:var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-5);
}
.toolbar__count{font-size:var(--t-sm);color:var(--muted)}
.toolbar__count b{color:var(--ink);font-family:var(--f-mono);font-weight:500}
.toolbar__right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.viewtoggle{display:flex;border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.viewtoggle button{width:38px;height:38px;display:grid;place-items:center;color:var(--muted);transition:all .15s}
.viewtoggle button:hover{background:var(--paper-2)}
.viewtoggle button[aria-pressed=true]{background:var(--brand);color:#fff}
.viewtoggle button svg{width:16px;height:16px}
.filter-open{display:none}

/* ========================================================= KONFIGURÁTOR */
.conf{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-6);align-items:start}
.conf__steps{display:flex;gap:.5rem;margin-bottom:var(--sp-5);flex-wrap:wrap}
.conf__stepbtn{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:var(--r-full);
  border:1.5px solid var(--line);font-size:var(--t-sm);font-weight:500;color:var(--muted);
  transition:all .18s;
}
.conf__stepbtn b{font-family:var(--f-mono);font-size:var(--t-xs)}
.conf__stepbtn.is-done{border-color:var(--ok);color:var(--ok)}
.conf__stepbtn[aria-current=true]{border-color:var(--brand);background:var(--brand-050);color:var(--brand-700)}

.confgroup{padding-block:var(--sp-5);border-bottom:1px solid var(--line)}
.confgroup:first-child{padding-top:0}
.confgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-3);flex-wrap:wrap}
.confgroup__head h3{font-size:var(--t-md)}
.confgroup__head .hint{font-size:var(--t-xs);color:var(--muted);font-family:var(--f-mono)}

.opts{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opts--wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.opt{
  position:relative;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;
  padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;text-align:left;transition:all .18s var(--ease);min-height:60px;justify-content:center;
}
.opt:hover{border-color:var(--line-2);background:var(--paper-2)}
.opt[aria-pressed=true]{border-color:var(--brand);background:var(--brand-050);box-shadow:0 0 0 1px var(--brand) inset}
.opt[aria-pressed=true]::after{
  content:'';position:absolute;top:.5rem;right:.5rem;width:14px;height:14px;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.opt b{font-size:var(--t-base);font-weight:600;line-height:1.2;padding-right:1.1rem}
.opt span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);line-height:1.3}
.opt .plus{color:var(--brand-700);font-weight:500}
.opt--sw{flex-direction:row;align-items:center;gap:.6rem;min-height:52px}
.opt__sw{width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--line-2);flex:none}

/* Cenový sticky panel */
.recap{
  position:sticky;top:calc(var(--header-h) + 16px);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
}
.recap__head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);background:var(--paper-2)}
.recap__head h3{font-size:var(--t-md);margin-bottom:.15rem}
.recap__head p{font-size:var(--t-xs);color:var(--muted);margin:0;font-family:var(--f-mono)}
.recap__body{padding:var(--sp-4) var(--sp-5);max-height:min(46vh,420px);overflow-y:auto}
.recap__row{display:flex;justify-content:space-between;gap:var(--sp-4);padding:.4rem 0;font-size:var(--t-sm);border-bottom:1px dashed var(--paper-3)}
.recap__row:last-child{border-bottom:0}
.recap__row dt{color:var(--muted);flex:none}
.recap__row dd{margin:0;text-align:right;font-weight:500;color:var(--ink)}
.recap__totals{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);background:var(--paper-2)}
.recap__line{display:flex;justify-content:space-between;font-size:var(--t-sm);padding:.25rem 0;color:var(--ink-3)}
.recap__line.total{
  font-family:var(--f-display);font-size:var(--t-xl);font-weight:600;color:var(--ink);
  padding-top:.6rem;margin-top:.4rem;border-top:1px solid var(--line-2);letter-spacing:-.02em;
}
.recap__unit{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);text-align:right;padding-top:.2rem}
.recap__foot{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.recap__note{
  display:flex;gap:.5rem;align-items:flex-start;margin-top:var(--sp-3);
  font-size:var(--t-xs);color:var(--muted);line-height:1.5;
}
.recap__note svg{width:14px;height:14px;flex:none;margin-top:.15rem;color:var(--warn)}

/* Demo cena — vždy viditeľne označená */
.demoprice{
  display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;border-radius:var(--r-sm);
  background:var(--warn-bg);color:var(--warn);font-family:var(--f-mono);font-size:.6875rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;
}

/* Upload zóna */
.drop{
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);
  text-align:center;background:var(--paper-2);transition:all .2s var(--ease);cursor:pointer;
}
.drop:hover,.drop.is-over{border-color:var(--brand);background:var(--brand-050)}
.drop__ico{width:44px;height:44px;margin:0 auto var(--sp-3);color:var(--brand);opacity:.75}
.drop h4{font-size:var(--t-base);margin-bottom:.3rem}
.drop p{font-size:var(--t-sm);color:var(--muted);margin:0}
.drop__formats{margin-top:.75rem;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.files{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:.5rem}
.file{
  display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
}
.file__ico{width:32px;height:32px;flex:none;border-radius:var(--r-sm);background:var(--brand-050);color:var(--brand-700);display:grid;place-items:center}
.file__ico svg{width:16px;height:16px}
.file__meta{flex:1;min-width:0}
.file__name{font-size:var(--t-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file__size{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.file__bar{height:3px;border-radius:2px;background:var(--paper-3);overflow:hidden;margin-top:.35rem}
.file__bar i{display:block;height:100%;background:var(--brand);width:0;transition:width .3s linear}
.file__del{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);flex:none}
.file__del:hover{background:var(--err-bg);color:var(--err)}
.file__del svg{width:13px;height:13px}
.file.is-done .file__bar{display:none}

/* ======================================================= GALÉRIA PRODUKTU */
.gallery{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--sp-3);align-items:start}
.gallery__thumbs{display:flex;flex-direction:column;gap:.5rem}
.gallery__thumb{
  aspect-ratio:1/1;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);transition:border-color .18s;
}
.gallery__thumb img{width:100%;height:100%;object-fit:contain;padding:6%}
.gallery__thumb[aria-current=true]{border-color:var(--brand)}
.gallery__main{
  position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper-2);cursor:zoom-in;
}
.gallery__main img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform .4s var(--ease-out)}
.gallery__main:hover img{transform:scale(1.08)}
.gallery__zoom{
  position:absolute;bottom:.75rem;right:.75rem;width:36px;height:36px;border-radius:var(--r);
  background:rgba(255,255,255,.94);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-3);box-shadow:var(--sh-1);
}
.gallery__zoom svg{width:16px;height:16px}
.gallery__badges{position:absolute;top:.75rem;left:.75rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;z-index:2}

/* ============================================================== MODALY */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;
  padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__bd{position:absolute;inset:0;background:rgba(11,27,38,.62);backdrop-filter:blur(3px)}
.modal__box{
  position:relative;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);
  width:min(100%,720px);max-height:calc(100vh - 2 * var(--gutter));overflow-y:auto;
  transform:translateY(14px) scale(.985);transition:transform .28s var(--ease-out);
}
.modal.is-open .modal__box{transform:none}
.modal__box--wide{width:min(100%,980px)}
.modal__close{
  position:absolute;top:.85rem;right:.85rem;width:36px;height:36px;border-radius:var(--r);
  display:grid;place-items:center;color:var(--ink-3);background:var(--paper-2);z-index:2;transition:all .15s;
}
.modal__close:hover{background:var(--paper-3);color:var(--ink)}
.modal__close svg{width:16px;height:16px}
.modal__head{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line)}
.modal__body{padding:var(--sp-6)}
.modal__foot{padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--line);background:var(--paper-2);display:flex;gap:.75rem;flex-wrap:wrap}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(11,27,38,.94);display:grid;place-items:center;padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .25s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:min(100%,1100px);max-height:88vh;object-fit:contain;border-radius:var(--r)}
.lightbox__close,.lightbox__nav{
  position:absolute;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;display:grid;place-items:center;transition:background .15s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.25)}
.lightbox__close{top:var(--gutter);right:var(--gutter)}
.lightbox__nav--prev{left:var(--gutter);top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:var(--gutter);top:50%;transform:translateY(-50%)}
.lightbox svg{width:18px;height:18px}
.lightbox__cap{position:absolute;bottom:var(--gutter);left:0;right:0;text-align:center;color:#B7C8D4;font-size:var(--t-sm)}

/* ============================================================== TOASTY */
.toasts{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:min(92vw,380px)}
.toast{
  display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:var(--r);box-shadow:var(--sh-3);pointer-events:auto;
  transform:translateX(16px);opacity:0;transition:transform .3s var(--ease-out),opacity .3s;
}
.toast.is-in{transform:none;opacity:1}
.toast--err{border-left-color:var(--err)}
.toast--info{border-left-color:var(--brand)}
.toast__ico{width:20px;height:20px;flex:none;color:var(--ok);margin-top:.1rem}
.toast--err .toast__ico{color:var(--err)}
.toast--info .toast__ico{color:var(--brand)}
.toast__body{flex:1;min-width:0}
.toast__body b{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:.1rem}
.toast__body span{font-size:var(--t-xs);color:var(--muted);line-height:1.45;display:block}
.toast__x{width:22px;height:22px;flex:none;display:grid;place-items:center;color:var(--muted);border-radius:var(--r-sm)}
.toast__x:hover{background:var(--paper-2)}
.toast__x svg{width:11px;height:11px}

/* ============================================================ MINI KOŠÍK */
.mini__list{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.mini__item{display:flex;gap:var(--sp-3);align-items:flex-start;padding-bottom:var(--sp-4);border-bottom:1px solid var(--paper-3)}
.mini__item:last-child{border-bottom:0;padding-bottom:0}
.mini__thumb{
  width:64px;height:64px;flex:none;border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);position:relative;
}
.mini__thumb img{width:100%;height:100%;object-fit:contain;padding:6%}
.mini__meta{flex:1;min-width:0}
.mini__name{font-family:var(--f-display);font-size:var(--t-base);font-weight:600;line-height:1.25;margin-bottom:.2rem}
.mini__cfg{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted);line-height:1.45}
.mini__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem}
.mini__qty{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}
.mini__price{font-family:var(--f-display);font-weight:600;font-size:var(--t-base)}
.mini__x{width:26px;height:26px;display:grid;place-items:center;color:var(--muted);border-radius:var(--r-sm);flex:none}
.mini__x:hover{background:var(--err-bg);color:var(--err)}
.mini__x svg{width:12px;height:12px}

/* Progress k doprave zdarma */
.shipbar{padding:var(--sp-4) var(--sp-5);background:var(--brand-050);border-bottom:1px solid var(--line)}
.shipbar p{font-size:var(--t-sm);margin:0 0 .5rem;color:var(--ink-2)}
.shipbar b{color:var(--brand-700)}
.shipbar__track{height:6px;border-radius:3px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--brand-100)}
.shipbar__fill{height:100%;background:linear-gradient(90deg,var(--brand),#4FC3E8);width:0;transition:width .5s var(--ease-out);border-radius:3px}
.shipbar.is-free{background:var(--ok-bg)}
.shipbar.is-free b{color:var(--ok)}
.shipbar.is-free .shipbar__fill{background:var(--ok)}

/* ========================================================== FLOATING CTA */
.fab{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:calc(var(--z-drawer) - 5);display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.fab__panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:var(--sp-4);width:min(84vw,290px);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:bottom right;
  transition:all .25s var(--ease-out);
}
.fab.is-open .fab__panel{opacity:1;visibility:visible;transform:none}
.fab__panel h4{font-size:var(--t-base);margin-bottom:.2rem}
.fab__panel > p{font-size:var(--t-xs);color:var(--muted);margin-bottom:var(--sp-3)}
.fab__link{
  display:flex;align-items:center;gap:.7rem;padding:.6rem;border-radius:var(--r);
  font-size:var(--t-sm);color:var(--ink-2);transition:background .15s;
}
.fab__link:hover{background:var(--paper-2);color:var(--brand-700)}
.fab__link svg{width:17px;height:17px;color:var(--brand);flex:none}
.fab__btn{
  width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;box-shadow:var(--sh-brand);
  transition:transform .22s var(--ease),background .2s;
}
.fab__btn:hover{transform:scale(1.06);background:var(--brand-600)}
.fab.is-open .fab__btn{background:var(--ink)}
.fab__btn svg{width:23px;height:23px;transition:transform .25s var(--ease)}
.fab.is-open .fab__btn svg{transform:rotate(90deg)}

/* ========================================================== REALIZÁCIE */
.masonry{columns:3;column-gap:var(--sp-4)}
.masonry > *{break-inside:avoid;margin-bottom:var(--sp-4)}
.work{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);
}
.work img{width:100%;height:auto;display:block;transition:transform .6s var(--ease-out)}
.work:hover img{transform:scale(1.05)}
.work__ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-4);background:linear-gradient(0deg,rgba(11,27,38,.86) 0%,rgba(11,27,38,.15) 55%,transparent 100%);
  opacity:0;transition:opacity .3s var(--ease);
}
.work:hover .work__ov,.work:focus-visible .work__ov{opacity:1}
.work__ov b{color:#fff;font-family:var(--f-display);font-size:var(--t-base);line-height:1.25}
.work__ov span{color:#7FD8F7;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase}

/* =========================================================== REFERENCIE */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);height:100%;
}
.quote__stars{display:flex;gap:.15rem;color:#F5A623}
.quote__stars svg{width:15px;height:15px}
.quote p{font-size:var(--t-base);line-height:1.6;color:var(--ink-2);margin:0}
.quote__by{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--paper-3);display:flex;align-items:center;gap:.75rem}
.quote__av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand-700);font-family:var(--f-display);font-weight:600;font-size:var(--t-sm);
}
.quote__by b{display:block;font-size:var(--t-sm)}
.quote__by span{font-size:var(--t-xs);color:var(--muted);font-family:var(--f-mono)}

/* ============================================================ BALÍČKY */
.pack{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.pack:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pack__head{padding:var(--sp-5);border-bottom:1px solid var(--line);background:var(--paper-2)}
.pack__head h3{font-size:var(--t-md);margin-bottom:.3rem}
.pack__head p{font-size:var(--t-sm);color:var(--muted);margin:0}
.pack__body{padding:var(--sp-5);flex:1}
.pack__body li{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--t-sm);padding:.3rem 0;color:var(--ink-2)}
.pack__body svg{width:15px;height:15px;flex:none;color:var(--ok);margin-top:.2rem}
.pack__foot{padding:0 var(--sp-5) var(--sp-5)}
.pack--hi{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.pack--hi .pack__head{background:var(--brand-050)}

/* ============================================== STICKY MOBILNÁ LIŠTA */
.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-drawer) - 6);
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:.75rem var(--gutter);
  display:none;align-items:center;gap:var(--sp-4);
  box-shadow:0 -6px 20px rgba(11,27,38,.08);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
}
.stickybuy__price{flex:1;min-width:0}
.stickybuy__price b{display:block;font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.stickybuy__price span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}

/* =============================================================== STAVY */
.empty{
  text-align:center;padding:var(--sp-8) var(--sp-5);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--paper-2);
}
.empty__ico{width:52px;height:52px;margin:0 auto var(--sp-4);color:var(--line-2)}
.empty h3{margin-bottom:.5rem}
.empty p{color:var(--muted);max-width:46ch;margin:0 auto var(--sp-5)}

.skeleton{background:linear-gradient(90deg,var(--paper-3) 25%,var(--paper-2) 50%,var(--paper-3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.note{
  display:flex;gap:.75rem;align-items:flex-start;padding:var(--sp-4);
  border-radius:var(--r);background:var(--brand-050);border:1px solid var(--brand-100);
  font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);
}
.note svg{width:18px;height:18px;flex:none;color:var(--brand);margin-top:.1rem}
.note--warn{background:var(--warn-bg);border-color:#F3DFC2}
.note--warn svg{color:var(--warn)}
.note--ok{background:var(--ok-bg);border-color:#C6E8D8}
.note--ok svg{color:var(--ok)}

/* ============================================================== TABUĽKY */
.table{width:100%;font-size:var(--t-sm)}
.table th,.table td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.table th{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:500;background:var(--paper-2);
}
.table td{color:var(--ink-2)}
.table tbody tr:hover{background:var(--paper-2)}
.table--specs th{background:transparent;text-transform:none;letter-spacing:0;font-family:var(--f-body);
  font-size:var(--t-sm);color:var(--muted);font-weight:500;width:40%}