/* =====================================================================
   naj.sk — REDIZAJN KATEGÓRIE · vlastné CSS
   Vkladá sa do: Administrácia → Vzhľad a obsah → Vlastné CSS štýly
   (alebo editor šablóny → vlastný CSS). Žiadny zásah do HTML šablóny.

   Cielené na REÁLNY Shoptet DOM naj.sk (mapa: SHOPTET_SELECTORS.md).
   Mobile-first. Rešpektuje prefers-reduced-motion.

   BLOK 1/4 — Produktová karta + mriežka
   ===================================================================== */

/* Prémiový display font pre ceny a tlačidlá.
   Pozn.: pre najlepší výkon (CWV) je lepšie vložiť <link> tohto fontu do
   kódu v hlavičke; tento @import je jednoduchá alternatíva (musí byť hore). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&display=swap');

:root{
  --naj-ink:#121417;
  --naj-ink-2:#3b4149;
  --naj-muted:#79828c;
  --naj-line:#e7eaee;
  --naj-line-2:#dde2e7;
  --naj-red:#de0606;          /* brand — len akcent (zľava, hover CTA) */
  --naj-red-2:#b40505;
  --naj-green:#137a43;
  --naj-surface:#eef3f7;       /* brand svetlá */
  --naj-surface-2:#f6f9fb;
  --naj-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --naj-r:8px;
  --naj-r-sm:4px;
  --naj-t:200ms cubic-bezier(.4,0,.2,1);
}

/* ---------- MRIEŽKA (scope: #products = výpis kategórie, nie karusely) ---------- */
#products.products-block{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 14px;
  align-items:start;
}
@media(min-width:560px){ #products.products-block{ grid-template-columns:repeat(3,1fr); gap:26px 18px; } }
@media(min-width:1280px){ #products.products-block{ grid-template-columns:repeat(4,1fr); gap:34px 22px; } }

/* Karta: zruš fixnú šírku/okraje témy, grid riadi stĺpce */
#products .product{
  width:auto;
  margin:0;
  padding:0;
  float:none;
}
#products .product .p{ height:100%; display:flex; flex-direction:column; }

/* ---------- MÉDIUM (foto) ---------- */
#products .product .image{
  position:relative; display:block;
  aspect-ratio:2/3;                 /* rezervuje miesto → žiadny CLS */
  overflow:hidden; border-radius:var(--naj-r);
  background:var(--naj-surface-2);
  margin-bottom:12px;
}
#products .product .image img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 500ms cubic-bezier(.2,0,.1,1);
}
#products .product:hover .image img{ transform:scale(1.04); }

/* ---------- BADGE (flags) ---------- */
#products .product .flags{ position:absolute; z-index:3; display:flex; flex-direction:column; gap:6px; margin:0; }
#products .product .flags-default{ top:10px; left:10px; align-items:flex-start; }
#products .product .flags-extra{ top:10px; right:10px; align-items:flex-end; }
#products .product .flag{
  display:inline-block; font-family:var(--naj-display);
  font-size:9.5px; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
  padding:4px 8px; border-radius:var(--naj-r-sm); line-height:1.15; color:#fff; background:var(--naj-ink);
  max-width:165px; white-space:normal;   /* dlhé marketingové texty flagov sa zalomia namiesto pretečenia */
}
/* ODPORÚČANIE (obsah, nie CSS): skrátiť texty flagov v admine na „Novinka" /
   „Posledné kusy" — krátke badge pôsobia prémiovejšie než dlhé vety. */
#products .product .flag-new{ background:var(--naj-ink); }
#products .product .flag-black-friday{ background:#fff; color:var(--naj-ink); box-shadow:0 1px 3px rgba(0,0,0,.14); }
#products .product .flag-discount{ background:transparent; padding:0; }
#products .product .flag-discount .price-standard{ display:none; }   /* starú cenu ukazujeme pri cene, nie na fotke */
#products .product .flag-discount .price-save{
  display:inline-block; background:var(--naj-red); color:#fff;
  font-family:var(--naj-display); font-size:12px; font-weight:800;
  padding:5px 9px; border-radius:var(--naj-r-sm);
}

/* ---------- VEĽKOSTNÝ widget na karte ----------
   Zistené živou inšpekciou: natívny widget ukáže len 1 veľkosť (+ „ďalšie")
   a téma ho ABSOLÚTNE pozicuje ako červené číslo cez spodok fotky → rušivý overlay.
   Preto ho skrývame pre čistú fotku; výber veľkosti je na detaile produktu.
   (Plnohodnotný výber veľkostí priamo na karte by si vyžadoval zásah do šablóny
   — vieme doriešiť samostatne, ak bude záujem.) */
#products .product .widget-parameter-wrapper{ display:none !important; }

/* ---------- NÁZOV ---------- */
#products .product .p-in-in{ padding:0; }
#products .product a.name{ display:block; margin:0 0 6px; }
#products .product a.name span{
  font-size:14px; font-weight:500; line-height:1.35; color:var(--naj-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#products .product a.name:hover span{ color:var(--naj-ink-2); }

/* ---------- HODNOTENIE ---------- */
#products .product .ratings-wrapper{ margin:0 0 10px; min-height:16px; }

/* ---------- CENY + DOSTUPNOSŤ ---------- */
#products .product .p-bottom{ margin-top:auto; }
#products .product .prices{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-bottom:10px; }
/* zruš ťažký červený cenový box témy → čistá tučná cena (!important nutný, téma prepisuje) */
#products .product .price.price-final{
  margin:0; background:transparent !important; padding:0 !important; box-shadow:none !important; border:0 !important;
}
#products .product .price.price-final strong{
  font-family:var(--naj-display); font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--naj-ink);
  background:transparent !important; padding:0 !important; border:0 !important;   /* téma dáva strong červený rámček */
}
/* cena ostáva čierna (tučná) aj pri zľave — červenú nesie len badge „−X %" na fotke;
   menej červenej = prémiovejší dojem (zámerné rozhodnutie). */
#products .product .availability{ font-size:12px; }
#products .product .availability.skladem{ color:var(--naj-green); font-weight:600; }
#products .product .availability-amount{ color:inherit; }

/* ---------- TLAČIDLO DO KOŠÍKA (len v rámci výpisu) ---------- */
#products .product .p-tools{ margin-top:10px; }
/* tlačidlo: téma drží zelené pozadie cez !important → nutný override (komentované) */
#products .product .p-tools .btn.btn-primary{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  font-family:var(--naj-display); font-weight:700; font-size:13px; letter-spacing:.3px; text-transform:uppercase;
  padding:12px 14px; border-radius:var(--naj-r-sm);
  background:var(--naj-ink) !important; border:1px solid var(--naj-ink) !important; color:#fff !important;
  transition:background var(--naj-t), border-color var(--naj-t);
}
#products .product .p-tools .btn.btn-primary:hover{ background:var(--naj-red) !important; border-color:var(--naj-red) !important; }

/* ---------- Výkon / prístupnosť ---------- */
@media (prefers-reduced-motion: reduce){
  #products .product .image img{ transition:none; }
  #products .product:hover .image img{ transform:none; }
}

/* =====================================================================
   BLOK 2/4 — Filter (bočný panel)  ·  scope: #filters / .box-filters
   Štruktúra: .filter-section > h4 (titulok, accordion cez triedu .otevreny)
   možnosti: input[checkbox] + label.filter-label > span.filter-count
   cena: jQuery UI slider #slider
   ===================================================================== */
.box-filters{ border:1px solid var(--naj-line); border-radius:var(--naj-r); background:#fff; padding:6px 18px 14px; }
.box-filters .box-title, .box-filters > h3{ font-family:var(--naj-display); font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.4px; padding:12px 0 4px; margin:0; }

#filters form{ margin:0; }
#filters fieldset{ border:0; margin:0; padding:0; min-width:0; }     /* reset natívneho fieldsetu */

/* Sekcia + accordion hlavička */
#filters .filter-section{ border-top:1px solid var(--naj-line); }
#filters .filter-section:first-child{ border-top:0; }
#filters .filter-section > h4,
#filters .filter-section .param-filter-top > h4{
  margin:0; cursor:pointer; padding:13px 0;
  font-family:var(--naj-display); font-size:13.5px; font-weight:700; color:var(--naj-ink);
  display:flex; align-items:center; gap:8px;
}
/* Pozn.: chevron (rozbaľovaciu šípku) poskytuje téma sama — nepridávame vlastný,
   aby neboli dva. Len reštýlujeme text titulku. */

/* Možnosti (checkbox + label + počet) */
#filters fieldset > div{ display:flex; align-items:center; gap:10px; padding:5px 0; }
#filters .filter-label{ display:flex; align-items:center; gap:8px; flex:1; font-size:13.5px; color:var(--naj-ink-2); cursor:pointer; margin:0; }
#filters .filter-count{ margin-left:auto; font-size:12px; color:var(--naj-muted); }
#filters input[type=checkbox]{ width:16px; height:16px; accent-color:var(--naj-ink); flex:none; }
/* Pozn.: zbaľovanie sekcií rieši téma (trieda .otevreny) — nepretláčame display,
   aby sa nerozbil natívny accordion toggle. */

/* Cenový slider (jQuery UI) */
#filters #slider.ui-slider{ height:4px; background:var(--naj-line-2); border:0; border-radius:999px; margin:16px 6px; }
#filters #slider .ui-slider-range{ background:var(--naj-ink); border-radius:999px; }
#filters #slider .ui-slider-handle{ width:16px; height:16px; top:-6px; border-radius:50%; background:#fff; background-image:none; border:2px solid var(--naj-ink); box-shadow:none; cursor:grab; }

/* =====================================================================
   BLOK 3/4 — Hlavička kategórie + triedenie  ·  scope: #category-header / .listSorting
   ===================================================================== */
/* Nadpis kategórie (H1) — výrazný display font */
#category-header h1, .category-header h1{
  font-family:var(--naj-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4vw,40px); line-height:1; letter-spacing:-.6px; margin:0 0 8px;
}
/* Triedenie ako rad „pill" tlačidiel */
.listSorting{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0; }
.listSorting__controls{ display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.listSorting__control{
  font-family:var(--naj-display); font-size:13px; font-weight:600; letter-spacing:.2px;
  padding:9px 16px; border:1px solid var(--naj-line-2); border-radius:999px; background:#fff; color:var(--naj-ink-2);
  cursor:pointer; transition:background var(--naj-t),border-color var(--naj-t),color var(--naj-t);
}
.listSorting__control:hover{ border-color:var(--naj-ink); color:var(--naj-ink); }
/* aktívne triedenie: téma drží tmavý text vyššou špecificitou → prebijeme cez #category-header (id) */
#category-header .listSorting__control--current,
#category-header .listSorting__control--current *{ color:#fff !important; }
.listSorting__control--current{ background:var(--naj-ink) !important; border-color:var(--naj-ink) !important; }

/* =====================================================================
   BLOK 4/4 — Stránkovanie  ·  scope: nav.pagination
   ===================================================================== */
nav.pagination{ display:flex; justify-content:center; align-items:center; margin:44px 0 0; }
nav.pagination .pagination__list{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
nav.pagination .pagination__link,
nav.pagination .pagination__currentPage{
  display:flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px;
  border-radius:var(--naj-r-sm); font-family:var(--naj-display); font-weight:700; font-size:14px;
}
nav.pagination .pagination__currentPage{ background:var(--naj-ink) !important; color:#fff !important; }
/* .btn.btn-secondary z témy prepíšeme na čistý outline štýl */
nav.pagination .pagination__link{
  border:1px solid var(--naj-line-2) !important; color:var(--naj-ink) !important; background:#fff !important;
  transition:border-color var(--naj-t),background var(--naj-t);
}
nav.pagination .pagination__link:hover{ border-color:var(--naj-ink) !important; background:var(--naj-surface) !important; }