@charset "UTF-8";
/* ============================================================================
   191shop — individuálna téma pre OpenCart 4
   Odľahčená Mimosa: čistá, jednoduchá, elegantná.

   Načítava sa NAD základný stylesheet OpenCartu, takže obsahuje len úpravy.
   Bez externých fontov (Google Fonts = zbytočný externý request aj GDPR riziko).
   ========================================================================= */

:root {
  /* Farby -- nadväzujú na Mimosu, ale utlmene: akcent sa používa striedmo */
  --s-ink:        #1f1f1f;   /* nadpisy, hlavný text */
  --s-body:       #5c5c5c;   /* bežný text */
  --s-muted:      #8c8c8c;   /* doplnkové údaje */
  --s-line:       #e8e8e8;   /* linky a rámčeky */
  --s-line-soft:  #f1f1f1;
  --s-wash:       #f7f7f7;   /* jemné podfarbenie */
  --s-white:      #ffffff;
  /* Znackova zlata -- presna hodnota vytiahnuta z loga Wantee */
  --s-accent:     #cda349;
  --s-accent-dk:  #ac883d;
  --s-akcia:      #e23a2e;   /* cervena len pre akcie a zlavy */
  --s-ok:         #2e7d5b;

  --s-radius:     3px;
  --s-shadow:     0 1px 3px rgba(0, 0, 0, .05);
  --s-shadow-up:  0 6px 20px rgba(0, 0, 0, .08);
  --s-ease:       .18s ease;

  --s-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Prepis premennych Bootstrapu -- inak by cez ne presvitala povodna
     modra OpenCartu (#229ac8) vo vsetkych .bg-primary / .btn-primary prvkoch. */
  --bs-primary:            #cda349;
  --bs-primary-rgb:        205, 163, 73;
  --bs-link-color:         #1f1f1f;
  --bs-link-color-rgb:     31, 31, 31;
  --bs-link-hover-color:   #cda349;
  --bs-body-color:         #5c5c5c;
  --bs-body-color-rgb:     92, 92, 92;
  --bs-border-color:       #e8e8e8;
  --bs-border-radius:      3px;
  --bs-body-font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-body-font-size:     14px;
  --bs-heading-color:      #1f1f1f;
}

/* -------------------------------------------------------- oprava rozlozenia
   Zakladny stylesheet OpenCartu ma "#container { position: absolute }".
   Cela stranka tym vypadne z toku: telo ma nulovu vysku, nedá sa spravne
   rolovať a pätička sa prekrýva s obsahom. Vraciame normalny tok.          */

#container {
  position: static !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
}

footer { position: static !important; }

/* ...a k tomu patriaci 400px odstup pod obsahom, ktory drzal miesto
   pre absolutne umiestnenu paticku. */
#content { padding-bottom: 30px !important; }

/* ---------------------------------------------------------------- základ -- */

body {
  font-family: var(--s-font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--s-body);
  background: var(--s-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--s-ink);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}

h1 { font-size: 26px; margin-bottom: 22px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

a {
  color: var(--s-ink);
  text-decoration: none;
  transition: color var(--s-ease);
}

a:hover { color: var(--s-accent); }

hr { border-color: var(--s-line); opacity: 1; }

/* Pokojné, nie modré ohraničenie pri fokuse */
:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}

/* ============================================================================
   HLAVICKA — logo, menu a ikony na jednom riadku
   ========================================================================= */

#ws-hlavicka {
  background: var(--s-white);
  border: 0;
  border-bottom: 1px solid var(--s-line-soft);
  padding: 18px 0;
}

.ws-hl-riadok {
  display: flex;
  align-items: center;
  gap: 28px;
}

.ws-hl-logo { flex: 0 0 auto; margin: 0; }
.ws-hl-logo img { max-height: 46px; width: auto; display: block; }
.ws-hl-logo h1 { margin: 0; font-size: 25px; color: var(--s-accent); }

.ws-hl-menu { flex: 1 1 auto; min-width: 0; }

/* menu vo vnutri hlavicky nema vlastne pozadie ani ramceky */
.ws-hl-menu #menu,
.ws-hl-menu #menu.navbar {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  min-height: 0;
}

.ws-hl-menu #menu .navbar-nav { gap: 0; flex-wrap: wrap; }

.ws-hl-menu #menu .nav-link,
.ws-hl-menu #menu .navbar-nav > li > a {
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-ink);
  border-bottom: 0;
}

.ws-hl-menu #menu .nav-link:hover,
.ws-hl-menu #menu .navbar-nav > li > a:hover,
.ws-hl-menu #menu .nav-item:hover > .nav-link { color: var(--s-accent); border-bottom: 0; }

/* Akciova polozka cervenou -- ako v povodnom eshope */
.ws-hl-menu #menu .navbar-nav > li > a[href*="vypredaj"],
.ws-hl-menu #menu .navbar-nav > li > a[href*="akcia"] { color: var(--s-akcia); }

.ws-hl-menu #menu .dropdown-toggle::after { display: none; }

/* --- ikony vpravo --- */
.ws-hl-ikony {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-ik-odkaz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 0;
  color: var(--s-accent);
  font-size: 19px;
  cursor: pointer;
  transition: color var(--s-ease);
}

.ws-ik-odkaz:hover { color: var(--s-accent-dk); }

/* Vlastne ikony. Su to kresby s rovnakou vyskou (142.856), takze staci
   riadit vysku a sirka sa dorovna sama - opticky potom sedia vedla seba.
   Farbu beru z currentColor, cize aj zvyraznenie pri prejdeni mysou. */
.ws-ikona {
  height: 24px;
  width: auto;
  /* riadkovy prvok sa vycentruje aj vo flexe (hlavicka), aj v tlacidle
     so zarovnanim na stred (dlazdica produktu); blokovy by v tlacidle
     sadol dolava */
  display: inline-block;
  vertical-align: middle;
}

/* Sada ikon je len zasobaren tvarov, na stranke nic nezabera. */
.ws-ikony-sada { position: absolute; width: 0; height: 0; overflow: hidden; }

.ws-ikona-sm { height: 18px; }

/* Kosik v hlavicke */
.ws-hl-ikony #cart .btn {
  background: transparent;
  border: 0;
  color: var(--s-accent);
  font-size: 19px;
  /* rovnaka schranka ako .ws-ik-odkaz, aby ikona sedela v jednej linii */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  position: relative;
}

/* Obal kosika je blokovy, vo flexovom riadku by sedel hore. */
/* Obal kosika nesie spodny okraj 10px - vo vycentrovanom riadku
   ho ten okraj nadvihne o polovicu nad ostatne ikony. */
.ws-hl-ikony #cart { display: flex; align-items: center; margin: 0; }

.ws-hl-ikony #cart .btn:hover { color: var(--s-accent-dk); }

/* Text sumy je v tlacidle holy textovy uzol, nie v elemente -- skryjeme ho
   vynulovanim pisma a ikone velkost vratime. */
.ws-hl-ikony #cart .btn { font-size: 0; }
.ws-hl-ikony #cart .btn i { font-size: 19px; }
.ws-hl-ikony #cart .btn span { display: none; }

/* --- vyhladavanie pod ikonou --- */
.ws-hladanie { padding-top: 14px; }
.ws-hladanie form { margin: 0; max-width: 520px; margin-left: auto; }

@media (max-width: 991.98px) {
  .ws-hl-riadok { flex-wrap: wrap; gap: 12px; }
  .ws-hl-logo { order: 1; }
  .ws-hl-ikony { order: 2; margin-left: auto; }
  .ws-hl-menu { order: 3; flex-basis: 100%; }
  .ws-hl-logo img { max-height: 36px; }
  .ws-ik-odkaz { width: 38px; height: 38px; font-size: 17px; }
  /* pozor: kosiku sa velkost pisma nulovat nesmie zrusit -- text sumy
     je holy textovy uzol a znovu by sa objavil */
  .ws-hl-ikony #cart .btn { width: 38px; height: 38px; }
  .ws-hl-ikony #cart .btn i { font-size: 17px; }
  .ws-hl-ikony #cart .btn .ws-ikona { height: 21px; }
  .ws-ikona { height: 21px; }
}

/* ------------------------------------------------------------ horná lišta -- */

#top {
  background: var(--s-ink);
  border: 0;
  padding: 0;
  min-height: 0;
  font-size: 13px;
}

#top .container { padding-top: 7px; padding-bottom: 7px; }

#top,
#top a,
#top .dropdown-toggle,
#top strong { color: rgba(255, 255, 255, .82); }

#top a:hover,
#top .dropdown-toggle:hover { color: var(--s-white); }

#top .list-inline-item { margin-bottom: 0; }

/* --------------------------------------------------------------- hlavička -- */

header {
  background: var(--s-white);
  border-bottom: 1px solid var(--s-line);
  padding: 26px 0 22px;
}

#logo { margin: 0; }

#logo a,
#logo h1 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--s-ink);
  margin: 0;
}

#logo img { max-height: 52px; width: auto; }

/* Vyhľadávanie */
#search { box-shadow: none; }

#search .form-control,
#search .btn {
  height: 44px;
  border-color: var(--s-line);
  box-shadow: none;
}

#search .form-control {
  border-right: 0;
  border-radius: var(--s-radius) 0 0 var(--s-radius);
  font-size: 14px;
  color: var(--s-ink);
}

#search .form-control::placeholder { color: var(--s-muted); }

#search .form-control:focus {
  border-color: var(--s-ink);
  box-shadow: none;
}

#search .btn {
  background: var(--s-ink);
  border-color: var(--s-ink);
  color: var(--s-white);
  border-radius: 0 var(--s-radius) var(--s-radius) 0;
  padding-inline: 20px;
  transition: background var(--s-ease), border-color var(--s-ease);
}

#search .btn:hover {
  background: var(--s-accent);
  border-color: var(--s-accent);
}

/* Košík */
#header-cart .btn {
  background: transparent;
  border: 1px solid var(--s-line);
  color: var(--s-ink);
  border-radius: var(--s-radius);
  height: 44px;
  padding-inline: 18px;
  font-weight: 500;
  transition: border-color var(--s-ease), color var(--s-ease);
}

#header-cart .btn:hover {
  border-color: var(--s-ink);
  color: var(--s-ink);
}

/* --------------------------------------------------------------- navigácia -- */

/* .bg-primary z Bootstrapu ma !important, preto ho tu musime prebit rovnako */
#menu,
#menu.bg-primary,
#menu.navbar {
  background: var(--s-white) !important;
  background-image: none !important;   /* zakladny styl tu ma modry gradient */
  border: 0;                           /* ...a modry ramcek po obvode */
  border-bottom: 1px solid var(--s-line);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

/* Bootstrap riadi farby odkazov v navbare cez vlastne premenne */
#menu.navbar {
  --bs-navbar-color:        #1f1f1f;
  --bs-navbar-hover-color:  #d92d2d;
  --bs-navbar-active-color: #d92d2d;
  --bs-navbar-padding-y:    0;
  --bs-navbar-toggler-border-color: #e8e8e8;
  --bs-navbar-toggler-icon-bg: none;
}

#menu .navbar-nav { gap: 2px; }

#menu .navbar-toggler {
  border-color: var(--s-line);
  color: var(--s-ink);
  border-radius: var(--s-radius);
  padding: 7px 12px;
  margin: 10px 0;
}

/* Zakladny stylesheet ma "#menu .navbar-nav > li > a" s bielym textom a
   text-shadow (bolo to na modrej liste). Musime ho trafit rovnakym selektorom. */
#menu .nav-link,
#menu .dropdown-toggle,
#menu .navbar-nav > li > a {
  color: var(--s-ink);
  font-size: 14px;
  font-weight: 500;
  padding: 15px 14px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  text-shadow: none;
  transition: color var(--s-ease), border-color var(--s-ease);
}

#menu .nav-link:hover,
#menu .nav-item:hover > .nav-link,
#menu .nav-link.active,
#menu .navbar-nav > li > a:hover {
  color: var(--s-accent);
  border-bottom-color: var(--s-accent);
  background: transparent;
  background-color: transparent;
}

#menu .navbar-toggler i { color: var(--s-ink); border-color: var(--s-line); }

/* Popisok mobilneho menu ("Categories") bol biely kvoli modrej liste */
#menu > .d-lg-none,
#menu > div:not(.collapse):not(.container) {
  color: var(--s-ink);
  font-weight: 500;
  font-size: 14px;
}

#menu .dropdown-menu {
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow-up);
  padding: 6px;
  margin-top: 0;
}

#menu .dropdown-item {
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--s-body);
}

#menu .dropdown-item:hover {
  background: var(--s-wash);
  color: var(--s-accent);
}

/* ------------------------------------------------------------ drobčeková -- */

.breadcrumb {
  background: transparent;
  padding: 18px 0;
  margin-bottom: 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--s-line-soft);
}

.breadcrumb a { color: var(--s-muted); }
.breadcrumb a:hover { color: var(--s-accent); }
.breadcrumb-item.active { color: var(--s-ink); }

/* -------------------------------------------------------------- tlačidlá -- */

.btn {
  border-radius: var(--s-radius);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  transition: background var(--s-ease), border-color var(--s-ease), color var(--s-ease);
  box-shadow: none !important;
}

.btn-primary {
  background: var(--s-accent);
  border-color: var(--s-accent);
  color: var(--s-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--s-accent-dk) !important;
  border-color: var(--s-accent-dk) !important;
  color: var(--s-white) !important;
}

.btn-secondary,
.btn-light,
.btn-default {
  background: var(--s-white);
  border-color: var(--s-line);
  color: var(--s-ink);
}

.btn-secondary:hover,
.btn-light:hover,
.btn-default:hover {
  background: var(--s-wash);
  border-color: var(--s-ink);
  color: var(--s-ink);
}

.btn-danger { background: var(--s-accent); border-color: var(--s-accent); }
.btn-success { background: var(--s-ok); border-color: var(--s-ok); }

/* Porovnanie produktov nie je hlavna akcia -- nema byt cerveny blok */
#compare-total,
#compare-total.btn-primary {
  background: var(--s-white) !important;
  border: 1px solid var(--s-line) !important;
  color: var(--s-body) !important;
  font-weight: 400;
  font-size: 13.5px;
}

#compare-total:hover {
  border-color: var(--s-ink) !important;
  color: var(--s-ink) !important;
}

/* Lista nad vypisom (radenie, pocet, prepinac zobrazenia) */
#product-list .btn-group .btn,
.btn-group .btn-light {
  border-color: var(--s-line);
  color: var(--s-muted);
}

#product-list .btn-group .btn.active,
.btn-group .btn-light.active {
  background: var(--s-wash);
  color: var(--s-ink);
  border-color: var(--s-line);
}

/* ------------------------------------------------------- karta produktu -- */

.product-thumb {
  background: var(--s-white);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  margin-bottom: 26px;
  overflow: hidden;
  transition: border-color var(--s-ease), box-shadow var(--s-ease), transform var(--s-ease);
  display: flex;
  flex-direction: column;
  height: calc(100% - 26px);
}

.product-thumb:hover {
  border-color: #d8d8d8;
  box-shadow: var(--s-shadow-up);
  transform: translateY(-2px);
}

.product-thumb .image {
  position: relative;
  background: var(--s-white);
  overflow: hidden;
}

.product-thumb .image a { display: block; }

.product-thumb .image img {
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}

.product-thumb:hover .image img { transform: scale(1.035); }

.product-thumb .content,
.product-thumb .caption {
  padding: 16px 16px 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.product-thumb .description { flex: 1 1 auto; }

.product-thumb h4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 10px;
  min-height: 2.9em;
}

.product-thumb h4 a { color: var(--s-ink); }
.product-thumb h4 a:hover { color: var(--s-accent); }

/* Pozor: v OC4 ".description" obaluje aj nazov a cenu.
   V mriezke skryvame len samotny text popisu, teda odstavec. */
.product-thumb .description > p { display: none; }

.product-thumb .price {
  font-size: 17px;
  font-weight: 600;
  color: var(--s-ink);
  margin-bottom: 4px;
}

.product-thumb .price-old { font-size: 13px; margin-left: 6px; }

.product-thumb .price-tax { display: block; font-size: 11.5px; }

/* Hodnotenie -- utlmené, akcent len na aktívnych hviezdach */
.product-thumb .rating { margin-bottom: 8px; }
.product-thumb .rating .fa-star { color: #e0a800; font-size: 12px; }
.product-thumb .rating .fa-star-o,
.product-thumb .rating .far { color: var(--s-line); font-size: 12px; }

/* Lišta s tlačidlami v karte (OC4 ju ma v ".button") */
.product-thumb .button,
.product-thumb .button-group {
  border-top: 1px solid var(--s-line-soft);
  background: transparent;
  display: flex;
  padding: 0;
  margin-top: auto;
}

.product-thumb .button button,
.product-thumb .button-group button {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--s-line-soft);
  color: var(--s-muted);
  padding: 11px 6px;
  font-size: 13px;
  transition: background var(--s-ease), color var(--s-ease);
}

.product-thumb .button button:last-child,
.product-thumb .button-group button:last-child { border-right: 0; }

.product-thumb .button button:hover,
.product-thumb .button-group button:hover {
  background: var(--s-wash);
  color: var(--s-accent);
}

/* Prvé tlačidlo (do košíka) nesie akcent */
.product-thumb .button button:first-child,
.product-thumb .button-group button:first-child { flex: 2 1 auto; color: var(--s-ink); }

.product-thumb .button button:first-child:hover,
.product-thumb .button-group button:first-child:hover { background: var(--s-accent); color: var(--s-white); }

/* Formular s tlacidlami nesmie rozbit vysku karty */
.product-thumb .content > form { margin: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------------ detail produktu -- */

/* Ceny na detaile nie su v ziadnom obale s triedou, preto globalne pravidla.
   Zakladny styl OpenCartu farbi stary udaj oranzovou -- prehadzujeme to:
   akciova cena nesie akcent, povodna je siva a preciarknuta. */
/* Akciova cena ostava cervena -- zlata by sa na nej stratila */
.price-new {
  color: var(--s-akcia) !important;
  font-weight: 600;
}

.price-old {
  color: var(--s-muted) !important;
  font-weight: 400;
  text-decoration: line-through;
}

.price-tax { color: var(--s-muted); font-size: 12.5px; font-weight: 400; }

#content > .row .price-new,
#content > .row h2.price { font-size: 26px; }

#product .price,
.product-info .price {
  font-size: 26px;
  font-weight: 600;
  color: var(--s-ink);
}

.thumbnails,
#product-thumbnail {
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  overflow: hidden;
}

.nav-tabs {
  border-bottom: 1px solid var(--s-line);
  gap: 4px;
}

.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--s-muted);
  font-weight: 500;
  padding: 12px 18px;
}

.nav-tabs .nav-link:hover { color: var(--s-ink); border-bottom-color: var(--s-line); }

.nav-tabs .nav-link.active {
  color: var(--s-ink);
  border-bottom-color: var(--s-accent);
  background: transparent;
}

.tab-content { padding: 24px 0; }

/* --------------------------------------------------------- formuláre ----- */

.form-control,
.form-select {
  border-color: var(--s-line);
  border-radius: var(--s-radius);
  font-size: 14px;
  padding: 9px 12px;
  color: var(--s-ink);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--s-ink);
  box-shadow: none;
}

.form-label,
label { color: var(--s-ink); font-weight: 500; font-size: 13.5px; }

.input-group-text {
  background: var(--s-wash);
  border-color: var(--s-line);
  color: var(--s-muted);
}

/* ------------------------------------------------------------- postranné -- */

.list-group-item {
  border-color: var(--s-line-soft);
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--s-body);
}

.list-group-item:hover { background: var(--s-wash); color: var(--s-accent); }
.list-group-item.active {
  background: var(--s-wash);
  border-color: var(--s-line-soft);
  color: var(--s-accent);
  font-weight: 500;
}

.card {
  border-color: var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: none;
}

.card-header {
  background: var(--s-white);
  border-bottom: 1px solid var(--s-line);
  font-weight: 600;
  color: var(--s-ink);
}

/* --------------------------------------------------------------- tabuľky -- */

.table { color: var(--s-body); }

.table > :not(caption) > * > * {
  border-bottom-color: var(--s-line-soft);
  padding: 12px 10px;
}

.table thead th {
  color: var(--s-ink);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--s-line);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ----------------------------------------------------------- upozornenia -- */

.alert {
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  border-left-width: 3px;
  font-size: 13.5px;
  padding: 13px 16px;
}

.alert-success { background: #f2f8f5; border-left-color: var(--s-ok); color: #1f5c42; }
.alert-danger  { background: #fdf3f3; border-left-color: var(--s-accent); color: #8f1f1f; }
.alert-warning { background: #fdf9f0; border-left-color: #d99b2d; color: #7d5713; }
.alert-info    { background: var(--s-wash); border-left-color: var(--s-muted); color: var(--s-body); }

/* --------------------------------------------------------------- pätička -- */

footer {
  background: var(--s-ink);
  color: rgba(255, 255, 255, .62);
  margin-top: 70px;
  padding: 52px 0 0;
  font-size: 13.5px;
  border: 0;
}

footer h5 {
  color: var(--s-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

footer a { color: rgba(255, 255, 255, .62); }
footer a:hover { color: var(--s-white); }

footer ul { list-style: none; padding: 0; }
footer ul li { margin-bottom: 9px; }

footer hr {
  border-color: rgba(255, 255, 255, .12);
  margin: 40px 0 0;
}

footer .container > .row:last-child p,
footer p:last-child { padding: 20px 0; margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .45); }

/* ------------------------------------------------------------ stránkovanie */

.pagination { gap: 4px; }

.page-link {
  border-color: var(--s-line);
  border-radius: var(--s-radius) !important;
  color: var(--s-ink);
  padding: 8px 14px;
  font-size: 13.5px;
  box-shadow: none;
}

.page-link:hover { background: var(--s-wash); border-color: var(--s-ink); color: var(--s-ink); }

.page-item.active .page-link {
  background: var(--s-ink);
  border-color: var(--s-ink);
  color: var(--s-white);
}

/* ---------------------------------------------------------------- ostatné -- */

/* Jemnejší carousel/slideshow bez ťažkých tieňov */
.carousel-item img { border-radius: var(--s-radius); }
.carousel-control-prev-icon,
.carousel-control-next-icon { filter: invert(1) grayscale(1) opacity(.5); }

/* Zoznamové zobrazenie produktov */
.product-list .product-thumb { flex-direction: row; height: auto; }
.product-list .product-thumb .image { flex: 0 0 34%; max-width: 34%; }
.product-list .product-thumb .content,
.product-list .product-thumb .caption { text-align: left; }
.product-list .product-thumb .description > p { display: block; color: var(--s-muted); font-size: 13px; }
.product-list .product-thumb .button { border-top: 0; justify-content: flex-start; }
.product-list .product-thumb .button button { flex: 0 0 auto; padding-inline: 18px; }
.product-list .product-thumb h4 { min-height: 0; font-size: 16px; }

/* Nadpis sekcie na domovskej stránke */
main h2,
#content > h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 44px 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s-line);
}

/* Späť hore / drobnosti */
.form-check-input:checked { background-color: var(--s-accent); border-color: var(--s-accent); }
.text-danger { color: var(--s-accent) !important; }
.badge.bg-danger { background: var(--s-accent) !important; }

/* ============================================================================
   DOMOVSKA STRANKA — mozaika dlazdic a pas vyhod
   ========================================================================= */

.ws-mozaika {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 14px;
  margin: 26px 0 8px;
}

.ws-mz-bok {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

/* Stredny stlpec urcuje vysku celej mozaiky; bocne dlazdice sa k nej dotiahnu.
   Bez toho by mali nulovu vysku a obrazky s object-fit by zmizli. */
.ws-mz-stred {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
}

/* --- dlazdica --- */
.ws-dlazdica {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--s-wash);
  min-height: 0;
}

.ws-dlazdica img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.ws-dlazdica:hover img { transform: scale(1.04); }

/* --- stitok s nazvom kategorie --- */
.ws-stitok {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-block;
  padding: 9px 20px;
  background: var(--s-white);
  border: 1px solid var(--s-accent);
  color: var(--s-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--s-ease), color var(--s-ease);
}

.ws-dlazdica:hover .ws-stitok,
.ws-stitok-stred:hover {
  background: var(--s-accent);
  color: var(--s-white);
}

.ws-stitok-stred { left: 22px; bottom: 22px; }

/* --- stredny slider --- */
.ws-mz-stred .carousel,
.ws-mz-stred .carousel-inner,
.ws-mz-stred .carousel-item { height: 100%; }

.ws-mz-stred .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.ws-mozaika .carousel-indicators {
  margin-bottom: 14px;
  gap: 8px;
}

.ws-mozaika .carousel-indicators [data-bs-target] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .35);
  background: transparent;
  opacity: 1;
  margin: 0;
}

.ws-mozaika .carousel-indicators .active { background: var(--s-ink); border-color: var(--s-ink); }

.ws-mozaika .carousel-control-prev,
.ws-mozaika .carousel-control-next { width: 8%; opacity: .55; }
.ws-mozaika .carousel-control-prev:hover,
.ws-mozaika .carousel-control-next:hover { opacity: 1; }

/* ------------------------------------------------------------ pas vyhod -- */

.ws-vyhody {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin: 46px 0 10px;
  padding: 30px 0 4px;
  border-top: 1px solid var(--s-line);
}

.ws-vyhoda {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.ws-vyhoda img {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.ws-vyhoda-text { min-width: 0; }

.ws-vyhoda h5 {
  margin: 4px 0 8px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--s-accent);
  display: inline-block;
  color: var(--s-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ws-vyhoda p {
  margin: 0;
  color: var(--s-body);
  font-size: 13px;
  line-height: 1.55;
}

/* Modul HTML nema mat vlastny nadpis ani odsadenie */
.ws-mozaika + h3, .ws-vyhody + h3 { display: none; }

/* --------------------------------------------------------------- mobil ---- */

@media (max-width: 991.98px) {
  .ws-mozaika { grid-template-columns: 1fr 1fr; }
  .ws-mz-stred { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 9; }
  .ws-mz-bok { grid-template-rows: auto; }
  .ws-dlazdica { aspect-ratio: 4 / 3; }
  .ws-vyhody { grid-template-columns: 1fr 1fr; gap: 22px; }

  header { padding: 18px 0; }
  #logo a, #logo h1 { font-size: 22px; }
  #menu .nav-link { padding: 12px 10px; border-bottom: 0; }
  footer { margin-top: 46px; padding-top: 38px; }
}

@media (max-width: 575.98px) {
  .ws-mozaika { grid-template-columns: 1fr; }
  .ws-vyhody { grid-template-columns: 1fr; }
  .ws-stitok { left: 12px; bottom: 12px; padding: 7px 14px; font-size: 12px; }

  h1 { font-size: 21px; }
  .product-thumb h4 { min-height: 0; }
  .product-list .product-thumb { flex-direction: column; }
  .product-list .product-thumb .image { flex-basis: auto; max-width: 100%; }
}


/* Popis kategorie. Je na konci stranky, lebo je pisany pre vyhladavace,
   nie pre citatela - ale ked ho niekto precita, nech je citatelny:
   cez celu sirku a s odsadenim od produktov. */
.ws-kat-popis {
  margin: 32px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--s-border, #e8e8e8);
  color: #5c5c5c;
  font-size: 15px;
  line-height: 1.7;
}

.ws-kat-popis p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Stranka produktu -- cena, volby a nakup
   Pravy stlpec je hlavna predajna plocha, tak je zbaleny do jedneho bloku:
   nazov, cena, volby ako pilulky a siroke tlacidlo do kosika pod nimi.
   ========================================================================== */

.ws-produkt-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ws-produkt-nazov {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--s-ink);
}

/* Doplnkove udaje na jeden riadok -- predtym to bol zoznam pod sebou
   a zaberal pol obrazovky bez toho, aby nieco predal. */
.ws-produkt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: .82rem;
  color: var(--s-muted);
  margin: -4px 0 0;
}

.ws-produkt-meta .ws-znacka {
  font-weight: 600;
  color: var(--s-ink);
  text-decoration: none;
}

.ws-produkt-meta .ws-znacka:hover { color: var(--s-accent); }

.ws-produkt-meta .ws-sklad { color: var(--s-ok); }

.ws-hodnotenie {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  margin: -6px 0 0;
}

.ws-hodnotenie .ws-hviezdy { color: var(--s-accent); letter-spacing: 1px; }
.ws-hodnotenie a { color: var(--s-muted); text-decoration: underline; }
.ws-hodnotenie a:hover { color: var(--s-ink); }

/* --- cena ---------------------------------------------------------------- */

.ws-cena {
  padding: 14px 0 2px;
  border-top: 1px solid var(--s-line);
}

.ws-cena-riadok {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.ws-cena-hlavna {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--s-ink);
}

.ws-cena-hlavna.ws-cena-akciova { color: var(--s-akcia); }

.ws-cena-dph {
  font-size: .85rem;
  color: var(--s-muted);
}

.ws-cena-pod { margin-top: 4px; }

.ws-cena-povodne { font-size: .95rem; color: var(--s-muted); }
.ws-cena-povodne s { text-decoration-thickness: 1px; }

.ws-cena-zlava {
  font-size: .95rem;
  font-weight: 600;
  color: var(--s-akcia);
}

.ws-cena-bez-dane {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--s-muted);
}

.ws-mnozstevne {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: .82rem;
  color: var(--s-body);
}

/* --- volby ako pilulky --------------------------------------------------- */

.ws-volby {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--s-line);
}

.ws-volba-hlavicka {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.ws-volba-nazov {
  font-size: .88rem;
  font-weight: 600;
  color: var(--s-ink);
}

.ws-volba-vybrane { font-size: .88rem; color: var(--s-body); }

.ws-volba.required .ws-volba-nazov::after {
  content: " *";
  color: var(--s-akcia);
}

.ws-pilulky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Prepinac je skryty, ale ostava dosiahnutelny klavesnicou -- preto
   nie je display:none, len bez rozmeru. */
.ws-pilulka-vstup {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ws-pilulka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 52px;
  padding: 10px 16px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: var(--s-white);
  color: var(--s-ink);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--s-ease), background var(--s-ease), color var(--s-ease);
  justify-content: center;
}

.ws-pilulka:hover { border-color: var(--s-ink); }

.ws-pilulka img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
}

.ws-pilulka small { color: var(--s-muted); }

.ws-pilulka-vstup:checked + .ws-pilulka {
  border-color: var(--s-ink);
  border-width: 2px;
  padding: 9px 15px;
  font-weight: 600;
}

.ws-pilulka-vstup:focus-visible + .ws-pilulka {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}

.ws-pilulky.is-invalid .ws-pilulka { border-color: var(--s-akcia); }

/* --- nakup --------------------------------------------------------------- */

.ws-kupit {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 22px;
}

.ws-mnozstvo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 74px;
}

.ws-mnozstvo label {
  font-size: .72rem;
  color: var(--s-muted);
  margin-bottom: 3px;
}

.ws-mnozstvo .form-control {
  height: 54px;
  text-align: center;
  border-radius: var(--s-radius);
  font-size: 1rem;
}

/* Tlacidlo ma zabrat cely zvysok riadku -- je to hlavna akcia stranky. */
.ws-do-kosika {
  flex: 1 1 auto;
  align-self: flex-end;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.ws-do-kosika .ws-ikona { filter: brightness(0) invert(1); }

.ws-srdce {
  align-self: flex-end;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 1px solid var(--s-line);
  border-radius: 50%;
  background: var(--s-white);
  color: var(--s-muted);
  font-size: 1.05rem;
  transition: color var(--s-ease), border-color var(--s-ease);
}

.ws-srdce:hover {
  color: var(--s-akcia);
  border-color: var(--s-akcia);
}

@media (max-width: 575px) {
  .ws-produkt-nazov { font-size: 1.35rem; }
  .ws-cena-hlavna { font-size: 1.8rem; }
  .ws-kupit { flex-wrap: wrap; }
  .ws-do-kosika { order: 3; flex: 1 1 100%; }
}

/* Mnozstvo ide nad tlacidlo, aby tlacidlo mohlo zabrat cely stlpec.
   Prepisuje sa tu povodne rozlozenie .ws-kupit z bloku vyssie. */
.ws-mnozstvo-riadok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.ws-mnozstvo-riadok label {
  font-size: .8rem;
  color: var(--s-muted);
  margin: 0;
}

.ws-mnozstvo-riadok .form-control {
  width: 72px;
  height: 42px;
  text-align: center;
}

.ws-kupit { margin-top: 10px; }

/* Text tlacidla sa nesmie lamat -- v uzkom stlpci sa inak "Vlozit do kosika"
   rozpadne na dva riadky a tlacidlo vyzera rozbite. */
.ws-do-kosika {
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
}

.ws-do-kosika .ws-ikona { flex: 0 0 auto; }

/* Vypredana hodnota volby ostava vidiet -- zosednuta a preskrtnuta.
   Zakaznik tak vie, ze velkost existuje a je len docasne nedostupna. */
.ws-pilulka-vypredane {
  color: var(--s-muted);
  border-color: var(--s-line-soft);
  background: var(--s-wash);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--s-muted);
  text-decoration-thickness: 1px;
}

.ws-pilulka-vypredane:hover { border-color: var(--s-line-soft); }

.ws-pilulka-vypredane img { opacity: .45; }

/* ==========================================================================
   Obrazky bez ramcekov
   Bootstrap dava .img-thumbnail 1px ciaru, vypln a zaoblenie; na produkte aj
   v kategorii to rezalo fotky do ramcekov a posobilo zastaralo. Ramcek ide
   prec aj z dlazdice produktu -- na oddelenie staci biela plocha a odstup.
   ========================================================================== */

.image .img-thumbnail,
#content > .row .img-thumbnail,
.ws-pilulka .img-thumbnail {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

/* Dlazdica produktu vo vypise -- bez obrysu, len jemne nadvihnutie pri
   nabehnuti mysou, aby bolo stale citelne, ze je to jedna polozka. */
.product-thumb {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-thumb:hover {
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}

.product-thumb .image {
  border-radius: var(--s-radius);
  background: var(--s-wash);
}

.product-thumb .content,
.product-thumb .caption {
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   Tlacidla v dlazdici produktu
   Namiesto troch rovnakych ikoniek v pasiku je jedno velke tlacidlo do kosika
   a srdce vedla neho -- rovnaka dvojica ako na stranke produktu. Porovnanie
   je zatial vypnute v sablone (zobrazit_porovnanie), styl mu tu ostava.
   -------------------------------------------------------------------------- */

.product-thumb .button {
  border-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  margin-top: auto;
}

.product-thumb .button button {
  border-right: 0;
  padding: 0;
}

.product-thumb .button .ws-dlazdica-kosik {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--s-accent);
  color: var(--s-white);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--s-ease);
}

.product-thumb .button .ws-dlazdica-kosik:hover { background: var(--s-accent-dk); color: var(--s-white); }

.product-thumb .button .ws-dlazdica-kosik .ws-ikona { filter: brightness(0) invert(1); flex: 0 0 auto; }

.product-thumb .button .ws-dlazdica-srdce,
.product-thumb .button .ws-dlazdica-porovnat {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--s-line);
  border-radius: 50%;
  background: var(--s-white);
  color: var(--s-muted);
  font-size: .95rem;
  transition: color var(--s-ease), border-color var(--s-ease);
}

.product-thumb .button .ws-dlazdica-srdce:hover,
.product-thumb .button .ws-dlazdica-porovnat:hover {
  background: var(--s-white);
  color: var(--s-akcia);
  border-color: var(--s-akcia);
}

/* V uzkych stlpcoch sa text na tlacidle skryje, ostane samotna ikonka */
@media (max-width: 400px) {
  .product-thumb .button .ws-dlazdica-kosik span { display: none; }
}