/* =====================================================================
   18. Barra de orden + búsqueda (reemplaza el "Orden predeterminado")
   ===================================================================== */
/* Mismo buscador y mismos chips en PC y celular: en escritorio se ven
   en una fila; en pantallas angostas los chips se deslizan en
   horizontal (scroll) en vez de convertirse en un elemento distinto,
   así el aspecto es idéntico en ambos tamaños. */
.dx-shop-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dx-line);
}

.dx-shop-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 380px;
}
.dx-shop-search__btn {
  position: absolute;
  left: 4px;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none !important;
  color: var(--dx-mute) !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 0 !important;
  cursor: pointer;
  z-index: 1;
}
.dx-shop-search__btn:hover {
  color: var(--dx-ink) !important;
  background: var(--dx-bg) !important;
}
.dx-shop-search__btn svg {
  width: 17px;
  height: 17px;
}
.dx-shop-search input[type="text"] {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--dx-line);
  border-radius: 999px;
  font-size: 14px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: #fff;
  color: var(--dx-ink);
  box-sizing: border-box;
}
.dx-shop-search input[type="text"]:focus {
  outline: none;
  border-color: var(--dx-cyan);
}

.dx-shop-sort {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dx-shop-sort::-webkit-scrollbar { display: none; }

.dx-sort-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--dx-line);
  background: #fff;
  color: var(--dx-mute);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.dx-sort-chip:hover {
  border-color: var(--dx-cyan);
  color: var(--dx-ink);
}
.dx-sort-chip.is-active {
  background: var(--dx-ink);
  border-color: var(--dx-ink);
  color: #fff;
}

/* Destacan las dos opciones que más ayudan a cerrar venta */
.dx-sort-chip[href*="dx_orderby=best-selling"] { border-color: #17B26A; color: #0F7A47; }
.dx-sort-chip[href*="dx_orderby=best-selling"]:hover { background: #E9FBF6; }
.dx-sort-chip[href*="dx_orderby=sale"] { border-color: #F04438; color: #C11574; }
.dx-sort-chip[href*="dx_orderby=sale"]:hover { background: #FEF0F0; }
.dx-sort-chip[href*="dx_orderby=best-selling"].is-active,
.dx-sort-chip[href*="dx_orderby=sale"].is-active {
  background: var(--dx-ink);
  border-color: var(--dx-ink);
  color: #fff;
}

.woocommerce-ordering,
form.woocommerce-ordering {
  display: none !important;
}

/* La sección 19 "Galería de imágenes del producto" que estaba aquí se
   quitó por completo. Decisión de diseño: la galería de producto ya no
   usa nada de WooCommerce (ni .woocommerce-product-gallery, ni
   .flex-control-thumbs, ni .flex-active); es un sistema propio, con su
   propio CSS en assets/css/product-gallery.css. Ver inc/product-gallery.php.

   El selector de orden nativo de WooCommerce/Kadence a veces sigue
   apareciendo junto al nuestro (algunas versiones lo enganchan en un
   hook distinto); se oculta por CSS más arriba (.woocommerce-ordering).
   No afecta los botones de vista en cuadrícula/lista, esos se quedan. */

/* =====================================================================
   20. Grid del catálogo (móvil: 2 columnas ordenadas)
   ===================================================================== */
/* Antes, en celular las tarjetas se colapsaban y quedaban desordenadas.
   Grid explícito: 2 columnas en móvil, 3 en tablet, las de Kadence en PC. */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  ul.products.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px !important;
    padding: 0;
  }
  .woocommerce ul.products li.product,
  ul.products li.product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0;
  }
}
@media (max-width: 700px) {
  .woocommerce ul.products,
  ul.products.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  ul.products li.product { padding: 8px 8px 12px !important; }
  ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
  ul.products li.product .button { width: 100%; padding: 10px 8px; font-size: 14px; }
  ul.products li.product { contain-intrinsic-size: 180px 300px; }
}

/* Mensaje "sin resultados": se quita el ícono de carita triste de
   Kadence/WooCommerce y queda un aviso sobrio. */
.woocommerce-info.woocommerce-no-products-found::before,
.woocommerce-no-products-found .woocommerce-info::before,
.woocommerce-info::before,
.kadence-no-products-icon,
.woocommerce-no-products-found svg,
.no-results .kadence-svg-iconset { display: none !important; }
.woocommerce-info {
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  background: #fff;
  color: var(--dx-mute);
  padding: 16px 20px !important;
}

/* =====================================================================
   21. Énfasis de productos al entrar en pantalla (móvil y PC)
   ===================================================================== */
/* Solo se oculta si el JS activó la clase dx-reveal-on: sin JS, o con
   "reducir movimiento", las tarjetas se ven normales. */
.dx-reveal-on ul.products li.product:not(.dx-in) {
  opacity: 0;
  transform: translateY(22px) scale(.97);
}
.dx-reveal-on ul.products li.product.dx-in {
  animation: dx-pop .55s cubic-bezier(.2, .8, .25, 1.15) both;
  animation-delay: var(--dx-delay, 0ms);
}
@keyframes dx-pop {
  0%   { opacity: 0; transform: translateY(22px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(0,198,214,.25); }
  100% { opacity: 1; transform: none; }
}
/* El hover de PC solo donde existe puntero real */
@media (hover: none) {
  ul.products li.product:hover { transform: none; box-shadow: none; border-color: var(--dx-line); }
  ul.products li.product a:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-reveal-on ul.products li.product:not(.dx-in) { opacity: 1; transform: none; }
  .dx-reveal-on ul.products li.product.dx-in { animation: none; }
}