body
{
    font-family: 'Montserrat', sans-serif;
    /*background-color: #ecf5e7;*/
    background-color: #ffffff;
    
}

input{  
  border: 0;
  width: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.card-footer
{
  background-color: transparent;
  border-top:none;

}

.navbar .dropdown-menu {
 background: #BFBFBF;
 border: none;
 border-radius: 0
  
}

.dropdown-submenu a::after {
transform: rotate(-90deg);
right: 3px;
top: 40%;
}

.dropdown-submenu:hover .dropdown-menu,
.dropdown-submenu:focus .dropdown-menu {
display: block;
margin-top: -1px;
margin-left: -1px;
top: 0px;
left: 100%;
/*min-height: 100%;*/
}

/*.dropdown-menu {
min-height: 200%;
}*/

.dropdowns{
  float:right;

}

.active  {
    color:#3CC755;
}

.card
{
border:none;
background:none;
background-color: none

}
.card-footer
{
  padding: 0
}

  .dropdown-item:hover
  {
   color:#3CC755;
   background-color: #fff;
  }


.nav-link
{
  color:#fff;
}

@media (min-width: 992px){
  .dropdown-menu .dropdown-toggle:after{
    border-top: .3em solid transparent;
      border-right: 0;
      border-bottom: .3em solid transparent;
      border-left: .3em solid;
  }
  .navimg {
    position:absolute;
    top:0;
    right:0;
    height:42%;
}
 .navimg1 {
    position:absolute;
    bottom:0;
    right:0;
    height:42%;
}
  .dropdown-menu .dropdown-menu{
    margin-left:0; margin-right: 0;
  }
  .dropdown-menu li{
    /*position: relative;*/
  }
  .submenu ul {
    position:relative;
    overflow:auto;
}
  .nav-item .submenu{ 
    display: none;
    position: absolute;
    left:100%; top:0;
    width: auto
  }
  .nav-item .submenu-left{ 
    right:100%; left:auto;
  }
  .dropdown-menu > li:hover{ background-color: #f1f1f1 }
  .dropdown-menu > li:hover > .submenu{
    display: block;
  }
  .dropdowns{
    /*float:none;*/
      display: inline-flex;
    /*padding-right: 30px;*/
  }
  .dropdowns  li
  {
    margin-right: 0;
  }
}

.dropdown-item:hover
{
   color:#3CC755;
   background-color: #fff;
}
.nav-link:hover
{
  color:#3CC755;
}
.active  {
    color:#3CC755;
}
.carousel-inner {
/*max-height: 500px;*/
width:100%;
max-height: 500px !important;
}

.btn.btn-outline-black {
  background-color: transparent;
  border: 2px solid var(--ltn__primary-color, #131617);
  color: var(--ltn__primary-color, #131617);
}
.btn.btn-outline-black:hover {
  background-color: var(--ltn__primary-color, #131617);
  border-color: var(--ltn__primary-color, #131617);
  color: var(--white, #fff);
}

/* Cart quantity stepper: same look as the theme's .cart-plus-minus,
   but under its own class so the theme's global qtybutton-injection
   script (which only runs once and would vanish after the cart's
   AJAX refresh) never touches it. */
.qty-stepper {
  border: 2px solid var(--border-color-11, #ededed);
  height: 63px;
  line-height: 56px;
  width: 140px;
  text-align: center;
  background-color: var(--white, #fff);
}

.qty .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}
.qty .count input
{
  width: 12%;
}
.qty .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: #000;
  width: 29px;
  height: 29px;
  font: 30px/1 Arial,sans-serif;
  text-align: center;
  border: 1px solid #000;
  }
.qty .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: #000;
  width: 29px;
  height: 29px;
  font: 30px/1 Arial,sans-serif;
  text-align: center;
  border: 1px solid #000;
  background-clip: padding-box;
}
.minus:hover{
  background-color: #000 !important;
  color:#fff;
}
.plus:hover{
  background-color: #000 !important;
  color:#fff;
}
/*.borderBtm > span
{
border-bottom: 2px solid red;
font-size: 20px;
font-weight: 700 
}
#my-image-text{ 
position: relative; 
vertical-align: bottom;
bottom: 30px; 
/*width: 500px; */
/*text-align: center;
color: #fff;
font-weight: 700;*/

  
/*}*/
div .img1
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0.65) 75%), url('../images/gotvene.jpg'),no-repeat;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/gotvene.jpg') no-repeat;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/gotvene.jpg') no-repeat;
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/gotvene.jpg') no-repeat;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/gotvene.jpg'),no-repeat;
  background-size:cover;
  width: 100%;
  height: 236px

}
div .img
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0.65) 75%), url('../images/zdravoslovno.jpg'),no-repeat;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/zdravoslovno.jpg') no-repeat;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/zdravoslovno.jpg') no-repeat;
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/zdravoslovno.jpg') no-repeat;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/zdravoslovno.jpg'),no-repeat;
  background-size:cover;
  width: 100%;
  height: 236px

}
div .img2
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0.65) 75%), url('../images/bbeto.jpg'),no-repeat;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/bbeto.jpg') no-repeat;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/bbeto.jpg') no-repeat;
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/bbeto.jpg') no-repeat;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 75%), url('../images/bbeto.jpg'),no-repeat;
  background-size:cover;
  width: 100%;
  height: 236px

}

a{
  text-decoration: none !important;
}
.rows
{
  height: 500px;
}
.rows
{
  width: 100%;
  height: 400px;
}
.shadow
{
-webkit-box-shadow: 10px 10px 10px  0 grey;
-moz-box-shadow: 10px 10px 10px 0  grey;
box-shadow: 10px 10px 10px 0  grey;
}
#accordion .card {
  text-transform: uppercase;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  /*background-color: #fff;*/
  background-clip: border-box;
  border: none;
  border-radius: .25rem;
}
#accordion a,
#accordionSort a
{
   color:#000;
   font-size: 15px;
 
}
#accordion >.card
{
  border:1px solid #000;
  padding:2px;
  /*margin-top: 10px;*/

 
}
#accordionSort >.card{
    border: 1px solid #000;
    border-radius: 0
    }

 .card-header{
      border:none !important;
        font-weight: 700;
    
  }
  .card-header
  {
            background-color:transparent;
            padding: 5px
  }

  .card-body
  {
      background-color: transparent;
      padding:0;
      padding-left: 10px;
     
  }
  
  #acordion-1 .card
  {
      border:none  !important;
  }

table tr th 
{
    border:none !important;
    font-weight: 400
}
table tbody tr:last-child
{
  border-bottom:none !important;
  padding: 2%;
}
.table td
{
  vertical-align: middle;
}
.noborders td {
  border:0;
  padding: 2%
}
.table-hover > tbody > tr.hidden:hover > td {
background-color: white;
}

.hour
{

  font-size: 18px;
}

.btn{
  margin:/*10px 0px;*/
  box-shadow: none !important; 
  border-radius: 0;
}

.dropdowns .dropdown-menu{

width: 420px !important;
border: none;
background:transparent;
/*min-height: 300px ;*/
height: 300px


}

.scrollbar{height: 200px; overflow-y: auto; overflow-x: hidden;padding: 10px }

.scrollbar .row
{
  border-bottom: 1px solid #efefef;
}
.cart-detail{
  padding:15px 0px;
}
.cart-detail-img img{
  width:100%;
  height:100%;
  padding-left:15px;
}
.cart-detail-product p{
  margin:0px;
  color:#000;
  font-weight:500;
}
.cart-detail .price{
  font-size:12px;
  margin-right:10px;
  font-weight:500;
}
.cart-detail .count{
  color:#C2C2DC;
}
.checkout{

  padding-top: 15px;
}
.checkout .btn-primary{

  height:50px;
}
.dropdown-menu:before{
content: " ";
position:absolute;
top:-20px;
right:50px;

}
.form-control:focus {
  outline: 0 !important;
  border-color: initial;
  box-shadow: none;
}
.logo img
{
      height: 48px;
}
.dropdowns  li
{
    display: ruby-base;
margin-right: 13px;
}
.search input,
.remove input{
height: 48px
}
.logo a{
padding: 0
}
#map {
height: 100%;
}
.has-search .form-control {
  padding-left: 2.375rem;
  border: none

}

.form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
  border: none
}
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color:none;
  outline: none;
  box-shadow:none
}
/* .dekstop {
position: absolute;
top: 100%;
/*bottom: 0;*/
/*width: 100%;*/
/*}*/
  #my-image-text{ 
  position: relative; 
  vertical-align: bottom;
  bottom: 30px; 
  /*width: 500px; */
  text-align: center;
  color: #fff;
  font-weight: 700;

    
}
/*.footer .mobile
{
  width: 100%;
  position: relative!important;
}
.footer-widget ul li a
{
  color: #000;
}*/
.btn-block
{
height: 100%
}
.media-object {
  height: 80px;

}
#scnd .delete-item
{
    display: none!important;
}


.carousel-indicators .active
{
   background-color: red;
}
@media only screen and(min-width:890px)
{ 
.navbar .dropdown-menu {
 background: #ede4ee;
 border: none;
 height: auto;
  }
  .container
  {
    max-width: 100%;
  }
  .dropdowns
  {
    float: none!important
  }
}
@media screen and (max-width: 600px) {
  /*.divHide .div2,*/
  .divHide .div3,
  .divHide .div4,
  .divHide .div5,
  .divHide .div6 {
    display: none;
  }
  /*.divHide .div0,
  .divHide .div1,*/
  .different-col-6-size .col-6 {
    max-width: 47%;
      /*margin-right: 0!important;*/
    /*margin: auto!important;*/
  }

  .different-col-6-size .qty .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: sub;
    color: #000;
    width: 19px;
    height: 19px;
    font: 19px/1 Arial,sans-serif;
    text-align: center;
    border: 1px solid #000;
    background-clip: padding-box;
  }

  .different-col-6-size .qty .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: sub;
    color: #000;
    width: 19px;
    height: 19px;
    font: 19px/1 Arial,sans-serif;
    text-align: center;
    border: 1px solid #000;
    background-clip: padding-box;
  }

  .different-col-6-size .btn {
    font-size: 0.60rem;
  }

  h4 {
    font-size: 1rem;
  }

  .weight {
    font-size: 12px;
  }

  .card-img-top {
    width: 70%;
    margin: 0 auto;
  }

  .new, .promo {
    font-size: 10px;
  }

  .fa-2x {
    font-size: 1rem;
  }

  .navbar .dropdown-menu {
    background: #ede4ee;
    border: none;
    height:auto;
    }

  #accordionSort a {
    color: #000;
    font-size: 9px;
  }

  h5 {
    font-size: 0.75rem;
  }

  .qty .count {
    min-width: 8px;
  }

  /*.qty .count {
    min-width: 8px
  }*/

  .time {
    font-size: 10px;
  }

  .navimg, .navimg1 {
    display: none;
  }

  .produ>.div {
    margin-right: 0!important;
    margin-left: 0!important;
  }

  .scndCarosel .card {
    margin-top: 0!important;
  }

  .buy .add_to_cart {
    padding: 0.1rem.75rem;
    font-size: 0.75rem;
  }

  .buy .qty .minus {
    width: 19px;
    height: 19px;
    font: 19px/1 Arial,sans-serif;
    vertical-align: middle;
  }

  .buy .qty .plus {
    width: 19px;
    height: 19px;
    font: 19px/1 Arial,sans-serif;
    vertical-align: middle;
  }

  .qty .count {
    min-width:15px;
  }

  /**** zoom image ****/
  .zoomContainer {
    z-index: 9999;
  }

  .zoomWindow {
    z-index: 9999;
  }
}

.ui-front {
	z-index: 10001 !important;
}

/* Categories toggle in the mobile off-canvas menu: chevron up/down (matching
   the desktop leftside category sidebar's .ltn__cat-toggle) instead of the
   theme's default +/-, at every nesting level. The vendor's line-based
   ::before/::after glyph is replaced by a real fa-chevron-up/fa-chevron-down
   <i>, whose class js/theme-main.js's mobileltn__utilizeMenu() swaps on
   open/close. */
.ltn__utilize-menu > ul > li .menu-expand::before,
.ltn__utilize-menu > ul > li .menu-expand::after {
  /* css/shops.css loads before css/style.css in header.php, so the vendor's
     equal-specificity rule (which draws the old +/- bars) would otherwise
     win — !important is required here. */
  content: none !important;
}

.ltn__utilize-menu > ul > li .menu-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #7e7e7e;
}

/* Fix: the vendor icon box is a fixed 44px tall (sized for the top-level row),
   which is taller than these shorter subcategory rows, pushing the chevron
   down onto the row's bottom border instead of centering it on the text.
   Must be a fixed height, NOT 100% — a subcategory <li> also wraps its own
   expanded sub-menu once opened, so 100% would stretch this box (and the
   flex-centered chevron inside it) down to the middle of that whole expanded
   list instead of staying pinned to its own row. */
.ltn__utilize-menu > ul > li .sub-menu > li > .menu-expand {
  height: 26px;
}

/* Categories widget: black text and border always; text turns the theme's
   green on hover or while open, border stays black */
.ltn__utilize-menu > ul > li.ltn__categories-toggle,
.ltn__utilize-menu > ul > li.ltn__categories-toggle .sub-menu li {
  border-bottom: 1px solid #000;
}

.ltn__utilize-menu > ul > li.ltn__categories-toggle > a,
.ltn__utilize-menu > ul > li.ltn__categories-toggle .sub-menu > li > a {
  color: #000;
}

.ltn__utilize-menu > ul > li.ltn__categories-toggle:hover > a,
.ltn__utilize-menu > ul > li.ltn__categories-toggle.active > a,
.ltn__utilize-menu > ul > li.ltn__categories-toggle .sub-menu > li:hover > a,
.ltn__utilize-menu > ul > li.ltn__categories-toggle .sub-menu > li.active > a {
  color: #3CC755;
}

/* Categories dropdown (desktop main menu): widen so category names fit on
   one line instead of wrapping to two. Applies to the top-level flyout and
   its nested sub/sub-sub flyouts alike. */
.ltn__main-menu li.menu-icon .sub-menu,
.ltn__main-menu li.menu-icon .sub-menu li > ul {
  min-width: 320px;
}

.ltn__main-menu li.menu-icon .sub-menu a {
  white-space: nowrap;
}

/* Static mobile menu links (Промоции, Ново, За нас, Доставка): black text and
   border by default; border always stays black, only the text turns the
   theme's green on hover/click. */
.ltn__utilize-menu > ul > li.ltn__utilize-static-item {
  border-bottom: 1px solid #000;
}

.ltn__utilize-menu > ul > li.ltn__utilize-static-item > a,
.ltn__utilize-menu > ul > li.ltn__utilize-static-item > a span {
  color: #000;
}

.ltn__utilize-menu > ul > li.ltn__utilize-static-item > a:hover,
.ltn__utilize-menu > ul > li.ltn__utilize-static-item > a:active,
.ltn__utilize-menu > ul > li.ltn__utilize-static-item > a:hover span,
.ltn__utilize-menu > ul > li.ltn__utilize-static-item > a:active span {
  color: #3CC755;
}

/* ==========================================================================
   Themed product card (app/views/shop/one_product.php, $theme branch) —
   used by the "new products" and "promo products" carousels on the shop
   homepage. Moved here from an inline <style> block in one_product.php.
   ========================================================================== */
.more_new, .more_promo
{
    display: none;
}
/* Product card hover-action icons (eye/cart/heart): brand color by default,
   matching .product-price below. Only the <a>'s own color is set here —
   the theme's ".product-hover-action li:hover a" rule (css/style.css) turns
   the icon white when that single icon is hovered, and still wins then
   since it has higher specificity (:hover adds a class-level selector). */
.product-hover-action li a
{
    color: #88bb14;
}
.ltn__product-item-3
{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 385px;
}
.ltn__product-item-3 .product-img
{
    height: 220px;
    position: relative;
}
.ltn__product-item-3 .product-img > a
{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ltn__product-item-3 .product-img > a img
{
    display: block;
    max-height: 220px;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.ltn__product-item-3 .product-info
{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ltn__product-item-3 .product-title
{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 4.9em;
}
.ltn__product-item-3 .promo-badge
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 40px;
    padding: 4px 0;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
}
/* List view (grid/list toggle on products.php) — the fixed-height flex/absolute
   layout above is grid-only; undo it here so the theme's image-left/info-right
   list layout (css/style.css ".ltn__product-list-view .ltn__product-item") can
   take over. These selectors outrank the grid rules above on specificity alone. */
.ltn__product-list-view .ltn__product-item-3
{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: auto;
    min-height: 0;
}
.ltn__product-list-view .ltn__product-item-3 .product-img
{
    height: auto;
    flex: 0 0 45%;
    max-width: 45%;
    position: relative;
}
.ltn__product-list-view .ltn__product-item-3 .product-img > a
{
    display: block;
    height: 100%;
    position: static;
    top: auto;
    left: auto;
    transform: none;
}
.ltn__product-list-view .ltn__product-item-3 .product-img > a img
{
    max-height: none;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}
.ltn__product-list-view .ltn__product-item-3 .product-info
{
    display: block;
    flex: 1 1 auto;
}
.ltn__product-list-view .ltn__product-item-3 .product-title
{
    -webkit-line-clamp: unset;
    min-height: 0;
}
.ltn__product-list-view .ltn__product-item-3 .product-brief
{
    margin: 10px 0;
}
.ltn__product-list-view .ltn__product-item-3 .product-brief p
{
    margin: 0;
}
.ltn__product-list-view .ltn__product-item-3 .product-brief,
.ltn__product-list-view .ltn__product-item-3 .product-brief p,
.ltn__product-list-view .ltn__product-item-3 .product-brief span
{
    color: #000 !important;
}
/* The theme's own ".ltn__product-item:hover .product-hover-action" rule (in
   css/style.css) still sets "top: 50%" on hover — meant for the grid card
   where the buttons are position:absolute and centered over the image. In
   list view the buttons are position:relative (flowed below the image), so
   that leftover "top" offset shifts them down on hover instead of leaving
   them in place. Pin it back so the buttons stay put and stay visible. */
.ltn__product-list-view .product-hover-action,
.ltn__product-list-view .ltn__product-item:hover .product-hover-action
{
    top: auto;
}
@media (max-width: 767px)
{
    .ltn__product-list-view .ltn__product-item-3
    {
        flex-direction: column;
    }
    .ltn__product-list-view .ltn__product-item-3 .product-img
    {
        flex-basis: auto;
        max-width: 100%;
    }
    .ltn__product-list-view .ltn__product-item-3 .product-img > a
    {
        height: auto;
    }
    .ltn__product-list-view .ltn__product-item-3 .product-img > a img
    {
        height: auto;
        object-fit: initial;
    }
}
/* ==========================================================================
   End themed product card styles
   ========================================================================== */

/* ==========================================================================
   Themed category sidebar (app/views/shop/category.php) — reskin of the
   products.php left-column category filter to match the theme's
   ".ltn__shop-sidebar .widget.ltn__menu-widget" look. Only the categories
   widget is used here (the theme's price/top-rated/search/tag/size/color
   sidebar widgets were intentionally left out).
   ========================================================================== */
.ltn__category-sidebar .ltn__menu-widget > ul > li > a {
    color: #000;
}
.ltn__category-sidebar .ltn__menu-widget > ul li a span {
    color: inherit;
}
.ltn__category-sidebar .ltn__menu-widget > ul > li > a .ltn__cat-toggle {
    cursor: pointer;
    padding: 4px 0 4px 10px;
    margin: -4px 0 -4px -10px;
}
.ltn__category-sidebar .ltn__menu-widget > ul > li.active > a,
.ltn__category-sidebar .ltn__menu-widget > ul > li:hover > a {
    color: #88bb14;
}
.ltn__category-sidebar .ltn__menu-widget .ltn__submenu {
    list-style: none;
    margin: 8px 0 15px 10px;
    padding: 0 0 0 15px;
    border-left: 2px solid var(--border-color-11);
}
.ltn__category-sidebar .ltn__menu-widget .ltn__submenu li {
    margin-top: 8px;
}
.ltn__category-sidebar .ltn__menu-widget .ltn__submenu li a {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #000;
}
.ltn__category-sidebar .ltn__menu-widget .ltn__submenu li.active > a {
    color: #88bb14;
    font-weight: 700;
}
.ltn__category-sidebar .ltn__menu-widget .ltn__submenu li:hover > a {
    color: #88bb14;
    font-weight: 700;
}
.ltn__category-sidebar .ltn__cat-new-badge {
    float: none;
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: #3CC755;
    font-weight: bold;
    vertical-align: top;
}
/* ==========================================================================
   End themed category sidebar styles
   ========================================================================== */

/* ==========================================================================
   Mobile header (logo + search/user/cart/menu buttons) — reuses the theme's
   own "header-options-2" boxed icon-button classes and "site-logo-wrap" +
   "get-support" phone widget (the same markup/classes index-10.html's
   alternate header demo uses), so sizing, spacing and the green hover come
   straight from the theme instead of being reinvented. Everything here is
   scoped to phone widths — the desktop ltn__header-3 layout (large logo
   alone, flat plain icons, no phone widget) is untouched.
   ========================================================================== */
@media (max-width: 767px) {
  /* The logo and header-options columns are plain Bootstrap .col's (equal
     flexible width, never stacking on their own), too narrow to fit a full
     logo plus 4 icon buttons on one line. Stack a compact logo+phone row
     above a centered icon row instead. */
  .ltn__header-3 .ltn__header-middle-area > .container > .row {
    flex-wrap: wrap;
  }
  .ltn__header-3 .ltn__header-middle-area > .container > .row > .col:first-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .ltn__header-3 .site-logo-wrap {
    align-items: center;
    justify-content: center;
  }
  .ltn__header-3 .site-logo img {
    max-height: 30px;
    width: auto;
  }
  /* Compact the phone widget so "logo + divider + icon + number" always
     fits phone widths: drop the "Phone" label (the icon already signals
     it's a phone number) and shrink the icon/divider/number accordingly. */
  .ltn__header-3 .get-support {
    padding-left: 8px;
    margin-left: 8px;
  }
  .ltn__header-3 .get-support-info h6 {
    display: none;
  }
  .ltn__header-3 .get-support-icon {
    margin-right: 6px;
    font-size: 20px;
  }
  .ltn__header-3 .get-support-info h4 {
    margin: 0;
    font-size: 15px;
  }
}

/* Narrower phones (360px and below) don't have room for the phone number at
   the sizes above — shrink the logo and number a bit further so nothing
   gets clipped. */
@media (max-width: 400px) {
  .ltn__header-3 .site-logo img {
    max-height: 24px;
  }
  .ltn__header-3 .get-support-info h4 {
    font-size: 13px;
  }
  .ltn__header-3 .get-support-info h4 a {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .ltn__header-3 .ltn__header-options-2 {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
  /* Default header-options li's are inline-block, which baseline-aligns
     them — the differently-shaped SVG menu icon then sits higher than the
     font-icon buttons next to it. Flex + align-items keeps every button's
     box vertically centered on the same line regardless of its content. */
  .ltn__header-3 .ltn__header-options-2 > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* The theme's header-options-2 box/shadow/hover styling isn't scoped to any
   breakpoint on its own, so undo it above phone widths for the two buttons
   that stay mobile-only (the search-icon toggle already has a proper desktop
   search bar elsewhere, and the hamburger is superseded by the desktop nav) —
   d-lg-none only hides them from 992px, so without this they'd still show as
   boxed buttons in the 768-991px gap. The login and cart buttons are excluded
   here on purpose: the desktop version now keeps the theme's boxed look too,
   matching the mobile version (see the "Desktop login/cart buttons" block
   below). */
@media (min-width: 768px) {
  .ltn__header-3 .get-support {
    display: none;
  }
  .ltn__header-3 .ltn__header-options-2 .header-search-1,
  .ltn__header-3 .ltn__header-options-2 .mobile-menu-toggle > a {
    height: auto;
    width: auto;
    line-height: inherit;
    background: transparent;
    color: inherit;
    box-shadow: none;
  }
}
/* ==========================================================================
   End mobile header
   ========================================================================== */

/* ==========================================================================
   Desktop login/cart buttons (app/views/shop/shop_menu.php) — the theme's
   own boxed icon-button style for header-options-2 (white 50x50 box, shadow,
   green hover) was previously stripped on desktop by the block above; the
   login (user-menu) and cart buttons now keep it on desktop too, so they
   look the same as their mobile counterparts instead of the old flat icons.
   ========================================================================== */

/* The theme's own ".mini-cart-icon-2 > a { min-width: 125px }" was sized to
   fit "icon + price text" side by side. Now that the price is hidden (see
   below), it just makes the cart button wider than the login button next to
   it — pin it back to the same 50px box every other header-options-2 button
   uses, on both mobile and desktop, and reassert center alignment since the
   min-width was letting the button grow past what justify-content centers.
   !important because this is the exact same selector the theme itself uses
   for the 125px value — plain specificity would tie, and which one wins a
   tie then just depends on stylesheet load order, which is easy to get
   wrong (shops.css loads before style.css, so on its own it would lose). */
.mini-cart-icon-2 > a {
  min-width: 50px !important;
  justify-content: center;
}

/* The badge on the cart icon uses Bootstrap's default "position: relative"
   for <sup>, which keeps its un-shifted width reserved in the icon+badge
   flex row — so the icon itself sat off-center (shifted left to make room
   for the badge). Taking the badge out of flow with "position: absolute"
   (anchored to the icon span below) lets the icon center on its own, same
   as the login icon, while the badge still overlaps its top-right corner. */
.mini-cart-icon-2 .mini-cart-icon {
  position: relative;
}
.mini-cart-icon-2 .mini-cart-icon sup {
  position: absolute !important;
  /* The theme's own "right: 8px" was tuned for the old, much wider
     icon+price box — against the icon alone it pulls the badge in far
     enough to cover half the glyph and unbalance the whole cluster.
     Sitting it just past the icon's own edge reads as a normal corner
     badge instead. !important for the same same-selector-tie reason as
     the min-width override above (this is the theme's own selector too). */
  top: -8px !important;
  right: -8px !important;
}

/* The cart icon's own color is hardcoded by the theme (see
   ".mini-cart-icon-2 > a .mini-cart-icon i" in style.css) with no :hover
   variant, so it never picked up the theme's ".mini-cart-icon a:hover"
   white — it stayed the dark heading color even on hover. Override the icon
   itself on hover so it turns white like the rest of the boxed buttons. */
.mini-cart-icon-2 > a:hover .mini-cart-icon i {
  color: var(--white);
}

/* ==========================================================================
   End desktop login/cart buttons
   ========================================================================== */

/* ==========================================================================
   Header cart panel (app/views/shop/shop_menu.php,
   app/views/shop/dropdown_shopping_cart.php) — the cart icon now opens the
   theme's own off-canvas "#ltn__utilize-cart-menu" panel (slides in from
   the right, same ".ltn__utilize"/".ltn__utilize-toggle" mechanism the
   mobile menu button already uses) instead of a Bootstrap dropdown popup,
   matching shop-left-sidebar.html exactly. The panel's own sizing/slide
   animation is entirely theme CSS — nothing to add for that part; only the
   two gaps below (real photos, this browser's scrollbar buttons) need
   covering.
   ========================================================================== */
/* The theme's demo markup never sets an explicit image size (it relies on
   pre-cropped demo thumbnails); our real product photos need to be capped
   to the same 80px box the theme reserves via ".mini-cart-img { width:
   80px }" so a large photo doesn't blow out the layout. */
#ltn__utilize-cart-menu .mini-cart-img img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
/* The theme's ".ltn__scrollbar" only styles the scrollbar track/thumb, not
   the up/down buttons at its ends — once the cart has enough lines to
   scroll, this browser can still render its own default scrollbar buttons
   on top of that thin custom scrollbar, which reads as a stray icon sitting
   over the cart content. Hide them; the thin styled track/thumb is enough
   to show it's scrollable. */
#ltn__utilize-cart-menu .mini-cart-product-area::-webkit-scrollbar-button {
    display: none;
}
/* Only one real action (see cart) exists here — the theme's own
   ".btn-wrapper { justify-content: space-between }" is built for its two-
   button "View Cart" / "Checkout" pair, which would leave a single button
   stranded on one side. */
#ltn__utilize-cart-menu .btn-wrapper {
    justify-content: center;
}
/* The theme's own ".mini-cart-product-area { max-height: calc(100% - (60px
   + 245px)) }" guesses at the head/footer heights instead of measuring
   them, so depending on how many lines the footer itself wraps to, the
   scroll area ends up either too short (scrollbar appears with only one
   line in the cart) or too tall (a big gap of blank space below "ВИЖ
   КОЛИЧКА" before the panel's actual bottom edge). Turning
   "#dropdowm_shopping_cart" into its own flex column that fills the
   remaining height below the "Количка" head, with only the product list
   allowed to grow/scroll, makes the footer sit right after the list when
   it's short and pinned at the panel's bottom (no extra scrolling needed
   to reach it) once the list grows past the available space. */
#dropdowm_shopping_cart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#ltn__utilize-cart-menu .mini-cart-product-area {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
#ltn__utilize-cart-menu .mini-cart-footer {
    flex: 0 0 auto;
}
/* The theme's floating "scroll to top" button (js/theme-main.js's
   "$.scrollUp({...})" call, plugins.js's jQuery ScrollUp plugin) is
   appended straight to <body> with "zIndex: 2147483647" — the maximum
   possible value — so it always draws above everything, including this
   panel (z-index 99999). Opening any ".ltn__utilize" panel (cart or the
   mobile menu) already adds "ltn__utilize-open" to <body>; hide the
   button for as long as that class is present instead of touching the
   plugin's own settings. */
body.ltn__utilize-open #scrollUp {
    display: none !important;
}
/* ==========================================================================
   End header cart panel
   ========================================================================== */