/* ==========================================================================
   ADM Product Grid — grid de productos pintado por el propio plugin
   (assets/js/adm-filtros.js), reemplazando al Loop Grid de Elementor Pro.
   Clona el diseño visual real de las cards que hoy pinta ese widget
   (capturado del código fuente real de /tienda/, template Elementor
   id=2525): imagen arriba, línea divisoria azul, título en mayúsculas
   gris, categoría en azul, precio azul grande, botón pill azul con hover
   oscuro — mismas variables --adm-color-* que adm-filtros.css (vive dentro
   del mismo árbol .adm-filtros-app, así que no hace falta redeclararlas).

   Breakpoints por @container (no @media), mismo patrón ya establecido en
   el resto del plugin: el ancho real lo determina el contenedor de
   Elementor, no el viewport.
   ========================================================================== */

.adm-products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.adm-products-toolbar__count {
  font-size: 0.88rem;
  color: var(--adm-color-text-soft);
}

.adm-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 24px;
  margin-bottom: 32px;
}

@container adm-filtros (max-width: 900px) {
  .adm-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container adm-filtros (max-width: 560px) {
  .adm-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.adm-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--adm-color-text-soft);
}

.adm-product-card {
  background: #fff;
  border: 1px solid var(--adm-color-border);
  border-radius: var(--adm-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow var(--adm-transition), transform var(--adm-transition);
}

.adm-product-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.adm-product-card__img {
  aspect-ratio: 4 / 3;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.adm-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Línea divisoria azul, tal como el CSS real capturado del sitio:
   --divider-color:#0071BC9E; --divider-border-width:3.9px (redondeado a
   4px). El alpha 9E ~62% se conserva vía color hex de 8 dígitos. */
.adm-product-card__divider {
  height: 4px;
  background: #0071BC9E;
  margin: 0 15px;
}

.adm-product-card__body {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Selector reforzado (.adm-product-card h3.clase) para ganar sobre
   estilos genéricos de encabezados del tema/WooCommerce que puedan aplicar
   color con más especificidad que una sola clase — el título se veía azul
   (heredando el color de marca) en vez del gris oscuro de la referencia
   real del Loop Grid de Elementor (#686868). */
.adm-product-card h3.adm-product-card__title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #686868;
  margin: 0 0 4px;
  overflow-wrap: break-word;
}

.adm-product-card__cat {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--adm-color-primary);
  margin: 0 0 8px;
}

.adm-product-card__price {
  margin: 0 0 12px;
}

.adm-product-card__price .price,
.adm-product-card__price .woocommerce-Price-amount {
  color: var(--adm-color-primary);
  font-size: 1.9rem;
  font-weight: 700;
}

.adm-product-card__cta {
  margin-top: auto;
}

/* Botón "Añadir al carrito" real de WooCommerce
   (woocommerce_template_loop_add_to_cart(), ver Adm_Product_Card) —
   selector reforzado para ganar sobre los estilos base de WooCommerce
   (.button), sin depender de las variables del Kit de Elementor que ese
   botón usa en el sitio real (--e-global-color-*), que no están
   disponibles fuera de ese contexto. */
.adm-product-card__cta a.button,
.adm-product-card__cta a.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 25px;
  background: var(--adm-color-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--adm-color-primary);
  padding: 10px 20px;
  font-size: 0.9rem;
  transition: all var(--adm-transition);
  cursor: pointer;
}

.adm-product-card__cta a.button:hover,
.adm-product-card__cta a.add_to_cart_button:hover {
  background: var(--adm-color-primary-dark);
  border-color: var(--adm-color-primary-dark);
  color: #fff;
}

/* Paginación */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.adm-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border-radius: var(--adm-radius-sm);
  border: 1.5px solid var(--adm-color-border);
  background: #fff;
  color: var(--adm-color-text);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all var(--adm-transition);
}

.adm-pagination button:hover:not(:disabled) {
  border-color: var(--adm-color-primary);
  color: var(--adm-color-primary);
}

.adm-pagination button.is-active {
  background: var(--adm-color-primary);
  border-color: var(--adm-color-primary);
  color: #fff;
}

.adm-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.adm-pagination__ellipsis {
  color: var(--adm-color-text-soft);
  padding: 0 4px;
}