/* Alfa y Omega — estilos compartidos que complementan a Tailwind. */

body { overflow-x: hidden; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1; }

.kinetic-hover { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.kinetic-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(68,96,131,.1), 0 10px 10px -5px rgba(68,96,131,.04);
}

.size-btn-selected { background-color: #000; color: #fff; border-color: #000; }
.active-thumb { border-color: #000 !important; opacity: 1 !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #446083; border-radius: 10px; }

/* Carrito lateral (drawer) */
#cart-drawer { transition: transform .35s cubic-bezier(.4,0,.2,1); }
#cart-drawer.translate-x-full { transform: translateX(100%); }

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #446083;
  outline-offset: 2px;
}

/* Menú móvil */
#mobile-menu { transition: opacity .25s ease, transform .25s ease; }