:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;

  --bs-primary: #28AB4F; 
  --bs-primary-text-emphasis: #28AB4F;
  --bs-primary-rgb: 13, 95, 38;
  --bs-primary-bg: #14682E; 
  --bs-primary-bg-subtle: #eefff3;
  --bs-primary-border-subtle: #eefff3;

  --bs-secondary: #7C3A96; 
  --bs-secondary-focus: #8518b3; 
  --bs-secondary-text-emphasis: #7C3A96;
  --bs-secondary-rgb: 124, 58, 150;
  --bs-secondary-bg: #efefef;
  --bs-secondary-bg-subtle: #ede6f7;
  --bs-secondary-border-subtle: #ede6f7;

  --bs-success: #59b15e;
  --bs-success-text-emphasis: #093310;
  --bs-success-rgb: 113, 197, 93;
  --bs-success-bg-subtle: #DBE7DD;
  --bs-success-border-subtle: #DBE7DD;

  --bs-danger: #eb5261;
  --bs-danger-text-emphasis: #330509; 
  --bs-danger-rgb: 235, 82, 97;
  --bs-danger-bg-subtle: #F9D7DA; 
  --bs-danger-border-subtle: #F9D7DA;

  --bs-warning: #eeca5e;
  --bs-warning-text-emphasis: #413308;
  --bs-warning-rgb: 238, 202, 94;
  --bs-warning-bg-subtle: #FFF3CD;
  --bs-warning-border-subtle: #FFF3CD;
}
.text-bg-success {
  color: var(--bs-success-text-emphasis) !important;
  background-color: var(--bs-success-bg-subtle) !important;
}
.text-bg-danger {
  color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
}
.text-bg-warning {
  color: var(--bs-warning-text-emphasis) !important;
  background-color: var(--bs-warning-bg-subtle) !important;
}
.btn-success {
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-bg:  var(--bs-success-bg-subtle);
  --bs-btn-border-color:  var(--bs-success-bg-subtle);
  --bs-btn-hover-color: var(--bs-success-text-emphasis);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color:  var(--bs-success);
  --bs-btn-active-bg:  var(--bs-success);
  --bs-btn-active-border-color:  var(--bs-success);
  --bs-btn-disabled-color: var(--bs-success-text-emphasis);
  --bs-btn-disabled-bg:  var(--bs-success-bg-subtle);
  --bs-btn-disabled-border-color:  var(--bs-success-bg-subtle);
}
.btn-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-bg: var(--bs-danger-bg-subtle);
  --bs-btn-border-color: var(--bs-danger-bg-subtle);
  --bs-btn-hover-color: var(--bs-danger-text-emphasis);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
  --bs-btn-disabled-bg: var(--bs-danger-bg-subtle);
  --bs-btn-disabled-border-color: var(--bs-danger-bg-subtle);
}
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-bg);
  --bs-btn-hover-border-color: var(--bs-primary-bg);
  --bs-btn-active-bg: var(--bs-primary-bg);
  --bs-btn-active-border-color: var(--bs-primary-bg);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary-bg);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-secondary-bg);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-size: 20px;font-family: "Barlow Condensed", sans-serif;}
a, a:hover{text-decoration: none; color: inherit;}
button, button:active, button:focus{border:none;  outline:none; background-color:inherit; text-decoration: none;}
html{scroll-behavior: smooth;  -webkit-overflow-scrolling: touch;}
.transition-5{transition: .5s ease-in-out;}
.transition-3{transition: .3s ease-in-out;}
.transition-2{transition: .2s ease-in-out;}
.transition-1{transition: .1s ease-in-out;}
.pointer{cursor: pointer;}
.bg-image{background-position: center; background-repeat: no-repeat; background-size: cover;}
.bg-green{background-color: #28AB4F;}
.bg-purple{background-color: #7C3A96;}
.bg-light-grey{background-color: #F7F7F7;}
.bg-semilight-grey{background-color: #EBEAEA;}
.color-green{color: #28AB4F;}
.link-green{transition: .2s ease-in-out;}
.link-green:hover{color: #28AB4F;}
.btn-border-green{background-color: #ffffff00; border: solid 1px #28AB4F; font-size: 17px;color: #28AB4F;transition: .2s ease-in-out;}
.btn-border-green:hover{background-color: #28AB4F; border: solid 1px #28AB4F; font-size: 17px; color: #fff;}
.fs-50{font-size: 50px;}
.fs-20{font-size: 20px;}
.fs-17{font-size: 17px;}
.fs-15{font-size: 15px;}
.fs-13{font-size: 13px;}
.font-montserrat{font-family: "Montserrat", sans-serif;}
.txt-info{font-size: 14px; color: #787878; font-weight: 500;}
.ul-green-bullet li::marker{color: #28AB4F}
.form-control,.form-select{background-color: #F7F7F7;border-color: #28AB4F;}
.form-check-input:checked{background-color: #28AB4F;}
.validation-error{font-size: 12px; color: red;}
input.validation-error,textarea.validation-error,select.validation-error{border: solid 1px red;font-size: inherit;color: inherit;}
/*--------- HEADER --------- */
header .marquee-container {overflow: hidden;white-space: nowrap;position: relative;}
header .marquee-text {display: inline-block;animation: marquee 30s linear infinite;position: relative;bottom: 1px;}
header .nav-link {font-weight: 300;transition: 0.2s ease-in-out;font-family: "Montserrat", sans-serif;}
header .nav-link:hover,header .nav-link.active{color: #28AB4F !important;transform: scale(1.03);}
.submenu__box {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  max-width: 1000px;
  width: 90%;
  background-color: #000;
  color: #fff;
  padding: 30px 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
  border-bottom: 3px solid #28AB4F;
  border-top: solid 1px #fff;
  font-family: "Montserrat", sans-serif;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.submenu__box.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0px);
}
.submenu__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.submenu__list_li {position: relative;}
.submenu__item {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.submenu__item:hover{color: #28AB4F;}
.has-child > .submenu__item .chevron {transition: transform 0.2s ease;font-size: 13px;}
.submenu__list_li.open > .submenu__item .chevron {transform: rotate(-180deg);}
.submenu__subcategories {
  list-style: none;
  margin: 8px 0 0 12px;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: max-height 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}
.submenu__list_li.open > .submenu__subcategories {
  max-height: 500px;
  opacity: 1;
  border-left: 2px solid #28AB4F33;
}
.submenu__subcategories_item {
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 3px 0;
  transition: color 0.2s ease;
}
.submenu__subcategories_item:hover {color: #28AB4F;text-decoration: underline;}
.submenu__item_name,.submenu__subcategories_name {word-break: break-word;}
/*--------- SIDEBAR --------- */
.sidebar, .cart_box{
  width: 100%;
  position: fixed;
  padding: 20px 25px;
  height: calc(100% - 110px);
  background-color: #FFFFFF;
  box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.1);
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar,.cart__body::-webkit-scrollbar{ width: 5px; background: #FFFFFF; }
.sidebar::-webkit-scrollbar-thumb, .cart__body::-webkit-scrollbar-thumb{ background: #6A6A6A; border-radius: 25px; }
.sidebar.active, .cart_box.active{ animation-duration: 0.6s; visibility: visible; transform: translateX(0vw); opacity: 1; }
.sidebar.active{z-index: 10; }
.cart_box.active{z-index: 11; }
.sidebar.out, .cart_box.out{ animation-duration: 0.4s; visibility: hidden; z-index: -1; transform: translateX(-100vw); opacity: 0; }
.sidebar__colors{display: flex; flex-wrap: wrap; gap: 5px;}
#variantes_colors.active{ border-top: 1px solid #e4e4e4; margin-top: 10px; padding-top: 10px; }
/*--------- FOOTER --------- */
footer i{background-color: #28AB4F;color: #fff;border-radius: 50%;padding: 3px 5px;}
footer .container-social{position: absolute;top: -35px;left: 50%;transform: translateX(-50%);}
footer .social{color: #fff;font-size: 17px;height: 69px;transition: .2s ease-in-out;}
footer .social:hover {transform: scale(1.03)}
footer .social i{background-color: inherit; border-radius: 0px; font-size: 20px;padding: 0px;}
footer .social-facebook{background-color: #1A9BED;}
footer .social-whatsapp{background-color: #28AB4F;}
footer .social-instagram{background-color: #7C3A96;}
.footer_btn-fixed{
  position:fixed;
  width:55px;
  height:55px;
  color:#FFF !important;
  line-height: 53px;
  right:10px;
  border-radius:50px;
  text-align:center;
  font-size:28px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:999;
  transition: .2s ease-in-out;
}
.footer_btn-fixed:visited{color: #FFF;}
.footer_btn-fixed:hover{text-decoration: none;color: #FFF;}
.footer_btn-fixed.btn-whats{bottom:30px;background: #28AB4F;}
.footer_btn-fixed.btn-whats:hover{background: #7C3A96;}
/*--------- PRODUCT's --------- */
.color_box {
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid lightgrey;
  width: 35px; height: 35px;
  position: relative;
}
.color_box--sidebar { position: relative; }
.color_box--sidebar { width: 25px; height: 25px; }
.color_box input{
  overflow: hidden;
  display: block;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: -4px;
  left: 4px;
}
.color_box input:checked { border: 7px solid #000000; border-radius: 50%; }
/*--------- Preview Product --------- */
.pvw__product_box{
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 2px 12px #00000029;
}
.pvw__product__img_box{
  min-width: 150px;
  max-width: 500px;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #c7c7c7;
}
.pvw__product_img{ width: 100%; max-width: 500px; }
.pvw__product_name{line-height: 22px; font-size: 23px; margin-bottom: 0;}
.pvw__product_category{color: #A7A7A7;}
/*--------- Filter --------- */
.breadcrumbs, .filter_page,.filter_page_botton{
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.filter_page,.breadcrumbs{
  border-bottom: 1px solid #dcdcdc;
}
/*--------- HOME --------- */
#slide_home .splide__arrow{border-radius: 0;color: #fff;background-color: #666666;height: 1.5rem;width: 1.5em;opacity: 1;}
#slide_home .splide__arrow--prev {left: 0px;}
#slide_home .splide__arrow--next {right: 0px;}
#slide_home .splide__pagination__page{background-color: #ffffff00;border: solid 1px #4B4B4B;transform: scale(1.6);margin:8px;}
#slide_home .splide__pagination__page.is-active{background-color: #4B4B4B;}
@keyframes marquee {0% {transform: translateX(0%);}100% {transform: translateX(-50%);}}
#products_featured .splide__track{padding: 10px 0px;}
/*---------- MEDIAS ---------*/
@media (max-width: 991px) {
  #menu__box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #000;
    z-index: 999;
    flex-direction: column;
    padding: 30px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
    border-bottom: 3px solid #28AB4F;
    border-top: solid 1px #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  #menu__box.open {display: flex;opacity: 1;visibility: visible;transform: translateY(0);}
  #menu__box .menu__list {flex-direction: column;gap: 0px;}
  #menu__box .menu__item {padding: 5px 0;}
  .submenu__box {width: 100%;height: 70vh;overflow: scroll;}
}
@media screen and (min-width: 992px) {
  .sidebar,.cart_box{width: 291px;}
  .app__container{width: calc(100% - 291px); float: right; }
  .app__container.full-width{width: 100%; float: initial; } 
}
.color_box.multicolor,.color_box.varios {
  background: rgb(180, 58, 58);
  background: -moz-linear-gradient(90deg, rgba(180, 58, 58, 1) 0%, rgba(255, 231, 0, 1) 20%, rgba(10, 248, 28, 1) 40%, rgba(0, 243, 249, 1) 60%, rgba(51, 52, 252, 1) 80%, rgba(228, 69, 252, 1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(180, 58, 58, 1) 0%, rgba(255, 231, 0, 1) 20%, rgba(10, 248, 28, 1) 40%, rgba(0, 243, 249, 1) 60%, rgba(51, 52, 252, 1) 80%, rgba(228, 69, 252, 1) 100%);
  background: linear-gradient(90deg, rgba(180, 58, 58, 1) 0%, rgba(255, 231, 0, 1) 20%, rgba(10, 248, 28, 1) 40%, rgba(0, 243, 249, 1) 60%, rgba(51, 52, 252, 1) 80%, rgba(228, 69, 252, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b43a3a", endColorstr="#e445fc", GradientType=1);
}
.color_box.dorado{
  background: rgb(205, 170, 20);
  background: -moz-linear-gradient(90deg, rgba(205, 170, 20, 1) 23%, rgba(255, 226, 0, 1) 49%, rgba(208, 153, 36, 1) 79%);
  background: -webkit-linear-gradient(90deg, rgba(205, 170, 20, 1) 23%, rgba(255, 226, 0, 1) 49%, rgba(208, 153, 36, 1) 79%);
  background: linear-gradient(90deg, rgba(205, 170, 20, 1) 23%, rgba(255, 226, 0, 1) 49%, rgba(208, 153, 36, 1) 79%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cdaa14", endColorstr="#d09924", GradientType=1);
}
.color_box.plata, .color_box.acero, .color_box.aluminio, .color_box.titanio{
  background: rgb(135, 135, 135);
  background: -moz-linear-gradient(90deg, rgba(135, 135, 135, 1) 25%, rgba(166, 169, 170, 1) 51%, rgba(136, 136, 136, 1) 75%);
  background: -webkit-linear-gradient(90deg, rgba(135, 135, 135, 1) 25%, rgba(166, 169, 170, 1) 51%, rgba(136, 136, 136, 1) 75%);
  background: linear-gradient(90deg, rgba(135, 135, 135, 1) 25%, rgba(166, 169, 170, 1) 51%, rgba(136, 136, 136, 1) 75%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#878787", endColorstr="#888888", GradientType=1);
}