/* Tía Vicenta v431 · Reparación específica botones de tarjetas
   Corrige Ver / Elegir / Agregar / controles de cantidad. */

/* Layout profesional: Ver + acción principal alineados */
html body .product.compact-product .product-actions,
html body .product .product-actions{
  display:grid!important;
  grid-template-columns:minmax(86px,.42fr) minmax(128px,.58fr)!important;
  gap:10px!important;
  align-items:center!important;
  margin-top:auto!important;
  width:100%!important;
}

html body .product.compact-product .card-control-slot,
html body .product .card-control-slot{
  width:100%!important;
  min-width:0!important;
  display:block!important;
}

/* Botón Ver: secundario, limpio, no pesado */
html body .product.compact-product .details-btn,
html body .product .details-btn{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 12px!important;
  border-radius:15px!important;
  border:1px solid var(--tv-line)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tv-card) 92%, #fff 8%),var(--tv-card-2))!important;
  color:var(--tv-text)!important;
  box-shadow:0 7px 16px color-mix(in srgb,#000 7%, transparent)!important;
  font-size:14px!important;
  font-weight:1000!important;
  letter-spacing:-.01em!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Botones principales de tarjeta: Elegir / Agregar */
html body .product.compact-product .choice-boom,
html body .product.compact-product .card-add-main,
html body .product.compact-product .card-control-slot > .add-btn,
html body .product .choice-boom,
html body .product .card-add-main,
html body .product .card-control-slot > .add-btn{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  border-radius:15px!important;
  border:1px solid transparent!important;
  background:linear-gradient(180deg,var(--tv-orange),var(--tv-orange-2))!important;
  color:#211100!important;
  box-shadow:0 9px 18px color-mix(in srgb,var(--tv-orange) 28%, transparent)!important;
  font-size:14px!important;
  font-weight:1000!important;
  letter-spacing:-.01em!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Estado con cantidad: más compacto, legible y sin blanco roto */
html body .product.compact-product .card-buy-control,
html body .product .card-buy-control{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:42px minmax(34px,1fr) 42px!important;
  align-items:center!important;
  border-radius:15px!important;
  overflow:hidden!important;
  border:1px solid var(--tv-line)!important;
  background:linear-gradient(180deg,var(--tv-card),var(--tv-card-2))!important;
  box-shadow:0 7px 16px color-mix(in srgb,#000 7%, transparent)!important;
}

html body .product.compact-product .card-buy-control.is-empty,
html body .product .card-buy-control.is-empty{
  display:block!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .product.compact-product .card-qty-btn,
html body .product .card-qty-btn{
  width:42px!important;
  min-width:42px!important;
  height:44px!important;
  min-height:44px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:grid!important;
  place-items:center!important;
  font-size:20px!important;
  font-weight:1000!important;
  line-height:1!important;
}

html body .product.compact-product .card-qty-minus,
html body .product .card-qty-minus{
  background:color-mix(in srgb,var(--tv-card) 78%, #000 6%)!important;
  color:var(--tv-text)!important;
}

html body .product.compact-product .card-qty-plus,
html body .product .card-qty-plus{
  background:linear-gradient(180deg,var(--tv-orange),var(--tv-orange-2))!important;
  color:#211100!important;
}

html body .product.compact-product .card-qty-number,
html body .product .card-qty-number{
  height:44px!important;
  min-width:0!important;
  display:grid!important;
  place-items:center!important;
  color:var(--tv-text)!important;
  background:transparent!important;
  font-size:15px!important;
  font-weight:1000!important;
  line-height:1!important;
}

/* Hover/active sin saltos exagerados */
@media (hover:hover){
  html body .product.compact-product .details-btn:hover,
  html body .product.compact-product .choice-boom:hover,
  html body .product.compact-product .card-add-main:hover,
  html body .product.compact-product .card-buy-control:hover,
  html body .product .details-btn:hover,
  html body .product .choice-boom:hover,
  html body .product .card-add-main:hover,
  html body .product .card-buy-control:hover{
    transform:translateY(-1px)!important;
    filter:saturate(1.03)!important;
  }
}

html body .product.compact-product .details-btn:active,
html body .product.compact-product .choice-boom:active,
html body .product.compact-product .card-add-main:active,
html body .product .details-btn:active,
html body .product .choice-boom:active,
html body .product .card-add-main:active{
  transform:scale(.985)!important;
}

/* Dark mode específico: elimina contrastes sucios */
html[data-theme="dark"] body .product.compact-product .details-btn,
html[data-theme="dark"] body .product .details-btn{
  background:linear-gradient(180deg,#2a1e17,#211713)!important;
  color:#fff7ec!important;
  border-color:rgba(255,219,176,.16)!important;
  box-shadow:0 9px 20px rgba(0,0,0,.28)!important;
}

html[data-theme="dark"] body .product.compact-product .card-buy-control,
html[data-theme="dark"] body .product .card-buy-control{
  background:linear-gradient(180deg,#2a1e17,#211713)!important;
  border-color:rgba(255,219,176,.16)!important;
  box-shadow:0 9px 20px rgba(0,0,0,.28)!important;
}

html[data-theme="dark"] body .product.compact-product .card-qty-minus,
html[data-theme="dark"] body .product .card-qty-minus{
  background:rgba(255,255,255,.075)!important;
  color:#fff7ec!important;
}

html[data-theme="dark"] body .product.compact-product .card-qty-number,
html[data-theme="dark"] body .product .card-qty-number{
  color:#fff7ec!important;
}

/* En pantallas muy chicas, mantiene orden sin desbordar */
@media (max-width:430px){
  html body .product.compact-product .product-actions,
  html body .product .product-actions{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
}