/***** NXN ****/
:root {
  --color-accent: #94ae38;
  --color-text: #1a1a1a;
  --color-link:  #707070;
  --color-grey: #434343;
  --color-placeholder: #676767;
  --color-lg: #979797;
  --color-light:  #f1f1f1;
  --color-border:  #f5f5f5;
  --color-lbg: #fefefe;
  --color-mid: #e0e0e0;
  --color-error: #9e0e0e;
  --color-ok:  #56de00;
  --color-white: #fff;
  --color-logo: #303030;
  --rgba-white: rgba(255,255,255,0.7);
  --rgba-dark: rgba(0,0,0,0.7);
  --tr-1: rgba(0,0,0,0.1);
}

*::-webkit-scrollbar {
    width: 4px;
    -webkit-appearance: none;
}
*::-webkit-scrollbar-track {
    background: #2B2A29; 
    overflow: hidden;
}
*::-webkit-scrollbar-thumb {
    background: #c0c0c0; 
}
* {
  box-sizing: border-box;
}
*, input, textarea {
  font-family: "Montserrat", sans-serif;
}
body {
  font-size: 14px;
}
a {
  color: var(--color-accent);
}
#test-mode {
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 30px;
  text-align: center;
  z-index: 999;
  background: var(--color-accent);
  color: #fff;
  font-size: 16px;
}
#test-mode a {
  color: #fff;
  text-decoration: underline;
}
#top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin: 0 0 5px 0;
  border-bottom: 0;
}
button {
  border: 0;
}
#top .list-inline-item > a {
  font-size: 1.0em;
  color: var(--color-link);
  transition: all 0.2s ease;
  padding: 0;
}
#top .list-inline-item {
  padding: 2px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
#top li:hover {
  background: var(--tr-1);
  transition: all 0.2s ease;
}
footer a {
  font-size: 1.05em;
}
header {
  border-bottom: 1px solid var(--bs-gray-200);
  margin-bottom: 20px;
}
#menu {
  border: 0;
  background: transparent;
  padding: 0;
}
.navbar-toggler {
  border: 0;
  padding: 12px 0;
  background: var(--color-accent);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  outline: none !important;
}
.navbar-toggler:focus {
  outline: none;
  border: none;
  box-shadow: unset;
}
.navbar-toggler i, #button-cart i{
  margin-right: 10px;
}
#navbar-menu {
  padding: 0.5rem;
  background: #fff;
  top: calc(100% + 15px);
}

#cart-button, #login-button {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 2px 4px;
  background: transparent;
  justify-content: center;
  color: var(--color-link);
  border: 0;
  font-size: 14px;
  width: 75px;
  transition: all 0.2s ease;
}
#cart-button i, #login-button i, #button-cart i {
  font-size: 20px;
}
#cart-button span, #login-button span {
  padding: 10px 0 5px;
}
#cart-button:hover {
  color: var(--color-text);
  transition: all 0.2s ease;
}
#cart .table > :not(caption) > * > * {
  border-bottom-width: 0;
}
#cart .table {
  border-bottom: 1px solid var(--bs-gray-200);
}
#cart div > p.text-end {
  margin-bottom: 0;
}
footer {
  background-color: #f3f3f3;
  color: #555;
  border-top: 1px solid var(--bs-gray-200);
}
footer a {
  color: #666;
}
footer a:hover {
  color: #333;
}
footer h5 {
  color: #2e2e2e;
}
.ps-live-search-container {
  background: var(--color-accent);
  border-radius: 12px;
  padding: 2px;
}
#ps-live-search-input {
  border: 0;
  border-radius: 12px 8px 8px 12px;
}
#ps-live-search-input, #ps-live-search-input:focus {
  outline: none;
  box-shadow: none;
}
.ps-live-search-container > button, .ps-live-search-container > button:hover {
  background: transparent;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff;
}

.breadcrumb {
  border: 0;
  background: transparent;
}
.breadcrumb > li.breadcrumb-item {
  padding: 0 10px 0 20px;
}
.breadcrumb > li.breadcrumb-item:nth-child(1) {
  padding-left:  2px;
}
.breadcrumb > li.breadcrumb-item:after {
  top: 8px;
  width: 5px;
  height: 5px;
  border-right: 2px solid #DDD;
  border-bottom: 2px solid #DDD;
}
li.breadcrumb-item a {
  color: var(--color-link);
}
.pagination .page-link {
  color:  #888;
}
.pagination .page-item.active {
  
}
.pagination .active .page-link {
  color:  #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.input-group-text, .form-select {
  border-color: var(--bs-gray-200);
}
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgb(32 161 81 / 25%);
}
.nav-link {
  color: var(--color-accent);
}
.alert {
  background: #fff !important;
  color: var(--color-text);
  border-color: var(--color-accent);
}
.nav-link:hover {
  color: #198E48;
}

/***
 * Buttons
*/

.btn-light {
  background-color: var(--bs-tertiary-bg);
  background-image: unset;
  border: 1px solid var(--bs-gray-200) !important;
}
.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .btn-light.disabled, .btn-light[disabled] {
  color: var(--color-accent);
  background-color: #e9f8ee;
  border-color: inherit;
}
.btn-primary {
  background: var(--color-accent) linear-gradient(to bottom, var(--color-accent), rgba(0,0,0,0.1));
  background-repeat: no-repeat;
  border: 0;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
  color: #ffffff;
  background: var(--color-accent) linear-gradient(to bottom, var(--color-accent), rgba(0,0,0,0.1));
  border-color: #106E41;
}

/***
 * Slider
*/

.carousel {
  border:  0;
  border-radius: 12px;
  box-shadow:  0px 0px 30px rgba(26, 26, 26, 0.05);
}
.carousel-inner {
  border-radius: 12px;
}
.carousel-item .col-12.text-center {
  padding: 0;
}
.carousel-control-prev span, .carousel-control-next span{
  color:  #fff;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-size: 20px;
  background: rgba(255,255,255,0);
  text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}
.carousel-control-prev, .carousel-control-next {
  width: 50px;
  transition: all 0.2s ease;
}
.carousel-control-prev:hover span, .carousel-control-next:hover span {
  color: var(--color-text);
  background: rgba(255,255,255,1);
  transition: all 0.2s ease;
} 
.carousel-indicators [data-bs-target] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transition: all 0.2s ease;
}
.carousel-indicators .active {
  background: var(--color-accent);
  transition: all 0.2s ease;
}
#common-home .carousel img.img-fluid {
  width: 100%;
}

.catsmain-item {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.catsmain-item img {
  max-width: 100%;
  border-radius: 12px}
/***
 * Product thumb
*/

.product-thumb {
  /*border: 1px solid var(--bs-gray-200);*/
  border: 0;
  border-radius:  12px;
  position: relative;
  overflow: hidden;
  box-shadow:  0px 0px 30px rgba(26, 26, 26, 0.05)
}
.product-thumb .product-thumb h4 {
  color: var(--color-text);
  min-height: 36px;
}
.description h4 a {
  font-size: 16px;
  color: var(--color-text);
  font-weight: 400;
}
.product-thumb .description {
  margin-bottom: 80px;
}
.product-thumb .image {
  position: relative;
}
.product-thumb .image a:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(135deg, rgba(25,25,25,0.04), rgba(25,25,25,0.07));
}
#content .product-thumb .rating .fa-stack {
  height: 12px;
  line-height: 12px;
}
#content .product-thumb .rating {
  position: absolute;
  left:  15px;
  bottom:  0px;
  border:  0;
  padding:  0px 4px;
  border-top-left-radius:  6px;
  border-top-right-radius:  6px;
  background: #fff;
  z-index: 2;
}
.product-thumb form .button {
  position: static;
}
.product-thumb form .button button {
  flex: unset;
  border-radius: unset;
  z-index: 2;
  display: block;
  color: unset;
  margin-bottom: 0;
  border: unset;
  padding: 0 3px;
  width: 30px;
  background-color: rgba(255,255,255,0.7);
}
.product-thumb form .button button:hover {
  color: #fff;
  background-color: var(--color-accent);
  transition:  all 0.2s ease;
}
#content .product-thumb .compare {
  position: absolute;
  right: 15px;
  top:  0;
  color: #888;
  border-top:  0;
  line-height: 24px;
  border-bottom-right-radius:  6px;
  background: #fff;
}
#content .product-thumb .favorite {
  position: absolute;
  right: 45px;
  top:  0;
  color: #888;
  line-height: 24px;
  border-top:  0;
  border-bottom-left-radius:  6px;
  background: #fff;
}
#content .product-thumb .addcart {
  border-radius: 6px;
  border:  0;
  color: #ffffff;
  width: calc(100% - 30px);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: var(--color-accent);
  margin: 15px auto;
  line-height: 38px;
  position: absolute;
  bottom: 0;
  left: 15px;
}
#content .product-thumb .addcart.nostock {
  background-color: var(--color-error);
  filter: grayscale(30%);
}
#content .product-thumb .addcart:hover {
  color: #ffffff;
  background-position: 0;
  border-color: #106E41;
}
#content .product-thumb .addcart i {
  margin-right: 10px;
}
#content .rating {
  padding-bottom: 0;
}
#content .price-new {
  /*margin-left:  10px;*/
  font-weight: 600;
  background: var(--color-accent);
  padding:  5px 10px;
  color:  #fff;
  position: relative;
  border-radius:  4px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#content .price-new:before, #content .price-new:after {
  content: "";
  background:  #fff;
  width:  10px;
  height: 10px;
  border-radius:  50%;
  position: absolute;
  left:  0;
  top: 50%;
  transform: translate(-50%, -50%);
}
#content .price-new:after {
  left: 100%;
}

/***
 * Global
*/

#output-cart table {
  box-shadow:  0px 0px 30px rgba(26, 26, 26, 0.05)
}
.block-title {
  padding:  10px 12px;
  font-size: 15px;
  font-weight: 600;
}
#column-left .list-group {
  border-radius: 12px;
  border: 1px solid var(--bs-gray-200) ;
}
#column-left .list-group-item {
  border:  0;
  position: relative;
  padding:  5px 12px;
  border-bottom:  1px solid #fff;
}
#column-left .list-group-item.active {
  background: var(--color-accent);
}
#column-left .list-group-item:after {
  content:  "";
  border-bottom:  1px solid var(--bs-gray-200);
  width:  calc(100% - 24px);
  position: absolute;
  bottom: -1px;
  left: 12px;
}

/***
 * Product twig
*/

#product-info .nav.nav-tabs {
  background: var(--bs-gray-100);
  padding: 6px;
  border-radius: 12px;
  border: 0;
}
#product-info .nav.nav-tabs .nav-item a {
  border: 0;
  border-radius: 12px;
  color: var(--color-link);
}
#product-info .nav.nav-tabs .nav-item a.active {
  color: var(--color-text);
}
#product-info .image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
#product-info .image a:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(135deg, rgba(25,25,25,0.04), rgba(25,25,25,0.07));
}
#product-info .image .img-thumbnail {
  border: 0;
  
}
#product-info .rating .fa-stack {
  height: 12px;
  line-height: 12px;
}
#product-info .rating {
  position: absolute;
  left:  15px;
  bottom:  0px;
  border:  0;
  padding:  0px 4px;
  border-top-left-radius:  6px;
  border-top-right-radius:  6px;
  background: #fff;
  z-index: 2;
}
#product-info  .input-group {
  width: auto;
}
#button-cart {
  border-radius: 12px;
  padding: 10px 30px;
}
#button-cart:hover {

}
#product-info .btns {

}
#product-info .compare, #product-info .favorite {
  border-radius: 50%;
  margin-right: 15px;
}

/***
 * Media queries
*/
@media (max-width: 800px) {
  footer {
    padding-bottom: 50px;
  }
  #top {
    padding: 5px 0;
    min-height: 25px;
    display: none;
  }
  #top .nav {
    width: 100%;
  }
  #top .nav > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
  }
  #top .nav.float-start a {
    font-size: 12px;
  }
  #top .nav.float-end {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #f0f0f0;
    border-top: 1px solid #c0c0c0;
  }
  #top .nav.float-end > ul > li > a,
  #top .nav.float-end > ul > li > .dropdown > a {
    font-size: 24px;
    padding:16px 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  #top .nav.float-end > ul > li {
    width: calc(100% / 5);
    margin: 0;
  }
  header .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  header #cart, header #user-menu {
    max-width: 20%;

  }
  #h-logo {
    max-width: 45%;
    
  }
  #h-menu {
    max-width: 45%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #h-src {
    max-width: calc(60% - 20px);
  }
  #menu {
    margin-bottom: 0;
    flex-direction: row-reverse !important;
  }
  .navbar-toggler {

  }
}