/* =====================================================================
   SoloVasos — estados de la tienda (2026-10-14). Lo carga layouts/layout.tpl en todas las
   páginas, DESPUÉS del CSS personalizado del admin (por eso gana con el mismo peso).
   1. Botones: hover / presionado / deshabilitado / foco, cada uno distinto.
   2. Cargando: brillo gris en las fotos de las grillas mientras bajan.
   3. Vacíos: búsqueda sin resultados, categoría sin productos, carrito vacío
      (marcado en snipplets/svh-vacio.tpl; el inicio arma el mismo marcado desde JS).
   ===================================================================== */

/* ---------- 1. Botones ----------
   El hover ya lo pone el CSS del admin (azul más oscuro y sube 2 px). Aquí: el presionado
   se hunde, y el deshabilitado queda gris y quieto (antes se veía igual que uno activo).
   Ojo: .js-addtocart-placeholder es el "Agregando…" del tema (deshabilitado a propósito):
   no se toca, es el estado de carga del botón. */
.btn.btn-primary:not([disabled]):not(.disabled):active,
.js-addtocart:not([disabled]):not(.disabled):active,
.item-product .js-quickshop-modal-open.btn:active {
  transform: translateY(0) scale(.97) !important;
  background: #156bb0 !important; border-color: #156bb0 !important;
  box-shadow: inset 0 3px 8px rgba(8, 30, 60, .28) !important;
  transition-duration: .06s !important;
}
.btn.btn-secondary:not([disabled]):not(.disabled):active { transform: scale(.97); background-color: rgba(47, 143, 224, .12); }
.btn.btn-primary:focus-visible, .js-addtocart:focus-visible, .btn.btn-secondary:focus-visible, .btn-variant:focus-visible {
  outline: 3px solid #9cc9f2 !important; outline-offset: 2px !important; opacity: 1 !important;
}
/* En celular el :hover se queda pegado después de tocar: sin "subir" ahí. */
@media (hover: none) {
  .btn.btn-primary:hover, .js-addtocart:hover { transform: none !important; }
}
.btn.btn-primary[disabled]:not(.js-addtocart-placeholder),
.btn.btn-primary.disabled:not(.js-addtocart-placeholder),
.js-addtocart[disabled]:not(.js-addtocart-placeholder),
.js-addtocart.disabled:not(.js-addtocart-placeholder),
input.js-addtocart[disabled]:not(.js-addtocart-placeholder) {
  background: #e7ecf2 !important; border-color: #e7ecf2 !important;
  color: #7d8a9c !important; fill: #7d8a9c !important;
  box-shadow: none !important; transform: none !important; opacity: 1 !important;
  cursor: not-allowed !important;
}
.btn.btn-secondary[disabled], .btn.btn-secondary.disabled {
  color: #9aa6b5 !important; border-color: #e1e7ee !important; background: #f6f8fa !important;
  opacity: 1 !important; transform: none !important; cursor: not-allowed !important;
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary, .js-addtocart, .btn.btn-secondary { transition: none !important; }
  .btn.btn-primary:active, .js-addtocart:active, .btn.btn-secondary:active { transform: none !important; }
}

/* ---------- 2. Cargando: fotos de las grillas ----------
   Mientras la foto baja (lazysizes: .lazyload → .lazyloading → .lazyloaded) el cuadro
   brilla en gris en vez de quedar en blanco. Sin :has() (navegadores viejos) no pasa nada. */
.js-item-image-padding:has(img.lazyload), .js-item-image-padding:has(img.lazyloading) {
  background: linear-gradient(100deg, #eef2f6 30%, #f8fafc 50%, #eef2f6 70%) 0 0 / 300% 100%;
  animation: sv-brillo 1.3s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes sv-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .js-item-image-padding { animation: none !important; } }

/* ---------- 3. Vacíos ---------- */
.sv-vacio {
  max-width: 560px; margin: 24px auto 40px; padding: 30px 22px 26px;
  text-align: center; background: #fff;
  border: 1.5px dashed #cfe0f1; border-radius: 20px;
  color: #1d3055; font-family: inherit;
}
.sv-vacio--compacto { margin: 8px 0 16px; padding: 22px 16px 18px; border-radius: 16px; }
.sv-vacio__ilustracion { display: block; width: 96px; height: 96px; margin: 0 auto 12px; }
.sv-vacio--compacto .sv-vacio__ilustracion { width: 72px; height: 72px; }
.sv-vacio__vaso { transform-origin: 50% 90%; animation: sv-flota 3.2s ease-in-out infinite; }
.sv-vacio__chispa { animation: sv-titila 2.4s ease-in-out infinite; }
.sv-vacio__chispa--2 { animation-delay: .8s; }
.sv-vacio__chispa--3 { animation-delay: 1.6s; }
@keyframes sv-flota { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes sv-titila { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.sv-vacio__chispa { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .sv-vacio__vaso, .sv-vacio__chispa { animation: none !important; } }
.sv-vacio .sv-vacio__titulo {
  margin: 0 0 6px; color: #0e2b4d !important; font-size: 20px; line-height: 1.3; font-weight: 800;
  overflow-wrap: anywhere;
}
.sv-vacio.sv-vacio--compacto .sv-vacio__titulo { font-size: 17px; }
.sv-vacio .sv-vacio__texto { margin: 0 auto 18px; max-width: 420px; color: #5f6b7a; font-size: 15px; line-height: 1.55; }
.sv-vacio .sv-vacio__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -4px 0 18px; padding: 0; list-style: none; }
.sv-vacio__chips a {
  display: inline-block; padding: 7px 14px; border: 1.5px solid #cfe0f1; border-radius: 999px;
  background: #f5f9ff; color: #1c64b8; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .12s ease;
}
.sv-vacio__chips a:hover { border-color: #2f8fe0; background: #eaf3ff; color: #1c64b8; text-decoration: none; }
.sv-vacio__chips a:active { transform: scale(.96); }
.sv-vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sv-vacio__boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px; border: 2px solid transparent; border-radius: 12px;
  font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sv-vacio__boton:hover, .sv-vacio__boton:focus { text-decoration: none; }
.sv-vacio__boton:focus-visible { outline: 3px solid #9cc9f2; outline-offset: 2px; }
.sv-vacio__boton--azul { background: #1a74c4; color: #fff !important; box-shadow: 0 6px 14px rgba(26, 116, 196, .28); }
.sv-vacio__boton--azul:hover { background: #155f9f; }
.sv-vacio__boton--borde { background: #fff; color: #0e2b4d !important; border-color: #dbe3ec; }
.sv-vacio__boton--borde:hover { border-color: #2f8fe0; color: #1c64b8 !important; }
.sv-vacio__boton--wa { background: #25d366; color: #0b2e17 !important; }
.sv-vacio__boton--wa:hover { background: #1fbd5a; }
@media (hover: hover) { .sv-vacio__boton:hover { transform: translateY(-1px); } }
.sv-vacio__boton:active { transform: scale(.97); box-shadow: inset 0 2px 6px rgba(8, 30, 60, .22); }
.sv-vacio__boton svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 420px) {
  .sv-vacio__acciones { flex-direction: column; }
  .sv-vacio__boton { width: 100%; }
}