/* CSS content (all pages) */
html { min-height: 100%; }
body.bodywebsite { margin: 0; font-family: Inter, 'Open Sans', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.bodywebsite h1 { margin-top: 0; margin-bottom: 0; padding: 10px; color:#737373;}
/* Variable requerida para el uso del slider */
:root {
  --normal-vslide-size: 35rem;
  --background-menu: #FFF;
}

#head-envio {
  width: 100%;
  color: white;
  background-color: var(--primary-color);
  text-align: center;
  padding: 4px;
}

#head-envio p {
  margin: 0px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
}

#head-envio a {
  display: none;
  color: white; 
  margin-left: 25px;
  font-size: 14px;
}

#head-envio span {
  margin-right: 10px;
  font-size: 15px;
}



.row-adv-table {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 15px;
  margin: 0 1rem;
}

.search-views {
  line-height: 41px;
}

@media (max-width: 989.98px) {

  .producto {
    box-shadow: 3px 3px 5px #80808024!important;
  }
    
  .search-views {
    display: none;
  }

  :root {
    --global-x-margin: 1rem;
  }

  .search-price input {
    width: 70px;
  }
  
  #adv-answers-table *,
  .row-adv-table * {
    font-size: 12px!important;
  }
  
  .row-adv-table select {
    max-width: 160px!important;
  }


  #adv-answers-table .adv-item {
    max-width: 140px!important;
  }

  #adv-answers-table .adv-item:last-child {
    min-width: 325px!important;
  }


  #servicios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  #servicios div {
    width: 150px;
    display: flex;
    flex-direction: column;
    background: var(--second-color);
    padding: 12px;
    gap: 5px;
    border-radius: 5px;
  }

  #servicios img { 
    width: 25px;
      height: 25px;
  }

  #servicios h2 {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin: 0;
  }

  
  /* Barra móvil: [hamburguesa] --- [logo centrado] --- [buscador][carrito] */
  .grk-navbar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }

  .grk-navbar-btns {
    float: none;
    display: flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
  }

  .grk-navbar-btns div {
    margin: 0;
  }

  #btn-menu {
    position: static;
    background-color: transparent;
    border-radius: 0;
    width: 26px;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .btn-menu-line,
  .btn-menu-line::after,
  .btn-menu-line::before {
    width: 100%;
    height: 2px;
    background-color: #212529;
  }

  .btn-menu-line::after  { top: 7px; }
  .btn-menu-line::before { top: -7px; }

  /* El logo se centra respecto a la barra, no al espacio sobrante,
     para que no se desplace al cambiar el ancho de los iconos. */
  .grk-navbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    margin: 0;
  }

  .grk-navbar img {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    height: 34px;
    display: block;
  }

  .grk-navbar-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
  }

  .grk-nav-action {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    color: #212529;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
  }

  .grk-nav-action .contar-car {
    top: -8px;
    left: 11px;
  }

  .grk-navbar-nav {
    display: flex!important;
    transition: left .3s ease!important;
    padding-top: 50px!important;
    padding-left: 35px!important;
    position: fixed!important;
    top: var(--nvabar-height)!important;
    width: 85%!important;
    height: calc(100vh - var(--nvabar-height));
    background-color: var(--background-menu);
    border-top: 1px solid #efefef;
    justify-content: flex-start!important;
    gap: 6px!important;
    padding: 18px!important;
    flex-direction: column!important;
    margin: 0 auto!important;
    left: -100%;
    overflow-y: auto!important;
    z-index: 30!important;
  }

  .active .grk-navbar-nav {
    left: 0;
  }

  /* Evita que la página detrás se desplace mientras el drawer móvil está abierto;
     sin esto el drawer (fixed) se queda quieto pero se revela el contenido
     que sigue debajo al hacer scroll táctil dentro de él. */
  body.mh-menu-open {
    overflow: hidden!important;
  }

  .grk-navbar-nav .grk-nav-item a {
    text-align: start;
  }

  /* Separador entre categorías y sección de cuenta. Antes iba anclado a
     nth-of-type(4), que con la lista actual caía en medio de las categorías. */
  .grk-navbar-nav .grk-nav-item.mh-drawer-cuenta {
    position: relative;
    margin-top: 2px;
    padding-top: 10px;
  }

  .grk-navbar-nav .grk-nav-item.mh-drawer-cuenta::before {
    content: "";
    position: absolute;
    border-bottom: 2px solid #efefef;
    width: 176%;
    transform: translateX(-22%);
    top: 0;
  }

  .grk-nav-item.ms-none * {
    color: #737373;
  }

  #ventajas p {
    display: flex;
    width: 150px;
    flex-direction: column;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #efefef;
    align-items: center;
    gap: 5px;
    margin: 0;
    background-color: white;
  }

  #ventajas p img {
    width: 29px
  }

  #ventajas p strong {
    font-size: 14px;
    font-weight: 600;
  }

  #ventajas p a {
    font-size: 11px;
    color: #737373;
  }

}
.header  {
  display: none;
  padding: 1.5rem 4rem 0.8rem 4rem;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.header a {
  font-size: 16px;
  font-weight: 600;
  color: black;
}

.header span {
  margin-right: 5px;
  font-size: 20px;
}


.grk-navbar-nav .grk-nav-item a {
  min-width: 180px;
}

#ventajas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  transform: translateY(-25px);
  z-index: 20;
}

.bodywebsite h1 {
  margin: var(--global-x-margin);
  padding: 10px 0;
  font-size: 20px;
  font-weight: 500;
  border-bottom: 3px solid var(--primary-color);
  width: 50%;
}

.rowproducts {
  display: flex;
    gap: 40px;
    justify-content: space-around;
}

.splide .producto {
  width: 220px;
  min-width: 220px;
  height: calc(100% - 12px);
  margin: 6px 0;
  padding: 14px 8px 10px;
  box-sizing: border-box;
}

.splide .producto figure {
  height: 150px;
}

.splide .producto .porciento {
  font-size: 14px;
}

.splide .producto .marca {
  margin-top: 12px;
  font-size: 13.4px;
}

.splide .producto .label {
  font-size: 14.4px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: 3.9em;
}

.splide .producto .oferta {
  font-size: 12px;
}

.splide .producto .precio {
  font-size: 18px;
}

.splide .producto small {
  font-size: 11px;
}

.splide .producto .btn-addcar {
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 24px;
  font-size: 14px;
  gap: 8px;
}

.splide .producto .btn-addcar i {
  font-size: 15px;
}


.producto {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 145px;
  min-width: 145px;
  min-height: 236px;
  padding: 10px 5px 8px;

  border: 2px solid #e1e1e1;
  border-radius: 6px;
  background-color: white;
  transition: all 0.3s;
}

.producto:hover {
    box-shadow: 5px 5px 5px #CCCC;
}


.producto > a {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #111;
  text-decoration: none;
}

.producto > a:last-of-type {
  flex: 1;
}

.producto figure {
  margin: 0;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.producto figure img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.producto .porciento {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #D60000;
  color: white;
  width: fit-content;
  text-align: center;
  border-radius: 0 6px 0 0;
  padding: 2px 5px;

  font-size: 10px;
}

.producto .marca {
  margin-top: 8px;
  font-size: 9px;

  color: var(--primary-color);
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.producto .label {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.producto .oferta {
  margin-top: auto;
  font-size: 10px;

  color: #737373;
}
.producto .oferta + span {
  color: #D60000;
}
.producto .precio {
  font-size: 12px;

  font-weight: 600;
}
.producto .label + .precio {
  margin-top: auto;
  padding-top: 6px;
}
.producto .btn-saveprod {
  position: absolute;
  right: 4px;
  bottom: 16px;
  color: transparent;
  font-size: 18px;

  border: none;
  background: transparent;
  z-index: 2;
  cursor: pointer;
}

.producto small {
  font-size: 9px;
  color: #737373;
}

.producto .btn-saveprod i {
  display: inline;
  position: initial;
}

.producto .btn-addcar {
  box-sizing: border-box;
  margin-top: 10px;
  padding: 6px 10px;

  border: 1.5px solid var(--primary-color);
  border-radius: 20px;
  background-color: #fff;
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.producto .btn-addcar i {
  font-size: 12px;
}

.producto .btn-addcar:hover {
  background-color: var(--primary-color);
  color: #fff;
}


#car-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;

  border-radius: 8px;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#car-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#car-toast i {
  color: #2ecc71;
  font-size: 16px;
}

.slide-space {
  padding: 0 1rem;
  margin: .5rem .5rem;
}  


#servicios span {
  display: none;
}

#servicios small a {
  color: #737373;
  font-size: 11px;
}


#serv-titulo {
  display: none;
}

@media (min-width: 990px) {
  .producto {
    width: 220px;
    min-width: 220px;
    min-height: 322px;
    padding: 14px 8px 10px;
  }

  .producto figure {
    height: 150px;
  }

  .producto .porciento {
    font-size: 14px;
  }

  .producto .marca {
    margin-top: 12px;
    font-size: 13.4px;
  }

  .producto .label {
    font-size: 14.4px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .producto .oferta {
    font-size: 12px;
  }

  .producto .precio {
    font-size: 18px;
  }

  .producto .btn-saveprod {
    right: 6px;
    bottom: 20px;
    color: grey;
    font-size: 14px;
  }

  .producto small {
    font-size: 11px;
  }

  .producto .btn-addcar {
    margin-top: 14px;
    padding: 9px 14px;
    border-radius: 24px;
    font-size: 14px;
    gap: 8px;
  }

  .producto .btn-addcar i {
    font-size: 15px;
  }

  #footer {
    padding: 4rem 2rem!important; 
  }

  #footer .mh-logo img {
    width: 160px!important;
    height: auto!important;
  }

  #footer div {
    width: 240px!important;
  }

  #footer .mh-contacto {
    width: auto!important;
  }

  #footer h2 {
    font-size: 24px!important;
  }

  #footer .mh-logo,
  #footer .mh-rsoc {
    position: unset!important;
  }

  #footer li {
    font-size: 19px!important;
    margin: 10px 5px!important;
  }

  #footer .rsoc {
    margin-right: 10px!important;
  }

  #serv-titulo,
  #servicios span {
    display: block;
  }

  #servicios small {
    display: none;
  }
  
  .servicios {
    background: var(--second-color);
  }
  #servicios {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem 0;
    justify-content: center;
  }

  #servicios div {
    width: 100%;
    margin: 2rem 1rem;
    position: relative;
  }

  #servicios img { width: 73px; }

  #servicios h2 {
    position: absolute;
    top: -16px;
    left: 81px;
    font-size: 18px;
  }

  #servicios span {
    position: absolute;
    left: 81px;
    top: 41px;
    font-size: 15px;
  }

  #servicios span a {
    font-weight: 600;
    text-decoration: none;
    color: #111;
  }

  #categorias {
    gap: 25px;
  }

  #categorias a {
    font-size: 14px!important;
  }

  #categorias a img {
    height: 110px!important;
    width: 110px!important;
  }


  .bodywebsite h1 {
    font-size: 2.5rem;
  }
  .slide-space {
    padding: 0 3rem;
    margin: 1rem;
  }  

  .header {
    display: flex;
  }

  .mh-logo-link {
    flex-shrink: 0;
    margin-right: 2rem;
  }

  #head-envio {
    padding: 16px;
  }

  #head-envio p {
    font-size: 15px;
  }

  #head-envio a {
    display: inline-block;
  }

  #head-envio span {
    font-size: 18px;
  }

  #ventajas {
    width: 80%;
    margin: auto;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 10px;
    justify-content: space-around;
    position: relative;
    background: #fff;
  }

  #ventajas p {
    position: relative;
    width: 210px;
  }

  #ventajas p img {
    width: 60px;
  }

  #ventajas p strong {
    top: 12px;
    position: absolute;
    left: 68px;
    font-size: 16px;
  }

  #ventajas p a {
    position: absolute;
    top: 38px;
    left: 68px;
    text-decoration: none;
    font-size: 14px;
  }

}

@media (min-width: 1100px) {
  .slide-space {
    padding: 0 4rem;
    margin: 3rem 2rem;
  }
}

.splide__pagination__page {
  visibility: hidden;
}


#categorias {
  display: flex;
  justify-content: flex-start;
  background: var(--second-color);
  padding: 2rem;
  margin: 4rem 0;
  overflow: auto;
  gap: 55px;
}

#categorias a {
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  text-decoration: none;
  color: grey;
  flex-direction: column;
  align-items: center;
}

#categorias a img {
  height: 60px;
  /* width: 110px; */
}

#servicios span a::after,
#categorias span::after {
  color: var(--primary-color);
  content: "  \f054";
  font-family: "Font Awesome 5 Free"!important;
  font-weight: 600;
}

.servicios {
  margin: 2rem 0;
  padding: 2rem 0;
}

.bg-mh-second {
  background-color: var(--second-color);
}

#footer {
  position: relative;
  /* padding: 4rem 2rem;  */
  padding: 2rem 2rem 7rem;
  display: flex;
  gap: 10px;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: auto;
}

#footer .mh-logo {
  position: absolute;
  top: 166px;
  left: calc(((100% - 176px - 176px) / 4) + 2rem);
}

#footer .mh-logo img {
  width: 120px;
  height: auto;
}

#footer .mh-rsoc {
  position: absolute;
  top: 173px;
  left: calc((((100% - 176px - 176px) / 4) * 3) + 176px);
}

#footer div {
  width: 140px;
}

#footer h2 {
  color: var(--primary-color);
  /* font-size: 24px; */
  font-size: 12px;
}

#footer ul {
  list-style: none;
  padding: 0;
}

#footer li {
  /* font-size: 19px; */
  font-size: 11px;
  /* margin: 10px 5px; */
  margin: 8px 5px;
}

#footer .mh-contacto {
  width: auto;
  max-width: 100%;
  text-align: right;
}

#footer .mh-contacto li {
  margin-right: 0;
}

#footer a span {
  color: #444;
}

.fa-15x {
  font-size: 1.4rem;
}

#footer a {
  text-decoration: none;
  color: #111;
}
#footer a:hover {
  color: var(--primary-color);
}
#footer .rsoc {
  /* margin-right: 10px; */
  margin-right: 5px;
}

.by-digitals, .by-digitals a {
  text-decoration: none;
  color: white;
  font-size: 15px;
}

.by-digitals {
  background: #3A3A3A;
  padding: 1rem;
  text-align: center;
}

.finder-title {
  font-size: 19px;
  font-weight: 600;
  padding: 1.5rem;
  display: block;
}

#adv-table {
  max-width: 1300px;
  margin: 35px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
    justify-content: center;
}

.form-control::placeholder, form-select::placeholder {
font-style: italic;
}
.adv-content {
margin-top: 15px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
}

.adv-item {
min-width: 150px;
}
.adv-content .adv-answers {
display: none;
}
.adv-content.herramientas .adv-answers.herramientas,
.adv-content.calentadores .adv-answers.calentadores,
.adv-content.refacciones .adv-answers.refacciones {
display: block;
}
#adv-answers-table {
  padding-bottom: 1rem;
  gap: 10px;
}
.white-block {
height: 300px;
}

.pb-2 {
  padding-bottom: 1rem;
}

.form-label {
  margin-bottom: .5rem;
  display: inline-block;
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-select {
  display: block;
  width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.mb-4 {
  margin-bottom: 1.5rem!important;
}
.justify-content-center {
  justify-content: center!important;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-top: 0;
}


@media (min-width: 768px) {
    #categorias {
      justify-content: space-around;
    }
    
    #servicios div {
        width: 350px;
    }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 35%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .justify-content-md-center {
    justify-content: center!important;
  }
}

@media (min-width: 576px) {

  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}

/* Bootstrap está deshabilitado en htmlheader.html y la retícula se reimplementa aquí.
   Sin estas reglas, .row>* (width:100%) apila a ancho completo en todos los tamaños:
   el checkout (col-lg-8 + col-lg-4) perdía su layout de dos columnas en escritorio. */
@media (min-width: 992px) {

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}



.btn-group-sm>.btn, .btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  border-radius: .2rem;
}
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
  color: #fff;
  background-color: #00178e;
  border-color: #00178e;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

button, select {
  text-transform: none;
}





.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.position-absolute {
  position: absolute!important;
}
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: .75rem;
  background-color: #e9ecef;
  border-radius: .25rem;
}
.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
  animation: 1s linear infinite progress-bar-stripes;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 1rem 1rem;
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #00178e;
  transition: width .6s ease;
}
.position-relative {
  position: relative!important;
}


.noRastro {
  text-decoration: none;
  color: #000;
}
.noRastro:hover {
  cursor: pointer;
}


#btn-showmore button {
  margin-top: 20px;
  height: 60px;
  background-color: #0170b9c4;
  border: none;
  color: #ffffff;
}

.p-4 {
  padding: 3.5rem;
}
.py-5 {
  padding: 5rem 0;
}

.mb-4 {
  margin-bottom: 3.5rem;
}

.fw-bold {
  font-weight: 700;
}
.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.h3 {
  font-size: calc(1.3rem + .6vw);
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-qty {
  flex: 0 0 auto;
  width: 111px;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.text-success {
  --bs-text-opacity: 1;
  color: rgba(25,135,84,1)!important;
}
.btn-saveprod i {
  color: #e1dddd;
}
.btn-addprod {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: bold;
}
.text-white {
  color: white;
}

.ms-3 {
  margin-left: 1rem!important;
}
.btn-info {
  color: #FFF;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.text-mh {
  color: var(--primary-color);
  font-weight: 600;
}
.text-muted {
  color: #6c757d!important;
}
.border-top {
  border-top: 1px solid #dee2e6!important;
}
.col {
  flex: 1 0 0%;
}
.descomer strong {
    color: #000;
    line-height: 28px;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw)!important;
}
.fs-3 {
  font-size: calc(1.3rem + .6vw)!important;
}
.fs-4 {
  font-size: calc(1.275rem + .3vw)!important;
}
.product-content {
  display: flex;
  gap: 40px;
  padding: 2rem;
  justify-content: center;
  overflow: auto;
}

#distribuidor h2 {
  margin-top: 3rem;
}

#distribuidor .fs-3 {
  margin-top: 2rem;
}

.my-5 {
  margin-top: 3rem!important;
  margin-bottom: 3rem!important;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}
.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

.form-text {
  margin-top: .25rem;
  font-size: .875em;
  color: #6c757d;
}

.mb-2 {
  margin-bottom: .8rem!important;
}

.mb-3 {
  margin-bottom: 1rem!important;
}

.d-none {
  display: none;
}

.btn-saveprod.active i {
  color: #ef7d7d;
}

.div-car {
  position: relative;
}

.contar-car {
  position: absolute;
  background-color: #6f42c1;
  width: 20px;
  height: 20px;
  font-size: 13px!important;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  line-height: 20px;
  display: none;
  top: -9px;
  left: 10px;
}

.img-car {
  max-width: 50px;
  max-height: 50px;
}


.nav-link { position: relative; }

.finder-list {
text-decoration: none;
}

.finder-list small,
.finder-list .toright {
float: right;
}

.finder-list .inred {
    color: red;
}

.prod-separator strong {
    font-weight: 600;
}


.prod-description {
  font-size: 1.4rem;
  font-weight: 600; 
  line-height: 1.8rem;
}

.prod-price {
  color: #D60000;
  margin-left: 11px;
  font-weight: 700;
  font-size: 25px;
}
.prod-sku {
  color: var(--primary-color);
  font-size: 14.4px;
  font-weight: 600;
}

.row-qty {
  display: flex;
  flex-wrap: wrap;
}

.row-qty>* {
  max-width: 100%;
  padding-right: 1rem;
  margin-top: 0;
}

.prod-service {
  border-radius: 4px;
  background: #F4F4F4;
  padding: 9px;
}

  #exzoom {
    width: 400px;
  }

  .prod-separator > div, .prod-separator > del, .prod-separator > small {
    margin-left: 2rem;
    font-weight: 600;
  }

  .prod-separator:before {
    border-right: 3px solid #F4F4F4;
    content: " ";
    height: 65%;
    position: absolute;
    /* transform: translateX(-62px); */
  }

  .prod-especifica {
    margin: var(--global-x-margin);
    padding: 10px;
    font-size: 1.8rem;
    font-weight: 600;
    border-bottom: 4px solid var(--primary-color);
    width: 50%;
    display: inline-block;
    color: #737373;
  }
  
  

  .prod-table-especifica {
    width: 50%;
    min-width: 600px;
    margin: 0 auto 50px auto;
    border-spacing: 0;
    border-radius: 5px;
    border: 3px solid #F4F4F4;
  }

  table.prod-table-especifica th {
    padding: 9px 0 9px 20px;
    text-align: left;
  }

  table.prod-table-especifica td {
    padding: 9px 20px 9px 0;
  }

  table.prod-table-especifica tr:nth-child(odd) {
    background: #F4F4F4;
  }

  .exzoom_prev_btn, 
  .exzoom_next_btn {
    width: 35px!important;
    height: 35px!important;
    border-radius: 50%;
    line-height: 32px!important;
    font-weight: 600!important;
    top: -54px!important;
    font-family: Inter!important;
    color: #fff!important;
    background: var(--primary-color)!important;
  }

.grk-navbar img {
  height: 25px;
}

/*CARRITO*/
h1.cart-title {
  margin: 0 0 1.5rem;
  padding: 10px 0;
  font-size: 2.2rem;
  font-weight: 400;
  color: #737373;
  border-bottom: none !important;
  width: auto;
}

.cart-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-products {
  min-width: 0;
}

.cart-list-head {
  display: none;
}

.cart-items {
  display: flex;
  flex-direction: column;
}

.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.cart-empty i {
  display: block;
  font-size: 2rem;
  margin-bottom: .75rem;
}

.cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto 28px;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e9e9e9;
}

.cart-row-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cart-row-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cart-row-info {
  min-width: 0;
}

.cart-row-name {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  margin-bottom: .5rem;
}

.cart-row-qty {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cart-row-qty .car-qty {
  width: 56px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: .25rem;
}

.cart-row-qty .nodisp {
  color: #d64545;
  font-size: .75rem;
}

.cart-row-price {
  display: none;
  text-align: right;
}

.cart-price-amt {
  display: block;
  font-weight: 600;
}

.cart-price-note {
  font-size: .7rem;
  color: #8a8a8a;
}

.cart-row-total {
  grid-column: 3;
  font-weight: 700;
  text-align: right;
}

.cart-row-del {
  grid-column: 4;
  justify-self: end;
  border: 0;
  background: transparent;
  color: #8a8a8a;
  font-size: 1.1rem;
  padding: .25rem;
}

.cart-row-del:hover {
  color: #d64545;
}

.cart-summary-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

.cs-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cs-row {
  display: flex;
  justify-content: space-between;
  padding: .5rem 0;
  color: #555;
}

.cs-row.cs-total {
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e5;
  font-size: 1.1rem;
  color: #111;
}

.cs-btn {
  width: 100%;
  margin-top: 1.25rem;
  padding: .65rem;
  border-radius: 10px;
  font-weight: 600;
}

@media (max-width: 989.98px) {
  .cart-summary {
    position: sticky;
    bottom: 0;
    z-index: 50;
    padding-top: .5rem;
    background: linear-gradient(to bottom, rgba(244, 244, 244, 0) 0, #f4f4f4 16px);
  }

  .cart-summary-card {
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  }
}

@media (min-width: 990px) {
  .cart-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .cart-products {
    flex: 1 1 auto;
  }

  .cart-summary {
    flex: 0 0 340px;
    position: sticky;
    top: 100px;
  }

  .cart-list-head {
    display: grid;
    grid-template-columns: 72px 1fr 160px 160px 28px;
    padding: 0 0 .75rem;
    border-bottom: 2px solid #e5e5e5;
    font-weight: 600;
    color: #444;
  }

  .cart-list-head .ch-product {
    grid-column: 1 / 3;
  }

  .cart-list-head .ch-price {
    grid-column: 3;
    text-align: right;
  }

  .cart-list-head .ch-total {
    grid-column: 4;
    text-align: right;
  }

  .cart-row {
    grid-template-columns: 72px 1fr 160px 160px 28px;
  }

  .cart-row-img {
    width: 72px;
    height: 72px;
  }

  .cart-row-price {
    display: block;
    grid-column: 3;
  }

  .cart-row-total {
    grid-column: 4;
    font-size: 1.05rem;
  }

  .cart-row-del {
    grid-column: 5;
  }
}