/* =============================================================
   PaqEx · main.css
   Punto de entrada. En producción, concatenar todos los archivos
   en este orden (o usar un bundler) para reducir peticiones HTTP.
   ============================================================= */

@import url("./base/variables.css");
@import url("./base/reset.css");
@import url("./layout/header.css");
@import url("./layout/catalog.css");
@import url("./layout/footer.css");
@import url("./components/buttons.css");
@import url("./components/cards.css");
@import url("./components/cart-drawer.css");
@import url("./components/modal.css");
@import url("./components/forms.css");
@import url("./components/toast.css");
@import url("./components/pdp.css");
@import url("./components/reviews.css");
@import url("./components/promo-banner.css");
@import url("./components/bottom-nav.css");
@import url("./components/product-badge.css");
@import url("./components/landing.css");
@import url("./components/delivery.css");
@import url("./components/hero.css");

/* =============================================================
   Utilidades globales
   ============================================================= */

.is-hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  background: var(--color-primary);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: var(--z-toast);
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: 0;
}