/* =============================================================================
   VistaMayorista v1.5.0
   CSS organizado por secciones:
   1. Reset y elementos ocultos
   2. Layout base (grid)
   3. Tipografía y textos
   4. Input de cantidad (stepper)
   5. Semáforo de stock
   6. Precio, total, acciones
   7. Botones y feedback AJAX
   8. Responsive: mobile / tablet / desktop
   ============================================================================= */

/* 1. Reset y elementos ocultos =============================================== */
.product-miniature.product-miniature-list .product-availability,
.product-miniature.product-miniature-list .available,
.product-miniature.product-miniature-list .in-stock,
.product-miniature.product-miniature-list .out-of-stock { display:none !important; }

.product-miniature.product-miniature-list .functional-buttons,
.product-miniature.product-miniature-list .quick-view,
.product-miniature.product-miniature-list .add-to-compare { display:none !important; }

/* 2. Layout base (grid) ====================================================== */
.product-miniature-list-row{
  display: grid !important;
  grid-template-columns: 84px 1fr 360px !important;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.product-miniature.product-miniature-list .cont-img-wuala{
  position: relative;
  min-width: 64px;
}
.product-miniature.product-miniature-list .cont-img-wuala img{
  width: auto; max-width: 80px; height: auto; display: block;
}

.product-miniature.product-miniature-list .col-description{
  padding: .5rem 1rem; min-width: 0;
}

.product-miniature.product-miniature-list .col-buy{
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
}

/* 3. Tipografía y textos ===================================================== */
.product-miniature.product-miniature-list .product-title{
  margin: 0 0 .2rem;
}
.product-miniature.product-miniature-list .product-title a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(13px, 1.55vw, 17px);
  line-height: 1.2;
  color: #0f172a;
  text-decoration: none;
}
.product-miniature.product-miniature-list .product-short{
  color: #374151; font-size: .9rem; margin-top: .25rem;
}
.product-miniature.product-miniature-list .product-reference,
.product-miniature.product-miniature-list .product-brand{
  color: #6b7280; font-size: .85rem;
}
.product-miniature.product-miniature-list .vm-ref-label,
.product-miniature.product-miniature-list .vm-brand-label{
  color: #9ca3af; font-weight: 500;
}
.product-miniature.product-miniature-list .vm-ref-value{
  color: #374151; font-weight: 600;
}

/* Stock inline (punto + texto al lado del nombre, estilo prototipo) */
/* Stock inline (dot + label al lado del nombre). Oculto por default — se muestra
   solo cuando el modo de semáforo es 2 (círculo + leyenda). En el modo default (0)
   el indicador visual es el badge sobre la imagen, no el dot inline. */
.product-miniature.product-miniature-list .vm-stock-inline{
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: .25rem;
  font-size: .85rem;
}
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot{
  width: 10px; height: 10px; border-radius: 999px; display: inline-block;
  flex-shrink: 0;
}
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot.vm-dot--ok{ background: #22c55e; }
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot.vm-dot--low{ background: #f59e0b; }
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot.vm-dot--out{ background: #ef4444; }
.product-miniature.product-miniature-list .vm-stock-label{
  font-weight: 500;
}
.product-miniature.product-miniature-list .vm-stock-label--ok{ color: #059669; }
.product-miniature.product-miniature-list .vm-stock-label--low{ color: #d97706; }
.product-miniature.product-miniature-list .vm-stock-label--out{ color: #dc2626; }

.product-miniature.product-miniature-list .vm-stock-badge-row{
  margin-bottom: .4rem;
  line-height: 1;
}
.product-miniature.product-miniature-list .vm-stock-badge-row .vm-badge{
  position: static;
  z-index: auto;
  box-shadow: none;
}

/* 4. Input de cantidad (stepper nativo) ==================================== */

/* Ocultar flechas nativas del input number */
.product-miniature.product-miniature-list .vm-input-qty::-webkit-outer-spin-button,
.product-miniature.product-miniature-list .vm-input-qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.product-miniature.product-miniature-list .vm-input-qty { -moz-appearance: textfield; }

/* ===== Stepper nativo del módulo (v1.5.3) =====
   Construido 100% por nuestro JS, sin TouchSpin ni dependencias.
   Estructura: <div.vm-stepper> [ <input.vm-input-qty> <div.vm-stepper-arrows> [▲ / ▼] ] </div>
   Look "Warehouse default": input con borde fino gris, flechas apiladas a la derecha. */

.product-miniature.product-miniature-list .vm-stepper{
  display: inline-flex !important;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
  height: 34px;
  width: auto;
  box-shadow: none;
  vertical-align: middle;
}

.product-miniature.product-miniature-list .vm-stepper .vm-input-qty{
  width: 44px !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #212529 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 0 4px !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.product-miniature.product-miniature-list .vm-stepper:focus-within{
  border-color: #a0a0a0;
  box-shadow: 0 0 0 2px rgba(160,160,160,0.12);
}

/* Contenedor vertical de las flechitas, a la derecha del input */
.product-miniature.product-miniature-list .vm-stepper-arrows{
  display: inline-flex;
  flex-direction: column;
  border-left: 1px solid #ced4da;
  background: #ffffff;
}

/* Cada botón (flecha arriba / abajo) */
.product-miniature.product-miniature-list .vm-stepper-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px;
  flex: 1 1 auto;
  border: 0;
  background: #ffffff;
  color: #495057;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  line-height: 1;
  outline: none;
}

.product-miniature.product-miniature-list .vm-stepper-btn + .vm-stepper-btn{
  border-top: 1px solid #e9ecef;
}

.product-miniature.product-miniature-list .vm-stepper-btn:hover{
  background: #f8f9fa;
  color: #212529;
}

.product-miniature.product-miniature-list .vm-stepper-btn:active{
  background: #e9ecef;
}

.product-miniature.product-miniature-list .vm-stepper-btn svg{
  width: 10px;
  height: 6px;
  display: block;
}

/* Mobile compacto */
@media (max-width: 576px){
  .product-miniature.product-miniature-list .vm-stepper{
    height: 32px;
  }
  .product-miniature.product-miniature-list .vm-stepper .vm-input-qty{
    width: 38px !important;
    font-size: 13px !important;
  }
  .product-miniature.product-miniature-list .vm-stepper-btn{
    width: 20px;
  }
}

/* 5. Semáforo de stock (badges) ============================================ */
.product-miniature.product-miniature-list .cont-img-wuala{
  position: relative; /* necesario para posicionar el badge con position:absolute */
}

/* v1.5.6: estilos base del badge — aplican SIEMPRE, esté donde esté el badge.
   Así si por algún motivo el stub no está actualizado y el badge queda fuera de
   .cont-img-wuala, al menos se ve como una pill chiquita bien estilizada. */
.product-miniature.product-miniature-list .vm-badge{
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: .4rem;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 13.5px);
  color: #fff !important;
  user-select: none;
  width: auto;
  max-width: max-content;
}

/* Posicionamiento: solo cuando el badge está sobre la imagen (stub correcto) */
.product-miniature.product-miniature-list .cont-img-wuala .vm-badge{
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Colores del semáforo */
.product-miniature.product-miniature-list .vm-badge--ok  { background: #22c55e; }
.product-miniature.product-miniature-list .vm-badge--low { background: #f59e0b; }
.product-miniature.product-miniature-list .vm-badge--out { background: #ef4444; }

/* Semaforo de stock en ficha de producto =================================== */
.vm-product-stock-row{
  display: block;
  margin: .2rem 0 .55rem;
  line-height: 1;
}
.vm-product-stock-inline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
}
.vm-product-stock-inline .vm-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.vm-product-stock-inline .vm-dot.vm-dot--ok{ background: #22c55e; }
.vm-product-stock-inline .vm-dot.vm-dot--low{ background: #f59e0b; }
.vm-product-stock-inline .vm-dot.vm-dot--out{ background: #ef4444; }
.vm-product-stock-inline .vm-stock-label{ font-weight: 500; }
.vm-product-stock-inline .vm-stock-label--ok{ color: #059669; }
.vm-product-stock-inline .vm-stock-label--low{ color: #d97706; }
.vm-product-stock-inline .vm-stock-label--out{ color: #dc2626; }
.vm-product-qty-locked{
  opacity: .55;
  cursor: not-allowed;
}
.vm-product-qty-locked button,
.vm-product-qty-locked .bootstrap-touchspin-up,
.vm-product-qty-locked .bootstrap-touchspin-down,
.vm-product-qty-locked .js-touchspin{
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 6. Precio, total, acciones ================================================ */
.form-mayorista .mto-contador{
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.mto-contador-precio{
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  white-space: nowrap;
}
.mto-contador-precio.vm-has-discount{
  font-weight: 700; color: #111827;
}
.mto-contador-precio::after{
  content: " ×"; opacity: .45; margin-left: .15rem;
}
.vm-price-regular{
  display: block; font-size: 11px; color: #9ca3af;
  text-decoration: line-through; white-space: nowrap;
  font-weight: 400; line-height: 1.3; margin-bottom: 2px;
}
.vm-unit-from-margin{
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
}
.vm-unit-from-margin::after{
  content: " ×"; opacity: .45; margin-left: .15rem;
}

.product-miniature.product-miniature-list .mto-precio-base{ display: none !important; }

.vm-price-with-vat{
  display: block; color: #6b7280; font-size: 12px; margin-top: 2px;
}
.vm-price-with-vat small{ color: #9ca3af; font-weight: 400; }

.mto-contenedor-resultados{
  margin-left: .6rem;
  padding-left: .6rem;
  border-left: 1px solid rgba(15,23,42,.12);
  min-width: 0; /* v1.5.5: permite que el contenedor se achique si es necesario */
}
.mto-contenedor-resultados .mto-contador-resultado.final{
  font-weight: 700;
  width: auto;
  /* v1.5.5: sin min-width fijo; usar clamp para que el total baje de tamaño
     en pantallas chicas con cifras grandes (ej: $ 1.012.000,00) y no rompa layout */
  font-size: clamp(14px, 2.2vw, 17px);
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.mto-contenedor-resultados .mto-contador-resultado.final span:not(.vm-old-total){
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: .375rem;
  background: rgba(15,23,42,.05);
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}
.mto-contenedor-resultados .mto-contador-resultado.final span.is-changing{
  transform: scale(1.05);
  opacity: .9;
  background: rgba(15,23,42,.08);
}
.vm-old-total{
  display: block;
  font-size: 11px;
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.mto-contador-container,
.mto-contenedor-resultados{ white-space: nowrap; }

/* v1.5.5: que el stepper NO se achique si el total crece (cifras grandes). */
.product-miniature.product-miniature-list .vm-stepper{
  flex-shrink: 0;
}

/* 7. Botones y feedback AJAX ================================================ */
.product-miniature.product-miniature-list .vm-actions{
  display: inline-flex; align-items: center; gap: .5rem;
}
.product-miniature.product-miniature-list .vm-btn-add{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 .9rem; font-weight: 600;
  position: relative;
}
.product-miniature.product-miniature-list .vm-btn-add .vm-btn-spinner{
  display: none;
  width: 14px; height: 14px; margin-left: .5rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vm-spin .7s linear infinite;
}
.product-miniature.product-miniature-list .vm-btn-add.is-loading{
  opacity: .9; pointer-events: none;
}
.product-miniature.product-miniature-list .vm-btn-add.is-loading .vm-btn-spinner{
  display: inline-block;
}
.product-miniature.product-miniature-list .vm-btn-add.is-success{
  background: #16a34a !important; border-color: #16a34a !important;
}
@keyframes vm-spin { to { transform: rotate(360deg); } }


.product-miniature.product-miniature-list .vm-error-msg{
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: .4rem .6rem;
  border-radius: .375rem;
  font-size: .85rem;
  margin-top: .5rem;
  grid-column: 1 / -1;
}

/* 8. Responsive ============================================================= */

/* Mobile (<= 576px) — layout prototipo: imagen grande + info, luego stepper + botón */
@media (max-width: 576px){
  .product-miniature-list-row{
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
  }

  .product-miniature.product-miniature-list .cont-img-wuala{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .product-miniature.product-miniature-list .cont-img-wuala img{
    max-width: 110px; width: 100%;
  }

  .product-miniature.product-miniature-list .col-description{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    padding: 0;
  }

  .product-miniature.product-miniature-list .vm-stock-badge-row{
    margin-bottom: .3rem;
  }
  .product-miniature.product-miniature-list .vm-stock-badge-row .vm-badge{
    padding: .15rem .35rem;
    font-size: 10px;
  }

  .product-miniature.product-miniature-list .product-title a{
    -webkit-line-clamp: 3;
    font-size: 14px;
    line-height: 1.18;
  }
  .product-miniature.product-miniature-list .product-reference,
  .product-miniature.product-miniature-list .product-brand{
    font-size: .8rem;
  }
  .product-miniature.product-miniature-list .vm-stock-inline{
    font-size: .8rem;
  }

  /* Bloque inferior: precio × stepper = total + botón */
  .product-miniature.product-miniature-list .col-buy{
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    margin-top: 6px;
  }

  .product-miniature.product-miniature-list .form-mayorista{
    width: 100%;
  }
  /* Botón en fila propia desde 576px: precio × qty = total arriba, Añadir abajo full-width */
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "precio qty total"
      "btn    btn  btn";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
  }
  .product-miniature.product-miniature-list .mto-contador-container{
    grid-area: precio;
    text-align: left;
  }
  .product-miniature.product-miniature-list .mto-contador-precio{
    font-size: 13px;
  }

  /* Stepper en mobile */
  .product-miniature.product-miniature-list .vm-stepper{
    grid-area: qty;
  }

  /* Total: anular white-space:nowrap global para que 1fr funcione con precios largos */
  .product-miniature.product-miniature-list .mto-contenedor-resultados{
    grid-area: total;
    margin: 0; padding: 0; border: 0;
    text-align: right;
    white-space: normal;
    min-width: 0;
    overflow: hidden;
  }
  .product-miniature.product-miniature-list .mto-contenedor-resultados .mto-contador-resultado.final{
    min-width: auto;
    font-size: clamp(12px, 3.8vw, 14px);
    line-height: 1.18;
    white-space: normal;
  }
  /* Total viejo tachado: más compacto en mobile, con ellipsis si no cabe */
  .product-miniature.product-miniature-list .vm-old-total{
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Botón full-width en la segunda fila */
  .product-miniature.product-miniature-list .vm-actions{
    grid-area: btn;
    width: 100%;
    display: flex;
    gap: 4px;
  }
  .product-miniature.product-miniature-list .vm-btn-add{
    flex: 1 1 auto;
    width: auto;
    justify-content: center;
    padding: 0 1rem;
    min-height: 40px;
    font-size: 15px;
    font-weight: 600;
  }
}

/* ≤361px: solo diferencias respecto al ≤576px (Samsung S8+, Galaxy mini, etc.) */
@media (max-width: 361px){
  /* Gap ligeramente más compacto que en ≤576px */
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    gap: 10px 8px;
  }

  .product-miniature.product-miniature-list .product-title a{
    font-size: 13px;
    line-height: 1.15;
  }
  .product-miniature.product-miniature-list .mto-contador-precio{
    font-size: 12px;
  }

  /* Card más compacta */
  .product-miniature-list-row{
    grid-template-columns: 90px 1fr !important;
    padding: 8px;
  }
  .product-miniature.product-miniature-list .cont-img-wuala img{
    max-width: 85px;
  }
}

/* Tablet (577 - 991px) */
@media (min-width: 577px) and (max-width: 991px){
  .product-miniature-list-row{
    grid-template-columns: 80px 1fr 300px !important;
  }
  .cont-img-wuala img{ max-width: 72px; }

  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    gap: .5rem;
  }
}

/* Desktop (>= 992px) */
@media (min-width: 992px){
  .product-miniature-list-row{
    grid-template-columns: 90px 1fr 440px !important;
    align-items: center; gap: 12px;
  }
  .product-miniature.product-miniature-list .col-buy{
    display: flex; justify-content: flex-end; align-items: center;
  }
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    display: flex; flex-wrap: nowrap; gap: .5rem;
  }
  .product-miniature.product-miniature-list .mto-contador-container,
  .product-miniature.product-miniature-list .mto-contenedor-resultados{
    white-space: nowrap;
  }
  .product-miniature.product-miniature-list .vm-btn-add{
    white-space: nowrap; padding: .6rem .9rem; min-height: 40px;
  }
}

/* Wide (>= 1400px) */
@media (min-width: 1400px){
  .product-miniature-list-row{
    grid-template-columns: 96px 1fr 480px !important;
  }
}

/* Input group wrapping fix */
.input-group{ flex-wrap: nowrap !important; }
div.mto-contador-container{ text-align: end; }
div.mto-contador-container > span.product-price.price{ display: none !important; }

/* ============================================================================
   v1.6.3 — Botón "Agotado" alineado a la derecha en mobile
   ============================================================================
   Cuando el producto está sin stock y no permite OOSP, el stub no renderiza el
   form mayorista sino un <a class="btn-product-list"> ("Agotado"/"View"). En
   mobile ese link se mostraba centrado y full-width por las reglas generales
   de .col-buy, lo que quedaba estéticamente mal en la card. Estas reglas lo
   alinean a la derecha como un botón normal de tamaño auto. */

/* Desktop: no hace falta tocar nada (ya está alineado a la derecha por .col-buy
   con justify-content: flex-end). Esto es solo para mobile. */

@media (max-width: 576px){
  /* Cuando la card está agotada, el .col-buy no necesita borde superior ni padding
     extra (que se usaban para separar precio×stepper×total del botón). Se ve
     más limpio sin esa línea divisoria si no hay nada arriba. */
  .product-miniature.product-miniature-list .col-buy:has(.product-add-cart.vm-out-of-stock){
    justify-content: flex-end;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  /* El wrapper .product-add-cart no debe estirarse: dejar al botón con su ancho natural */
  .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock{
    width: auto;
    display: inline-flex;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* El botón "Agotado" en sí: tamaño compacto, no full-width */
  .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock .btn-product-list{
    width: auto;
    min-width: 110px;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Fallback para navegadores sin soporte de :has() (Chromium < 105, Firefox < 121
   muy antiguos). Aplicamos directamente al .product-add-cart.vm-out-of-stock,
   que sirve como segunda red de seguridad. */
@media (max-width: 576px){
  .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock{
    text-align: right;
  }
}

/* vm-mobile-view-switch-fix: Warehouse oculta el selector grilla/lista en mobile.
   El CSS generado del modulo se carga despues; si el admin desactiva el switch,
   vm_custom.css lo vuelve a ocultar con display:none !important. */
@media (max-width: 576px){
  .products-selection .grid-list,
  #js-product-list-top .grid-list,
  .products-selection .view-mode,
  .products-selection .view-switcher,
  .products-selection .iqit-grid-list,
  .product-list-switch,
  .product-view-switch,
  .pl-view,
  .pl_view,
  .pl-views{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  a.pl-list,
  a.pl-grid,
  [data-button-action="change-list-view"],
  [data-button-action="change-list-view"].hidden-sm-down,
  .view-switcher [data-button-action="change-list-view"],
  .view-switcher [data-button-action="change-list-view"].hidden-sm-down,
  .pl-list,
  .pl-grid{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .vm-mobile-view-switch-visible{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* v1.7 — filtros arriba, pedido, columna de margen, estética limpia */
/* vm-facets-override:start */
.vm-facets-slot { margin: 0 0 14px; }
html:not(.vm-facets-ready) .vm-facets-slot,
.vm-facets-slot.vm-facets-empty { display: none !important; }
html.vm-facets-ready .vm-facets-slot {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
}
.vm-facets-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 0;
}
.vm-facets-bar span {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
html.vm-facets-ready .vm-facets-slot #search_filters_wrapper { display: block; }
html.vm-facets-ready .vm-facets-slot #search_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px 12px 12px;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  user-select: none;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet-title::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet.is-open .facet-title,
html.vm-facets-ready .vm-facets-slot #search_filters .facet:has(input:checked) .facet-title {
  background: var(--vm-primary, #111827);
  border-color: var(--vm-primary, #111827);
  color: #fff;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet ul {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  max-height: 280px;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(17, 24, 39, .12);
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet.is-open > ul,
html.vm-facets-ready .vm-facets-slot #search_filters .facet.is-open ul {
  display: block;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}
html.vm-facets-ready .vm-facets-slot #search_filters .magnitude {
  color: #9ca3af;
  font-weight: 500;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet.is-open ul.facet_color {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 248px;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet_color li,
html.vm-facets-ready .vm-facets-slot #search_filters .facet_color .facet-label {
  width: auto;
  margin: 0;
  padding: 2px;
}
html.vm-facets-ready .vm-facets-slot #search_filters .facet.is-open ul.faceted-slider {
  width: 280px;
  overflow: visible;
  padding: 22px 16px 14px;
}

html.vm-clean #left-column .block-categories {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 12px 8px 8px;
  margin: 0 0 16px;
}
html.vm-clean #left-column .block-categories .block-title {
  margin: 0 8px 6px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
html.vm-clean #left-column .block-categories .block-title a {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}
html.vm-clean #left-column .block-categories .category-top-menu,
html.vm-clean #left-column .block-categories .category-sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
html.vm-clean #left-column .block-categories .category-sub-menu a::before {
  content: none !important;
  display: none !important;
}
html.vm-clean #left-column .block-categories li[data-depth="0"] > a {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 1px 0;
  padding: 6px 28px 6px 10px;
  border: 0;
  border-radius: 8px;
  color: #1f2937;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
html.vm-clean #left-column .block-categories li[data-depth="0"]:not(:has(.collapse-icons)) > a {
  padding-right: 10px;
}
html.vm-clean #left-column .block-categories li[data-depth="0"] > a:hover,
html.vm-clean #left-column .block-categories .category-sub-link:hover {
  background: #f3f4f6;
  color: #111827;
}
html.vm-clean #left-column .block-categories .collapse-icons {
  top: 5px;
  right: 4px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
}
html.vm-clean #left-column .block-categories .collapse-icons:hover {
  background: #eef0f4;
  color: #111827;
}
html.vm-clean #left-column .block-categories .category-sub-menu .category-sub-menu {
  margin: 0 4px 6px 12px;
  padding: 0 0 2px 8px;
  border-left: 1px solid #e5e7eb;
}
html.vm-clean #left-column .block-categories .category-sub-link {
  display: block;
  margin: 1px 0;
  padding: 6px 8px;
  border-radius: 8px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

html.vm-tree-ready #left-column { display: none !important; }
html.vm-tree-ready #content-wrapper.left-column {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
html.vm-tree-ready .vm-tree-slot {
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 10px 12px 12px;
}
html.vm-tree-ready .vm-tree-slot .block-categories {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
html.vm-tree-ready .vm-tree-slot .block-title {
  margin: 0 2px 8px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}
html.vm-tree-ready .vm-tree-slot .block-title a {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}
html.vm-tree-ready .vm-tree-slot .category-top-menu > .category-sub-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"] {
  position: relative;
  margin: 0;
  list-style: none;
}
html.vm-tree-ready .vm-tree-slot .category-sub-menu a::before {
  content: none !important;
  display: none !important;
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"] > a {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"]:has(.collapse-icons) > a {
  padding-right: 26px;
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"] > a:hover,
html.vm-tree-ready .vm-tree-slot li[data-depth="0"]:has(.collapse.show) > a {
  background: var(--vm-primary, #111827);
  border-color: var(--vm-primary, #111827);
  color: #fff;
}
html.vm-tree-ready .vm-tree-slot .collapse-icons {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #6b7280;
  cursor: pointer;
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"]:hover .collapse-icons,
html.vm-tree-ready .vm-tree-slot li[data-depth="0"]:has(.collapse.show) .collapse-icons {
  color: #fff;
  background: transparent;
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"] > .collapse.show,
html.vm-tree-ready .vm-tree-slot li[data-depth="0"] > .collapsing {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(17, 24, 39, .12);
}
html.vm-tree-ready .vm-tree-slot li[data-depth="0"] > .collapsing {
  height: auto !important;
  transition: none;
}
html.vm-tree-ready .vm-tree-slot .category-sub-link {
  display: block;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
html.vm-tree-ready .vm-tree-slot .category-sub-link:hover {
  background: #f3f4f6;
  color: #111827;
}
html.vm-tree-ready .vm-tree-slot .vm-tree-main {
  font-weight: 700;
  color: #111827;
}
html.vm-tree-ready .vm-tree-slot li:has(.vm-tree-main) {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eef0f4;
}
html.vm-clean .vm-head__grid,
html.vm-clean .product-miniature-list-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 108px 124px 112px 92px !important;
  align-items: center;
  column-gap: 12px;
}
html.vm-clean .vm-head {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  margin: 0 0 6px;
  padding-left: 15px;
  padding-right: 15px;
}
html.vm-clean .vm-head__grid {
  padding: 8px 12px;
  background: #f8f9fb;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}
html.vm-clean .vm-head__grid span:nth-child(n + 3) { text-align: right; }
html.vm-clean .vm-head__grid span:nth-child(3) { text-align: center; }
html.vm-clean #js-product-list .products { gap: 0; }
html.vm-clean .js-product-miniature-wrapper { margin: 0; padding-top: 0; padding-bottom: 0; }
html.vm-clean .vm-head { margin: 0; }
html.vm-clean .vm-head__grid {
  margin: 0;
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}
html.vm-clean .product-miniature.product-miniature-list {
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 1px solid #e6e8ee !important;
  border-right: 1px solid #e6e8ee !important;
  border-bottom: 1px solid #eef0f4 !important;
  box-shadow: none !important;
}
html.vm-clean .js-product-miniature-wrapper:last-of-type .product-miniature.product-miniature-list {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
html.vm-clean .product-miniature.product-miniature-list:hover { background: #fafbfc; }
html.vm-clean .product-miniature-list-row {
  min-height: 64px;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
html.vm-clean .product-miniature.product-miniature-list .cont-img-wuala,
html.vm-clean .product-miniature.product-miniature-list .thumbnail-container {
  width: 48px;
  height: 48px;
}
html.vm-clean .product-miniature.product-miniature-list .cont-img-wuala img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: contain;
}
html.vm-clean .product-miniature-list-row > *,
html.vm-clean .mto-contador-container,
html.vm-clean .mto-contenedor-resultados,
html.vm-clean .vm-actions,
html.vm-clean .mg-col {
  min-width: 0;
  max-width: 100%;
}
html.vm-clean .mto-contador-container {
  height: 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
html.vm-clean .mto-precio-leyenda,
html.vm-clean .mto-contador-precio,
html.vm-clean .vm-price-regular {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.vm-clean .mto-precio-leyenda { display: none !important; }
html.vm-clean .vm-actions .vm-btn-add,
html.vm-clean .vm-actions .comprar-mayorista {
  width: 84px;
  min-width: 84px;
}
html.vm-clean .product-miniature-list-row .cont-img-wuala { order: 1; }
html.vm-clean .product-miniature-list-row .col-description { order: 2; }
html.vm-clean .product-miniature-list-row .vm-stepper { order: 3; justify-self: center; }
html.vm-clean .product-miniature-list-row .mto-contador-container { order: 4; }
html.vm-clean .product-miniature-list-row .mto-contenedor-resultados { order: 5; }
html.vm-clean .product-miniature-list-row .vm-actions { order: 6; }
html.vm-clean .product-miniature-list-row .mg-col,
html.vm-clean .mg-col__label,
html.vm-clean .mg-col__pct { display: none !important; }
html.vm-clean.vm-margin-on .vm-head__grid,
html.vm-clean.vm-margin-on .product-miniature-list-row {
  grid-template-columns: 48px minmax(176px, 1fr) 92px 96px 88px 84px 84px 76px 84px !important;
  column-gap: 8px;
}
@media (min-width: 992px) and (max-width: 1340px) {
  html.vm-clean.vm-margin-on #js-product-list { overflow-x: auto; }
  html.vm-clean.vm-margin-on .vm-head,
  html.vm-clean.vm-margin-on .js-product-miniature-wrapper { min-width: 940px; }
}
html.vm-clean.vm-margin-on .product-miniature-list-row .product-title a { -webkit-line-clamp: 2; }
html.vm-clean.vm-margin-on:not(.vm-profit-after-price) .product-miniature-list-row .vm-actions { order: 10; }
html.vm-clean .product-miniature-list-row .vm-stock-inline,
html.vm-clean .product-miniature-list-row .vm-stock-label,
html.vm-clean .product-miniature-list-row .product-reference { white-space: nowrap; }
html.vm-clean .mg-profit { display: none; justify-content: flex-end; align-items: center; min-width: 0; }
html.vm-clean.vm-margin-on .mg-profit { display: flex !important; }
html.vm-clean .mg-profit strong { font-size: 13px; font-weight: 700; white-space: nowrap; }
html.vm-clean .mg-profit-gain strong { color: #15803d; }
html.vm-clean.vm-margin-on .mg-profit-sale { order: 7; }
html.vm-clean.vm-margin-on .mg-profit-final { order: 8; }
html.vm-clean.vm-margin-on .mg-profit-gain { order: 9; }
html.vm-clean .descuentosespecificos-list-table {
  display: block !important;
  clear: both;
  width: calc(100% - 24px);
  margin: 0 12px 8px !important;
  overflow-x: auto;
}
html.vm-clean article.product-miniature-list {
  height: auto !important;
  overflow: visible !important;
}
html.vm-clean.vm-margin-on .mg-col__sale {
  font-size: 14px;
  font-weight: 700;
  color: var(--vm-primary, #111827);
}
html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy,
html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .product-add-cart,
html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row form.form-mayorista,
html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row form.form-mayorista .mto-contador {
  display: contents !important;
}
html.vm-clean .product-miniature-list-row .mto-contador-container,
html.vm-clean .product-miniature-list-row .mto-contenedor-resultados,
html.vm-clean .product-miniature-list-row .vm-actions,
html.vm-clean .product-miniature-list-row .mg-col {
  justify-self: end;
  text-align: right;
}
html.vm-clean .product-miniature-list-row .mto-contenedor-resultados {
  margin: 0;
  padding: 0;
  border: 0;
}
html.vm-clean .product-miniature-list-row .vm-stepper {
  justify-self: center;
  order: 3;
}
html.vm-clean .product-miniature-list-row .col-description {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  padding-top: 0;
  padding-bottom: 0;
}
html.vm-clean .product-miniature-list-row .vm-stock-badge-row,
html.vm-clean .product-miniature-list-row .vm-stock-inline {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
html.vm-clean .product-miniature-list-row .product-reference {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
html.vm-clean .product-miniature-list-row .product-title,
html.vm-clean .product-miniature-list-row .product-brand,
html.vm-clean .product-miniature-list-row .product-short {
  grid-column: 1 / -1;
  margin: 0;
}
/* v1.7.4: con la línea c/IVA el contenedor de precio necesita crecer (antes se recortaba a 46px). */
html.vm-clean .mto-contador-container:has(.vm-price-with-vat) {
  height: auto;
  min-height: 46px;
  overflow: visible;
}
html.vm-clean .product-miniature-list-row .product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.vm-clean .js-product-miniature-wrapper {
  margin-bottom: 0 !important;
}
html.vm-clean .product-miniature-list-row .product-title {
  margin: 0 0 2px;
}
html.vm-clean .product-miniature-list-row .product-title a {
  white-space: normal;
}
@media (max-width: 767px) {
  html.vm-clean .vm-head { display: none !important; }
  html.vm-clean .product-miniature-list-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .product-add-cart,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row form.form-mayorista .mto-contador {
    display: flex !important;
  }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row form.form-mayorista {
    display: block !important;
  }
}
html.vm-tree-ready .vm-tree-slot li[data-depth="1"] > .collapse,
html.vm-tree-ready .vm-tree-slot li[data-depth="1"] > .collapsing,
html.vm-tree-ready .vm-tree-slot .category-sub-menu .category-sub-menu {
  position: static;
  min-width: 0;
  margin: 0 0 0 8px;
  padding: 0 0 0 8px;
  border: 0;
  border-left: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
html.vm-clean .vm-variants {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 240px;
  height: 28px;
  margin-top: 2px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 12px;
}
html.vm-clean.vm-margin-on.vm-profit-after-price .vm-head__grid,
html.vm-clean.vm-margin-on.vm-profit-after-price .product-miniature-list-row {
  grid-template-columns: 48px minmax(176px, 1fr) 92px 96px 84px 84px 76px 88px 84px !important;
}
html.vm-clean.vm-margin-on.vm-profit-after-price .mg-profit-sale { order: 5; }
html.vm-clean.vm-margin-on.vm-profit-after-price .mg-profit-final { order: 6; }
html.vm-clean.vm-margin-on.vm-profit-after-price .mg-profit-gain { order: 7; }
html.vm-clean.vm-margin-on.vm-profit-after-price .product-miniature-list-row .mto-contenedor-resultados { order: 8; }
html.vm-clean.vm-margin-on.vm-profit-after-price .product-miniature-list-row .vm-actions { order: 9; }
/* vm-facets-override:end */

.vm-layout { display: flex; align-items: flex-start; gap: 16px; }
.vm-layout > #js-product-list { flex: 1 1 auto; min-width: 0; }
.vm-draft {
  flex: 0 0 280px; width: 280px; position: sticky; top: 88px;
  background: #fff; border: 1px solid #e6e8ee; border-radius: 12px;
  padding: 14px; box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
}
.vm-draft__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.vm-draft__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.vm-draft__head span, .vm-draft__empty { color: #6b7280; font-size: 12px; }
.vm-draft__list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 46vh; overflow: auto; }
.vm-draft__item { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #f0f2f5; }
.vm-draft__item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: #f5f6f8; }
.vm-draft__name { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.vm-draft__meta { display: block; color: #6b7280; font-size: 11px; }
.vm-draft__rm { border: 0; background: transparent; color: #6b7280; font-size: 18px; line-height: 1; cursor: pointer; }
.vm-draft__total { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px; }
.vm-draft__add {
  width: 100%; border: 0; border-radius: 8px; padding: 10px 12px;
  background: var(--vm-primary, #111827); color: #fff; font-weight: 700; cursor: pointer;
}
.vm-draft__add:disabled { opacity: .45; cursor: default; }
.vm-draft__msg { margin: 8px 0 0; color: #b91c1c; font-size: 12px; }
@media (max-width: 991px) {
  .vm-layout { flex-direction: column; }
  .vm-draft { position: static; width: 100%; flex-basis: auto; }
}

.product-miniature-list-row:has(.mg-col) {
  grid-template-columns: 72px minmax(0, 1fr) minmax(220px, 320px) 116px !important;
}
.product-miniature.product-miniature-list .descuentosespecificos-list-table {
  margin: 0 0 10px; padding: 0 12px 8px;
}

html.vm-clean .product-miniature.product-miniature-list {
  margin-bottom: 8px; border: 1px solid #e7e9ee; border-radius: 12px;
  background: #fff; box-shadow: none;
}
html.vm-clean .product-miniature-list-row { padding: 8px 12px; }
html.vm-clean .product-miniature.product-miniature-list .product-title a { font-weight: 650; letter-spacing: -.01em; }
html.vm-clean .vm-badge {
  border-radius: 999px; font-weight: 650; letter-spacing: 0;
}
html.vm-clean .vm-badge--ok, html.vm-clean .vm-dot--ok { background: color-mix(in srgb, var(--vm-stock-ok, #15803d) 12%, #fff); color: var(--vm-stock-ok, #15803d); }
html.vm-clean .vm-dot--ok { background: var(--vm-stock-ok, #15803d); }
html.vm-clean .vm-badge--low, html.vm-clean .vm-stock-label--low { color: var(--vm-stock-low, #b45309); }
html.vm-clean .vm-badge--low { background: color-mix(in srgb, var(--vm-stock-low, #b45309) 14%, #fff); }
html.vm-clean .vm-dot--low { background: var(--vm-stock-low, #b45309); }
html.vm-clean .vm-badge--out, html.vm-clean .vm-stock-label--out { color: var(--vm-stock-out, #b91c1c); }
html.vm-clean .vm-badge--out { background: color-mix(in srgb, var(--vm-stock-out, #b91c1c) 12%, #fff); }
html.vm-clean .vm-dot--out { background: var(--vm-stock-out, #b91c1c); }
html.vm-clean .comprar-mayorista,
html.vm-clean .product-miniature.product-miniature-list .vm-btn-add {
  background: var(--vm-primary, #111827) !important;
  border-color: var(--vm-primary, #111827) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  .product-miniature-list-row:has(.mg-col) {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
  .product-miniature-list-row:has(.mg-col) .col-buy,
  .product-miniature-list-row:has(.mg-col) .mg-col {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
}

/* v1.7.1 — hover alineado + filas no disponibles dentro de la grilla de la tabla */
html.vm-clean .js-product-miniature-wrapper,
html.vm-clean #js-product-list .products > .js-product-miniature-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .product-add-cart.vm-out-of-stock {
  display: flex !important;
  order: 3;
  grid-column: 3 / -1;
  justify-self: end;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
html.vm-clean .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock .btn-product-list {
  width: auto;
  min-width: 84px;
  margin: 0;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
}
html.vm-clean .product-miniature-list-row .cont-img-wuala { grid-column: 1; }
@media (max-width: 767px) {
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .product-add-cart.vm-out-of-stock {
    grid-column: 2 / -1;
    justify-self: start;
  }
}
html.vm-clean .vm-head { padding-left: 0 !important; padding-right: 0 !important; }

/* v1.7.2 — desktop: panel sticky con scroll propio; mobile: card ordenada + barra de pedido fija */
@media (min-width: 992px) {
  .vm-layout { align-items: flex-start; }
  .vm-draft { align-self: flex-start; max-height: calc(100vh - 108px); overflow-y: auto; }
  .vm-draft__list { max-height: calc(100vh - 340px); min-height: 0; }
}
@media (max-width: 767px) {
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .cont-img-wuala { order: 1; grid-column: 1; }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-description { order: 2; grid-column: 2; }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy {
    order: 3; grid-column: 1 / -1;
    display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 8px; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid #f0f2f5; width: 100%;
  }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .product-add-cart,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy form.form-mayorista,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .mto-contador {
    display: contents !important;
  }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .vm-stepper,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .mto-contador-container,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .mto-contenedor-resultados,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .vm-actions { order: 0; width: auto; justify-self: auto; margin: 0; }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .vm-actions { margin-left: auto; }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .vm-btn-add,
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .comprar-mayorista { width: 96px; min-width: 96px; padding: 8px 10px; }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .product-add-cart.vm-out-of-stock {
    display: flex !important; margin-left: auto; grid-column: auto; justify-self: auto;
  }
  html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .product-title a { -webkit-line-clamp: 2; }

  /* barra de pedido fija abajo */
  .vm-draft {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important;
    width: 100% !important; max-width: 100%; z-index: 1040; margin: 0;
    border-radius: 14px 14px 0 0; border-bottom: 0;
    box-shadow: 0 -6px 24px rgba(17,24,39,.14);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    max-height: 78vh; overflow-y: auto;
  }
  .vm-draft__head { margin-bottom: 0; cursor: pointer; }
  .vm-draft__head::after { content: '▴'; margin-left: 6px; color: #6b7280; }
  .vm-draft.is-open .vm-draft__head::after { content: '▾'; }
  .vm-draft__head h3 { flex: 1; }
  .vm-draft__list, .vm-draft__empty, .vm-draft__profit, .vm-draft__msg { display: none; }
  .vm-draft.is-open .vm-draft__list { display: block; max-height: 40vh; margin-top: 8px; }
  .vm-draft.is-open .vm-draft__empty, .vm-draft.is-open .vm-draft__profit { display: block; }
  .vm-draft.is-open .vm-draft__msg:not([hidden]) { display: block; }
  .vm-draft__msg:not([hidden]) { display: block; }
  .vm-draft__total { margin: 6px 0; }
  html.vm-draft-on body { padding-bottom: 130px; }
}

/* v1.7.3 — vista grilla con form mayorista */
.product-miniature-grid .product-add-cart.vm-grid-buy { display: block !important; opacity: 1 !important; visibility: visible !important; position: static !important; transform: none !important; margin-top: 8px; }
.product-miniature-grid .vm-grid-buy .btn-product-list:not(.vm-btn-add) { width: 100%; }
.product-miniature-grid .vm-stock-badge-row { display: none !important; }
.product-miniature-grid .vm-stock-inline { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 12px; }
.product-miniature-grid .vm-stock-inline .vm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.product-miniature-grid .vm-dot--ok { background: #22c55e; }
.product-miniature-grid .vm-dot--low { background: #f59e0b; }
.product-miniature-grid .vm-dot--out { background: #ef4444; }
.product-miniature-grid .vm-stock-label--ok { color: #059669; }
.product-miniature-grid .vm-stock-label--low { color: #d97706; }
.product-miniature-grid .vm-stock-label--out { color: #dc2626; }
.product-miniature-grid .vm-grid-buy .mto-contador {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qty price" "total total" "act act";
  align-items: center; column-gap: 10px; row-gap: 6px;
}
.product-miniature-grid .vm-grid-buy .vm-stepper { grid-area: qty; order: 1; }
.product-miniature-grid .vm-grid-buy .mto-contador-container { grid-area: price; order: 2; text-align: right; height: auto; display: flex; flex-direction: column; align-items: flex-end; }
.product-miniature-grid .vm-grid-buy .mto-contenedor-resultados { grid-area: total; order: 3; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 6px 0 0; border-top: 1px solid #f0f2f5; text-align: right; }
.product-miniature-grid .vm-grid-buy .mto-contenedor-resultados::before { content: 'Total'; font-size: 12px; color: #6b7280; }
.product-miniature-grid .vm-grid-buy .mto-contador-resultado.final span { font-weight: 700; font-size: 15px; }
.product-miniature-grid .vm-grid-buy .vm-actions { grid-area: act; order: 4; display: block; }
.product-miniature-grid .vm-grid-buy .vm-btn-add { width: 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; font-weight: 600; position: relative; }
.product-miniature-grid .vm-grid-buy .vm-btn-add .vm-btn-spinner { display: none; width: 14px; height: 14px; margin-left: .5rem; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: vm-spin .7s linear infinite; }
.product-miniature-grid .vm-grid-buy .vm-btn-add.is-loading { opacity: .9; pointer-events: none; }
.product-miniature-grid .vm-grid-buy .vm-btn-add.is-loading .vm-btn-spinner { display: inline-block; }
.product-miniature-grid .vm-grid-buy .vm-btn-add.is-success { background: #16a34a !important; border-color: #16a34a !important; }
.product-miniature-grid .vm-grid-buy .vm-btn-add:disabled { opacity: .5; }
.product-miniature-grid .vm-grid-buy .vm-error-msg { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; padding: .35rem .5rem; border-radius: .375rem; font-size: .8rem; margin-top: 6px; }
.product-miniature-grid .vm-grid-buy .vm-input-qty::-webkit-outer-spin-button,
.product-miniature-grid .vm-grid-buy .vm-input-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-miniature-grid .vm-grid-buy .vm-input-qty { -moz-appearance: textfield; }
.product-miniature-grid .vm-grid-buy .vm-stepper { display: inline-flex !important; align-items: stretch; background: #fff; border: 1px solid #ced4da; border-radius: 4px; overflow: hidden; height: 34px; flex-shrink: 0; }
.product-miniature-grid .vm-grid-buy .vm-stepper .vm-input-qty { width: 44px !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; text-align: center !important; padding: 0 4px !important; box-shadow: none !important; font-size: 14px !important; }
.product-miniature-grid .vm-grid-buy .vm-stepper-arrows { display: inline-flex; flex-direction: column; border-left: 1px solid #ced4da; }
.product-miniature-grid .vm-grid-buy .vm-stepper-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 22px; flex: 1 1 auto; border: 0; background: #fff; color: #495057; padding: 0; cursor: pointer; }
.product-miniature-grid .vm-grid-buy .vm-stepper-btn + .vm-stepper-btn { border-top: 1px solid #e9ecef; }
.product-miniature-grid .vm-grid-buy .vm-stepper-btn:hover { background: #f8f9fa; }
.product-miniature-grid .vm-grid-buy .mto-precio-leyenda { display: none !important; }
.product-miniature-grid .vm-variants { width: 100%; max-width: 100%; height: 30px; margin: 6px 0 0; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 12px; }
.product-miniature-grid:has(.vm-grid-buy) .product-price-and-shipping { display: none; }
html.vm-clean .product-miniature-grid .vm-grid-buy .vm-actions { display: block; width: 100%; justify-self: stretch; }
html.vm-clean .product-miniature-grid .vm-grid-buy .vm-actions .vm-btn-add,
html.vm-clean .product-miniature-grid .vm-grid-buy .vm-actions .comprar-mayorista { width: 100%; min-width: 0; }
html.vm-clean .product-miniature-grid .vm-grid-buy .mto-contador { width: 100%; }

/* v1.7.4 — grilla prolija: cards parejas, compra al pie, escalas compactas */
.products-grid .js-product-miniature-wrapper:has(.vm-grid-buy) { display: flex; }
.products-grid .js-product-miniature-wrapper:has(.vm-grid-buy) > .product-miniature { flex: 1 1 auto; display: flex; flex-direction: column; height: auto; }
.product-miniature-grid:has(.vm-grid-buy) .product-description { flex: 1 1 auto; display: flex; flex-direction: column; text-align: center; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > * { order: 0; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > .vm-variants { order: 4; align-self: stretch; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > .descuentosespecificos-list-table { order: 5; margin-top: auto !important; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > .product-add-cart { order: 6; margin-top: auto; }
.product-miniature-grid:has(.vm-grid-buy) .product-description:has(.descuentosespecificos-list-table) > .product-add-cart { margin-top: 8px; }
.product-miniature-grid .descuentosespecificos-list-table { width: 100%; margin: 8px 0 0 !important; padding: 6px 8px 4px; border: 1px solid #e6e8ee; border-radius: 8px; background: #f8f9fb; text-align: left; clear: both; }
.product-miniature-grid .descuentosespecificos-list-table > div:first-child { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: #6b7280 !important; margin: 0 0 4px !important; text-align: left !important; }
.product-miniature-grid .descuentosespecificos-list-table table { width: 100%; margin: 0 !important; background: transparent !important; border: 0 !important; font-size: 12px; }
.product-miniature-grid .descuentosespecificos-list-table th { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; padding: 2px 4px !important; border: 0 !important; background: transparent !important; text-align: center; }
.product-miniature-grid .descuentosespecificos-list-table td { padding: 3px 4px !important; border: 0 !important; border-top: 1px solid #eceef2 !important; background: transparent !important; color: #374151 !important; text-align: center; white-space: nowrap; }
.product-miniature-grid .descuentosespecificos-list-table td:last-child { font-weight: 700; color: #111827 !important; }
.product-miniature-grid .descuentosespecificos-list-table tbody tr.vm-tier-active td { background: #e8f5ec !important; color: #166534 !important; }
.product-miniature-grid .descuentosespecificos-list-table tbody tr.vm-tier-active td:first-child { border-radius: 6px 0 0 6px; }
.product-miniature-grid .descuentosespecificos-list-table tbody tr.vm-tier-active td:last-child { border-radius: 0 6px 6px 0; }
.product-miniature-grid .vm-grid-buy .mto-contador-precio,
.product-miniature-grid .vm-grid-buy .mto-contador-precio * { color: #111827 !important; }
.product-miniature-grid .vm-grid-buy .vm-price-regular { color: #9ca3af !important; text-decoration: line-through; font-size: 12px; }
.product-miniature-grid .vm-stock-inline { align-self: center; }
html.vm-clean .product-miniature-grid .descuentosespecificos-list-table { width: 100%; margin: 0 !important; }
html.vm-clean .product-miniature-grid:has(.vm-grid-buy) .product-description > .descuentosespecificos-list-table { margin-top: auto !important; }
html.vm-clean .product-miniature-grid:has(.vm-grid-buy) .product-description:has(.descuentosespecificos-list-table) > .product-add-cart { margin-top: 8px; }
html.vm-clean .product-miniature-grid .descuentosespecificos-list-table + .product-add-cart { margin-top: 8px; }

/* v1.7.5 — grilla: alineación entre cards */
.product-miniature-grid:has(.vm-grid-buy) .product-description > .product-category-name { display: none; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > .products-variants { display: none; }
.product-miniature-grid:has(.vm-grid-buy) .product-description .product-title { min-height: 2.6em; display: flex; align-items: flex-start; justify-content: center; margin: 0 0 4px; line-height: 1.3; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > .vm-stock-inline { min-height: 20px; margin: 0 auto 6px; }
.product-miniature-grid:has(.vm-grid-buy) .product-description > .vm-variants { min-height: 30px; margin: 0 0 6px; }
.product-miniature-grid:has(.vm-grid-buy) .vm-grid-buy .mto-contador { grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
.product-miniature-grid:has(.vm-grid-buy) .vm-grid-buy .mto-contador-container { min-height: 34px; justify-content: center; }
.product-miniature-grid:has(.vm-grid-buy) .vm-grid-buy.vm-out-of-stock .btn-product-list { width: 100%; background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; text-align: center; }
html.vm-clean .product-miniature.product-miniature-list .product-miniature-list-row .col-buy .product-add-cart.vm-out-of-stock { grid-column: 3 / -1; justify-self: end; }

/* v1.7.6 — un solo scroll en el panel de pedido: scrollea la lista, no el panel */
.vm-draft { display: flex !important; flex-direction: column; overflow: hidden !important; }
.vm-draft > * { flex: 0 0 auto; }
.vm-draft > .vm-draft__list { flex: 1 1 auto; min-height: 72px; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 992px) {
  .vm-draft { max-height: calc(100vh - 108px); }
}
@media (max-width: 767px) {
  .vm-draft { max-height: 78vh; }
  .vm-draft.is-open > .vm-draft__list { display: block; }
}

/* v1.7.7 — rentabilidad: grilla elástica que aprovecha todo el ancho, columnas numéricas alineadas */
html.vm-clean.vm-margin-on .vm-head__grid,
html.vm-clean.vm-margin-on .product-miniature-list-row {
  grid-template-columns: 48px minmax(200px, 2.4fr) 88px minmax(88px, 1fr) minmax(104px, 1.1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) 84px !important;
  column-gap: 10px;
}
html.vm-clean.vm-margin-on.vm-profit-after-price .vm-head__grid,
html.vm-clean.vm-margin-on.vm-profit-after-price .product-miniature-list-row {
  grid-template-columns: 48px minmax(200px, 2.4fr) 88px minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(104px, 1.1fr) 84px !important;
}
/* sin botón Añadir (modo "solo selector"): no reservar la columna de acciones */
html.vm-clean.vm-margin-on.vm-no-add .vm-head__grid,
html.vm-clean.vm-margin-on.vm-no-add .product-miniature-list-row {
  grid-template-columns: 48px minmax(200px, 2.4fr) 88px minmax(88px, 1fr) minmax(104px, 1.1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) !important;
}
html.vm-clean.vm-margin-on.vm-no-add.vm-profit-after-price .vm-head__grid,
html.vm-clean.vm-margin-on.vm-no-add.vm-profit-after-price .product-miniature-list-row {
  grid-template-columns: 48px minmax(200px, 2.4fr) 88px minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(104px, 1.1fr) !important;
}
html.vm-clean.vm-no-add .product-miniature-list-row .vm-actions:not(:has(*)) { display: none !important; }
@media (min-width: 992px) and (max-width: 1340px) {
  html.vm-clean.vm-margin-on.vm-no-add .vm-head,
  html.vm-clean.vm-margin-on.vm-no-add .js-product-miniature-wrapper { min-width: 860px; }
}
/* total: sin el divisor lateral que le restaba ancho, y pastilla compacta para que no se pise con la columna vecina */
html.vm-clean.vm-margin-on .product-miniature-list-row .mto-contenedor-resultados {
  margin-left: 0; padding-left: 0; border-left: 0;
}
html.vm-clean.vm-margin-on .mto-contenedor-resultados .mto-contador-resultado.final { font-size: 14px; }
html.vm-clean.vm-margin-on .mto-contenedor-resultados .mto-contador-resultado.final span:not(.vm-old-total) {
  padding: .15rem .4rem;
}
/* grupo rentabilidad: separado del resto y con jerarquía (sugerida < final < ganancia) */
html.vm-clean.vm-margin-on .mg-profit { align-self: stretch; }
html.vm-clean.vm-margin-on:not(.vm-profit-after-price) .mg-profit-sale,
html.vm-clean.vm-margin-on.vm-profit-after-price .mg-profit-sale {
  border-left: 1px solid #eef0f4; padding-left: 8px;
}
html.vm-clean.vm-margin-on:not(.vm-profit-after-price) .vm-head__grid span:nth-child(6),
html.vm-clean.vm-margin-on.vm-profit-after-price .vm-head__grid span:nth-child(5) {
  border-left: 1px solid #e6e8ee; padding-left: 8px;
}
html.vm-clean.vm-margin-on .mg-profit-sale strong { color: #6b7280; font-weight: 600; }
html.vm-clean.vm-margin-on .mg-profit-final strong { color: #111827; font-size: 14px; }
html.vm-clean.vm-margin-on .mg-profit-gain strong {
  padding: 3px 8px; border-radius: 6px; background: #ecfdf3; color: #15803d;
}
html.vm-clean .vm-head__grid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }