/* ============================================================================
   WALKORA — DESIGNOVÝ LAYER NAD VENUS TÉMATEM (v4 — bez zásahů do headeru)
   ----------------------------------------------------------------------------
   Princip: tento soubor se načítá AŽ PO style.css (Venus), takže při stejné
   specificitě selektoru vyhrává vždy on — !important tedy používáme jen tam,
   kde to sama Venus dělá (jinak bychom prohráli, protože !important vždy
   porazí ne-!important pravidlo bez ohledu na pořadí).

   Header (logo, horní lišta, hlavní navigace, mobilní hlavička) je záměrně
   VYNECHANÝ — řešíme ho samostatně, krok po kroku, až tahle základní vrstva
   (fonty, barvy, zbytek webu) bude ověřeně v pořádku.

   Bloky:
   1. Design tokeny
   2. Typografie
   3. Homepage — benefit banner (jen barvy, ne pozice/header)
   4. Produkty a kategorie
   5. Detail produktu — vlastní varianty (barvy/velikosti)
   6. Patička a blog
   7. Právní dokumenty (šablony s vyplňovacími poli)
   8. Layout / kontejnery
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. DESIGN TOKENY
   ---------------------------------------------------------------------------- */
:root {
  --wk-gold: #BA9736;
  --wk-dark: #2A2A2A;
  --wk-text: #403F41;
  --wk-nav-bg: #f2f2f2;
  --wk-muted: #808080;
  --wk-line: silver;
  --wk-font-body: 'Barlow', sans-serif;
  --wk-font-display: 'Bodoni Moda', serif;
}


/* ----------------------------------------------------------------------------
   2. TYPOGRAFIE
   Venus generuje font-family pravidla pro nadpisy/text přes vlastní systém
   fontů a vždy je vydává s !important (viz style.css) — proto ho tu musíme
   použít taky, jinak bychom i se stejnou specificitou prohráli.
   ---------------------------------------------------------------------------- */
body, div, p, li, label, input, a,
.navigation-in > ul > li > a, .prices, .prices > div, .price-standard,
.price-final, .price-additional, .menu-helper > span,
#carousel .extended-banner-title, #footer .custom-footer > div h4,
#footer .custom-footer > div h3, .quantity .increase::before,
.quantity .decrease::before, .box-categories > h4, #filters h4,
.product-appendix, .advanced-order .h2, .p-price .price-final, .products-inline > div .p .p-in .p-in-in .name,
.subcategories li a .text, .menu-helper ul.menu-level-1 a {
  font-family: var(--wk-font-body) !important; /* Venus tu má !important */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .extended-banner-title,
.fav-cat li > div a, .p .name, .vote-initials, .vote-name,
.news-item .text .title, .social-login-buttons-divider,
#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 {
  font-family: var(--wk-font-display) !important; /* Venus tu má !important */
}

/* Barva textu — Venus tu !important nepoužívá, takže stačí stejná specificita */
body, p, li, .prices, .p .name, .benefitBanner__title,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  color: var(--wk-text);
}

.navigation-in ul li a b {
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Nadpisy bloků v patičce (OBCHOD, INFORMACE, ...) — zlatě */
#footer .custom-footer > div h4,
#footer .custom-footer > div h3 {
  color: var(--wk-gold);
}


/* ----------------------------------------------------------------------------
   3. HOMEPAGE — POZICE HEADERU NAD CAROUSELEM
   Venus na homepage s carouselem dává #header do position:absolute a nechá
   ho plavat NAD hero obrázkem (typický overlay design). Chceme header jako
   pevný pruh NAD carouselem, ne přes něj — vrátíme ho zpět do normálního
   toku (position:relative — stejné chování v layoutu jako static, ale
   pořád funguje jako kotva pro absolutně pozicované potomky, jako je
   nav#navigation).
   ---------------------------------------------------------------------------- */
.type-index:not(.no-carousel):not(.multiple-columns-body) #header {
  position: relative;
  top: 0;
}

/* .top-navigation-bar je navržená jako průhledný pruh přes hero obrázek
   (rgba(2,2,2,0.4)). Teď, když #header už nepřekrývá hero, zůstává nad
   bílým pozadím stránky — a průhlednost tak místo tmavého efektu dá jen
   šedou. Dáme jí stejnou pozici jako headeru a plnou tmavou barvu, jakou
   už přirozeně používá stav "bez carouselu" pod 1200px. */
.type-index:not(.no-carousel):not(.multiple-columns-body) .top-navigation-bar {
  position: relative;
  top: 0;
  background-color: var(--wk-dark);
}


/* ----------------------------------------------------------------------------
   3b. HEADER — BARVY (podle návrhu)
   Layout/pozice necháváme čistě na Venus (viz výše) — tady jen barvy.
   ---------------------------------------------------------------------------- */

   

/* Horní tmavá lišta — text a odkazy zlatě/bíle */
.top-navigation-bar, .top-navigation-bar a { color: #fff; }
.top-navigation-contacts strong { color: var(--wk-gold); }

/* Ikony lupy a přihlášení v mobilní verzi horní lišty (jiné odkazy než
   desktopové .lupa/.top-nav-button) — dědí bílou z .top-navigation-bar,
   chceme zlatou. */
.responsive-tools > a[data-target="search"]::before,
.responsive-tools > a[data-target="login"]::before {
  color: var(--wk-gold);
}

/* Logo — Venus standardně invertuje logo do bíla (pro použití na tmavém
   pozadí); teď ho chceme v původní barvě. Velikost (60px) i výšku
   headeru (80px) necháváme na původních Venus hodnotách. */
#header .site-name a img {
    filter: none !important;
}

@media (max-width: 767px) {
    #header .site-name a img {
        filter: brightness(0) invert(1) !important;
    }
}

/* Venus dělá #header černý na všech stránkách KROMĚ homepage
   (body:not(.type-index) #header{background-color:#000}) — např. na
   krocích objednávky (objednavka/krok-1, krok-2). Chceme světlý header
   všude stejně. */
#header {
  background-color: var(--wk-nav-bg) !important; /* Venus tu nemá !important, ale selektor s :not() má vyšší specificitu, jistíme */
}

/* Hlavní menu — světlé pozadí, tmavý text, zlatý hover.
   Jen na desktopu (≥768px) — Venus má na mobilu vlastní tmavé rozbalovací
   menu (černé pozadí, bílý text), které chceme zachovat beze změny. Bez
   media query by tahle pravidla přepsala i mobilní verzi a způsobila
   nečitelný bílý text na světlém pozadí. */
@media (min-width: 768px) {
  nav#navigation {
    background-color: var(--wk-nav-bg);
  }
  .navigation-in > ul > li > a {
    color: var(--wk-dark);
  }
  .navigation-in > ul > li:hover > a {
    color: var(--wk-gold) !important; /* Venus tu má na hover !important, musíme taky */
    background-color: var(--wk-nav-bg);
  }
}

/* Ikony (lupa, přihlášení, košík) */
.top-nav-button::before,
#header .cart-count::before {
  color: var(--wk-gold);
}
.menu-helper { color: var(--wk-dark); }
.menu-helper > span { color: var(--wk-dark); }
.menu-helper::before { color: var(--wk-gold); }
.menu-helper:hover {
  color: var(--wk-dark);
  background-color: transparent;
}
.menu-helper:hover::before {
  color: var(--wk-gold);
}

.lupa { color: var(--wk-gold); }
.btn.cart-count .cart-price { color: var(--wk-dark); }
.navigation-buttons > a[data-target="cart"] i,
.cart-count:not(.full)::after {
  background-color: var(--wk-dark);
  color: var(--wk-gold);
}

/* Venus má ve své šabloně .navigation-in > ul > li > a{font-family:"span",serif !important}
   — stejná specificita jako naše obecné pravidlo výše, takže výsledek závisí
   na pořadí v cascade a někde to Venus vyhraje. Přidáváme id-specifickou
   verzi (#navigation), která má vyšší specificitu a vyhraje bez ohledu na
   pořadí. Cílíme na VŠECHNY odkazy uvnitř menu (ne jen první úroveň přes
   ">"), protože podkategorie jsou vnořené hlouběji (li > div > a). */
nav#navigation .navigation-in a {
  font-family: var(--wk-font-body) !important;
}

@media (max-width: 767px) {
  nav#navigation .navigation-in a {
    font-size: 15px !important; /* Venus tu má !important */
  }
}
.cart-count:focus,
.cart-count:active,
.cart-count:hover {
  outline: none;
  box-shadow: none;
}


/* ----------------------------------------------------------------------------
   4. HOMEPAGE — BENEFIT BANNER (jen barvy/rozestupy, žádný zásah do headeru)
   ---------------------------------------------------------------------------- */
.benefitBanner { background-color: #D9D9D9; }
.type-index .benefitBanner { margin-top: 0; }
.benefitBanner__item {
  margin-top: 28px;
  margin-bottom: 28px;
  border-left: 1px solid var(--wk-line);
}
.benefitBanner__item:first-child { border-left: 0; }
.benefitBanner__title { font-size: 20px; }
.benefitBanner__data { color: var(--wk-muted); }

@media (max-width: 767px) {
  .benefitBanner__item {
    border-left: 0;
    border-top: 1px solid var(--wk-line);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .benefitBanner__item:first-child { border-top: 0; }
}


/* ----------------------------------------------------------------------------
   4. PRODUKTY A KATEGORIE
   ---------------------------------------------------------------------------- */
.breadcrumbs-wrapper { background-color: #D9D9D9 !important; }

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

.products-block .image, .products-block .name { margin-bottom: 20px; }
.products-block.products .p .name {
  font-size: 18px;
  font-family: var(--wk-font-body) !important; /* Venus tu má !important */
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.products-block.products .p .price strong,
.products-block.products .p .price span { font-size: 20px; margin-bottom: 10px; }
.pagination__list { margin-bottom: 30px; }

.subcategories.with-image a:hover { color: #fff; background: var(--wk-gold); text-decoration: none; }
.subcategories.with-image .text { font-weight: 500; }
.subcategories.with-image a:hover .text { color: #fff; }
.subcategories .text { padding-left: 16px; }

.subcategories a:hover {
  color: #fff;
  background: var(--wk-gold);
  text-decoration: none;
}
.subcategories a:hover .text {
  color: #fff;
}


/* ----------------------------------------------------------------------------
   5. DETAIL PRODUKTU — VLASTNÍ VARIANTY (BARVY / VELIKOSTI)
   Čistě naše komponenta, ve Venus neexistuje → bez !important.
   ---------------------------------------------------------------------------- */
.variant-list select { position: absolute; left: -9999px; }

.custom-colors { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #ddd; cursor: pointer; transition: 0.15s ease; position: relative;
}
.color-swatch.active { border: 2px solid #000; transform: scale(1.1); z-index: 2; }
.color-swatch.disabled { opacity: 0.25; pointer-events: none; filter: grayscale(100%); }

.custom-sizes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.size-swatch {
  width: 42px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #ccc; cursor: pointer; background: #fff; transition: 0.15s ease; font-size: 13px;
}
.size-swatch.active { background: #f2c94c; border-color: #caa300; font-weight: bold; }
.size-swatch.disabled { opacity: 0.25; text-decoration: line-through; pointer-events: none; }

.selected-color-label { margin-top: 8px; font-size: 13px; color: #333; }


/* ----------------------------------------------------------------------------
   6. PATIČKA A BLOG
   ---------------------------------------------------------------------------- */
#footer { background-color: var(--wk-dark); }
.odber { background-color: #D6D6D6; }
.odber h4, .odber h3 { color: var(--wk-text); }
.odber .form-group label.whole-width { color: var(--wk-text); }
.odber .form-group label.whole-width a { color: var(--wk-gold); }
.custom-footer .news-item-widget time { display: none; }
.news-item-detail time { display: none; }
.news-item-detail .text { border-bottom: 0; margin-bottom: 0; }


/* ----------------------------------------------------------------------------
   7. PRÁVNÍ DOKUMENTY (šablony s vyplňovacími poli)
   ---------------------------------------------------------------------------- */
p.preamble { margin: 0 0 14px 0; }
p.clause { margin: 0 0 10px 0; }
p.subclause { margin: 0 0 8px 24px; }
p.letter { margin: 0 0 8px 48px; }
p.continuation { margin: 0 0 10px 24px; font-style: italic; }
.num { font-weight: 600; margin-right: 4px; }
.fill { font-weight: bold; background: #fff3b0; padding: 0 2px; }


/* ----------------------------------------------------------------------------
   8. LAYOUT / KONTEJNERY
   Venus nastavuje .content-inner max-width:940px na ≥1200px bez !important
   (single-class) → stejná specificita u nás stačí k přepsání.
   ---------------------------------------------------------------------------- */
@media (min-width: 1200px) { .content-inner { max-width: 100%; } }

/* ----------------------------------------------------------------------------
   9. MŘÍŽKA OBLÍBENÝCH KATEGORIÍ ("Objevte naši obuv")
   Vlastní blok vložený jako HTML do Uvítacího textu na titulní straně —
   ve Venus/Shoptetu neexistuje jako přetahovatelný prvek pro hlavní obsah,
   proto vlastní třídy bez konfliktu s Venus (žádný !important potřeba).
   ---------------------------------------------------------------------------- */
.wk-cat-grid {
  max-width: 1178px;
  margin: 0 auto;
  padding: 64px 20px;
  text-align: center;
}
 
.wk-cat-grid__eyebrow {
  font-family: var(--wk-font-body);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wk-muted);
  margin: 0 0 8px;
}
 
.wk-cat-grid__heading {
  font-family: var(--wk-font-display);
  font-size: 32px;
  color: var(--wk-dark);
  margin: 0 0 40px;
  position: relative;
  padding-bottom: 16px;
}
.wk-cat-grid__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--wk-gold);
}
 
.wk-cat-grid__items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
 
.wk-cat-grid__item {
  display: block;
  text-decoration: none;
  color: var(--wk-dark);
}
.wk-cat-grid__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 12px;
  transition: transform 0.25s ease;
}
.wk-cat-grid__item:hover img {
  transform: scale(1.03);
}
.wk-cat-grid__item span {
  display: block;
  font-family: var(--wk-font-display);
  font-size: 17px;
}
 
@media (max-width: 991px) {
  .wk-cat-grid__items { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
}
@media (max-width: 560px) {
  .wk-cat-grid { padding: 40px 16px; }
  .wk-cat-grid__heading { font-size: 26px; margin-bottom: 28px; }
  .wk-cat-grid__items { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


/*@media (max-width: 767px) {

  #header .site-name-wrapper {
    display: block !important;
    position: fixed !important;

    left: 44px !important;
    top: 0 !important;

    width: auto !important;
    height: 52px !important;

    z-index: 100 !important;
  }

  #header .site-name {
    display: block !important;
    width: auto !important;
    height: 52px !important;
  }

  #header .site-name a {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 52px !important;
  }

  #header .site-name a img {
    display: block !important;
    width: auto !important;
    height: auto !important;

    max-width: 140px !important;
    max-height: 36px !important;

    filter: brightness(0) invert(1) !important;
  }

}*/