/* ==========================================================================
   woodlop-modern.css
   Cílené úpravy pro Woodlop / Shoptet Classic
   ========================================================================== */

/* ==========================================================================
   PALETA
   ========================================================================== */
:root{
  --ink: #1f1a16;
  --muted: #6b5f57;
  --cream: #fbf7f2;
  --paper: #ffffff;
  --line: #e8dfd5;
  --wood: #914b10;
  --wood-dark: #6f370b;
  --honey: #d39a3a;
  --menu-text-on-wood: rgba(255,255,255,0.85);
}

/* ==========================================================================
   ZÁKLAD
   ========================================================================== */
body{
  background-color: var(--cream) !important;
  color: var(--ink) !important;
}

a,
.link-like{
  color: var(--wood-dark) !important;
  text-decoration: none !important;
}

a:hover,
.link-like:hover{
  color: var(--wood) !important;
  text-decoration: underline !important;
}

#content h1,
#content h2,
#content h3,
#content h4{
  color: #373737 !important;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-navigation-bar{
  background: #efe6dc !important;
  color: var(--muted) !important;
  border: 0 !important;
}

.top-navigation-bar a{
  color: var(--muted) !important;
}

.top-navigation-bar a:hover{
  color: var(--ink) !important;
}

/* ==========================================================================
   HEADER + HORNÍ MENU
   Zatím jen velmi opatrně, bez agresivních zásahů do layoutu
   ========================================================================== */
@media screen and (min-width: 768px){
  #header{
    background: var(--paper) !important;
    box-shadow: 0 4px 20px rgba(31,26,22,0.08) !important;
    border-bottom-color: #7b3d0d !important;
  }

  .header-top{
    background: var(--paper) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .navigation-in{
    background: linear-gradient(180deg, #9a5314 0%, #7b3d0d 100%) !important;
  }

  .navigation-in > ul > li > a{
    color: rgba(255,255,255,0.93) !important;
  }

  .navigation-in > ul > li > a:hover{
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.10) !important;
    text-decoration: none !important;
  }

  .navigation-in > ul > li.ext.exp > ul{
    background: #ffffff !important;
    border-top: 3px solid var(--honey) !important;
  }

  .navigation-in > ul > li.ext.exp > ul > li > a{
    color: var(--ink) !important;
  }

  .navigation-in > ul > li.ext.exp > ul > li > a:hover{
    background: #fbf4ea !important;
    color: var(--wood-dark) !important;
    text-decoration: none !important;
  }
}

/* ==========================================================================
   KOŠÍK
   ========================================================================== */
.header-top .btn.cart-count::before{
  background: var(--wood) !important;
  color: #ffffff !important;
}

.header-top .btn.cart-count:hover::before{
  background: var(--wood-dark) !important;
}

/* ==========================================================================
   LEVÉ MENU – POUZE SKUTEČNÁ STRUKTURA Z TVÉHO HTML
   HTML:
   #categories
     .categories
       .topic
         a
           .cat-trigger
   ========================================================================== */

.sidebar{
  background: transparent !important;
}

.sidebar-inner{
  padding-top: 0 !important;
}

.sidebar .box.box-categories{
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 20px rgba(31,26,22,0.08) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.sidebar .box.box-categories .pageElement__heading{
  margin: 0 !important;
  padding: 12px 16px !important;
  background: linear-gradient(180deg, #9a5314 0%, #7b3d0d 100%) !important;
  border: 0 !important;
}

.sidebar .box.box-categories .pageElement__heading span{
  color: #ffffff !important;
}

/* wrapper menu – bez manipulace se šířkou */
#categories{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* jedna položka */
#categories > .categories{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* topic wrapper */
#categories > .categories > .topic{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* odkaz – důležité:
   - nechávám šířku na auto/100%
   - žádné min-width
   - box-sizing kvůli paddingu
*/
#categories > .categories > .topic > a{
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 34px 10px 14px !important;
  background: var(--wood) !important;
  color: var(--menu-text-on-wood) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  border: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
}

#categories > .categories > .topic > a:hover{
  background: var(--wood-dark) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* zobáček */
#categories > .categories > .topic > a > .cat-trigger{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  color: var(--menu-text-on-wood) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* pokud šablona kreslí zobáček přes pseudo-element */
#categories > .categories > .topic > a > .cat-trigger::before,
#categories > .categories > .topic > a > .cat-trigger::after{
  color: var(--menu-text-on-wood) !important;
  border-color: var(--menu-text-on-wood) !important;
}

/* hover na zobáček */
#categories > .categories > .topic > a:hover > .cat-trigger,
#categories > .categories > .topic > a:hover > .cat-trigger::before,
#categories > .categories > .topic > a:hover > .cat-trigger::after{
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* expanded stav */
#categories > .categories.expanded > .topic > a > .cat-trigger,
#categories > .categories.expanded > .topic > a > .cat-trigger::before,
#categories > .categories.expanded > .topic > a > .cat-trigger::after{
  color: var(--honey) !important;
  border-color: var(--honey) !important;
}

/* external / expandable / expanded – pouze barevně, bez změn šířek */
#categories > .categories.expandable > .topic > a,
#categories > .categories.expanded > .topic > a,
#categories > .categories.external > .topic > a{
  color: var(--menu-text-on-wood) !important;
}

/* ==========================================================================
   FILTRY V SIDEBARU
   ========================================================================== */
.sidebar-inner > div.filters-wrapper{
  background: #fff7ee !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  margin: 0 0 16px 0 !important;
  padding: 16px !important;
}

.sidebar-inner > div.filters-wrapper .filter-total-count{
  color: var(--ink) !important;
}

.sidebar-inner > div.filters-wrapper input[type="checkbox"] + label::before,
.sidebar-inner > div.filters-wrapper input[type="radio"] + label::before{
  border-color: var(--line) !important;
}

/* ==========================================================================
   KLIENTSKÉ CENTRUM
   ========================================================================== */
.sidebar-inner > div.box.client-center-box{
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 16px !important;
}

.sidebar-inner > div.box.client-center-box a{
  color: var(--wood-dark) !important;
}

/* ==========================================================================
   PRODUKTOVÉ KARTY
   ========================================================================== */
.products-block .p{
  border: 1px solid #e8e3dc !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.products-block .product{
  transition: transform .2s, box-shadow .2s !important;
}

.products-block .product:hover{
  transform: scale(1.02) !important;
}

.products-block .product:hover .p{
  box-shadow: 0 8px 28px rgba(31,26,22,0.12) !important;
  border-color: #ffffff !important;
}

.advanced-order .products-block .product:hover{
  transform: none !important;
}

.advanced-order .products-block .product:hover .p{
  box-shadow: none !important;
  border: 1px solid #dedad7 !important;
}

/* ==========================================================================
   TLAČÍTKA
   ========================================================================== */
.btn-primary,
.btn-danger,
input[type="submit"].btn-primary{
  background-color: var(--wood) !important;
  border-color: var(--wood-dark) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

.btn-primary:hover,
.btn-danger:hover,
input[type="submit"].btn-primary:hover{
  background-color: var(--wood-dark) !important;
  border-color: var(--wood-dark) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#footer{
  background: #2a201b !important;
  color: #efe6dc !important;
}

#footer .custom-footer{
  background: #fbf7f2 !important;
  color: var(--ink) !important;
  border-top: 1px solid rgba(232,223,213,0.9) !important;
}

#footer .custom-footer a{
  color: var(--wood-dark) !important;
}

#footer .custom-footer a:hover{
  color: var(--wood) !important;
}

#footer .custom-footer h4::before{
  background: var(--honey) !important;
  color: #2a201b !important;
}

.contact-box ul li > span::before{
  background: var(--honey) !important;
  color: #2a201b !important;
}

#footer .footer-bottom{
  background: transparent !important;
  color: rgba(239,230,220,0.75) !important;
}

#footer .footer-bottom a{
  color: rgba(239,230,220,0.75) !important;
}

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media screen and (max-width: 767px){
  .top-navigation-bar{
    background: linear-gradient(180deg, #9a5314 0%, #7b3d0d 100%) !important;
    color: rgba(255,255,255,0.9) !important;
  }

  .top-navigation-bar a{
    color: rgba(255,255,255,0.92) !important;
  }

  .responsive-tools{
    background: linear-gradient(180deg, #9a5314 0%, #7b3d0d 100%) !important;
  }

  #header .search-form{
    background: linear-gradient(180deg, #9a5314 0%, #7b3d0d 100%) !important;
  }

  .header-top .btn.cart-count::before{
    color: var(--wood) !important;
    background-color: #ffffff !important;
  }

  .responsive-tools > a[data-target="navigation"]::before{
    color: var(--wood) !important;
    background-color: #ffffff !important;
  }

  .header-top .btn.cart-count:hover::before{
    color: #ffffff !important;
    background-color: var(--wood-dark) !important;
  }

  .responsive-tools > a[data-target="navigation"]:hover::before{
    color: #ffffff !important;
    background-color: var(--wood-dark) !important;
  }

  .navigation-in li.appended-category > a{
    color: var(--wood) !important;
  }

  .navigation-in > ul > li.newMenu > a{
    color: var(--wood) !important;
  }

  .navigation-in > ul > li.newMenu > a:before{
    background: var(--wood) !important;
  }
}