/* style.php  -  CSS del tema comprado, recortado a las reglas cuyas clases/ids aparecen en algún PHP o JS de la
   tienda (de 12.900 líneas quedaron ~2.600; las 2.000 reglas quitadas eran de bloques del tema que la tienda no usa:
   blog, portafolio, testimonios, sliders, etc.). Si una página necesita una regla vieja, se copia de la versión
   anterior del archivo. */
/*-----------------------------------------------------------------------------------

    
    CSS INDEX
    =========================================
    01. header css here
    02. slider area css here
    03. product section css here
    04. banner section css here 
    05. blog area css here
    06. newsletter area css here
    07. footer area css here
    08. shop page css here
    09. error page css heer 
    10. about page css here
    11. blog page css here 
    12. blog details css here
    13. cart page css here
    14. checkout page css here
    15. contact page css here
    16. faq page css here
    17. login page css here
    18. my account css here
    19. portfolio page css here
    20. services page css here
    21. shipping css here
    22. wishlist css here
    23. newsletter popup css here
    24. modal css here
    25. portfolio css here
    
    

-----------------------------------------------------------------------------------*/
/* Fuentes Google cargadas de forma no bloqueante desde head.php */
* {
  box-sizing: border-box;
}

/* transition */
/* flex */
/* transform */
/* opacity */
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
/*-- Google Font --*/
/*-- Common Style --*/
*, *::after, *::before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  line-height: 24px;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  visibility: visible;
  font-family: "Lato", sans-serif;
  color: #262626;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin-top: 0;
}

h1 {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
}

h2 {
  font-size: 36px;
  line-height: 36px;
}

h3 {
  font-size: 30px;
  line-height: 30px;
}

h4 {
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
}

h5 {
  font-size: 14px;
  line-height: 18px;
}

h6 {
  font-size: 12px;
  line-height: 14px;
}

p:last-child {
  margin-bottom: 0;
}

a, button {
  color: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}


a, button, img, input, span {
  transition: all 0.3s ease 0s;
}

*:focus {
  outline: none !important;
}

a:focus {
  color: inherit;
  outline: none;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}


button, input[type="submit"] {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

/*-- 
    - Common Classes
-----------------------------------------*/

.hidden {
  display: none;
}

.container {
  max-width: 1200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 970px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 750px;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    width: 450px;
  }
}
@media only screen and (max-width: 479px) {
  .container {
    width: 100%;
  }
}

.uppercase {
  text-transform: uppercase;
}

.no-gutters > .col, .no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
  margin: 0;
}

/*-- 
    - Background color
-----------------------------------------*/

/*- Overlay Color BG -*/

/*-- 
    - color
-----------------------------------------*/
/*-- 
    - Input Placeholder
-----------------------------------------*/
input:-moz-placeholder, textarea:-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*-- 
    Scroll Up 
-----------------------------------------*/
#scrollUp {
  background: #f00a21 none repeat scroll 0 0;
  bottom: 150px; /* Ajusta este valor para subirlo más */
  color: #ffffff;
  cursor: pointer;
  display: none;
  font-size: 20px;
  height: 45px;
  line-height: 39px;
  position: fixed;
  right: 12px;
  text-align: center;
  width: 45px;
  z-index: 9999;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-transition: .3s;
  transition: .3s;
}

#scrollUp:hover i {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}


/*-- 
    - Main Wrapper
-----------------------------------------*/

/*-- 
    - Section Padding
-------------------------------------*/

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-47 {
  margin-top: 47px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-47 {
  margin-bottom: 47px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

/* 02. Element */
.button {
  background: #f00a21;
  box-shadow: none;
  color: #ffffff;
  display: inline-block;
  height: 45px;
  line-height: 45px;
  padding: 0 22px;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 3px;
}

/* 2. Home 1 Header css here */
/* 01. header css here */
.off_canvars_overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  cursor: crosshair;
  background: #080808;
  top: 0;
}
.off_canvars_overlay.active {
  opacity: 0.5;
  visibility: visible;
}

.Offcanvas_menu {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .Offcanvas_menu {
    display: block;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .Offcanvas_menu {
    display: block;
    margin-bottom: 25px;
  }
}

.Offcanvas_menu_wrapper {
  width: 290px;
  position: fixed;
  background: #fff;
  z-index: 99;
  top: 0;
  height: 100vh;
  transition: .5s;
  right: 0;
  margin-right: -300px;
  padding: 30px 20px 30px;
  overflow-y: auto;
}
.Offcanvas_menu_wrapper.active {
  margin-right: 0;
}
.Offcanvas_menu_wrapper .welcome_text {
  display: block;
  margin-bottom: 10px;
}
.Offcanvas_menu_wrapper .search-container {
  display: block;
}
.Offcanvas_menu_wrapper .mini_cart_wrapper {
  display: block;
  margin-bottom: 22px;
}
.Offcanvas_menu_wrapper .mini_cart_wrapper > a {
  display: inline-block;
  padding: 5px 20px;
  line-height: 25px;
}
.Offcanvas_menu_wrapper .mini_cart_wrapper > a i {
  font-size: 24px;
  margin-right: 5px;
}

.offcanvas_main_menu li {
  position: relative;
}
.offcanvas_main_menu li:last-child {
  margin: 0;
}
.offcanvas_main_menu li span.menu-expand {
  position: absolute;
  right: 0;
}
.offcanvas_main_menu li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  display: block;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.offcanvas_main_menu li a:hover {
  color: #f00a21;
}
.offcanvas_main_menu li ul.sub-menu {
  padding-left: 20px;
}

.canvas_close {
  position: absolute;
  top: 10px;
  right: 13px;
}
.canvas_close a,
.canvas_close button {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  width: 32px;
  height: 32px;
  display: block;
  text-align: center;
  line-height: 31px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  background: none;
  padding: 0;
  cursor: pointer;
}
.canvas_close a:hover,
.canvas_close button:hover {
  background: #f00a21;
  border-color: #f00a21;
  color: #fff;
}

.canvas_open {
  display: flex;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  padding: 7px 20px 6px;
}
.canvas_open span {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}
.canvas_open a {
  font-size: 28px;
  color: #262626;
}

.sticky-header.sticky {
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
  background: rgba(38, 38, 38, 0.7);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 900ms;
  animation-duration: 900ms;
  -webkit-animation-timing-function: cubic-bezier(0.2, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.2, 1, 0.22, 1);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  border-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sticky-header.sticky {
    position: inherit;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    -webkit-animation-name: inherit;
    animation-name: inherit;
    padding: 0;
    background: inherit;
    opacity: inherit;
  }
}
@media only screen and (max-width: 767px) {
  .sticky-header.sticky {
    position: inherit;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    -webkit-animation-name: inherit;
    animation-name: inherit;
    padding: 0;
    background: inherit;
    opacity: inherit;
  }
}

.header_top {
  border-bottom: 1px solid #e5e5e5;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_top {
    border-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .header_top {
    border-bottom: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .welcome_text {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .welcome_text {
    display: none;
  }
}
.welcome_text p {
  font-size: 13px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .welcome_text p {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .welcome_text p {
    text-align: center;
  }
}
.welcome_text p span {
  color:#f00a21;
}

/*header top css end*/
/* 2.2 header middel css here */
.header_middle {
  padding: 16px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_middle {
    padding: 19px 0;
  }
}
@media only screen and (max-width: 767px) {
  .header_middle {
    padding: 17px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .logo {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .logo {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .logo a img {
    max-width: 155px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-container {
    margin-bottom: 25px;
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .search-container {
    margin-bottom: 25px;
    display: none;
  }
}
.search-container form {
  display: flex;
  border-radius: 50px;
  border: 2px solid #e5e5e5;
  background: #fff;
}

.mini_cart_wrapper {
  position: relative;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mini_cart_wrapper {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .mini_cart_wrapper {
    display: none;
  }
}
.mini_cart_wrapper:hover > a {
  color: #fff;
  background: #fff;
  border-color: #f00a21;;
}
.mini_cart_wrapper:hover > a i {
  
}
.mini_cart_wrapper > a {
  word-spacing: 3px;
  letter-spacing: 0.5px;
  font-weight: 400;
  text-transform: capitalize;
  display: block;
  padding: 11px 20px;
  line-height: 29px;
  border: 1px solid #f00a21;;
  border-radius: 30px;
}
.mini_cart_wrapper > a i {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 30px;
  color: #f00a21;
  vertical-align: middle;
  line-height: 26px;
  margin-right: 7px;
}
.mini_cart_wrapper:hover .mini_cart {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

.mini_cart {
  position: absolute;
  min-width: 355px;
  padding: 32px 28px;
  background: #fff;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
  border-top: 1px solid #f00a21;;
  z-index: 999;
  right: 0;
  text-align: left;
  top: 130%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mini_cart {
    display: none;
    opacity: inherit;
    visibility: inherit;
    top: 100%;
    transition: unset;
    min-width: 255px;
    right: 0;
    padding: 18px 8px 33px;
  }
}
@media only screen and (max-width: 767px) {
  .mini_cart {
    min-width: 255px;
    right: 0;
    display: none;
    opacity: inherit;
    visibility: inherit;
    top: 100%;
    padding: 18px 8px 33px;
    transition: unset;
  }
}

.cart_img {
  width: 32%;
  margin-right: 20px;
  border: 1px solid #fff;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cart_img {
    margin-right: 11px;
  }
}
@media only screen and (max-width: 767px) {
  .cart_img {
    margin-right: 11px;
  }
}

.cart_info {
  width: 56%;
}
.cart_info a {
  font-weight: 400;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 20px;
  display: block;
  margin-bottom: 6px;
}
.cart_info a h4{
  font-weight: 400;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 20px;
  display: block;
  margin-bottom: 6px;
  color:red;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cart_info a {
    font-size: 13px;
  }
}
@media only screen and (max-width: 767px) {
  .cart_info a {
    font-size: 13px;
  }
}
.cart_info a:hover {
  color: #f00a21;
}
.cart_info a:hover h4 {
  color: #000000;
}
.cart_info span {
  display: block;
}
.cart_info span.quantity {
  margin-bottom: 5px;
  font-size: 12px;
}
.cart_info span.price_cart {
  font-weight: 600;
  color: #fff;
}

.cart_item {
  overflow: hidden;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.mini_cart_table {
  padding: 3px 0 23px;
}

.cart_total {
  display: flex;
  justify-content: space-between;
}
.cart_total span {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  font-weight: 600;
}

.cart_button {
  display: flex;
}
.cart_button a {
  text-transform: capitalize;
  border-radius: 25px;
  background: #262626;
  color: #fff;
  display: block;
  text-align: center;
  margin-bottom: 0;
  line-height: 40px;
  padding: 0 25px;
  margin-right: 17px;
}
.cart_button a:last-child {
  margin-right: 0;
}
.cart_button a:hover {
  background: #f00a21;
}

/*header middel css end*/
/* 2.4 main menu css here */
.header_bottom {
  background: #262626;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_bottom {
    background: inherit;
  }
}
@media only screen and (max-width: 767px) {
  .header_bottom {
    background: inherit;
  }
}

.header_position {
  position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main_menu {
    margin-left: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main_menu {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .main_menu {
    display: none;
  }
}
.main_menu nav > ul > li {
  display: inline-block;
  position: relative;
}
.main_menu nav > ul > li:hover > a i {
  color: #ffffff;
}
.main_menu nav > ul > li > a {
  display: block;
  padding: 0 20px;
  font-size: 13px;
  line-height: 59px;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffffff;
}
.main_menu nav > ul > li > a i {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  margin-right: 5px;
  font-size: 16px;
  color: #f00a21;
}
.main_menu nav > ul > li.active > a i {
  color: #ffffff;
}

/*main menu css end*/
/*mobaile menu css here*/

/*-- 2.3 Categories menu css here --*/
.categories_menu {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_menu {
    margin-bottom: 27px;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu {
    margin-bottom: 23px;
  }
}

.categories_title {
  background: #f00a21;
  padding-left: 30px;
  position: relative;
  cursor: pointer;
  height: 54px;
  line-height: 56px;
  border-radius: 4px 4px 0 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_title {
    height: 46px;
    line-height: 46px;
    border-radius: 0;
  }
}
@media only screen and (max-width: 767px) {
  .categories_title {
    height: 44px;
    line-height: 44px;
    border-radius: 0;
  }
}
.categories_title::after {
  content: "\f036";   /* fa-align-left de Font Awesome (antes el mismo dibujo de Material Iconic, que ya no se carga) */
  color: #ffffff;
  display: inline-block;
  font-family: 'FontAwesome';
  position: absolute;
  font-size: 18px;
  line-height: 0px;
  right: 20px;
  top: 50%;
  transform: translatey(-50%);
}
.categories_title h2 {
  font-size: 16px;
  font-weight: 900;
  line-height: 26px;
  color: #ffffff;
  cursor: pointer;
  margin-bottom: 0;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1px;
}

.categories_menu_toggle {
  padding: 15px 0 9px;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
  background: #fff;
  position: absolute;
  width: 100%;
  top: 100%;
  z-index: 9;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_menu_toggle {
    display: none;
    max-height: 350px;
    overflow: auto;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu_toggle {
    display: none;
    max-height: 350px;
    overflow: auto;
  }
}
.categories_menu_toggle > ul > li {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_menu_toggle > ul > li.menu_item_children > a {
    position: relative;
  }
  .categories_menu_toggle > ul > li.menu_item_children > a::before {
    position: absolute;
    content: "+";
    right: 15px;
    top: 50%;
    transform: translatey(-50%);
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu_toggle > ul > li.menu_item_children > a {
    position: relative;
  }
  .categories_menu_toggle > ul > li.menu_item_children > a::before {
    position: absolute;
    content: "+";
    right: 15px;
    top: 50%;
    transform: translatey(-50%);
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_menu_toggle > ul > li.menu_item_children.open > a::before {
    display: none;
  }
  .categories_menu_toggle > ul > li.menu_item_children.open > a::after {
    position: absolute;
    content: "-";
    right: 15px;
    top: 50%;
    transform: translatey(-50%);
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu_toggle > ul > li.menu_item_children.open > a::before {
    display: none;
  }
  .categories_menu_toggle > ul > li.menu_item_children.open > a::after {
    position: absolute;
    content: "-";
    right: 15px;
    top: 50%;
    transform: translatey(-50%);
    font-size: 30px;
  }
}
.categories_menu_toggle > ul > li > a {
  font-size: 14px;
  line-height: 47px;
  text-transform: capitalize;
  font-weight: 400;
  display: block;
  cursor: pointer;
  padding: 0 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .categories_menu_toggle > ul > li > a {
    line-height: 42px;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu_toggle > ul > li > a {
    line-height: 35px;
  }
}
.categories_menu_toggle > ul > li > a span {
  margin-right: 8px;
}
.categories_menu_toggle > ul > li > a span i {
  font-size: 17px;
}
.categories_menu_toggle > ul > li > a i.fa-angle-right {
  float: right;
  color: #262626;
  font-size: 15px;
  line-height: 35px;
  transition: .3s;
  -webkit-transition: .3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_menu_toggle > ul > li > a i.fa-angle-right {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu_toggle > ul > li > a i.fa-angle-right {
    display: none;
  }
}
.categories_menu_toggle > ul > li:last-child > a {
  border-bottom: 0;
}
.categories_menu_toggle > ul > li:hover > a {
  background: #e7e7e7;
  color: #f00a21;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_menu_toggle > ul > li:hover > a {
    background: inherit;
    color: #f00a21;
  }
}
@media only screen and (max-width: 767px) {
  .categories_menu_toggle > ul > li:hover > a {
    background: inherit;
    color: #f00a21;
  }
}

/*-- 2.7 Categories menu css end --*/
/*home two css here*/

/*home three css here*/

/*home four css here*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categori_four {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .categori_four {
    margin-bottom: 25px;
  }
}
.categori_four .categories_title {
  height: 59px;
  line-height: 59px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categori_four .categories_title {
    height: 46px;
    line-height: 46px;
  }
}
@media only screen and (max-width: 767px) {
  .categori_four .categories_title {
    height: 44px;
    line-height: 44px;
  }
}
.categori_four .categories_menu_toggle {
  display: none;
}

/*home five css here*/

/*home six css here*/

/*home seven css here*/

/*home eight css here*/

/* 02. slider area css here */

/*home two css here*/

/*home three css here*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider_section.mt-30 {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .slider_section.mt-30 {
    margin-top: 25px;
  }
}

/*home four css here*/

/*home five css here*/

/*home six css here*/

/*home seven css here*/

/*home eight css here*/

/*  04. banner section css here  */

/* 03. product section css here */
.tab-content > .tab-pane.active {
  display: block;
  height: auto;
  opacity: 1;
  overflow: visible;
}

.tab-content > .tab-pane {
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

/*category product css here*/

/*deals product area css here*/

.section_title {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section_title {
    margin-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .section_title {
    margin-bottom: 22px;
  }
}
.section_title h2 {
  font-size: 18px;
  line-height: 17px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 0;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section_title h2 {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section_title h2 {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .section_title h2 {
    font-size: 15px;
    line-height: 15px;
  }
}
.section_title h2 span {
  padding: 8px 15px 8px 3px;
  color: #f00a21;
  border-color: #f00a21;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  position: relative;
}
.section_title h2 span::before {
  content: "";
  border-left: 1px solid #f00a21;
  height: 5px;
  width: 1px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.section_title h2 span::after {
  content: "";
  border-left: 1px solid #f00a21;
  height: 5px;
  width: 1px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.product_thumb {
  position: relative;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
@media only screen and (max-width: 767px) {
  .product_thumb {
    text-align: center;
  }
}

.product_name h3 {
  font-size: 17px;
  line-height: 24px;
  text-transform: capitalize;
  margin-bottom: 10px;
}
.product_name h3 a:hover {
  color: #f00a21;
}

.price_box {
  margin-bottom: 17px;
}
.price_box span.current_price {
  font-size: 24px;
  line-height: 25px;
  color: #f00a21;
}

.action_links ul li {
  display: inline-block;
  margin-right: 4px;
}
.action_links ul li:last-child {
  margin-right: 0;
}
.action_links ul li.wishlist a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
}
.action_links ul li a {
  text-transform: capitalize;
  border: 1px solid #e5e5e5;
  line-height: 39px;
  display: block;
  font-size: 14px;
  background: #fff;
}
.action_links ul li.wishlist a, .action_links ul li.wishlist a.active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}

.action_links ul li a.active {
  text-transform: capitalize;
  border: 1px solid #f00a21;
  line-height: 39px;
  display: block;
  font-size: 14px;
  background: #fff;
} 


.action_links ul li a:hover {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
 
}

.single_product .action_links ul li.wishlist a.active  {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
}

.product_details .action_links ul li.wishlist a.active  {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
}

.product_details .action_links ul li.add_to_cart a  {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
}

.action_links ul li.add_to_cart a {
  padding: 0 20px;

  word-spacing: 1px;
}
.action_links ul li.add_to_cart a i {
  margin-right: 5px;
}




.action_links ul button {
  display: inline-block;
  margin-right: 4px;
}
.action_links ul button:last-child {
  margin-right: 0;
}

.action_links ul button a {
  text-transform: capitalize;
  border: 1px solid #e5e5e5;
  line-height: 39px;
  display: block;
  font-size: 14px;
  background: #fff;
}

.action_links ul button.active {
  text-transform: capitalize;
  border: 1px solid #f00a21;
  line-height: 39px;
  display: block;
  font-size: 44px;
  background: #fff;
} 


.action_links ul button:hover {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
 
}


.product_details .action_links ul button.add_to_cart   {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
}

.action_links ul button.add_to_cart  {
  padding: 0 20px;
  word-spacing: 1px;
}
.action_links ul button.add_to_cart i {
  margin-right: 5px;
}

.action_links ul button.add_to_cart  {
  width: 181px;
  height: 41px;

  text-align: center;
}




@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .action_links ul button.add_to_cart a {
    padding: 0 15px;
  }
}

/*small product css here*/

/*new product area css here*/
.single_product:hover .action_links ul li.wishlist {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}
.single_product:hover .product_thumb {
  opacity: 0.7;
}
.single_product .product_content {
  text-align: center;
  margin-top: 10px;
}
.single_product .product_name h3 {
  font-size: 14px;
  line-height: 17px;
}
.single_product .price_box span.current_price {
  font-size: 15px;
}

/*
.single_product .action_links ul li.wishlist, .single_product .action_links ul li.compare {
  transform: translate(100%, 0);
  transition: all .4s ease-out;
  opacity: 0;
  visibility: visible;
}*/
.single_product .action_links ul li.add_to_cart {
  z-index: 2;
  position: relative;
}

/*custom paroduct css here*/

/*home two css here*/

/*home three css here*/

/*home seven css here*/

/*home eight css here*/

/* 05. blog area css here */

/*06. newsletter area css here*/

/*home three css here*/

/*home five css here*/

/*home six css here*/

/*home seven css here*/

/*home eight css here*/

/* 21. shipping css here */

/*home three css here*/

/*home four css here*/

/*home five css here*/

/*testimonial css here*/

/*brand css here*/

/*home five css here*/

/*home six css here*/

/*  07. footer area css here */
.footer_top {
  padding: 44px 0 50px;
  border-bottom: 1px solid #e5e5e5;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer_top {
    padding: 44px 0 7px;
  }
}
@media only screen and (max-width: 767px) {
  .footer_top {
    padding: 44px 0 12px;
  }
}

.footer_bottom {
  padding: 15px 0;
  background: #262626;
}
@media only screen and (max-width: 767px) {
  .footer_bottom {
    padding: 17px 0 23px;
  }
}

/*home three css here*/

/*home five css here*/

/*home seven css here*/

/*home eight css here*/

/*collection area css here*/

/*categories section css here*/

/* 10. shop page css here */

.shop_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  padding: 8px 10px;
  margin: 0 0 40px;
}
@media only screen and (max-width: 767px) {
  .shop_toolbar {
    flex-direction: column-reverse;
    padding: 10px 10px 18px;
  }
}

@media only screen and (max-width: 767px) {
  .pagination {
    margin-top: 19px;
  }
}
.pagination ul li {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #f1f1f1;
  border-radius: 3px;
  margin-left: 3px;
}
.pagination ul li:first-child {
  margin-left: 0;
}
.pagination ul li a {
  display: block;
  border-radius: 3px;
}
.pagination ul li a:hover {
  background: #f00a21;
  color: #ffffff;
}
.pagination ul li.current {
  background: #f00a21;
  color: #ffffff;
}
.pagination ul li.next {
  width: 40px;
}

.shop_toolbar.t_bottom {
  justify-content: center;
  margin-bottom: 0;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shop_toolbar.t_bottom {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .shop_toolbar.t_bottom {
    padding: 15px 10px 15px;
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .shop_toolbar.t_bottom .pagination {
    margin-top: 0;
  }
}

/* shop page css here*/

.shop_wrapper .product_thumb {
  overflow: hidden;
  
}
@media only screen and (max-width: 767px) {
  .shop_wrapper .product_thumb {
    text-align: center;
  }
}

.row.shop_wrapper {
  flex-direction: row;
}

.shop_toolbar_btn > button {
  margin-right: 10px;
  border: 0;
  background: inherit;
}
.shop_toolbar_btn > button.btn-grid-3 {
  background: url(../img/icon/bkg_grid.png) no-repeat scroll center center;
  width: 20px;
  height: 20px;
}
.shop_toolbar_btn > button.btn-grid-3.active {
  background: url(../img/icon/bkg_grid_hover.png) no-repeat scroll center center !important;
}
.shop_toolbar_btn > button.btn-grid-4 {
  background: url(../img/icon/bkg_grid4.png) no-repeat scroll center center;
  width: 26px;
  height: 22px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop_toolbar_btn > button.btn-grid-4 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shop_toolbar_btn > button.btn-grid-4 {
    display: none;
  }
}
.shop_toolbar_btn > button.btn-grid-4.active {
  background: url(../img/icon/bkg_grid4_hover.png) no-repeat scroll center center !important;
}
.shop_toolbar_btn > button.btn-list {
  background: url(../img/icon/bkg_list.png) no-repeat scroll center center;
  width: 20px;
  height: 20px;
}
.shop_toolbar_btn > button.btn-list.active {
  background: url(../img/icon/bkg_list_hover.png) no-repeat scroll center center !important;
}

.grid_list .product_content.grid_content {
  display: none;
}

.grid_list .single_product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 20px;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .grid_list .single_product {
    flex-direction: column;
    padding: 10px 18px 18px 18px;
  }
}
.grid_list .single_product .action_links ul li.wishlist {
  transform: inherit;
  opacity: inherit;
  visibility: inherit;
}

.grid_list .product_thumb {
  margin-bottom: 0;
  min-width: 35%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .grid_list .product_thumb {
    flex: 0 0 41.666667%;
    min-width: 41.666667%;
  }
}
@media only screen and (max-width: 767px) {
  .grid_list .product_thumb {
    flex: 0 0 100%;
    min-width: 100%;
    margin-bottom: 25px;
  }
}

.col-cust-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: max-width;
  padding-right: 15px;
  padding-left: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .col-cust-5 {
    -ms-flex: 0 0 33%;
    flex: 0 0 33%;
  }
}
@media only screen and (max-width: 767px) {
  .col-cust-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media only screen and (max-width: 479px) {
  .col-cust-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.shop_wrapper > div {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.shop_toolbar_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  padding: 8px 10px;
  margin: 0 0 30px;
}
@media only screen and (max-width: 767px) {
  .shop_toolbar_wrapper {
    flex-direction: column;
    padding: 15px 10px 5px;
  }
}

@media only screen and (max-width: 767px) {
  .shop_toolbar_btn {
    margin-bottom: 20px;
  }
}









.shop_wrapper {
  position: relative;
}
.shop_wrapper > [class*="col"] {
  padding: 12px;
}
.shop_wrapper .single_product {
  border: 1px solid #eee;
  border-radius: 4px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-shadow: 0px 0px 20px #00000012;
  box-shadow: 0px 0px 20px #00000012;
  padding: 5px;
  background: #fff;

}
.shop_wrapper .tab-content{
  padding: 0;
  background-color: transparent;
}

.shop_wrapper .single_product:hover{
  box-shadow: 0px 0px 20px #B3B6B7;
}




@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop_wrapper .action_links ul li.add_to_cart a {
    padding: 0 17px;
  }
}
.shop_wrapper.grid_list .single_product {
  padding: 10px 20px;
  background-color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .shop_wrapper.grid_list .single_product {
    padding: 10px 20px 20px;
  }
}
.shop_wrapper.grid_4 .price_box span.current_price {
  font-size: 15px;
  margin-right: 3px;
}
.shop_wrapper.grid_4 .action_links ul li.wishlist a {
  width: 37px;
  height: 37px;
  line-height: 37px;
}
.shop_wrapper.grid_4 .action_links ul li.add_to_cart a {
  padding: 0 14px;
  line-height: 36px;
}

/* shop page css end*/
/*shop fullwidth css here*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shop_fullwidth .shop_toolbar.t_bottom {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .shop_fullwidth .shop_toolbar.t_bottom {
    margin-bottom: 0;
  }
}

/* 15. product details css here */

.product_d_right h1 {
  text-transform: capitalize;
  line-height: 20px;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product_d_right h1 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .product_d_right h1 {
    margin-bottom: 17px;
    font-size: 16px;
  }
}
.product_d_right .price_box {
  margin-bottom: 14px;
}
@media only screen and (max-width: 767px) {
  .product_d_right .price_box {
    margin-bottom: 9px;
  }
}
.product_d_right .price_box span.current_price {
  font-size: 23px;
}
.product_d_right .action_links {
  margin-bottom: 18px;
}
.product_d_right .action_links ul li {
  margin-right: 8px;
}
.product_d_right .action_links ul li.add_to_cart a {
  background: #f00a21;
  border-color: #f00a21;
  color: #ffffff;
  padding: 0 27px;
}
.product_d_right .action_links ul li.add_to_cart a:hover {
  background: #262626;
  border-color: #262626;
}

.product_variant.quantity {
  margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
  .product_variant.quantity {
    margin-bottom: 16px;
  }
}
.product_variant.quantity label {
  color: #3E444A;
  font-weight: 500;
  text-transform: capitalize;
  font-size: 10px;
  margin-bottom: 0;
}
.product_variant.quantity input {
  width: 18px;
  border: 1px solid #ebebeb;
  background: none;
  height: 42px;
  padding: 0 20px;
  border-radius: 5px;
  margin-left: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product_variant.quantity input {
    width: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product_variant.quantity input {
    width: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .product_variant.quantity input {
    width: 65px;
    margin-left: 10px;
    padding: 0 11px;
  }
}
.product_variant.color {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .product_variant.color {
    margin-bottom: 18px;
  }
}
.product_variant.color h3 {
  font-weight: 500;
  text-transform: capitalize;
  font-size: 18px;
  margin-bottom: 0;
  margin-right: 40px;
}
.product_variant.color label {
  font-size: 15px;
  font-weight: 500;
  text-transform: capitalize;
}
.product_variant.color ul li {
  display: inline-block;
  padding: 2px;
  border: 1px solid #ccc;
  margin-right: 5px;
}
.product_variant.color ul li:hover {
  border-color: #fff;
}
.product_variant.color ul li:last-child {
  margin-right: 0;
}
.product_variant.color ul li a {
  width: 20px;
  height: 20px;
  display: block;
}

.product_info_button {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
  margin-bottom: 22px;
}
.product_info_button ul li a {
  display: block;
  float: left;
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 500;
  margin-right: 35px;
  line-height: 26px;
  position: relative;
  padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .product_info_button ul li a {
    margin-right: 25px;
    font-size: 18px;
  }
}
.product_info_button ul li a::before {
  content: "";
  width: 0;
  left: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  bottom: 0;
  height: 2px;
  background: #f00a21;
  position: absolute;
}
.product_info_button ul li a.active {
  color: #f00a21;
}
@media only screen and (max-width: 479px) {
  .product_info_button ul li a.active {
    margin-bottom: 9px;
  }
}
.product_info_button ul li a.active::before {
  width: 100%;
}
.product_info_button ul li a:hover {
  color: #f00a21;
}
.product_info_button ul li:last-child a {
  margin-right: 0;
}

.product_info_content p {
  line-height: 28px;
}

.product_d_inner {
  padding: 20px 30px 30px;
  border: 1px solid #e5e5e5;
}

.product_d_info {
  margin-bottom: 48px;
}

.related_products .section_title {
  margin-bottom: 25px;
}
.related_products .section_title h2 {
  padding: 0;
}

/* 12. product grouped css here */

/*product grouped css end*/
/*variabla product css here*/

/*product sidebar css here*/

/* 13. cart page css here */

/*cart page css end*/
/* 14. checkout page css here */

.form_group {
  margin-bottom: 20px;
}
.form_group label {
  font-size: 14px;
  display: block;
  line-height: 18px;
  margin-bottom: 8px;
}
.form_group input {
  border: 1px solid #e5e5e5;
  background: none;
  height: 45px;
  width: 350px;
  padding: 0 20px;
}
@media only screen and (max-width: 767px) {
  .form_group input {
    width: 100%;
  }
}
.form_group button {
  display: inline-block;
  width: 80px;
  background: #262626;
  border: 0;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-right: 20px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
}
.form_group button:hover {
  background: #f00a21;
}

.form_group input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  position: relative;
  top: 3px;
}

.mb-20 {
  margin-bottom: 20px;
}
.product_variant input[type="checkbox"]{
  width: 30px;
  height: 30px;
  position: relative;
  top: 2px;
  margin-right: 10px;
  background:red ;
}

/*checkout page css end*/
/* 22. wishlist css here */

/*wishlist css end*/
/* 15. contact page css here */

.contact_message h3 {
  font-size: 21px;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact_message h3 {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .contact_message h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
.contact_message p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 20px;
}
.contact_message ul li {
  padding: 13px 0;
  border-top: 1px solid #e5e5e5;
}
.contact_message ul li:last-child {
  padding-bottom: 0;
}
.contact_message ul li i {
  margin-right: 10px;
}
.contact_message ul li a {
  color: #f00a21;
}
.contact_message ul li a:hover {
  color: #262626;
}
.contact_message label {
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.contact_message input {
  border: 1px solid #e5e5e5;
  height: 45px;
  background: #ffffff;
  width: 100%;
  padding: 0 20px;
  color: #262626;
}
.contact_message textarea {
  height: 170px;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  resize: none;
  margin-bottom: 20px;
  width: 100%;
  padding: 10px 20px;
  color: #262626;
}
.contact_message button {
  font-weight: 400;
  height: 42px;
  line-height: 42px;
  padding: 0 30px;
  text-transform: capitalize;
  border: none;
  background: #262626;
  color: #ffffff;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 4px;
}
.contact_message button:hover {
  background: #f00a21;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact_message.content {
    margin-bottom: 52px;
  }
}
@media only screen and (max-width: 767px) {
  .contact_message.content {
    margin-bottom: 52px;
  }
}

/*contact page css end*/
/* 17. login page css here */
.account_form h2 {
  font-size: 28px;
  text-transform: capitalize;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .account_form h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
.account_form form {
  border: 1px solid #e5e5e5;
  padding: 23px 20px 29px;
  border-radius: 5px;
}
.account_form label {
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  line-height: 12px;
  margin-bottom: 12px;
}
.account_form label:hover {
  color: #f00a21;
}
.account_form input {
  border: 1px solid #e5e5e5;
  height: 40px;
  max-width: 100%;
  padding: 0 20px;
  background: none;
  width: 100%;
}
.account_form button {
  background: #f00a21;
  border: 0;
  color: #ffffff;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  height: 34px;
  line-height: 21px;
  padding: 5px 20px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-left: 20px;
  border-radius: 20px;
}
.account_form button:hover {
  background: #262626;
}

.login_submit label input[type="checkbox"] {
  width: 15px;
  height: 13px;
  margin-right: 3px;
}

.login_submit {
  text-align: right;
}
.login_submit a {
  font-size: 13px;
  float: left;
  line-height: 39px;
}
.login_submit a:hover {
  color: #f00a21;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .login_submit a {
    float: none;
    line-height: 18px;
    display: block;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .login_submit a {
    float: none;
    line-height: 18px;
    display: block;
    margin-bottom: 20px;
  }
}

.account_form p {
  margin-bottom: 20px;
}

/*login page css end */
/* 16. faq page css here */

/*faq page css end*/
/*  18. my account css here */
@media only screen and (max-width: 767px) {
  .dashboard_tab_button {
    margin-bottom: 20px;
  }
}
.dashboard_tab_button ul li {
  margin-bottom: 5px;
}
.dashboard_tab_button ul li a {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  text-transform: capitalize;
  background: #262626;
  border-radius: 0px;
}
.dashboard_tab_button ul li a:hover {
  background: #f00a21;
  color: #ffffff;
}
.dashboard_tab_button ul li a.active {
  background: #f00a21;
}

.main_content_area {
  padding: 60px 0 55px;
}

.dashboard_content h3 {
  font-size: 22px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 15px;
}
.dashboard_content h4 {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 10px;
}
.dashboard_content a {
  color: #f00a21;
  font-weight: 500;
}
.dashboard_content p a {
  color: #f00a21;
  font-weight: 500;
}

.table-responsive table thead {
  background: #f2f2f2;
}
.table-responsive table thead tr th {
  text-align: center;
}
.table-responsive table tbody tr td {
  border-right: 1px solid #e5e5e5;
  font-weight: 500;
  text-transform: capitalize;
  font-size: 14px;
  text-align: center;
  min-width: 150px;
}
.table-responsive table tbody tr td:last-child a {
  color: #f00a21;
}
.table-responsive .table {
  border-left: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}

.dashboard_content address {
  font-weight: 500;
}

/*my account css end*/
/* 10. about page css here */

/*about page css end*/
/* 20. services page css here */
.services_gallery {
  padding-bottom: 28px;
}

.services_content h3 {
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 11px;
  line-height: 14px;
}
.services_content h3 a:hover {
  color:#f00a21;
}
.services_content p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 0;
}

.services_thumb {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .services_thumb img {
    width: 100%;
  }
}

.single_services {
  margin-bottom: 25px;
}

/*services page css end*/
/* 11. blog page css here */

/*13. blog  sidebar css here*/

/*blog sidebar css here*/

/* 12. blog details css here */

/*blog details css end*/
/*  24. modal css here */
.modal-dialog.modal-dialog-centered {
  min-width: 1100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .modal-dialog.modal-dialog-centered {
    min-width: 1000px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal-dialog.modal-dialog-centered {
    min-width: 950px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal-dialog.modal-dialog-centered {
    min-width: 730px;
  }
}
@media only screen and (max-width: 767px) {
  .modal-dialog.modal-dialog-centered {
    min-width: 90%;
  }
}

.modal_tab_img {
  text-align: center;
  margin-bottom: 10px;
}
.modal_tab_img img {
  margin: 0 auto;
}

.modal_title h2 {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 26px;
}

.modal_title li a:hover {
color:#f00a21; 

}

.modal_price {
  margin-bottom: 12px;
}
.modal_price span {
  font-weight: 600;
  color: #f00a21;
  font-size: 16px;
}

.modal_description p {
  line-height: 24px;
  font-size: 15px;
  margin: 0;
}

.modal_add_to_cart {
  margin-bottom: 25px;
}
.modal_add_to_cart form input {
  width: 95px;
  border: 1px solid #e5e5e5;
  background: none;
  padding: 0 10px;
  height: 45px;
}
@media only screen and (max-width: 767px) {
  .modal_add_to_cart  input {
    width: 75px;
  }
}
.modal_add_to_cart  button {
  background: none;
  border: 0;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  height: 45px;
  width: 230px;
  line-height: 18px;
  padding: 10px 15px;
  text-transform: uppercase;
  background: #262626;
  color: #ffffff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}

.modal_add_to_cart1  button {
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  height: 45px;
  width: 230px;
  line-height: 18px;
  padding: 10px 15px;
  text-transform: uppercase;
  background: #262626;
  color: #ffffff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}

.modal_add_to_cart1 button:hover {
  background: #f00a21;
  color: #ffffff;
  border-color: #f00a21;
}


@media only screen and (max-width: 767px) {
  .modal_add_to_cart  button {
    width: 130px;
  }
}
.modal_add_to_cart button:hover {
  background: #f00a21;
  color: #ffffff;
  border-color: #f00a21;
}

.modal_body {
  padding: 29px 6px 38px;
}
@media only screen and (max-width: 767px) {
  .modal_body .modal_tab {
    margin-bottom: 60px;
  }
}

.modal-content {
  border-radius: 0;
}

.modal-content button.close {
  position: absolute;
  left: 94%;
  width: 35px;
  height: 35px;
  display: block;
  border: 1px solid #e5e5e5;
  top: 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .modal-content button.close {
    left: 83%;
    width: 29px;
    height: 32px;
    top: 4px;
    margin-bottom: 14px;
  }
}
.modal-content button.close:hover {
  color: #f00a21;
}
.modal_add_to_cart.mb-15 {
  margin-bottom: 23px;
}

.modal_description.mb-15 {
  margin-bottom: 20px;
}

/*modal css end*/
/*  23. newsletter popup css here */

/*newsletter popup css end*/
/* 09. error page css heer   */

/*404 page css end*/
/* 25. portfolio css here */

/*portfolio page css end*/

/*# sourceMappingURL=style.css.map */

  :root {
    --vicpos-orange:        #ff5000;
    --vicpos-navy:          #0b1728;
    --color-primary:        #f00a21;
    --pd_accent:            #f00a21;   /* color de marca de la ficha de producto (articulo.php y vista_rapida.php; antes cada uno lo ponía en su ) */
    --color-menu:           #000000;
    --color-text-main:      #ffffff;
    --color-primary-text:   #f00a21;
    --color-primary-ondark: #f77583;
    --color-primary-contrast: #ffffff;
    --color-primary-light:  rgba(240,10,33, 0.10);
    --color-primary-medium: rgba(240,10,33, 0.20);
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg:   0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);
    --shadow-xl:   0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-full: 9999px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --font:        'Poppins', 'Lato', sans-serif;
    --gray-50:     #f8fafc;
    --gray-100:    #f1f5f9;
    --gray-200:    #e2e8f0;
    --gray-400:    #94a3b8;
    --gray-600:    #475569;
    --gray-900:    #0f172a;
  }

  /* BASE */
  body { font-family: var(--font); background: var(--gray-50); color: var(--gray-900); }
  h1,h2,h3,h4,h5,h6 { font-family: var(--font); font-weight: 600; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: var(--gray-100); }
  ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); }

  /* HEADER TOP */
  .header_top { background: var(--gray-900); border-bottom: none !important; }
  .header_top .welcome_text p { color: var(--gray-400); font-size: 12px; }
  .header_top .welcome_text p span { color: var(--color-primary); font-weight: 600; }
  .header_top .top_right > ul > li > a { color: var(--gray-400); font-size: 12px; }
  .header_top .top_right > ul > li > a:hover { color: #fff; }

  /* HEADER MIDDLE */
  .header_middle {
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
  }

  /* BUSCADOR */
  .search-container form {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--gray-50);
    transition: var(--transition);
    overflow: hidden;
  }
  .search-container form:focus-within {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--color-primary-light);
  }
  .search_box input {
    background: transparent;
    font-size: 14px;
    color: var(--gray-900);
    opacity: 1;
    padding: 0 65px 0 18px;
  }
  .search_box input::placeholder { color: var(--gray-400); }
  .search_box button {
    background: var(--color-primary);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    transition: var(--transition);
  }
  .search_box button:hover { filter: brightness(0.88); }
  input[type=search]:focus { outline: none; box-shadow: none; }

  /* HEADER BOTTOM — solo escritorio: en celular el menú de navegación se
     oculta y este fondo quedaba como una franja oscura vacía debajo de
     "CATEGORIAS" (mismo motivo que la regla equivalente en modern-theme.php). */
  @media only screen and (min-width: 992px) {
    .header_bottom { background: var(--gray-900); }
  }
  .main_menu nav > ul > li > a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0 16px;
    line-height: 52px;
    transition: var(--transition);
  }
  .main_menu nav > ul > li > a:hover { color: var(--color-menu); }
  .main_menu nav > ul > li > a i { color: var(--color-menu); margin-right: 4px; }

  /* BOTONES Y MENÚS (Color de Menús / Botones de la BD) */
  .button,
  .btn.button,
  .btn-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-menu);
    color: var(--color-primary-contrast, #fff) !important;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
    line-height: 1;
  }
  .categories_title {
    background: var(--color-menu) !important;
  }
  .button:hover, .btn.button:hover, .btn-checkout:hover {
    filter: brightness(0.88);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: #fff !important;
  }

  /* TARJETAS PRODUCTO */
  .single_product {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
    margin-bottom: 20px;
  }
  .single_product:hover {
    border-color: var(--gray-400);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
  .product_thumb {
    position: relative;
    overflow: hidden;
    background: var(--gray-50);
    aspect-ratio: 1 / 1;
  }
  .product_thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
    padding: 8px;
  }
  .single_product:hover .product_thumb img { transform: scale(1.04); }

  .quick_button {
    position: absolute;
    bottom: -44px; left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
    transition: bottom .25s ease;
  }
  .single_product:hover .quick_button { bottom: 0; }
  .quick_button a {
    background: #fff;
    color: var(--gray-900);
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
  }
  .quick_button a:hover { background: var(--color-primary); color: #fff; }

  .product_content, .grid_content { padding: 12px 14px 14px; }
  .product_name h3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 6px;
    color: var(--gray-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product_name h3 a:hover { color: var(--color-primary); }

  /* PRECIO */
  .current_price { font-size: 15px; font-weight: 700; color: var(--color-primary-text); }
  .price_box {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; margin-bottom: 10px;
  }
  .price_box span[style*="line-through"] {
    font-size: 12px !important;
    color: var(--gray-400) !important;
    font-weight: 400 !important;
  }
  .price_box label[style*="color: red"] {
    background: #fef2f2;
    color: #dc2626 !important;
    border-radius: var(--radius-full);
    padding: 1px 7px;
    font-size: 11px !important;
    font-weight: 700;
    width: auto !important;
  }

  /* BOTÓN AGREGAR AL CARRITO */
  .add_to_cart a, li.add_to_cart a {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--color-primary);
    color: #fff !important;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 12px; font-weight: 600;
    transition: var(--transition);
    width: 100%; justify-content: center;
  }
  .add_to_cart a:hover, li.add_to_cart a:hover {
    filter: brightness(0.88); color: #fff !important;
  }

  /* WISHLIST */
  li.wishlist a {
    color: var(--gray-400); font-size: 17px;
    transition: var(--transition);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
  }
  li.wishlist a:hover, li.wishlist a.active {
    color: #dc2626; border-color: #fecaca; background: #fef2f2;
  }

  /* TÍTULO SECCIÓN */
  .section_title h2 {
    font-size: 22px; font-weight: 700;
    color: var(--gray-900);
    position: relative; padding-bottom: 10px;
    margin-bottom: 24px; display: inline-block;
  }
  .section_title h2::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 40px; height: 3px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
  }
  .section_title h2 span { color: var(--color-primary); }

  /* SLIDER */
  #carrusel-contenido {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  #carrusel-caja {
    height: 320px; width: 300%;
    animation: automatizacion 10s infinite linear;
    transition: all .9s ease;
  }
  .imagenes { height: 320px; width: 100%; object-fit: cover; }
  .carrusel-elemento { float: left; width: 33.333%; }
  @keyframes automatizacion {
    0%,30%  { margin-left: 0; }
    35%,65% { margin-left: -100%; }
    70%,95% { margin-left: -200%; }
    100%    { margin-left: 0; }
  }

  /* CARRUSEL MARCAS */
  .carrusel {
    height: 110px; display: flex; align-items: center;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    padding: 0 12px; margin: 16px 0;
  }
  .carrusel-items { display: flex; overflow: hidden; gap: 12px; align-items: center; }
  .carrusel-item {
    min-width: 130px; max-width: 130px; height: 65px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px; border-radius: var(--radius-sm);
    transition: var(--transition);
    filter: grayscale(50%); opacity: .75;
  }
  .carrusel-item img { width: 100%; height: 100%; object-fit: contain; }
  .carrusel-item:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }

  /* CATEGORÍAS */
  .single_services {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
    margin-bottom: 20px;
  }
  .single_services:hover {
    border-color: var(--gray-400);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
  .services_thumb { overflow: hidden; }
  .services_thumb img { transition: transform .35s ease; width: 100%; }
  .single_services:hover .services_thumb img { transform: scale(1.04); }
  .services_content { padding: 12px 14px; }
  .services_content h3 { font-size: 13px; font-weight: 600; color: var(--gray-900); }
  .services_content h3 a:hover { color: var(--color-primary); }

  .contenedor_img {
    background: var(--gray-50);
    width: 100%; height: 190px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .categorias {
    object-fit: contain; width: 100%; height: 100%;
    transition: transform .35s ease; padding: 8px;
  }
  .single_services:hover .categorias,
  .single_category_product:hover .categorias { transform: scale(1.05); }

  /* MINI CARRITO */
  .mini_cart {
    border-radius: var(--radius-md);
    border-top: 2px solid var(--color-primary);
    box-shadow: var(--shadow-xl);
  }
  .cart_button a {
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    padding: 0 18px; line-height: 36px;
    transition: var(--transition);
  }
  .cart_button a:hover { background: var(--color-primary); color: #fff; }

  /* BOTONES FLOTANTES */
  .whatsapp, .whatsapp_2 {
    position: fixed;
    width: 46px; height: 46px;
    right: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; z-index: 1000;
    transition: var(--transition);
    box-shadow: var(--shadow-lg);
    color: #fff;
  }
  .whatsapp { bottom: 20px; background: #25d366; }
  .whatsapp_2 { bottom: 78px; background: var(--color-primary); }
  .whatsapp:hover, .whatsapp_2:hover {
    transform: scale(1.1); box-shadow: var(--shadow-xl); color: #fff;
  }
  .whatsapp-icon, .fa-shopping-cart { margin: 0; }
  @media (max-width: 768px) { .whatsapp, .whatsapp_2 { right: 12px; } }

  /* BADGES */
  #notification_count1, #notification_count2 {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--color-primary); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    margin: 0; border: 2px solid #fff;
  }

  /* AUTOCOMPLETADO */
  #mylista {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden; padding: 4px 0 !important; margin-top: 4px;
  }
  .lista--enlace {
    color: var(--gray-900); min-height: 42px;
    display: flex; align-items: center;
    padding: 0 14px; font-size: 13px;
    transition: var(--transition);
  }
  .lista__item--inner:hover > .lista--enlace {
    background: var(--color-primary-light);
    color: var(--color-primary); padding-left: 18px;
  }
  .flex { display: flex; align-items: center; padding-left: 10px; }

  /* FORMULARIOS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select.form-control,
  select.form-control-sm,
  textarea {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 9px 13px; font-size: 13px;
    transition: var(--transition);
    background: var(--gray-50); color: var(--gray-900);
    width: 100%; font-family: var(--font);
  }
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  select.form-control:focus,
  select.form-control-sm:focus,
  textarea:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
  }
  .form_group { position: relative; }
  .form_group span {
    position: absolute; right: 11px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px; color: var(--gray-400);
    cursor: pointer; transition: var(--transition);
  }
  .form_group span:hover { color: var(--color-primary); }

  /* CHECKBOX */
  .checkbox {
    cursor: pointer; width: 15px; height: 15px;
    appearance: none;
    border: 1.5px solid var(--gray-200);
    border-radius: 4px; background: #fff;
    transition: var(--transition);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-position: 0 -2rem; background-size: 100%; background-repeat: no-repeat;
    vertical-align: middle;
  }
  .checkbox:hover { border-color: var(--color-primary); }
  .checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-position: 0 0;
  }

  /* MODAL */
  .modal-content {
    border-radius: var(--radius-lg); border: none;
    box-shadow: var(--shadow-xl); overflow: hidden;
  }
  .modal_title h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); }
  .b-close {
    position: absolute; top: 12px; right: 14px;
    font-size: 16px; font-weight: 700;
    color: var(--gray-400); cursor: pointer; z-index: 10;
    transition: var(--transition);
    background: var(--gray-100);
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .b-close:hover { background: var(--color-primary); color: #fff; }

  /* CARRITO PÁGINA */
  .cart_item {
    background: #fff; border-radius: var(--radius-md);
    padding: 14px; margin-bottom: 12px;
    border: 1px solid var(--gray-200);
    transition: var(--transition); display: flex;
  }
  .cart_item:hover { border-color: var(--gray-400); box-shadow: var(--shadow-sm); }
  .coupon_code {
    background: #fff; border-radius: var(--radius-md);
    padding: 18px; border: 1px solid var(--gray-200);
  }
  .cart_subtotal {
    display: flex; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--gray-100);
    font-size: 13px; color: var(--gray-600);
  }
  .cart_subtotal:last-child {
    border-bottom: none; font-weight: 700;
    font-size: 15px; color: var(--gray-900);
  }
  .cart_amount span { color: var(--color-primary); font-weight: 700; }

  /* MI CUENTA TABS */
  .dashboard_tab_button .nav-link {
    border-radius: var(--radius-sm); padding: 8px 18px;
    font-size: 13px; font-weight: 500; color: var(--gray-600);
    transition: var(--transition); border: 1.5px solid transparent; margin: 3px;
  }
  .dashboard_tab_button .nav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-color: var(--color-primary-medium);
  }
  .dashboard_tab_button .nav-link.active {
    background: var(--color-primary); color: #fff;
    border-color: var(--color-primary);
  }

  /* FOOTER */
  .footer_widgets { background: var(--gray-900); color: var(--gray-400); }
  .footer_contact ul li {
    padding: 5px 0; font-size: 13px; color: var(--gray-400);
    display: flex; align-items: center; gap: 8px;
  }
  .footer_contact ul li i { color: var(--color-primary); }
  .footer_contact ul li span { color: #fff; font-weight: 600; margin-right: 4px; }
  .footer_bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0; }
  .copyright_area p { color: var(--gray-400); font-size: 12px; }
  .copyright_area p a { color: var(--color-primary); }
  .copyright_area p a:hover { color: #fff; }

  /* SCROLL UP */
  #scrollUp {
    position: fixed !important;
    bottom: 132px !important;
    right: 16px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: var(--color-primary, #0162bd) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    box-shadow: var(--shadow-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 20px !important;
    text-decoration: none !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px) scale(0.85) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, filter .2s ease !important;
  }
  #scrollUp.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
  #scrollUp:hover {
    filter: brightness(0.9) !important;
    transform: translateY(-3px) scale(1.05) !important;
    color: #ffffff !important;
  }
  #scrollUp i {
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  @media (max-width: 768px) {
    #scrollUp { right: 14px !important; width: 44px !important; height: 44px !important; }
  }

  /* ATRIBUTOS */
  .cat {
    border-radius: 50%; width: 16px; height: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); display: inline-block;
  }

  /* ── DROPDOWN BUSCADOR ─────────────────────────────────────── */
  #mylista, #mylista2 {
    list-style: none;
    margin: 4px 0 0;
    padding: 6px 0;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,.13);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
  }

  .buscar-item { border-bottom: 1px solid var(--gray-100); }
  .buscar-item:last-child { border-bottom: none; }

  .buscar-enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    text-decoration: none;
    color: var(--gray-900);
    transition: background .15s;
  }
  .buscar-enlace:hover { background: var(--color-primary-light); }

  .buscar-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    flex-shrink: 0;
  }

  .buscar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .buscar-nombre {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .buscar-ref {
    font-size: 11px;
    color: var(--gray-400);
  }

  .buscar-precio {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }

  .buscar-precio-tachado {
    font-size: 11px;
    font-weight: 400;
    color: var(--gray-400);
    text-decoration: line-through;
  }

  .buscar-badge {
    background: #fef2f2;
    color: #dc2626;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    padding: 1px 6px;
    border-radius: var(--radius-full);
  }

  .buscar-vacio {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--gray-400);
    text-align: center;
  }

  .buscar-ver-todos {
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
  }
  .buscar-ver-todos a {
    display: block;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    text-align: center;
    letter-spacing: .3px;
    transition: background .15s;
  }
  .buscar-ver-todos a:hover { background: var(--color-primary-light); }
  .buscar-ver-todos a i { margin-left: 4px; font-size: 11px; }

  /* RESPONSIVE */
  @media (max-width: 767px) {
    .section_title h2 { font-size: 18px; }
    .single_product, .single_services { margin-bottom: 14px; }
    .product_thumb { aspect-ratio: 1 / 1; }
    #mylista { width: 100% !important; }
    .buscar-img { width: 40px; height: 40px; }
  }


/* ─── BASE ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: #f5f6fa;
  color: #1a1d27;
}
body, button, input, textarea, select { font-family: 'Poppins', sans-serif; }

/* Imágenes de producto / categoría — no globales */
.product_thumb img,
.services_thumb img,
.category_product_thumb img { border-radius: 0; }

/* ─── HEADER TOP ─────────────────────────────────────────────── */
.header_top { background: #1a1d27 !important; border-bottom: none; }
.header_top .welcome_text p { color: #9ca3af; font-size: 12px; }
.header_top .welcome_text p span { color: var(--color-primary); font-weight: 600; }
.header_top .top_right > ul > li > a { color: #9ca3af; font-size: 12px; transition: color .2s; }
.header_top .top_right > ul > li > a:hover { color: #fff; }

/* ─── HEADER MIDDLE ─────────────────────────────────────────── */
.header_middle {
  background: #fff !important;
  border-bottom: 1px solid #e8eaed !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 10px 0 !important;
  backdrop-filter: none !important;
}

/* ─── BUSCADOR ──────────────────────────────────────────────── */
.search-container form {
  background: #f5f6fa !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.search-container form:focus-within {
  border-color: var(--color-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}
.search_box input { background: transparent; font-size: 14px; }
.search_box button {
  background: var(--color-primary) !important;
  border-radius: 0 999px 999px 0 !important;
}
.search_box button:hover { filter: brightness(.88); }

/* ─── HEADER BOTTOM / NAVEGACIÓN ───────────────────────────── */
/* Solo en escritorio: en celular el menú de navegación (.main_menu) se oculta
   y este fondo oscuro quedaba como una franja vacía debajo de "CATEGORIAS",
   pisando con !important la regla de style.php que lo dejaba transparente ahí. */
@media only screen and (min-width: 992px) {
  .header_bottom { background: #1a1d27 !important; }
}
.main_menu nav > ul > li > a {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  color: #e2e8f0 !important;
  transition: color .2s !important;
}
.main_menu nav > ul > li > a:hover { color: var(--color-primary) !important; }
.main_menu nav > ul > li > a i { color: var(--color-primary); margin-right: 5px; }

/* ─── SIDEBAR DE CATEGORÍAS ─────────────────────────────────── */
.categories_menu {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8eaed;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.categories_title {
  background: var(--color-primary);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.categories_title h2,
.categories_title h2.categori_toggle {
  color: inherit;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.header_bottom .categories_title h2,
.header_bottom .categories_title h2.categori_toggle {
  color: #fff !important;
}
.categories_menu_toggle ul {
  padding: 6px 0 !important;
  height: auto !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  margin: 0 !important;
}
.categories_menu_toggle ul li { margin: 0 !important; border-bottom: 1px solid #f0f1f3; }
.categories_menu_toggle ul li:last-child { border-bottom: none; }
.categories_menu_toggle ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  background: #fff !important;
  border-left: 3px solid transparent !important;
  transition: all .18s ease !important;
  text-decoration: none !important;
}
.categories_menu_toggle ul li a:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-left-color: var(--color-primary) !important;
  padding-left: 24px !important;
}
.categories_menu_toggle ul li#more-btn a,
.categories_menu_toggle ul li a#more-btn {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* ─── HERO / SLIDER ─────────────────────────────────────────── */
.slider_section { padding-top: 6px !important; padding-bottom: 12px !important; }

#carrusel-contenido {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-medium) 100%);
  min-height: 320px;
  position: relative;
}
#carrusel-caja {
  height: 320px;
  width: 300%;
  animation: slide3 12s infinite;
}
@keyframes slide3 {
  0%,28%  { margin-left: 0; }
  33%,61% { margin-left: -100%; }
  66%,94% { margin-left: -200%; }
  100%    { margin-left: 0; }
}
.carrusel-elemento { float: left; width: 33.333%; }
.imagenes {
  height: 320px;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Imágenes banner laterales */
.slider_section .col-12 img {
  border-radius: 12px;
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.slider_section .col-12 {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.slider_section .col-12 > a,
.slider_section .col-12 > img { flex: 1; }

/* ─── SECCIÓN CATEGORÍAS (carousel) ──────────────────────────── */
.category_product_area { padding-top: 8px !important; }

.single_category_product {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  transition: all .25s ease !important;
  margin-bottom: 0 !important;
  cursor: pointer;
}
.single_category_product:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  transform: translateY(-4px) !important;
}

.contenedor_img {
  background: #f8f9fb !important;
  width: 100% !important;
  height: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f1f3f5 !important;
  padding: 0 !important;
}
.categorias {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 16px !important;
  transition: transform .3s ease !important;
  border-radius: 0 !important;
}
.single_category_product:hover .categorias { transform: scale(1.07) !important; }

.category_product_name { padding: 10px 12px 12px !important; }
.category_product_name h2 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: #374151 !important;
  margin: 0 !important;
}
.category_product_name h2 a { color: #374151 !important; text-decoration: none !important; }
.category_product_name h2 a:hover { color: var(--color-primary) !important; }

/* ─── TÍTULO SECCIÓN ────────────────────────────────────────── */
.section_title { margin-bottom: 28px; }
.section_title h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1d27 !important;
  position: relative !important;
  padding-bottom: 12px !important;
  display: inline-block !important;
  margin-bottom: 0 !important;
  letter-spacing: -.2px !important;
  border: none !important;
  outline: none !important;
}
.section_title h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 40px !important; height: 3px !important;
  background: var(--color-primary) !important;
  border-radius: 999px !important;
}
.section_title h2 span {
  color: var(--color-primary-text) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}

/* ─── TARJETAS PRODUCTO ─────────────────────────────────────── */
.single_product {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: all .25s ease !important;
  margin-bottom: 20px !important;
}
.single_product:hover {
  border-color: var(--color-primary-medium) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.11) !important;
  transform: translateY(-3px) !important;
}

.product_thumb {
  background: #f8f9fb !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.product_thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
  transition: transform .3s ease !important;
  border-radius: 0 !important;
}
.single_product:hover .product_thumb img { transform: scale(1.05) !important; }

.quick_button {
  position: absolute !important;
  bottom: -50px !important; left: 0 !important; right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px !important;
  background: linear-gradient(to top, rgba(0,0,0,.40) 0%, transparent 100%) !important;
  transition: bottom .25s ease !important;
}
.single_product:hover .quick_button { bottom: 0 !important; }
.quick_button a {
  background: #fff !important;
  color: #374151 !important;
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transition: all .18s ease !important;
  border: none !important;
}
.quick_button a:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.product_content, .grid_content { padding: 12px 14px 14px !important; }
.product_name h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
  color: #1a1d27 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product_name h3 a:hover { color: var(--color-primary) !important; }

/* ─── PRECIO ────────────────────────────────────────────────── */
.current_price { font-size: 15px !important; font-weight: 800 !important; color: #0f172a !important; }   /* precio en negro: el rojo queda para botones y descuentos */
.price_box { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 10px !important; }
.price_box span[style*="line-through"] {
  font-size: 12px !important; color: #9ca3af !important; font-weight: 400 !important;
}
.price_box label[style*="color: red"] {
  background: #fef2f2 !important; color: #dc2626 !important;
  border-radius: 999px !important; padding: 2px 7px !important;
  font-size: 11px !important; font-weight: 700 !important;
  width: auto !important;
}

/* ─── BOTÓN AGREGAR AL CARRITO ──────────────────────────────── */
.add_to_cart a, li.add_to_cart a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important;
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 12px !important; font-weight: 600 !important;
  line-height: 1 !important;
  transition: all .2s ease !important;
  width: 100% !important;
  border: none !important;
}
.add_to_cart a:hover, li.add_to_cart a:hover {
  filter: brightness(.88) !important; color: var(--color-primary-contrast) !important;
}

/* ─── BOTÓN GENÉRICO ────────────────────────────────────────── */
.button, .btn.button {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 24px !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  transition: all .2s ease !important;
  box-shadow: none !important;
}
.button:hover, .btn.button:hover {
  filter: brightness(.88) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ─── WISHLIST ──────────────────────────────────────────────── */
.btn_wishlist,
button.btn_wishlist,
button[id^="div1"], button[id^="div2"],
button[id^="m_div1"], button[id^="m_div2"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid #fecaca !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  font-size: 18px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.12) !important;
  outline: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.btn_wishlist[style*="display:none"],
.btn_wishlist[style*="display: none"],
button[id^="div1"][style*="display:none"],
button[id^="div1"][style*="display: none"],
button[id^="div2"][style*="display:none"],
button[id^="div2"][style*="display: none"],
button[id^="m_div1"][style*="display:none"],
button[id^="m_div1"][style*="display: none"],
button[id^="m_div2"][style*="display:none"],
button[id^="m_div2"][style*="display: none"] {
  display: none !important;
}
.btn_wishlist .fa,
.btn_wishlist .fa-heart,
button[id^="div1"] .fa,
button[id^="m_div1"] .fa {
  color: #dc2626 !important;
  font-size: 18px !important;
}
.btn_wishlist:not(.active),
button[id^="div2"],
button[id^="m_div2"] {
  border-color: #e5e7eb !important;
  background: #ffffff !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}
.btn_wishlist:not(.active) .fa,
button[id^="div2"] .fa,
button[id^="m_div2"] .fa {
  color: #6b7280 !important;
  font-size: 18px !important;
}
.btn_wishlist:hover,
button[id^="div1"]:hover, button[id^="div2"]:hover,
button[id^="m_div1"]:hover, button[id^="m_div2"]:hover {
  transform: scale(1.06) !important;
  border-color: #f87171 !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.btn_wishlist:hover .fa,
button[id^="div1"]:hover .fa, button[id^="div2"]:hover .fa,
button[id^="m_div1"]:hover .fa, button[id^="m_div2"]:hover .fa {
  color: #dc2626 !important;
}

/* ─── WISHLIST TARJETAS ─────────────────────────────────────── */
.btn_card_wishlist,
button[id^="c_div1"],
button[id^="c_div2"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.btn_card_wishlist.active,
button[id^="c_div1"] {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.btn_card_wishlist.active .fa,
button[id^="c_div1"] .fa {
  color: #dc2626 !important;
  font-size: 14px !important;
}

.btn_card_wishlist:not(.active),
button[id^="c_div2"] {
  border-color: #e5e7eb !important;
  background: #ffffff !important;
  color: #6b7280 !important;
}

.btn_card_wishlist:not(.active) .fa,
button[id^="c_div2"] .fa {
  color: #6b7280 !important;
  font-size: 14px !important;
}

.btn_card_wishlist:hover {
  transform: scale(1.1) !important;
  border-color: #f87171 !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.btn_card_wishlist:hover .fa {
  color: #dc2626 !important;
}

.btn_card_wishlist[style*="display:none"],
.btn_card_wishlist[style*="display: none"],
button[id^="c_div1"][style*="display:none"],
button[id^="c_div1"][style*="display: none"],
button[id^="c_div2"][style*="display:none"],
button[id^="c_div2"][style*="display: none"] {
  display: none !important;
}

li.wishlist a {
  color: #9ca3af !important;
  transition: all .18s ease !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #e8eaed !important;
}
li.wishlist a:hover, li.wishlist a.active {
  color: #dc2626 !important; border-color: #fecaca !important; background: #fef2f2 !important;
  width: 32px !important; height: 32px !important; display: inline-flex !important;
}

/* ─── BANNER (pie de slider) ────────────────────────────────── */
.banner_area { margin-bottom: 40px !important; }
.banner_thumb img {
  width: 100% !important; height: 280px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* ─── CARRUSEL MARCAS ───────────────────────────────────────── */
.carrusel {
  height: 100px !important; display: flex !important; align-items: center !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8eaed !important;
  padding: 0 12px !important; margin: 16px 0 !important;
  box-shadow: none !important;
}
.carrusel-items { display: flex !important; overflow: hidden !important; gap: 12px !important; align-items: center !important; }
.carrusel-item {
  min-width: 120px !important; max-width: 120px !important; height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 6px !important; border-radius: 8px !important;
  transition: all .2s ease !important;
  filter: grayscale(60%) !important; opacity: .7 !important;
}
.carrusel-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; }
.carrusel-item:hover { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1.08) !important; }

/* ─── FORMULARIOS ───────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select.form-control,
select.form-control-sm,
textarea {
  border: 1.5px solid #e8eaed !important;
  border-radius: 8px !important;
  padding: 9px 13px !important;
  font-size: 13px !important;
  background: #fafbfc !important;
  color: #1a1d27 !important;
  transition: border-color .2s, box-shadow .2s !important;
  width: 100% !important;
  font-family: 'Poppins', sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
  outline: none !important;
}

/* ─── MODAL ─────────────────────────────────────────────────── */
.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
}
.modal_title h2 { font-size: 18px !important; font-weight: 700 !important; }
.b-close {
  position: absolute !important; top: 12px !important; right: 14px !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: #9ca3af !important; cursor: pointer !important; z-index: 10 !important;
  background: #f3f4f6 !important;
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .18s ease !important;
}
.b-close:hover { background: var(--color-primary) !important; color: #fff !important; }

/* ─── MINI CARRITO ──────────────────────────────────────────── */
.mini_cart {
  border-radius: 14px !important;
  border: 1px solid #e8eaed !important;
  border-top: 3px solid var(--color-primary) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
  background: #fff !important;
}
.cart_button a { border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; transition: all .2s !important; }
.cart_button a:hover { background: var(--color-primary) !important; color: #fff !important; }

/* ─── CARRITO PÁGINA ────────────────────────────────────────── */
.cart_item {
  background: #fff !important; border-radius: 12px !important;
  padding: 14px !important; margin-bottom: 12px !important;
  border: 1px solid #e8eaed !important;
  transition: border-color .2s !important;
}
.cart_item:hover { border-color: var(--color-primary-medium) !important; }
.coupon_code {
  background: #fff !important; border-radius: 12px !important;
  padding: 18px !important; border: 1px solid #e8eaed !important;
}
.cart_subtotal {
  display: flex !important; justify-content: space-between !important;
  padding: 8px 0 !important; border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13px !important; color: #6b7280 !important;
}
.cart_subtotal:last-child { border-bottom: none !important; font-weight: 700 !important; font-size: 15px !important; color: #1a1d27 !important; }
.cart_amount span { color: var(--color-primary) !important; font-weight: 700 !important; }

/* ─── BOTONES FLOTANTES ─────────────────────────────────────── */
.whatsapp, .whatsapp_2 {
  position: fixed !important;
  width: 46px !important; height: 46px !important;
  right: 16px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important; z-index: 1000 !important;
  transition: all .25s ease !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.18) !important;
  color: #fff !important;
}
.whatsapp { bottom: 20px !important; background: #25d366 !important; }
.whatsapp_2 { bottom: 78px !important; background: var(--color-primary) !important; }
.whatsapp:hover, .whatsapp_2:hover {
  transform: scale(1.1) translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
  color: #fff !important;
}

/* ─── SCROLL UP: ver bloque principal más abajo (línea ~900) ─── */

/* ─── BADGES CARRITO/DESEOS ─────────────────────────────────── */
#notification_count1, #notification_count2 {
  position: absolute !important; top: -5px !important; right: -5px !important;
  min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
  background: var(--color-primary) !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important;
  border-radius: 999px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; border: 2px solid #fff !important;
}

/* ─── AUTOCOMPLETADO ─────────────────────────────────────────── */
#mylista {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
  border: 1px solid #e8eaed !important;
  overflow: hidden !important; overflow-y: auto !important; max-height: 420px !important; padding: 4px 0 !important; margin-top: 6px !important;
}
.lista--enlace {
  color: #374151 !important; min-height: 40px !important;
  display: flex !important; align-items: center !important;
  padding: 0 14px !important; font-size: 13px !important;
  transition: all .15s ease !important;
}
.lista__item--inner:hover > .lista--enlace {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  padding-left: 18px !important;
}

/* ─── TABS MI CUENTA ─────────────────────────────────────────── */
.dashboard_tab_button .nav-link {
  border-radius: 8px !important; padding: 8px 18px !important;
  font-size: 13px !important; font-weight: 500 !important; color: #6b7280 !important;
  transition: all .2s ease !important; border: 1.5px solid transparent !important;
  margin: 3px !important;
}
.dashboard_tab_button .nav-link:hover {
  color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary-medium) !important;
}
.dashboard_tab_button .nav-link.active {
  background: var(--color-primary) !important;
  color: #fff !important; border-color: var(--color-primary) !important;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
.footer_widgets {
  background: #0f172a !important;
  color: #9ca3af !important;
  border-top: 3px solid var(--color-primary) !important;
}
.footer_bottom {
  background: #0f172a !important;
  border-top: none !important;
}
.footer_widgets h5 { font-weight: 700 !important; }
.footer-description { margin-bottom: 20px !important; }
.footer_widgets a { color: #9ca3af !important; }
.footer_widgets a:hover { color: #fff !important; }
.footer_widgets .footer-social a:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
}
.footer_widgets .footer-contact i { color: var(--color-primary) !important; }
.footer_widgets .footer-contact .fa-whatsapp { color: #25d366 !important; }
.footer_bottom a { color: var(--color-primary-ondark) !important; }
.footer_bottom a:hover { color: #fff !important; }

/* ─── PÁGINA CONTACTO ───────────────────────────────────────── */
.contact_section { padding-top: 32px !important; padding-bottom: 60px !important; }
.contact-map-wrapper {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10) !important;
  margin-bottom: 40px !important;
}
.contact-card {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 20px !important;
  border: 1px solid #e8eaed !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  height: 100% !important;
  transition: all .25s ease !important;
}
.contact-card:hover {
  border-color: var(--color-primary-medium) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  transform: translateY(-2px) !important;
}
.contact-card__icon {
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  background: var(--color-primary-light) !important;
  border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important;
  color: var(--color-primary) !important;
}
.contact-card--whatsapp .contact-card__icon {
  background: rgba(37,211,102,.12) !important;
  color: #25d366 !important;
}
.contact-card__body {
  display: flex !important; flex-direction: column !important;
  gap: 4px !important; flex: 1 !important; min-width: 0 !important;
}
.contact-card__label {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .8px !important;
  color: #9ca3af !important;
}
.contact-card__value {
  font-size: 14px !important; font-weight: 500 !important;
  color: #1a1d27 !important; text-decoration: none !important;
  word-break: break-all !important; transition: color .2s !important;
  display: block !important;
}
.contact-card__value:hover { color: var(--color-primary) !important; }
/* contacto: botón de acción dentro de la tarjeta (Cómo llegar, Llamar, WhatsApp, correo) y fila de redes */
.contact-card__btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: 8px !important; align-self: flex-start !important; background: var(--color-primary) !important; color: var(--color-primary-contrast, #fff) !important; border-radius: 6px !important; padding: 5px 11px !important; font-size: 11.5px !important; font-weight: 700 !important; text-decoration: none !important; transition: opacity .2s !important; }
.contact-card__btn:hover { opacity: .85 !important; color: var(--color-primary-contrast, #fff) !important; }
.contact-card__btn--wa { background: #25d366 !important; color: #fff !important; }
.contact-redes { display: flex !important; justify-content: center !important; gap: 12px !important; margin: 6px 0 24px !important; }
.contact-redes a { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid #e8eaed !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #334155 !important; font-size: 18px !important; text-decoration: none !important; transition: all .2s !important; }
.contact-redes a:hover { background: var(--color-primary) !important; color: var(--color-primary-contrast, #fff) !important; border-color: var(--color-primary) !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  #carrusel-caja { height: 240px !important; }
  .imagenes { height: 240px !important; }
  .contenedor_img { height: 140px !important; }
}
@media (max-width: 767px) {
  .slider_section { padding-top: 16px !important; }
  #carrusel-caja { height: 200px !important; }
  .imagenes { height: 200px !important; }
  .contenedor_img { height: 130px !important; }
  .banner_thumb img { height: 200px !important; }
  .section_title h2 { font-size: 18px !important; }
  .header_middle { padding: 8px 0 !important; }
  .slider_section .col-12 { flex-direction: column !important; }
  .contact-map-wrapper iframe { height: 260px !important; }
  .contact-card { padding: 16px !important; }
}

/* ─── OPTIMIZACIÓN MÓVIL DEEP & FLUID RESPONSIVE ────────── */
html, body {
  overflow-x: hidden !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
img, iframe, video {
  max-width: 100%;
  height: auto;
}

/* ─── BOTONES FLOTANTES DE ACCIÓN (STACK VERTICAL PERFECTO) ─── */
.whatsapp,
.whatsapp_2,
.cart-container a {
  position: fixed !important;
  right: 16px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .25s ease !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.20) !important;
  z-index: 9999 !important;
}

/* 1. WhatsApp (Verde - Abajo del todo) */
.whatsapp {
  bottom: 20px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 24px !important;
}

/* 2. Carrito Flotante (Morado/Primario - Encima de WhatsApp) */
.whatsapp_2,
.cart-container a {
  bottom: 76px !important;
  background: var(--color-primary, #e8092e) !important;
  color: #ffffff !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 20px !important;
}

/* 3. Botón Volver Arriba (Color Primario Configurable de la Tienda - Encima del Carrito) */
#scrollUp {
  position: fixed !important;
  bottom: 132px !important;
  right: 16px !important;
  background: var(--color-primary, #0162bd) !important;
  color: #ffffff !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.22) !important;
  z-index: 99999 !important;
  cursor: pointer !important;
  /* Oculto al 100% en la parte superior */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.85) !important;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
}

/* Visible cuando el usuario baja en la plataforma */
#scrollUp.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.whatsapp:hover, .whatsapp_2:hover, .cart-container a:hover, #scrollUp:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.28) !important;
  color: #ffffff !important;
}

#scrollUp i {
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 767px) {
  .whatsapp {
    bottom: 18px !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
  }
  .whatsapp_2, .cart-container a {
    bottom: 72px !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
  }
  #scrollUp {
    bottom: 126px !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 991px) {
  .header_middle .search-container {
    display: block !important;
    margin-bottom: 0 !important;
  }
  .header_top {
    padding: 6px 0 !important;
    font-size: 11px !important;
  }
  .header_middle {
    padding: 8px 0 !important;
  }
  .search-container form {
    height: 40px !important;
  }
  .search-container input {
    height: 40px !important;
    font-size: 13px !important;
  }
  .search-container button {
    height: 40px !important;
    width: 44px !important;
  }
  .header_bottom.sticky-header {
    display: none !important;
  }
  .dashboard_tab_button {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
  }
  .dashboard_tab_button ul.dashboard-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px !important;
    width: max-content !important;
  }
  .dashboard_tab_button ul.dashboard-list li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .dashboard_tab_button ul.dashboard-list li a {
    padding: 8px 18px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    display: block !important;
    border: none !important;
  }
  .dashboard_tab_button ul.dashboard-list li a.active {
    background: var(--color-primary, #e8092e) !important;
    color: #ffffff !important;
  }
}

@media (max-width: 767px) {
  #carrusel-contenido, #carrusel-caja, .imagenes {
    height: 180px !important;
    min-height: 180px !important;
    border-radius: 10px !important;
  }
  .shop_wrapper > div[class*="col-"],
  #mis_articulos > div[class*="col-"],
  .filter_data .row > div[class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 10px !important;
  }
  .single_product {
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
  }
  .product_thumb {
    padding: 8px !important;
  }
  .product_thumb img, .categorias {
    max-height: 120px !important;
  }
  .product_content.grid_content {
    padding: 8px !important;
  }
  .product_name h3 {
    font-size: 12px !important;
    height: 32px !important;
    line-height: 1.3 !important;
  }
  .price_box {
    font-size: 14px !important;
  }
  .btn_card_wishlist {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .btn_agregar,
  .single_product button[type="button"] {
    font-size: 11px !important;
    padding: 7px 4px !important;
    border-radius: 6px !important;
  }
  .idx-trust-strip {
    padding: 14px 0 !important;
  }
  .idx-trust-item {
    gap: 8px !important;
  }
  .idx-trust-item i {
    font-size: 22px !important;
    min-width: 24px !important;
  }
  .idx-trust-item strong {
    font-size: 12px !important;
  }
  .idx-trust-item span {
    font-size: 10.5px !important;
  }
  .modal-dialog {
    margin: 12px !important;
  }
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .table {
    font-size: 12.5px !important;
  }
  .table th, .table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
}

/* ─── OPTIMIZACIÓN DE ESPACIOS CABECERA / CONTENIDO ─────────── */
.product_details.mt-50 { margin-top: 10px !important; }
.slider_section,
.slider_section.mt-10,
.slider_section.mt-20,
.slider_section.mt-30,
.slider_section.mt-50 { margin-top: 0 !important; }
.header_middle { padding: 4px 0 !important; }
.selector_sucursal { display: none !important; }
#div_buscador { min-height: 0 !important; }




	.accordion {
		--bs-accordion-color:rgb(255, 255, 255);
		--bs-accordion-bg: rgb(255, 255, 255);
		--bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
		--bs-accordion-border-color: var(--bs-border-color);
		--bs-accordion-border-width: 1px;
		--bs-accordion-border-radius: 0.375rem;
		--bs-accordion-inner-border-radius: calc(0.375rem - 1px);
		--bs-accordion-btn-padding-x: 1.25rem;
		--bs-accordion-btn-padding-y: 1rem;
		--bs-accordion-btn-color: #212529;
		--bs-accordion-btn-bg: var(--bs-accordion-bg);
		--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		--bs-accordion-btn-icon-width: 1.25rem;	
		--bs-accordion-btn-icon-transform: rotate(-180deg);
		--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
		--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		--bs-accordion-btn-focus-border-color:rgb(251, 251, 252);
		--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgb(255, 255, 255);
		--bs-accordion-body-padding-x: 1.25rem;
		--bs-accordion-body-padding-y: 1rem;
		--bs-accordion-active-color: #ffffff;
		--bs-accordion-active-bg: #f00a21	}

	.accordion-button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
		font-size: 1rem;
		color: var(--bs-accordion-btn-color);
		text-align: left;
		background-color: var(--bs-accordion-btn-bg);
		border: 0;
		border-radius: 0;
		overflow-anchor: none;
		transition: var(--bs-accordion-transition)
	}

	@media (prefers-reduced-motion:reduce) {
		.accordion-button {
			transition: none
		}
	}

	.accordion-button:not(.collapsed) {
		color: var(--bs-accordion-active-color);
		background-color: var(--bs-accordion-active-bg);
		box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)
	}

	.accordion-button:not(.collapsed)::after {
		background-image: var(--bs-accordion-btn-active-icon);
		transform: var(--bs-accordion-btn-icon-transform)
	}

	.accordion-button::after {
		flex-shrink: 0;
		width: var(--bs-accordion-btn-icon-width);
		height: var(--bs-accordion-btn-icon-width);
		margin-left: auto;
		content: "";
		background-image: var(--bs-accordion-btn-icon);
		background-repeat: no-repeat;
		background-size: var(--bs-accordion-btn-icon-width);
		transition: var(--bs-accordion-btn-icon-transition)
	}

	@media (prefers-reduced-motion:reduce) {
		.accordion-button::after {
			transition: none
		}
	}

	.accordion-button:hover {
		z-index: 2
	}

	.accordion-button:focus {
		z-index: 3;
		border-color: var(--bs-accordion-btn-focus-border-color);
		outline: 0;
		box-shadow: var(--bs-accordion-btn-focus-box-shadow)
	}

	.accordion-header {
		margin-bottom: 0
	}

	.accordion-item {
		color: var(--bs-accordion-color);
		background-color: var(--bs-accordion-bg);
		border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
	}

	.accordion-item:first-of-type {
		border-top-left-radius: var(--bs-accordion-border-radius);
		border-top-right-radius: var(--bs-accordion-border-radius)
	}

	.accordion-item:first-of-type .accordion-button {
		border-top-left-radius: var(--bs-accordion-inner-border-radius);
		border-top-right-radius: var(--bs-accordion-inner-border-radius)
	}

	.accordion-item:not(:first-of-type) {
		border-top: 0
	}

	.accordion-item:last-of-type {
		border-bottom-right-radius: var(--bs-accordion-border-radius);
		border-bottom-left-radius: var(--bs-accordion-border-radius)
	}

	.accordion-item:last-of-type .accordion-button.collapsed {
		border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
		border-bottom-left-radius: var(--bs-accordion-inner-border-radius)
	}

	.accordion-item:last-of-type .accordion-collapse {
		border-bottom-right-radius: var(--bs-accordion-border-radius);
		border-bottom-left-radius: var(--bs-accordion-border-radius)
	}

	.accordion-body {
		padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)
	}

	.accordion-flush .accordion-collapse {
		border-width: 0
	}

	.accordion-flush .accordion-item {
		border-right: 0;
		border-left: 0;
		border-radius: 0
	}

	.accordion-flush .accordion-item:first-child {
		border-top: 0
	}

	.accordion-flush .accordion-item:last-child {
		border-bottom: 0
	}

	.accordion-flush .accordion-item .accordion-button,
	.accordion-flush .accordion-item .accordion-button.collapsed {
		border-radius: 0
	}