/*
 * Accesibilidad y uso táctil compartidos por los temas de la tienda pública.
 * Se carga después del CSS de cada tema. Los selectores :where() tienen especificidad 0:
 * cualquier regla del tema (p. ej. position:absolute) sigue ganando.
 */

/* ── Área táctil mínima de 44×44 px sin cambiar el tamaño visual del botón ── */
:where(.qty-btn, .close-modal, .checkout-back-btn, .ci-qty-btn, .ci-remove, .fav-btn) {
  position: relative;
}
.qty-btn::before,
.close-modal::before,
.checkout-back-btn::before,
.ci-qty-btn::before,
.ci-remove::before,
.fav-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* Botones de texto: se agrandan de verdad (el alto visual era de ~28 px) */
.add-btn,
.pi-add {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* ── Sin zoom automático de iOS al enfocar un campo (permite quitar user-scalable=no) ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── Foco visible al navegar con teclado (los temas lo quitaban con outline:none) ── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary, var(--pr, var(--theme-color-1, #2563eb))) !important;
  outline-offset: 2px;
}

/* ── Error junto al campo (TCCheckout.fieldError) ── */
[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}
.tc-field-error {
  display: block;
  margin: .3rem 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #b91c1c;
  text-align: left;
}

/* Región para lectores de pantalla (anuncia los avisos) */
.tc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}