/* ==========================================================================
   DIVA La VIDA — vlastní styly
   --------------------------------------------------------------------------
   Verze:    1
   Nasazeno: 11. 8. 2026
   Umístění: Vzhled a obsah -> Soubory
   Načítá se z Vzhled a obsah -> Editor -> HTML kód -> Záhlaví

   !! POZOR: po každé úpravě tohoto souboru zvyš ?v=1 na ?v=2 atd.
      v <link> tagu v Záhlaví. Jinak zákaznicím zůstane stará verze
      v cache a budeš si myslet, že změna nefunguje.

   Obsah:
     1. Venus — navigace a layout
     2. Typografie
     3. Úvodní strana — hlavička
     4. Newsletter
     5. Galerie (jgm) — proměnné
     6. Krátký popisek produktů
     7. Barevnost odkazů
   ========================================================================== */


/* ==========================================================================
   1. VENUS — NAVIGACE A LAYOUT
   ========================================================================== */

@media screen and (min-width: 768px) {
  .navigation-in > ul > li.ext > ul > li > a {
    display: block;
  }

  .navigation-in > ul > li.ext > ul > li > div {
    padding-left: 12px;
  }

  .navigation-in > ul > li.ext > ul > li:not(.has-third-level) > div > a {
    margin-bottom: 0;
    line-height: 22px;
    height: 64px;
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 1200px) {
  .basic-description {
    padding-right: 48px;
  }

  .extended-description {
    width: 200px;
  }

  .popis-nadpis,
  .extended-description h3 {
    font-size: 28px;
  }
}


/* ==========================================================================
   2. TYPOGRAFIE
   --------------------------------------------------------------------------
   Přebíjí fonty, které si Venus nastavuje sama. Proto ten dlouhý seznam
   selektorů a !important — Venus si font vynucuje na jednotlivých prvcích,
   takže dědičnost z body sem nedosáhne.

   POZNÁMKA: Shoptet umí font nastavit i v administraci
   (Vzhled a obsah -> Editor -> font pro nadpisy / font textu).
   Pokud to Venus respektuje, celá tato sekce je zbytečná a dá se smazat.
   Otestuj to, než na tom začneš cokoli ručně opravovat.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.navigation-in > ul > li > a,
.extended-banner-title,
.fav-cat li > div a,
.menu-helper > span,
.p .name,
.prices,
.prices > div,
.vote-initials,
.vote-name,
.news-item .text .title,
.social-login-buttons-divider,
.subcategories li a .text,
.price-standard,
.price-final,
.price-additional,
#productsAlternative::before,
.benefitBanner__title,
#variants::before,
.variant-name,
#ratingTab::before,
.rate-wrapper .rate-average,
.vote-form > form::before,
#productDiscussion::before,
.cart-table .main-link,
.free-gift::before,
.free-gift-name,
.cart-table tr.related td::before,
.cart-related-name,
.price-primary,
.payment-info b,
.payment-shipping-price,
.cart-item.cart-item-gift > div > strong,
.id--15 .cart-table .p-name,
.id--15 .cart-table .p-price,
#search-group-categories .search-results-group-list ul li a,
.empty-content-404::before,
.obj-detail .p-name a,
.klient-centrum.obj-detail .content td:last-child,
.step-title,
.empty-cart-boxes ul li a,
.dklab_instagram_widget_heading > .text,
.plugin-fixed-header__name,
.fvDoplnek .fvDoplnek-produkt .fvDoplnek-text .price,
.fvDoplnek-text .name,
.hodnoceni-hp .autor,
.blog-hp::before,
.id--18 .row-summary dl dt:first-child,
.id--18 .row-summary dl dd:nth-child(2),
.hodnoceni::before {
  font-family: 'Libre Franklin', sans-serif !important;
}

@media screen and (max-width: 767px) {
  .navigation-in > ul li a {
    font-family: 'Libre Franklin', sans-serif !important;
  }
}


/* ==========================================================================
   3. ÚVODNÍ STRANA — HLAVIČKA
   --------------------------------------------------------------------------
   Na úvodní straně je hlavička v normálním toku (ne přes carousel),
   proto se text přebarvuje na černý.
   ========================================================================== */

@media screen and (min-width: 1200px) {
  .type-index #header {
    position: relative !important;
    top: 0 !important;
  }

  .type-index .top-navigation-bar {
    position: relative !important;
    top: 0 !important;
    background-color: #F5F5F5 !important;
  }

  .type-index .navigation-in > ul > li > a,
  .type-index .lupa,
  .type-index .top-nav-button::before,
  .type-index .top-navigation-bar a,
  .type-index .dropdown button {
    color: #000;
  }

  .type-index .menu-helper:not(:hover),
  .type-index .menu-helper:not(:hover) > span {
    color: #000;
  }

  .type-index .btn.cart-count::before,
  .type-index a.btn.cart-count::before,
  .type-index .btn.cart-count .cart-price {
    color: #000;
  }

  .type-index .navigation-buttons > a[data-target="cart"] i,
  .cart-count:not(.full)::after {
    background-color: #000;
    color: #fff;
  }

  .type-index .site-name img {
    -webkit-filter: none;
    filter: none;
  }

  .type-index .dropdown {
    border-color: #C4C4C4 !important;
  }

  .type-index .dropdown .caret::before {
    color: #000 !important;
  }

  .one-column-body .carousel-inner > .item.carousel-link a::before,
  .one-column-body .carousel-inner > .item:not(.carousel-link)::before {
    display: none;
  }
}


/* ==========================================================================
   4. NEWSLETTER
   ========================================================================== */

.odber {
  border-top: 0;
}


/* ==========================================================================
   5. GALERIE (jgm) — PROMĚNNÉ
   --------------------------------------------------------------------------
   Musí se načítat PO style.css doplňku jgm-gallery.
   ========================================================================== */

:root {
  --gallery-radius: 0;
  --gallery-arrow-opacity: .6;
  --gallery-arrow-background: #fff;
  --gallery-arrow-color: #000;

  --gallery-play-background: var(--color-secondary);
  --gallery-play-color: #fff;

  --gallery-main-border-color: transparent;
  --gallery-thumbnail-border-color: transparent;
  --gallery-thumbnail-border-color-active: #000;

  --gallery-lightbox-background: rgba(0, 0, 0, 0.7);
  --gallery-lightbox-arrow-background: transparent;
  --gallery-lightbox-arrow-color: #fff;
}


/* ==========================================================================
   6. KRÁTKÝ POPISEK PRODUKTŮ
   ========================================================================== */

.diva-short-desc {
  font-size: 16px;
  line-height: 1.45;
  color: #1f2340;
  max-width: 980px;
}

.diva-short-desc p,
.diva-short-desc div,
.diva-short-desc li,
.diva-short-desc a,
.diva-short-desc span {
  font-size: inherit;
  line-height: inherit;
}

.diva-short-desc-intro {
  margin: 0 0 16px 0;
}

.diva-short-desc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 42px;
  row-gap: 8px;
  margin: 0 0 12px 0;
}

.diva-short-desc-grid-single {
  grid-template-columns: 1fr;
}

.diva-short-desc-box {
  display: block;
}

.diva-short-desc-title {
  font-size: 1em;
  font-weight: 700;
  color: inherit;
  display: inline;
  line-height: 1.1;
}

.diva-short-desc-title::before {
  content: "\2665";
  display: inline-block;
  color: #e8b9bc;
  font-size: 23px;
  line-height: 1;
  margin-right: 8px;
  vertical-align: baseline;
  position: relative;
  top: 3px;
}

.diva-short-desc-text {
  display: inline;
  margin-left: 4px;
}

.diva-short-desc hr {
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 12px 0;
}

.diva-short-desc-checks,
.diva-short-desc-faq {
  margin: 0;
  padding-left: 1.1em;
}

.diva-short-desc-checks li,
.diva-short-desc-faq li {
  margin: 0 0 1px 0;
  padding: 0;
  line-height: 1.18;
}

.diva-short-desc-checks li:last-child,
.diva-short-desc-faq li:last-child {
  margin-bottom: 0;
}

.diva-short-desc-faq-title {
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 6px 0;
}

/* FAQ místo odrážek = otazník */
.diva-short-desc-faq {
  list-style: none;
  padding-left: 0;
}

.diva-short-desc-faq li {
  list-style: none;
  position: relative;
  padding-left: 22px;
}

.diva-short-desc-faq li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  color: #e8b9bc;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.diva-short-desc a {
  text-decoration: none;
}

.diva-short-desc a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .diva-short-desc {
    font-size: 15px;
    line-height: 1.4;
  }

  .diva-short-desc-grid {
    grid-template-columns: 1fr;
    row-gap: 6px;
    margin-bottom: 10px;
  }

  .diva-short-desc-intro {
    margin-bottom: 12px;
  }

  .diva-short-desc hr {
    margin: 10px 0;
  }

  .diva-short-desc-checks li,
  .diva-short-desc-faq li {
    margin: 0;
    line-height: 1.15;
  }

  .diva-short-desc-faq li {
    padding-left: 20px;
  }

  .diva-short-desc-faq li::before {
    font-size: 21px;
  }
}


/* ==========================================================================
   7. BAREVNOST ODKAZŮ
   --------------------------------------------------------------------------
   Odděluje odkazy v textu od konverzní cesty. Venus váže obojí na jednu
   hodnotu (Konverzní barva), proto se to musí rozdělit tady.

   Konverzních tlačítek se to NEDOTÝKÁ — vylučuje cokoli, co má v třídě
   "btn" nebo "button". Když nějaký selektor netrefí, prvek jen zůstane
   růžový; nic se nerozbije.

   Nasazuj jako poslední. Do té doby drž celou sekci v komentáři.
   ========================================================================== */

:root {
  --dlv-link: #3c7781;
  --dlv-link-hover: #2f5c65;
  --dlv-ink: #1a1a1a;
}

#content a:not([class*="btn"]):not([class*="button"]),
#footer a:not([class*="btn"]),
.breadcrumbs a {
  color: var(--dlv-link);
}

#content a:not([class*="btn"]):not([class*="button"]):hover,
#footer a:not([class*="btn"]):hover,
.breadcrumbs a:hover {
  color: var(--dlv-link-hover);
}

/* Podtržení jen v běžném textu.
   .diva-short-desc je vyloučený schválně — sekce 6 tam podtržení
   záměrně vypíná a #content p a by ji specificitou přebilo. */
.basic-description a:not([class*="btn"]):not(.diva-short-desc a),
#content p a:not([class*="btn"]),
#content li a:not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.diva-short-desc a,
.diva-short-desc p a,
.diva-short-desc li a {
  text-decoration: none;
}

.diva-short-desc a:hover {
  text-decoration: underline;
}

/* Názvy produktů zůstávají tmavé */
.products .name,
.products .name a,
.products a .name {
  color: var(--dlv-ink);
  text-decoration: none;
}