/* =========================================================================
   SPOJAK.sk — homepage.css
   Iba homepage-špecifické sekcie. Zdieľaný základ (tokeny, .btn, header,
   nav, footer, toast) je v base.css — nikdy ho tu neduplikuj.
   ========================================================================= */

/* HERO SLIDER */
.hp-hero{position:relative;width:100%;height:474px;overflow:hidden;background:#000}
.hp-hero .slider{position:relative;width:100%;height:100%}
.hp-hero .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;display:grid;grid-template-columns:1fr 1fr}
.hp-hero .slide.active{opacity:1;visibility:visible}
/* z-index:2 + relative → obsah (vrátane .ctas buttonov) leží NAD dekoračným .grid-bg
   (absolute inset:0), inak by grid-bg zachytával kliky a buttony by boli nefunkčné. */
.hp-hero .col{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hp-hero .col.content{padding:0 50px 0 70px}
.hp-hero .col.visual{position:relative;overflow:hidden}
.hp-hero .bnr-logo{position:absolute;top:26px;left:70px;display:flex;align-items:center;gap:10px;z-index:6}
.hp-hero .bnr-logo .mk{width:28px;height:28px;background:var(--red);border-radius:7px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.hp-hero .bnr-logo .mk [data-ic]{color:#fff;font-size:16px}
.hp-hero .bnr-logo .mk .dot{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;background:var(--ink);border-radius:50%;border:2px solid #fff}
.hp-hero .bnr-logo.on-dark .mk .dot{border-color:#1A1A1A}
.hp-hero .bnr-logo .wm{font-size:15px;font-weight:500;letter-spacing:-0.4px}.hp-hero .bnr-logo .wm .r{color:var(--red)}
.hp-hero .bnr-logo.on-dark .wm{color:#fff}
.hp-hero .bnr-logo.on-red .mk{background:#fff}.hp-hero .bnr-logo.on-red .mk [data-ic]{color:var(--red)}
.hp-hero .bnr-logo.on-red .wm{color:#fff}.hp-hero .bnr-logo.on-red .wm .r{color:#1A1A1A}
.hp-hero .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:500;margin-bottom:16px;align-self:flex-start}
.hp-hero .eyebrow.pill{padding:6px 14px;border-radius:100px}
.hp-hero .eyebrow [data-ic]{font-size:13px}
/* KONTRAST (WCAG 1.4.3): červený eyebrow --red (#C8232C) na tmavom hero (#161616) má
   pomer len 3,22:1 — pri 11px texte je potrebných 4,5:1. Používame svetlejší odtieň
   rovnakej značkovej červenej (#E85560 = --b2b, pomer 5,08:1). Nadpisy v .head .r
   ostávajú --red: sú 40px bold, kde stačí 3:1 (veľký text). */
.hp-hero .slide[data-theme="dark"] .eyebrow,.hp-hero .slide[data-theme="red"] .eyebrow{color:#E85560}
/* h1 aj h2: prvý slide má <h1> (jediný nadpis 1. úrovne titulky), ostatné <h2>. */
.hp-hero h1.head,.hp-hero h2.head{font-size:40px;font-weight:500;line-height:1.07;letter-spacing:-1.3px;margin-bottom:15px;max-width:560px;text-wrap:balance}
.hp-hero .sub{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:520px;margin-bottom:24px}
.hp-hero .sub b{color:inherit;font-weight:500}
.hp-hero .ctas{display:flex;gap:12px;align-items:center}
/* slide 1 */
.hp-hero #s1{background:#161616}
.hp-hero #s1 .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px}
.hp-hero #s1 .col.content{color:#fff}.hp-hero #s1 .sub{color:rgba(255,255,255,.66)}.hp-hero #s1 .head .r{color:var(--red)}
.hp-hero .crop{position:absolute;width:24px;height:24px;z-index:5}
.hp-hero .crop.tr{top:20px;right:20px;border-right:2px solid var(--red);border-top:2px solid var(--red)}
.hp-hero .crop.bl{bottom:20px;left:20px;border-left:2px solid var(--red);border-bottom:2px solid var(--red)}
.hp-hero .crop.br{bottom:20px;right:20px;border-right:2px solid var(--red);border-bottom:2px solid var(--red)}
/* .5 namiesto .4/.3: 10 px text mal 3,83:1 a 2,70:1 (WCAG 1.4.3 chce 4,5:1); .5 = 5,0:1, stále tlmené. */
.hp-hero .s1-ref{position:absolute;top:30px;right:32px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.5);z-index:6}
.hp-hero .s1-coord{position:absolute;bottom:30px;right:38px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.5);z-index:6}
.hp-hero #s1 .col.visual{display:flex;align-items:center;justify-content:center}
/* slide 2 */
.hp-hero #s2{background:var(--red)}
.hp-hero #s2 .col.content{color:#fff}.hp-hero #s2 .eyebrow.pill{background:rgba(255,255,255,.16);color:#fff}.hp-hero #s2 .sub{color:rgba(255,255,255,.85)}
.hp-hero #s2 .sub .old{text-decoration:line-through;opacity:.7}.hp-hero #s2 .sub .now{font-weight:500;color:#fff}
.hp-hero #s2 .col.visual{display:flex;align-items:center;justify-content:center}
.hp-hero .deal-wrap{position:relative;width:500px}
.hp-hero .deal-tag{position:absolute;top:-24px;left:-16px;z-index:4;background:var(--ink);color:#fff;width:104px;height:104px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.hp-hero .deal-tag .pct{font-size:34px;font-weight:500;letter-spacing:-1.5px;line-height:1}
.hp-hero .deal-tag .lab{font-family:var(--mono);font-size:10px;letter-spacing:2px;margin-top:4px;color:rgba(255,255,255,.7)}
.hp-hero .pcard{background:#fff;border-radius:18px;padding:26px;display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.hp-hero .pcard .pimg{width:130px;height:130px;background:var(--bg);border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative}
.hp-hero .pcard .pimg [data-ic]{font-size:54px;color:var(--ink)}
.hp-hero .pcard .pstock{position:absolute;left:8px;bottom:8px;font-size:10px;color:var(--green);background:#E8F4EA;border-radius:100px;padding:3px 8px;display:flex;align-items:center;gap:4px;font-weight:500}
.hp-hero .pcard .pstock [data-ic]{font-size:11px;color:var(--green)}
.hp-hero .pcard .pcode{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-bottom:6px}
.hp-hero .pcard .pname{font-size:17px;font-weight:500;letter-spacing:-0.3px;line-height:1.25;margin-bottom:12px;color:var(--ink)}
.hp-hero .pcard .prices{display:flex;align-items:baseline;gap:12px}
.hp-hero .pcard .pold{font-size:15px;color:var(--muted);text-decoration:line-through}
.hp-hero .pcard .pnew{font-size:30px;font-weight:500;letter-spacing:-1px;color:var(--red)}
.hp-hero .pcard .pvat{font-size:10px;color:var(--muted);margin-top:4px}
/* slide 3 */
.hp-hero #s3{background:#161616}
.hp-hero #s3 .hex-bg{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");background-size:56px 64px}
.hp-hero #s3 .col.content{color:#fff}.hp-hero #s3 .sub{color:rgba(255,255,255,.66)}.hp-hero #s3 .head .r{color:var(--red)}
.hp-hero #s3 .col.visual{display:flex;align-items:center;justify-content:center;padding-right:60px}
.hp-hero .tier-table{width:460px;display:flex;flex-direction:column;gap:11px}
.hp-hero .tier{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 20px}
.hp-hero .tier.featured{border-color:var(--red);background:rgba(200,35,44,.08)}
.hp-hero .tier .dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
.hp-hero .tier .tname{font-size:16px;font-weight:500;color:#fff;flex:1}
.hp-hero .tier .tmeta{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);letter-spacing:1px}
.hp-hero .tier .tpct{font-size:23px;font-weight:500;letter-spacing:-1px;color:#fff}
.hp-hero .tier.featured .tpct{color:var(--lgreen)}
.hp-hero .tier .tbadge{font-family:var(--mono);font-size:8px;letter-spacing:1.5px;background:var(--red);color:#fff;padding:3px 7px;border-radius:100px;margin-left:6px}
/* slide 4 */
.hp-hero #s4{background:var(--bg)}
.hp-hero #s4 .col.content{color:var(--ink)}.hp-hero #s4 .eyebrow.pill{background:var(--pink);color:var(--red)}.hp-hero #s4 .sub{color:var(--muted)}.hp-hero #s4 .head .r{color:var(--red)}
.hp-hero #s4 .col.visual{display:flex;align-items:center;justify-content:center}
.hp-hero .season-comp{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:500px}
.hp-hero .scard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hp-hero .scard.tall{grid-row:span 2;display:flex;flex-direction:column}
.hp-hero .scard .simg{background:var(--bg);flex:1;min-height:100px;display:flex;align-items:center;justify-content:center;position:relative}
.hp-hero .scard.tall .simg{min-height:180px}
.hp-hero .scard .simg [data-ic]{font-size:48px;color:#cfcfcf}
/* karty sú odkazy na reálne kategórie (nie placeholder „FOTO · LIFESTYLE") */
.hp-hero a.scard{color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}
.hp-hero a.scard:hover{border-color:var(--red);transform:translateY(-2px)}
.hp-hero .scard .simg.ico-red{background:var(--pink)}.hp-hero .scard .simg.ico-red [data-ic]{color:var(--red);font-size:64px}
.hp-hero .scard .sinfo{padding:12px 14px}
.hp-hero .scard .scode{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--muted);margin-bottom:4px}
.hp-hero .scard .sname{font-size:13px;font-weight:500;letter-spacing:-0.2px;line-height:1.3}
.hp-hero .scard .stag{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;color:var(--green);font-weight:500}
.hp-hero .scard .stag [data-ic]{font-size:12px}
/* slide 5 */
.hp-hero #s5{background:#161616}
.hp-hero #s5 .key-bg{position:absolute;font-size:460px;color:rgba(255,255,255,.05);right:-50px;top:50%;transform:translateY(-50%);line-height:1;z-index:1}
.hp-hero #s5 .col.content{color:#fff;z-index:2}.hp-hero #s5 .sub{color:rgba(255,255,255,.66)}.hp-hero #s5 .head .r{color:var(--red)}
.hp-hero #s5 .col.visual{display:flex;align-items:center;justify-content:center;padding-right:60px;z-index:2}
.hp-hero .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:460px}
.hp-hero .svc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px}
.hp-hero .svc .sico{width:38px;height:38px;border-radius:10px;background:rgba(200,35,44,.16);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.hp-hero .svc .sico [data-ic]{font-size:20px;color:var(--red)}
.hp-hero .svc .st{font-size:14px;font-weight:500;color:#fff;margin-bottom:3px}
.hp-hero .svc .sp{font-family:var(--mono);font-size:11px;color:var(--lgreen);letter-spacing:.5px}
.hp-hero .svc .sd{font-size:10px;color:rgba(255,255,255,.45);margin-top:2px}
/* Vizuály slidov majú pevnú šírku 460–500 px; v užšom stĺpci (tablet) ich max-width zúži,
   inak boli orezané a ležala na nich šípka „ďalší" (merané pri 800–960 px). */
.hp-hero .deal-wrap,.hp-hero .tier-table,.hp-hero .svc-grid,.hp-hero .season-comp{max-width:100%}
@media(min-width:769px) and (max-width:1100px){
  /* Logo bannera (top 26 px) sa pri vyššom texte dotýkalo eyebrow — text začína pod ním. */
  .hp-hero .col.content{padding:62px 28px 44px 70px}
  .hp-hero h1.head,.hp-hero h2.head{font-size:34px}
  /* Vpravo miesto pre šípku „ďalší" (right:20px, 48 px). !important kvôli #s3/#s5 .col.visual. */
  .hp-hero .col.visual{padding:0 80px 0 12px!important}
  .hp-hero .s1-coord{display:none}/* dekoratívne súradnice by tu ležali pod bodkami slidera */
}
/* slider controls */
.hp-hero .arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;border:1px solid;transition:background .15s,transform .15s;padding:0;font:inherit;color:inherit;background:transparent}
.hp-hero .arrow:hover{transform:translateY(-50%) scale(1.07)}
.hp-hero .arrow [data-ic]{font-size:22px;color:var(--red)}
.hp-hero .arrow.prev{left:20px}.hp-hero .arrow.next{right:20px}
/* Tlačidlo pauzy (WCAG 2.2.2) — menšie a dole pri bulletoch, aby neprekrývalo obsah
   a dalo sa naň dostať Tabom aj na telefóne (šípky sú na mobile skryté, pauza NIE). */
/* Vľavo dole: vpravo dole je na slide 1 text so súradnicami (.s1-coord), ktorý by
   tlačidlo prekrylo. Vľavo je priestor voľný na všetkých slidoch. */
.hp-hero .arrow.pause{top:auto;bottom:18px;left:20px;right:auto;transform:none;width:36px;height:36px}
.hp-hero .arrow.pause:hover{transform:scale(1.07)}
.hp-hero .arrow.pause [data-ic]{font-size:16px}
/* Väčší rozostup bodiek, aby sa zväčšené dotykové ciele neprekrývali. */
.hp-hero .bullets{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:26px;z-index:20}
.hp-hero .bullet{position:relative;width:9px;height:9px;border-radius:50%;cursor:pointer;border:none;padding:0;transition:width .25s,background .25s}
/* Dotykový cieľ ~40x44 px (WCAG 2.5.8) bez zmeny vizuálu bodky — bodka ostáva 9 px,
   klikateľná plocha je neviditeľný pseudo-element okolo nej. Šírka je menšia než
   rozostup (9+26=35 px), takže susedné plochy si navzájom nekradnú kliky. */
.hp-hero .bullet::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:33px;height:44px;border-radius:6px}
.hp-hero .bullet.active{width:28px;border-radius:100px}
.hp-hero .progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12);z-index:20}
.hp-hero .progress .fill{height:100%;width:0;background:var(--red)}
.hp-hero .ctrls.theme-dark .arrow,.hp-hero .ctrls.theme-red .arrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.hp-hero .ctrls.theme-light .arrow{background:#fff;border-color:var(--line);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.hp-hero .ctrls.theme-dark .bullet{background:rgba(255,255,255,.45)}.hp-hero .ctrls.theme-dark .bullet.active{background:var(--red)}
.hp-hero .ctrls.theme-red .bullet{background:rgba(255,255,255,.5)}.hp-hero .ctrls.theme-red .bullet.active{background:#1A1A1A}.hp-hero .ctrls.theme-red .arrow [data-ic]{color:var(--red)}
.hp-hero .ctrls.theme-light .bullet{background:rgba(0,0,0,.18)}.hp-hero .ctrls.theme-light .bullet.active{background:var(--red)}
.hp-hero .ctrls.theme-red .progress{background:rgba(0,0,0,.18)}.hp-hero .ctrls.theme-red .progress .fill{background:#1A1A1A}
.hp-hero .ctrls.theme-light .progress{background:rgba(0,0,0,.08)}

/* CLAIM */
.claim{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.claim .c{display:flex;align-items:center;gap:14px;padding:24px 30px;justify-content:center}
.claim .c:not(:last-child){border-right:1px solid var(--line)}
.claim .cic{width:30px;height:30px;color:var(--red);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.claim .cic [data-ic]{font-size:28px}
.claim .ct{font-size:14px;font-weight:500;letter-spacing:-0.2px;line-height:1.35}

/* CATEGORIES */
.cats{padding:60px 48px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{aspect-ratio:1/1;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-decoration:none;cursor:pointer;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s}
.tile>*{position:relative;z-index:1}
.tile .ico{width:60px;height:60px;color:var(--red);transition:transform .22s;display:block}
/* Obrázok kategórie z DB (ak existuje) — nahrádza SVG ikonu; onerror v šablóne ho odstráni → ikona ostane */
.tile .timg{width:72px;height:72px;object-fit:contain;transition:transform .22s;display:block}
.tile:has(.timg) .ico{display:none}
.tile:hover .timg{transform:scale(1.08)}
.tile .tname{font-size:18px;font-weight:500;color:var(--ink);margin-top:20px;letter-spacing:-0.3px;text-align:center;padding:0 16px}
.tile .tcount{font-size:12px;color:var(--muted);margin-top:7px}
.tile .arr{position:absolute;bottom:18px;right:18px;width:22px;height:22px;color:var(--red);opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s;z-index:2}
.tile:hover{background:var(--pink);border-color:var(--red);box-shadow:0 12px 28px rgba(200,35,44,.10);transform:translateY(-3px)}
.tile:hover .ico{transform:scale(1.1)}.tile:hover .arr{opacity:1;transform:translateX(0)}
.va{background-color:#fff;background-image:linear-gradient(rgba(200,35,44,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,35,44,.04) 1px,transparent 1px);background-size:30px 30px}
.vb{background-color:#F5F5F5;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 28px,rgba(0,0,0,.025) 28px,rgba(0,0,0,.025) 56px)}
.vc{background:#1A1A1A;border:none}
.vc::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(200,35,44,.20),transparent 68%);z-index:0;transition:background .22s}
.vc .tname{color:#fff}.vc .tcount{color:rgba(255,255,255,.6)}
.vc:hover{background:#1A1A1A;border-color:transparent;box-shadow:0 14px 32px rgba(200,35,44,.22)}.vc:hover::before{background:radial-gradient(circle at 50% 44%,rgba(200,35,44,.36),transparent 70%)}
.tile.all{background:var(--ink);border:none}
.tile.all .wm{position:absolute;width:230px;height:230px;color:rgba(255,255,255,.06);right:-46px;bottom:-58px;transform:rotate(-12deg);z-index:0}
.tile.all .ico{color:#fff}.tile.all .tname{color:#fff}.tile.all .tcount{color:rgba(255,255,255,.55)}
.tile.all:hover{background:#000;transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.25)}.tile.all:hover .ico{transform:translateX(5px)}

/* GUIDE CTA */
.guide{margin:0 48px 60px;background:var(--pink);border-left:4px solid var(--red);border-radius:14px;padding:40px 44px;display:grid;grid-template-columns:60% 40%;gap:30px;align-items:center}
.guide .ge{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:12px}
.guide h3{font-size:28px;font-weight:500;letter-spacing:-0.6px}
.guide p{font-size:15px;color:#7a5a5b;line-height:1.6;margin-top:10px;max-width:460px}
.guide .gstats{font-size:13px;color:var(--red);font-weight:500;margin-top:14px;display:flex;gap:8px;align-items:center}
.guide-vis{display:flex;flex-direction:column;align-items:center;gap:18px}
.qz{display:flex;align-items:center;gap:10px}
.qz .qtile{width:78px;height:78px;border-radius:12px;background:#fff;border:1px solid rgba(200,35,44,.18);display:flex;align-items:center;justify-content:center}
.qz .qtile [data-ic]{font-size:34px;color:var(--red)}
.qz .qarr{color:var(--red);opacity:.5}.qz .qarr [data-ic]{font-size:18px}

/* BESTSELLERS */
.bs-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
/* .bs-tab je <button> (ovládanie klávesnicou) — font:inherit zruší systémové písmo tlačidla */
.bs-tab{padding:9px 18px;border-radius:100px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap}
.bs-tab:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.bs-tab:hover{border-color:var(--line)}.bs-tab.on{background:var(--ink);color:#fff}
.bs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* position:relative — srdiečko (.bs-fav) sa polohuje voči karte, nie voči .bs-img:
   tlačidlo nesmie byť vnorené v odkaze (nevalidné HTML), takže je nad ním ako sused. */
.bs-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s,transform .18s}
/* Srdiečko vpravo nahor (odznak Top/Akcia drží ľavý horný rok). Vzhľad zhodný s kartou
   výpisu (product-listing.css .pc .fav), ten súbor ale úvodná stránka nenačítava. */
.bs-fav{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;z-index:2}
.bs-fav:hover{color:var(--red);border-color:var(--red)}
.bs-fav [data-ic]{font-size:16px}
.bs-fav.on{color:var(--red);border-color:var(--red)}
.bs-card:hover{border-color:var(--red);box-shadow:0 8px 22px rgba(0,0,0,.06);transform:translateY(-2px)}
.bs-img{position:relative;height:150px;background:var(--bg);display:flex;align-items:center;justify-content:center}
.bs-img [data-ic]{font-size:56px;color:#cfcfcf}
.bs-img .no-img{gap:0}.bs-img .no-img svg{width:52px;height:52px;color:#cfcfcf}.bs-img .no-img span{display:none}
.bs-img .bbadge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:5px}
.bs-img .bbadge.top{background:var(--red);color:#fff}.bs-img .bbadge.akcia{background:var(--ink);color:#fff}.bs-img .bbadge.new{background:var(--green);color:#fff}
.bs-info{padding:16px;display:flex;flex-direction:column;flex:1}
.bs-cat{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bs-name{font-size:15px;font-weight:500;letter-spacing:-0.2px;line-height:1.3;margin-bottom:10px;color:var(--ink);text-decoration:none;display:block}
a.bs-name:hover{color:var(--red)}
a.bs-img{text-decoration:none}
.bs-rate{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:12px}
.bs-rate .stars{display:inline-flex;gap:1px;color:var(--green)}.bs-rate .stars [data-ic]{font-size:13px}
.bs-rate .rc{color:var(--muted)}
.bs-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;margin-bottom:12px}
.bs-price .amt{font-size:22px;font-weight:500;letter-spacing:-0.6px}
.bs-price .old{font-size:13px;color:var(--muted);text-decoration:line-through}
.bs-card .btn{width:100%;padding:11px;font-size:14px}

/* B2B */
.b2b-promo{background:#161616;position:relative;padding:56px 48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;overflow:hidden}
.b2b-promo::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--red)}
.b2b-promo .be{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red-on-dark);font-weight:500;margin-bottom:14px}
.b2b-promo h2{font-size:32px;font-weight:500;color:#fff;letter-spacing:-0.7px;line-height:1.1}
.b2b-promo .bsub{font-size:15px;color:rgba(255,255,255,.7);line-height:1.6;margin:14px 0 20px;max-width:520px}
.b2b-promo .blist{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.b2b-promo .blist li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.85)}
.b2b-promo .blist [data-ic]{font-size:18px;color:var(--lgreen)}
.b2b-promo .bctas{display:flex;gap:12px}
.b2b-tiers{display:flex;flex-direction:column;gap:12px}
.b2b-tier{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 22px}
.b2b-tier .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.b2b-tier .nm{font-size:17px;font-weight:500;color:#fff;flex:1}
.b2b-tier .ob{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);letter-spacing:1px}
.b2b-tier .pc{font-size:24px;font-weight:500;letter-spacing:-1px;color:#fff}
.b2b-tier.gold .pc{color:var(--lgreen)}

/* MAGAZÍN */
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mag{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:.18s}
.mag:hover{border-color:var(--red);box-shadow:0 8px 22px rgba(0,0,0,.06);transform:translateY(-2px)}
.mag .mimg{height:160px;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative}
.mag .mimg [data-ic]{font-size:48px;color:#cfcfcf}
.mag .mimg .ph{position:absolute;bottom:10px;left:12px;font-family:var(--mono);font-size:9px;letter-spacing:1px;color:#b3b3b3;text-transform:uppercase}
.mag .minfo{padding:20px;display:flex;flex-direction:column;flex:1}
.mag .mcat{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:9px}
.mag .mtitle{font-size:17px;font-weight:500;letter-spacing:-0.3px;line-height:1.35;margin-bottom:12px}
.mag .mmeta{font-size:12px;color:var(--muted);margin-top:auto;display:flex;align-items:center;gap:6px}
.mag .mmeta [data-ic]{font-size:14px}
/* Jeden reálny článok — feature karta (obrázok + text vedľa seba, na celú šírku) */
.mag-grid.mag-single{grid-template-columns:1fr}
.mag.mag-feat{flex-direction:row;align-items:stretch}
.mag.mag-feat .mimg{width:340px;height:auto;min-height:200px;flex-shrink:0}
.mag.mag-feat .mimg [data-ic]{font-size:64px}
.mag.mag-feat .minfo{padding:32px 36px;justify-content:center}
.mag.mag-feat .mtitle{font-size:24px;margin-bottom:14px}
.mag.mag-feat .mexc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px;max-width:560px}
.mag.mag-feat .mmeta [data-ic]:last-child{color:var(--red)}
@media(max-width:768px){
  .mag.mag-feat{flex-direction:column}
  .mag.mag-feat .mimg{width:100%;min-height:160px}
  .mag.mag-feat .minfo{padding:22px}
  .mag.mag-feat .mtitle{font-size:20px}
}

/* TESTIMONIALS */
.testi{background:var(--bg)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.tcard .tq{width:48px;height:48px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tcard .tq [data-ic]{font-size:24px;color:var(--red);opacity:.3;transform:rotate(180deg)}
.tcard .ttext{font-size:15px;font-style:italic;line-height:1.6;color:var(--ink);flex:1}
.tcard .trate{display:inline-flex;gap:1px;color:var(--green);margin:16px 0 14px}.tcard .trate [data-ic]{font-size:15px}
.tcard .twho{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid #F0F0F0}
.tcard .tav{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;flex-shrink:0}
.tcard .tn{font-size:14px;font-weight:500}.tcard .tc{font-size:12px;color:var(--muted);margin-top:2px}

/* RECENTLY VIEWED */
.recent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:.18s}
.rcard:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.05)}
.rcard .rimg{height:100px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.rcard .rimg [data-ic]{font-size:44px;color:#cfcfcf}
.rcard .rimg img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
.rcard .rcode{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:4px}
.rcard .rcat{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.rcard .rname{font-size:14px;font-weight:500;line-height:1.3;margin-bottom:10px}
.rcard .rprice{font-size:17px;font-weight:500;letter-spacing:-0.4px;margin-top:auto}

/* NEWSLETTER */
.nl{background:#161616;position:relative;padding:56px 48px;text-align:center;overflow:hidden}
.nl::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--red)}
.nl .nlic{width:60px;height:60px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.nl .nlic [data-ic]{font-size:30px;color:var(--red)}
.nl h2{font-size:30px;font-weight:500;color:#fff;letter-spacing:-0.6px}
.nl p{font-size:15px;color:rgba(255,255,255,.7);margin:12px auto 26px;max-width:520px;line-height:1.6}
#nlForm{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:520px;margin:0 auto}
/* .nl-row/.nl-consent/.nl-err/.nl-done sú zdieľané v base.css; tu len biele pole veľkého bloku */
.nl .nl-row input{flex:1;background:#fff;border:1px solid transparent;border-radius:10px;padding:14px 16px;font-size:14px;font-family:inherit;outline:none}
.nl-perks{display:flex;gap:22px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.nl-perks span{font-size:12px;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:6px}
.nl-perks [data-ic]{font-size:14px;color:var(--lgreen)}

/* MOBILE — homepage-špecifické (zdieľaný chróm je v base.css) */
@media(max-width:768px){
  .cats{padding:40px 16px}
  .hp-hero{height:600px}
  .hp-hero .slide{grid-template-columns:1fr;grid-template-rows:56% 44%}
  /* Na mobile šípky prekrývali obsah (top:50% padá na rozhranie 2 riadkov) —
     na dotyku sa listuje bulletmi/swipom, takže šípky skryjeme.
     Tlačidlo PAUZY ostáva: automatické prepínanie musí byť zastaviteľné aj na telefóne. */
  .hp-hero .arrow.prev,.hp-hero .arrow.next{display:none}
  .hp-hero .arrow.pause{left:16px;right:auto;bottom:16px}
  .hp-hero .bnr-logo{left:20px;top:20px}
  .hp-hero .col.content{padding:0 20px;justify-content:center}
  .hp-hero h1.head,.hp-hero h2.head{font-size:30px;max-width:none}
  .hp-hero .sub{font-size:14px;max-width:none;margin-bottom:18px}
  .hp-hero .col.visual{padding:0 20px!important;border-top:1px solid rgba(127,127,127,.12)}
  .hp-hero .deal-wrap{width:330px}
  .hp-hero .pcard{grid-template-columns:1fr;gap:14px}.hp-hero .pcard .pimg{width:90px;height:90px}
  .hp-hero .tier-table,.hp-hero .svc-grid,.hp-hero .season-comp{width:330px}
  .hp-hero #s5 .key-bg{font-size:330px;right:-90px}
  /* ---- Hero na telefóne (merané v Chrome 320–768 px, probe v scratchpade) ----
     1) Logo bannera je absolútne hore vľavo a pri dlhšom eyebrow/nadpise ich prekrývalo
        (slidy 4 a 5 pri 360 px). Na mobile je duplicitné — to isté logo je v hlavičke tesne
        nad bannerom —, takže ho skryjeme; dekoratívne súradnice slidu 1 tiež (bodky ich kryli).
     2) Riadky 56 % / 44 % mali pevný pomer: dlhý text sa nezmestil (slide 3 pri 320 px orezaný)
        a karty vizuálu boli orezané zospodu. Text teraz dostane výšku podľa obsahu, vizuál zvyšok.
     3) Spodných 52 px vizuálu patrí ovládaniu slidera (bodky + pauza) — predtým ležalo na cenách
        („od 4,50 €") a na kartách. Karty sú preto na mobile kompaktné (bez ikon a doplnkov). */
  .hp-hero .bnr-logo,.hp-hero .s1-ref,.hp-hero .s1-coord{display:none}
  .hp-hero .slide{grid-template-rows:auto minmax(0,1fr)}
  .hp-hero .col.content{padding:26px 20px 16px;justify-content:flex-start}
  .hp-hero .col.visual{padding:12px 20px 52px!important}
  .hp-hero .ctas{flex-wrap:wrap}
  .hp-hero .deal-wrap,.hp-hero .tier-table,.hp-hero .svc-grid,.hp-hero .season-comp{width:100%;max-width:400px}
  /* s2 akcia: obrázok vedľa textu, menší štítok zľavy */
  .hp-hero .pcard{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:14px;border-radius:14px}
  .hp-hero .pcard .pimg{width:72px;height:72px}.hp-hero .pcard .pstock{display:none}
  .hp-hero .pcard .pname{font-size:14px;margin-bottom:6px}.hp-hero .pcard .pnew{font-size:22px}
  .hp-hero .deal-tag{width:58px;height:58px;top:-14px;left:-8px;border-radius:12px}.hp-hero .deal-tag .pct{font-size:18px}.hp-hero .deal-tag .lab{font-size:8px;letter-spacing:1px}
  /* s3 B2B: riadky bez popisu */
  .hp-hero .tier-table{gap:8px}.hp-hero .tier{padding:10px 14px}.hp-hero .tier .tmeta{display:none}.hp-hero .tier .tname{font-size:14px}
  /* s4 sezóna: malé karty bez obrázka, vysoká karta s malou ikonou */
  .hp-hero .season-comp{gap:10px}
  .hp-hero .scard:not(.tall) .simg{display:none}
  .hp-hero .scard.tall .simg{min-height:0}.hp-hero .scard .simg.ico-red [data-ic]{font-size:36px}
  .hp-hero .scard .sinfo{padding:10px 12px}
  /* s5 kľúče: karty bez ikony */
  .hp-hero .svc-grid{gap:10px}.hp-hero .svc{padding:10px 12px}.hp-hero .svc .sico{display:none}
  .claim{grid-template-columns:1fr 1fr}
  .claim .c{padding:18px 16px;justify-content:flex-start}
  .claim .c:nth-child(odd){border-right:1px solid var(--line)}
  .claim .c:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cat-grid{grid-template-columns:1fr 1fr}
  /* minmax(0,1fr): pri 320 px „1fr" (minimum = min-content obsahu) pretekal o 32 px. */
  .guide{grid-template-columns:minmax(0,1fr);margin:0 16px 40px;padding:28px 22px}
  .guide-vis{order:2}
  .bs-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
  .bs-grid{grid-template-columns:1fr 1fr}
  .b2b-promo{grid-template-columns:1fr;gap:28px;padding:40px 18px}
  .mag-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:none;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 10px 8px;scrollbar-width:none}
  .testi-grid::-webkit-scrollbar{display:none}
  .tcard{scroll-snap-align:center;flex:0 0 84%}
  .recent-grid{grid-template-columns:1fr 1fr}
  .nl{padding:40px 18px}.nl .nl-row{flex-direction:column}
}