@charset "UTF-8";
/* ==========================================================================
   kosmetikaskladem.cz - vlastni styly
   Autor:  Jan Barborik | janbarborik.cz
   Verze:  1.7.0
   Datum:  2026-08-24

   Umisteni: /user/documents/jb-main.css
   Napojeni: Administrace > Vzhled a obsah > HTML kody > Zahlavi
             <link rel="stylesheet" href="/user/documents/jb-main.css?v=1.7.0">

   PRAVIDLA:
   - po kazde zmene zvysit verzi v hlavicce I v odkazu ?v= v administraci
   - barvy jen pres promenne v :root, nikdy natvrdo
   - nove pravidlo patri do sve sekce, ne na konec souboru
   - sezonni upravy jen do sekce 9 a s komentarem OD-DO
   - komentare bez diakritiky

   POZNAMKA K SABLONE DISCO:
   Zahlavi ma v sablone hodne specificke selektory. Nase pravidla se
   neprosadi, dokud pred ne nedame "body #header". Neni potreba !important,
   staci vyssi specificita.
   ========================================================================== */


/* 1. Promenne
   ========================================================================== */
:root {
  --jb-accent:        #ff1193;  /* konverzni / primarni barva sablony */
  --jb-accent-hover:  #ffacd9;  /* svetly odstin, hover */
  --jb-accent-dark:   #b3006e;  /* tmavsi odstin pro text na svetlem */
  --jb-text:          #222;
  --jb-border:        #9a9a9a;

  --jb-panel:         #f4f4f4;  /* podklad levého panelu */
  --jb-panel-border:  #dcdcdc;  /* jemny ramecek boxu a tlacitek */
  --jb-panel-hover:   #e9e9e9;  /* hover podklad */

  --jb-shadow:        0 2px 10px rgba(0, 0, 0, 0.12);
  --jb-shadow-strong: 0 2px 14px rgba(0, 0, 0, 0.18);
}


/* 2. Typografie a nadpisy
   ========================================================================== */
h1 {
  color: var(--jb-accent);
}

/* uvodni stranka - nadpis na stred */
.welcome h1 {
  text-align: center !important;   /* sablona Disco zarovnava vlevo */
}


/* 3. Zahlavi, vyhledavani a hlavni menu
   ========================================================================== */

/* horizontalni linka pres celou sirku pod logem, vyhledavanim a kosikem */
body #header .header-bottom {
  border-top: none;
}

/* vyhledavaci pole - stin, aby v bilem zahlavi drzelo tvar */
body #header .search .search-form .query-input {
  box-shadow: var(--jb-shadow);
  transition: box-shadow 0.15s ease;
}
body #header .search .search-form .query-input:focus {
  box-shadow: var(--jb-shadow-strong);
}

@media screen and (min-width: 981px) {
  /* mensi popisky polozek hlavniho menu, sablona ma 18px */
  body #header .header-bottom .navigation-in > ul > li > a {
    font-size: 16px;
  }
}


/* 4. Vypis produktu, stitky a tlacitka
   ========================================================================== */
.add-to-cart-button,
.add-to-cart-button span,
.load-products {
  color: #fff !important;   /* sablona dava tmavy text na tmave tlacitko */
}

.flag.flag-discount {
  background-color: var(--jb-accent);
}


/* 5. Obsahove stranky
   ========================================================================== */

/* Doprava a platba - tabulka prepravcu */
.in-doprava-a-platba th,
.in-doprava-a-platba td {
  border: 1px solid var(--jb-border);
  padding: 5px;
}


/* 6. Kategorie - levy panel a nejprodavanejsi
   ========================================================================== */

/* cely levy panel s kategoriemi podkresleny sedou */
body #categories {
  background: var(--jb-panel);
  border-radius: 8px;
  padding: 8px 0;
  margin-bottom: 24px;
}

/* uspornejsi vypis - mensi pismo, tesnejsi radkovani, vetsi odsazeni urovni
   sablona ma L1 20.8px a vsude padding 11px, coz panel zbytecne natahuje */
body #categories .categories .topic > a {
  font-size: 16px;
  line-height: 1.25;
  padding: 7px 12px 7px 32px;
}
body #categories .categories > ul > li > a {
  font-size: 15px;
  line-height: 1.25;
  padding: 4px 12px 4px 44px;
}
body #categories .categories > ul > li > ul > li > a {
  font-size: 14px;
  line-height: 1.25;
  padding: 3px 12px 3px 56px;
}
body #categories .categories > ul > li > ul > li > ul > li > a {
  font-size: 14px;
  line-height: 1.25;
  padding: 3px 12px 3px 68px;
}

/* rozbalovaci +/- : sablona je lepi na levou hranu panelu a ma natvrdo
   top:15px, coz po zmenseni polozek prestalo sedet.
   Odsadime je dovnitr a vystredime na vysku polozky.
   Kotva musi byt position:relative, jinak se 50 % pocita od jineho predka. */
body #categories .categories .topic > a,
body #categories .categories ul li > a {
  position: relative;
}
body #categories .categories .topic > a > .cat-trigger,
body #categories .categories ul li > a > .cat-trigger {
  left: 8px;
  top: calc(50% - 6px);
}

/* Nejprodavanejsi nad vypisem produktu - decentni box */
body .products-top-wrapper {
  background: #fff;
  border: 1px solid var(--jb-panel-border);
  border-radius: 8px;
  padding: 16px 20px 8px;
  margin-bottom: 28px;
}
body .products-top-wrapper .products-top-header {
  font-size: 16px;
  margin: 0 0 14px;
}

/* mensi texty v boxu, aby dlouhe nazvy netahaly box do vysky */
body .products-top-wrapper .product .name {
  font-size: 13px;
  line-height: 1.3;
}
body .products-top-wrapper .product .availability,
body .products-top-wrapper .product .availability span,
body .products-top-wrapper .product .p-code {
  font-size: 12px;
}
body .products-top-wrapper .product .prices,
body .products-top-wrapper .product .price,
body .products-top-wrapper .product .price-standard {
  font-size: 13px;
}
body .products-top-wrapper .product .price-final strong {
  font-size: 15px;   /* sablona ma 19px */
}


/* 7. Detail produktu
   ========================================================================== */

/* Benefitni pruh nad zalozkami - sablona ma nadpis 17.6px a text 16px,
   coz je v detailu produktu zbytecne velke. Na mobilu jeste o kus mensi.
   Cilime jen na variantu v detailu produktu (position--benefitProduct),
   pruh na titulni strance zustava jak je. */
body .benefitBanner.position--benefitProduct .benefitBanner__title {
  font-size: 15px;
  line-height: 1.35;
}
body .benefitBanner.position--benefitProduct .benefitBanner__data,
body .benefitBanner.position--benefitProduct .benefitBanner__content {
  font-size: 13.5px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  body .benefitBanner.position--benefitProduct .benefitBanner__title {
    font-size: 14px;
  }
  body .benefitBanner.position--benefitProduct .benefitBanner__data,
  body .benefitBanner.position--benefitProduct .benefitBanner__content {
    font-size: 13px;
  }
}

/* Zalozky Popis / Diskuze pod benefity
   Sablona je vykresluje jako display:table s auto marginy, takze se centruji
   a nevypadaji jako prepinatelna tlacitka. Prepiname na flex zarovnany doleva
   a delame z odkazu tlacitka. Selektor musi byt takhle dlouhy, jinak se
   auto marginy sablony neprebiji. */
body .shp-tabs-holder {
  text-align: left;
}
body .shp-tabs-row .shp-tabs-holder ul.shp-tabs.visible-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  width: auto;
}
body ul.shp-tabs > li.shp-tab {
  display: block;
}
body ul.shp-tabs > li.shp-tab > a.shp-tab-link {
  font-size: 15px;      /* sablona ma 24px */
  font-weight: 600;
  padding: 9px 20px;
  border: 1px solid var(--jb-panel-border);
  border-radius: 6px;
  background: var(--jb-panel);
  color: var(--jb-text);
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body ul.shp-tabs > li.shp-tab > a.shp-tab-link:hover {
  background: var(--jb-panel-hover);
  border-color: #c9c9c9;
  text-decoration: none;
}
body ul.shp-tabs > li.shp-tab.active > a.shp-tab-link {
  background: var(--jb-accent);
  border-color: var(--jb-accent);
  color: #fff;
  text-decoration: none;
}

/* sablona dava aktivnimu LI text-decoration: underline v tmave barve.
   Podtrzeni se propaguje do odkazu a neda se zrusit na potomkovi,
   proto prebarvujeme primo na LI. Dlouhy selektor je nutny. */
body .shp-tabs-row .shp-tabs-holder ul.shp-tabs > li.shp-tab.active {
  text-decoration-color: #fff;
}


/* 8. Kosik a objednavka
   ========================================================================== */
/* zatim prazdne */


/* 9. Sezonni a docasne
   ==========================================================================
   Vzdy s komentarem OD-DO a po sezone smazat.
   Priklad:
   OD 2026-11-15 DO 2027-01-06 - vanocni ikonka v menu
   .menu-item-XXXX a::after { content: url(/user/documents/upload/xmas2.png); }
   ========================================================================== */
/* zatim prazdne */