/* ============================= */
/* GRID DE VARIACIONES */
/* ============================= */

.eshop-vars-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:12px;
    margin:10px;
}

/* ============================= */
/* CARD BASE */
/* ============================= */

.eshop-var-card{
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    background:#fff;
    transition:transform .2s ease, box-shadow .2s ease;
}

.eshop-var-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(0,0,0,.18);
    z-index:5;
}

.eshop-var-card.is-out{
    opacity:.6;
}

.eshop-var-card__row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.eshop-var-card__sku,
.eshop-var-card__price{
    font-weight:700;
}

.eshop-var-card__detail{
    margin:6px 0;
    color:#555;
    font-size:13px;
}

.eshop-var-card__desc{
    margin-top:6px;
    font-size:0.92em;
    opacity:.85;
    line-height:1.2;
}

.eshop-var-card__nombre{
    font-weight:700;
    font-size:14px;
    margin-bottom:4px;
    line-height:1.2;
}

/* ============================= */
/* IMAGENES */
/* ============================= */

.eshop-var-card__media{
    margin-bottom:8px;
}

.eshop-var-card__img{
    width:100%;
    height:120px;
    object-fit:contain;
    border-radius:8px;
    background:#f7f7f7;
    display:block;
}

.eshop-var-card__img--placeholder{
    width:100%;
    height:120px;
    border-radius:8px;
    background:#f1f1f1;
}

/* Oculta bloque superior cuando es vista card */
body.eshop-vista-card .producto .imagenes{
    display:none !important;
}

/* ============================= */
/* FOOTER */
/* ============================= */

.eshop-var-card__footer{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* Linea superior: stock izquierda / pack derecha */
.eshop-var-card__meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.eshop-var-card__pack{
    font-weight:600;
    font-size:14px;
    opacity:.85;
    white-space:nowrap;
}

/* Linea inferior: stepper izquierda / bot¨®n derecha */
.eshop-var-card__actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

/* ============================= */
/* BOTON AGREGAR */
/* ============================= */

.eshop-var-card__btn{
    background:#000;
    color:#fff;
    border:none;
    padding:12px 22px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    margin-left:auto;
    transition:background .2s ease;
}

.eshop-var-card__btn:hover{
    background:#222;
}

/* ============================= */
/* STEPPER (- 0 +) */
/* ============================= */

.plusminus{
    display:flex !important;
    align-items:center !important;
    gap:8px;
}

/* Neutralizamos cualquier estilo heredado del theme */
.plusminus a{
    float:none !important;
    clear:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:8px !important;
    text-decoration:none !important;
}

/* Botones - y + */
.plusminus .minusItem,
.plusminus .moreItem{
    width:38px;
    height:44px;
    background:#000;
    color:#fff;
    line-height:1;
}

/* Simbolos */
.plusminus .minusItem::before{
    content:'-';
    font-size:22px;
}

.plusminus .moreItem::before{
    content:'+';
    font-size:22px;
}

/* Input */
.plusminus input.eshopQtyInput{
    width:48px;
    height:44px;
    border:0;
    background:transparent;
    text-align:center;
    font-weight:700;
    font-size:18px;
    padding:0;
    margin:0;
}

/* ============================= */
/* SIN STOCK */
/* ============================= */

.eshop-var-card__nostock{
    font-weight:600;
    color:#b00;
}

/* ============================= */
/* FIX: el theme esta posicionando los <a> del stepper con absolute + top/bottom */
/* ============================= */

.plusminus{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Anular estilos del theme sobre los anchors */
.plusminus a,
.plusminus a:first-child,
.plusminus a:last-child{
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
}

/* Botones - y + */
.plusminus .minusItem,
.plusminus .moreItem{
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#000 !important;
  color:#fff !important;
  border-radius:8px !important;
  text-decoration:none !important;
  line-height:1 !important;
}

/* Simbolos */
.plusminus .minusItem::before{ content:'-'; font-size:22px; }
.plusminus .moreItem::before{ content:'+'; font-size:22px; }

/* Input del medio */
.plusminus input.eshopQtyInput{
  width:48px !important;
  height:44px !important;
  border:0 !important;
  background:transparent !important;
  text-align:center !important;
  font-weight:700 !important;
  font-size:18px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}

/* ========== FIX: que el n¨²mero SI se vea ========== */
.plusminus input.eshopQtyInput{
  color:#000 !important;
  background:#fff !important;
  border:1px solid #ddd !important;
  border-radius:8px !important;
  width:44px !important;
  height:44px !important;
  text-align:center !important;
  font-weight:700 !important;
  font-size:18px !important;
  opacity:1 !important;
  -webkit-text-fill-color:#000 !important; /* Safari */
  appearance:textfield !important;
}

/* Por si el theme baja opacidad cuando es readonly/disabled */
.plusminus input.eshopQtyInput[readonly]{
  opacity:1 !important;
}
/* ===== RESET TOTAL DEL STEPPER ===== */

.plusminus{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  position:relative !important;
}

/* Quitar cualquier absolute heredado */
.plusminus a,
.plusminus input{
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
}

/* Botones - y + */
.plusminus .minusItem,
.plusminus .moreItem{
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#000 !important;
  color:#fff !important;
  border-radius:8px !important;
  text-decoration:none !important;
}

/* Input centrado entre los dos */
.plusminus input.eshopQtyInput{
  width:48px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-weight:700 !important;
  font-size:18px !important;
  background:transparent !important;
  border:0 !important;
  color:#000 !important;
  opacity:1 !important;
}
/* Ocultar meta superior (Stock + 1U) */
.eshop-var-card__meta{
  display:none !important;
}
/* ============================= */
/* MOBILE: cantidad + agregar en la misma linea */
/* ============================= */
@media (max-width: 768px){

  .eshop-var-card__actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .plusminus{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .plusminus .minusItem,
  .plusminus .moreItem{
    width:32px !important;
    min-width:32px !important;
    height:38px !important;
  }

  .plusminus .minusItem::before,
  .plusminus .moreItem::before{
    font-size:18px !important;
  }

  .plusminus input.eshopQtyInput{
    width:36px !important;
    min-width:36px !important;
    height:38px !important;
    font-size:16px !important;
    padding:0 !important;
  }

  .eshop-var-card__btn{
    flex:0 0 auto !important;
    min-width:88px !important;
    width:auto !important;
    padding:8px 10px !important;
    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    margin-left:auto !important;
  }

  .eshop-var-card__btn i{
    margin-right:4px !important;
  }
}