/* Category page specific styles (extends base.css) */
 
/* Breadcrumbs */
.crumbs{font-size:.9rem; color:#6b7280; padding:12px 0;z-index:999;}
.crumbs a{color:inherit}

/* Category banner */
.cat-hero{ position:relative; border-radius:20px; overflow:hidden; background:#eef1f4 }
.cat-hero .bg{ position:absolute; inset:0; background:center/cover no-repeat; filter:brightness(.9) }
.cat-hero .body{ position:relative; z-index:2; padding:28px 32px; color:#fff }
.cat-hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(15,23,42,.62), rgba(15,23,42,.18) 55%, rgba(15,23,42,0) 82%) }
.cat-hero h1,.cat-hero h2,.cat-hero h3{ color:#fff }

/* Sidebar + strom kategórií */
.card-lite{ border:1px solid var(--line); border-radius:14px; background:#fff }
.sidebar{ 
  overflow: visible;   /* dôležité */
  z-index: 5;          /* sidebar nad contentom */
}
.cat-tree{ list-style:none; margin:0; padding:10px }
.cat-tree li{ position:relative }
.cat-tree > li{ padding:6px 8px; border-radius:8px }
.cat-tree a{ color:#0f2435; font-weight:500; display:flex; align-items:center; gap:8px }
.cat-tree .has-children > a:after{
  content:""; width:14px; height:14px; margin-left:auto;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
}
.submenu{
  position: absolute;
  left: 100%;
  top: -6px; 
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  display: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  z-index: 1060;       /* submenu nad všetkým okolo */
}
.has-children:hover > .submenu{ display:block }
.submenu a{ padding:8px 10px; display:block; border-radius:8px }
.submenu a:hover{ background:#f7f7f8; color:var(--brand) }

/* Filtre */
.filter-group{ padding:10px; border-top:1px solid var(--line) }
.filter-group:first-child{ border-top:0 }
.filter-title{ font-weight:700; color:#0f2435; margin-bottom:8px }
.price-row{ display:flex; gap:8px }
.price-row input{ max-width:120px }

/* Toolbar nad gridom */ 
.chip{ background:#f3f4f6; border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-weight:600 }
.chip button{ border:none; background:transparent; padding:0 4px }
.toolbar .count{
  margin-left:auto;           /* odtlačí ho doprava */
  color:#64748b;              /* jemnejší text */
  font-size:.9rem;
}

/* GRID */
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;position: relative; z-index: 1; }
.prod{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff }
.prod .thumb{ aspect-ratio:16/6; padding-top:15px;background:#fff; position:relative }
.prod .body{ padding:10px }
.prod .price{ font-weight:800 }

/* --- BADGE (Akcia / Novinka) --- */
.prod .badge-ribbon{
  position:absolute; top:8px; left:8px;
  background:var(--accent); color:#fff; font-weight:800;
  padding:6px 10px; border-radius:10px 10px 10px 0;
  box-shadow:0 6px 16px rgba(0,0,0,.12); font-size:.78rem;
}

/* --- Meta pod názvom: dodanie (autíčko) + značka --- */
.prod .meta{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:10px; margin:.25rem 0 .35rem;
}
.prod .delivery{
  display:inline-flex; align-items:center; gap:6px;
  
  border-radius:999px;   font-weight:400;font-size:12px;
} 
.prod .brand{ font-size:.85rem; color:var(--muted); font-weight:600 }

/* --- Ceny vpravo pod sebou --- */
.price-stack{ margin-left:auto; text-align:right; white-space:nowrap }
.price-stack .incvat{ font-weight:800;
	line-height:15px;
	margin-bottom:16px; }
.price-stack .exvat{ font-size:.85rem; color:var(--muted) }

/* Responsívne správanie */
@media (max-width:1199.98px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:991.98px){
  .submenu{ position:static; box-shadow:none; margin-left:0; top:auto }
  .has-children > a:after{ display:none }
  
}

.p-title
{min-height:48px}

/* --- Badge menší --- */
.prod .badge-ribbon{
  position:absolute; top:8px; left:8px;
  background:var(--accent); color:#fff; font-weight:800;
  padding:4px 8px; border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.12); font-size:.72rem;
}

/* --- Meta pod názvom: minimalistické „Dodanie do 3 dni“ --- */
.prod .meta{ 
  display:flex; align-items:flex-start; gap:10px; 
  margin:.25rem 0 .35rem 
}
 
 

/* ak by sidebar orezával submenu, povoľ overflow */ 

.sidebar{ overflow: visible; }

/* zaistíme, že rodič drží :hover aj pri prechode doprava */
.cat-tree li.has-children{ position: relative; }
.cat-tree li.has-children::before{
  content:"";
  position:absolute;
  top:0;
  right:-12px;     /* neviditeľný „mostík“ 12px */
  width:12px;
  height:100%;
  /* nechytá kliky, ale drží hover na li */
  pointer-events:none;
}

/* panel posunieme o pár px od riadku + dáme mu z-index */
.submenu{
  left: calc(99%);  /* malý vizuálny odstup */
  top: -6px;
  z-index: 1050;
}

/* nech panel nezmizne, keď už na ňom som */
.cat-tree .has-children:hover > .submenu,
.cat-tree .has-children:focus-within > .submenu,
.cat-tree .submenu:hover{
  display:block;
}

/* stabilné hovorenie a lepšia dostupnosť pre klávesnicu */
.cat-tree .has-children { position: relative; }
.cat-tree .has-children:hover > .submenu,
.cat-tree .has-children:focus-within > .submenu { display:block; }

/* submenu s bezpečným odstupom + vysoký z-index */
.submenu{
  left: calc(100% - 6px);   /* drobný presah, aby kurzor nestratil hover */
  top: -6px;
  margin-left: 0;
  z-index: 1030;
}

/* „mostík“ – neviditeľná plocha medzi parentom a submenu,
   aby nikdy nezhaslo pri prechode kurzora */
.submenu::before{
  content:"";
  position:absolute;
  left:-12px; top:0; bottom:0;
  width:12px;                 /* prekryje prípadné medzery */
}

/* keď je málo miesta napravo, otoč smer (voliteľné) */
@media (max-width: 1350px){
  .submenu{
    right: calc(100% + 8px);
    left: auto;
  }
}

/* Nadpis v sidebare */
.sidebar-title{
  font-weight: 800;
  color: var(--brand);
  letter-spacing:.2px;
}

/* nech submenu hladko nadväzuje a nezmizne pri prechode myšou */
.sidebar{  overflow: visible }
.cat-tree > li{ position: relative }

.has-children > a{ border-radius:8px }
.has-children:hover > a{ background:#f7f7f8 }

.cat-pills .pill-label{
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
}

/* Advanced filter */
.advbar .btn svg{ width:16px; height:16px;
    position: relative;
    top: -2px; }
.advfilter .FilterTitle{ font-weight:700; margin-bottom:.35rem; color:#0f2435 }
.price-input{ display:inline-flex; align-items:center; gap:.35rem }
.price-input span{ font-size:.9rem; color:var(--muted) }
/* --- Cenový slider (dual-thumb) --- */
.price-slider { position: relative; height: 28px }

.price-slider input[type="range"]{
  position: absolute; left: 0; right: 0; width: 100%; height: 28px; margin: 0;
  -webkit-appearance: none; background: transparent;
  z-index: 2;                 /* nad trackom */
  pointer-events: none;       /* samotná „dráha“ nekliká... */
}
.price-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand);
  pointer-events: auto;       /* ...ale „gombík“ áno */
}
.price-slider input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%; background:#fff; border:2px solid var(--brand);
  pointer-events: auto;
}

/* dráha pod gombíkmi – NEblokuje kliky */
.price-slider .track{
  position: absolute; top: 50%; left: 0; right: 0; height: 6px;
  border-radius: 999px; transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    #e5e7eb var(--l,0%),
    var(--brand) var(--l,0%),
    var(--brand) var(--r,100%),
    #e5e7eb var(--r,100%)
  );
  pointer-events: none;
  z-index: 1;
}

/* odstráň staré prekrytie – ak ho ešte máš, zruš ho */
.price-slider .track::after{ display:none !important }

.advfilter{ position: relative }
.likeselect .hodnoty{ z-index: 1060 } /* už tam takmer máš, len pre istotu */


.advfilter .form-check .form-check-input
{
	margin-left:0;
}
/* Like-select (dropdown s checkboxmi) */
.filter-box{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px }
.likeselect{ position:relative }
.likeselect .hodnoty{
  position:absolute; inset:auto 0 auto 0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); padding:8px; display:none; z-index:1030;
}
.likeselect.open .hodnoty{ display:block; max-height:250px;overflow-y:auto;overflow-x:hidden;}
.likeselect .form-check{ display:flex; align-items:center; gap:8px; padding:6px 6px; margin:0 }
.likeselect .form-check-input{ margin-top:0 }

/* Chips sa už používajú – len zmenšíme medzeru keď pribudnú */
.toolbar .chips{ gap:6px }


/* full-width layout pre horný riadok */
.advbar-wide{
  display:grid;
  grid-template-columns:auto 1fr auto auto; /* Filter | (prázdno/počítadlo) | Sort */
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.advbar-wide #resultCount{ justify-self:start; color:var(--muted) }
.advbar-wide .sorter{ justify-self:end; min-width:220px }
.advbar-wide .sshop-filters-viewmodeorter{ justify-self:end; min-width:220px }
.advbar-wide .sorter .form-select{ width:100% } /* nech sa pekne drží pri pravom okraji */

/* toolbar nižšie už len pre chipsy */
.toolbar{ display:flex; align-items:center; gap:10px; padding-bottom:10px; }
.toolbar .chips{ flex-wrap:wrap; gap:6px }

.cat-tree .cat-icon {
  width: 18px;
  height: 18px;
}

.cat-tree li.is_active a
{
	color:var(--brand);
}

.price-stack .oldprice {
    color: #ababab;
    margin-right: 5px;
    display: inline-block;
    font-size:13px;
}


.page-link:hover {
    z-index: 2;
    cursor:pointer; 
}