:root {
  --pronta-catalog-gap: clamp(16px, 3vw, 32px);
}

.pronta-catalog-return {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size, 1280px);
  padding: 12px 24px;
}

.pronta-catalog-return a {
  font-weight: 700;
}

.pronta-catalog-stores {
  display: grid;
  gap: var(--pronta-catalog-gap);
}

.pronta-catalog {
  width: 100%;
  font-size: var(--wp--preset--font-size--small);
}

.pronta-catalog-store {
  border-top: 1px solid var(--wp--preset--color--border, #d9d9d9);
  padding-top: var(--pronta-catalog-gap);
}

.pronta-catalog-store__header {
  align-items: baseline;
  display: grid;
  gap: 4px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 16px;
}

.pronta-catalog-store__header h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  font-size: var(--wp--preset--font-size--large);
}

.pronta-catalog-store__link {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}

.pronta-catalog-store__description {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.pronta-catalog-products {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pronta-catalog-product {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pronta-catalog-product img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.pronta-catalog-product h3,
.pronta-catalog-product p {
  margin: 0;
}

.pronta-catalog-product h3 {
  font-size: var(--wp--preset--font-size--small);
}

.pronta-catalog-pagination-label {
  font-weight: 700;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .pronta-catalog-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
 * Estilos públicos del storefront de Pronta.
 *
 * Contrato de estos estilos:
 * - Los colores de marca se resuelven con --pronta-primary-color y --pronta-on-primary,
 *   declaradas por functions.php a partir de las opciones de la tienda.
 * - La tipografía de titulares cambia por variante mediante --pronta-heading-font.
 * - El radio máximo es 8px y los controles interactivos miden al menos 44x44px.
 * - Sólo se usan clases públicas de los bloques de WooCommerce.
 */

/* ---------------------------------------------------------------- Tokens */

body.pronta-storefront {
  --pronta-radius: 8px;
  --pronta-touch: 44px;
  --pronta-heading-font: var(--wp--preset--font-family--manrope);
  --pronta-border: 1px solid var(--wp--preset--color--border);
  --pronta-shadow: none;
}

body.pronta-template-moda,
body.pronta-template-emprendimiento {
  --pronta-heading-font: var(--wp--preset--font-family--fraunces);
}

body.pronta-template-emprendimiento {
  --pronta-accent-color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------ Base móvil */

html {
  -webkit-text-size-adjust: 100%;
}

body.pronta-storefront {
  overflow-x: clip;
}

body.pronta-storefront img,
body.pronta-storefront video,
body.pronta-storefront iframe {
  max-width: 100%;
  height: auto;
}

body.pronta-storefront h1,
body.pronta-storefront h2,
body.pronta-storefront h3,
body.pronta-storefront h4,
body.pronta-storefront h5,
body.pronta-storefront h6,
body.pronta-storefront .wp-block-site-title {
  font-family: var(--pronta-heading-font);
  overflow-wrap: break-word;
}

body.pronta-storefront .wp-block-site-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
}

body.pronta-storefront .wp-block-site-tagline {
  margin: 0;
}

body.pronta-storefront .wp-block-site-tagline:empty,
body.pronta-storefront .wp-block-post-excerpt:empty,
body.pronta-storefront .wp-block-site-logo:empty {
  display: none;
}

/* La portada mantiene el ancho completo aunque el contenedor raíz aplique padding. */
body.pronta-storefront .wp-site-blocks > main.alignfull.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Las páginas servidas por los templates de bloques de WooCommerce no traen padding propio. */
body.pronta-storefront .wp-site-blocks > main.wp-block-group:not(.alignfull) {
  padding-left: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------- Interacciones */

body.pronta-storefront a:focus-visible,
body.pronta-storefront button:focus-visible,
body.pronta-storefront input:focus-visible,
body.pronta-storefront select:focus-visible,
body.pronta-storefront textarea:focus-visible,
body.pronta-storefront summary:focus-visible,
body.pronta-storefront [tabindex]:focus-visible {
  outline: 3px solid var(--wp--preset--color--contrast);
  outline-offset: 2px;
}

body.pronta-storefront .wp-block-button__link,
body.pronta-storefront input[type="submit"],
body.pronta-storefront button:not(.components-button):not(.wc-block-mini-cart__button),
body.pronta-storefront .wc-block-components-button {
  min-height: var(--pronta-touch);
  border-radius: var(--pronta-radius);
  text-decoration: none;
  cursor: pointer;
}

body.pronta-storefront .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--contrast);
  background: transparent;
}

body.pronta-storefront input[type="text"],
body.pronta-storefront input[type="email"],
body.pronta-storefront input[type="tel"],
body.pronta-storefront input[type="number"],
body.pronta-storefront input[type="search"],
body.pronta-storefront input[type="password"],
body.pronta-storefront select,
body.pronta-storefront textarea {
  min-height: var(--pronta-touch);
  border: var(--pronta-border);
  border-radius: var(--pronta-radius);
  padding: 0.5rem 0.75rem;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

body.pronta-storefront .wc-block-components-text-input input,
body.pronta-storefront .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  min-height: var(--pronta-touch);
  border-radius: var(--pronta-radius);
}

/* ----------------------------------------------------- Encabezado y pie */

body.pronta-storefront .pronta-header__bar,
body.pronta-storefront .pronta-brand,
body.pronta-storefront .pronta-header__tools {
  min-width: 0;
}

body.pronta-storefront .pronta-brand {
  flex: 1 1 auto;
  gap: var(--wp--preset--spacing--30);
}

body.pronta-storefront .pronta-brand .wp-block-site-title {
  min-width: 0;
  line-height: 1.15;
}

body.pronta-storefront .pronta-brand .wp-block-site-title a {
  text-decoration: none;
}

body.pronta-storefront.pronta-has-logo .pronta-brand .wp-block-site-title {
  display: none;
}

body.pronta-storefront .pronta-brand .wp-block-site-logo img {
  width: auto;
  max-width: 200px;
  max-height: 40px;
  object-fit: contain;
}

body.pronta-storefront .pronta-header__tools {
  flex: 0 0 auto;
  gap: var(--wp--preset--spacing--30);
}

body.pronta-storefront .pronta-header__tools .wp-block-navigation a,
body.pronta-storefront .pronta-header__tools .wp-block-navigation .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-height: var(--pronta-touch);
  padding: 0 var(--wp--preset--spacing--20);
}

body.pronta-storefront .wc-block-mini-cart__button {
  min-width: var(--pronta-touch);
  min-height: var(--pronta-touch);
  padding: 0;
  border-radius: var(--pronta-radius);
  color: var(--wp--preset--color--contrast);
}

body.pronta-storefront .pronta-footer__brand {
  text-align: left;
}

body.pronta-storefront .pronta-footer__links {
  font-size: var(--wp--preset--font-size--small);
}

body.pronta-storefront .pronta-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pronta-touch);
}

/* ------------------------------------------------ Franja de contacto */

body.pronta-storefront .pronta-contact {
  padding-top: var(--wp--preset--spacing--50);
  padding-right: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--50);
  padding-left: var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--surface);
}

body.pronta-storefront .pronta-contact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  align-items: flex-start;
  max-width: var(--wp--style--global--content-size);
  margin: 0 auto;
}

body.pronta-storefront .pronta-contact__heading,
body.pronta-storefront .pronta-contact__text {
  margin: 0;
}

body.pronta-storefront .pronta-contact__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pronta-touch);
  padding: 0.75rem var(--wp--preset--spacing--40);
  border-radius: var(--pronta-radius);
  background-color: var(--pronta-primary-color);
  color: var(--pronta-on-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ------------------------------------------------------------ Portadas */

body.pronta-storefront .pronta-hero .wp-block-site-title {
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.1;
  max-width: 22ch;
}

body.pronta-storefront .pronta-hero--simple .wp-block-site-title,
body.pronta-storefront .pronta-hero--simple .wp-block-site-tagline {
  margin-left: auto;
  margin-right: auto;
}

body.pronta-storefront .pronta-hero--moda .wp-block-site-title,
body.pronta-storefront .pronta-hero--moda .wp-block-site-tagline {
  text-wrap: balance;
}

body.pronta-storefront .pronta-hero--moda {
  justify-content: flex-end;
}

body.pronta-storefront .pronta-hero--emprendimiento .wp-block-site-title {
  margin-bottom: var(--wp--preset--spacing--20);
}

body.pronta-storefront .pronta-hero__media img {
  border-radius: var(--pronta-radius);
}

body.pronta-storefront .pronta-story {
  border-left: 8px solid var(--wp--preset--color--accent);
  border-radius: var(--pronta-radius);
}

body.pronta-storefront .pronta-story .wp-block-site-tagline {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------- Catálogo y productos */

body.pronta-storefront .wp-block-woocommerce-product-collection ul.wc-block-product-template,
body.pronta-storefront .wc-block-product-template {
  padding-left: 0;
  list-style: none;
}

body.pronta-storefront .wc-block-product-template .wc-block-product {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

body.pronta-storefront .wp-block-woocommerce-product-collection .wp-block-post-title {
  margin: 0;
  font-weight: 600;
}

body.pronta-storefront .wc-block-components-product-image img,
body.pronta-storefront .wp-block-woocommerce-product-image img,
body.pronta-storefront figure.wp-block-image img {
  border-radius: var(--pronta-radius);
}

body.pronta-storefront .wp-block-woocommerce-product-price,
body.pronta-storefront .wc-block-components-product-price {
  font-weight: 600;
}

body.pronta-storefront .wp-block-woocommerce-product-categories ul,
body.pronta-storefront .wc-block-product-categories-list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

body.pronta-storefront .wc-block-product-categories-list-item a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pronta-touch);
}

/* ------------------------------------------------------- Carrito y pago */

body.pronta-storefront .wc-block-cart,
body.pronta-storefront .wc-block-checkout {
  border: 0;
}

body.pronta-storefront .wc-block-components-button {
  min-height: var(--pronta-touch);
  border-radius: var(--pronta-radius);
}

body.pronta-storefront .wc-block-components-button:not(.is-link) {
  background-color: var(--pronta-primary-color);
  color: var(--pronta-on-primary);
}

body.pronta-storefront .wc-block-components-button.is-link,
body.pronta-storefront .wc-block-components-button.wc-block-components-totals-coupon-link {
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  text-decoration: underline;
}

body.pronta-storefront .wc-block-components-notice-banner {
  border-radius: var(--pronta-radius);
}

body.pronta-storefront .wc-block-components-notice-banner.is-error {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------ Movimiento */

@media (prefers-reduced-motion: reduce) {
  body.pronta-storefront *,
  body.pronta-storefront *::before,
  body.pronta-storefront *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- Escritorio */

@media (min-width: 782px) {
  body.pronta-storefront .pronta-brand .wp-block-site-logo img {
    max-height: 48px;
  }

  body.pronta-storefront .pronta-brand .wp-block-site-title {
    font-size: var(--wp--preset--font-size--x-large);
  }
}