/* ══════════════════════════════════════════════════════════════════════
   LA TIENDA — HerboMax
   Acompana a woocommerce/content-product.php.

   ESTE ARCHIVO TODAVIA NO SE CARGA SOLO.
   No se toco functions.php porque hay otro equipo editandolo en paralelo.
   Quien integre tiene que agregar el encolado ahi, con la MISMA prioridad
   alta que ya usa hbx_estilos() (9999): Woodmart encola unas 55 hojas
   despues de la del tema, y con prioridad normal toda regla que empatara en
   especificidad no haria nada, en silencio.

       wp_enqueue_style(
           'hbx-tienda',
           get_stylesheet_directory_uri() . '/template-parts/tienda.css',
           array( 'hbx-style' ),
           HBX_VERSION
       );

   Conviene cargarla solo donde se usa:
   if ( function_exists( 'is_woocommerce' ) && ( is_shop() || is_product_taxonomy() || is_product() ) )
   (la ficha entra porque los productos relacionados usan la misma tarjeta).

   ─── QUE HACE Y QUE NO ───
   La tarjeta NO se estiliza aca: sus clases (.hbx-prod, .hbx-prod-foto,
   .hbx-prod-cuerpo, .hbx-form, .hbx-prec2, .hbx-tag, .hbx-agregar,
   .hbx-agotado) ya viven en style.css y las usa la portada. La plantilla le
   pone ademas la clase "hbx" a cada tarjeta, y con eso hereda los colores de
   la marca, Poppins y el box-sizing sin declarar nada dos veces.

   Aca va solo lo que la tienda necesita y la portada no:
     1 · apagar lo que Woodmart pone y el diseno no tiene
     2 · encajar la tarjeta en la rejilla de Woodmart
     3 · las tres piezas nuevas de esta pagina (.hbx-cat, el precio con
         rango de WooCommerce y el hueco de los enganches)
     4 · el orden y la paginacion, que se conservan, con la letra de la marca

   Movil primero. Pantalla de referencia 375 px.
   Sin un solo !important: la hoja se encola de ultima, asi que con la misma
   especificidad ya gana.
   ══════════════════════════════════════════════════════════════════════ */


/* ══ 1 · lo que el diseno no tiene ═════════════════════════════════════
   "Show sidebar" (en ingles, en un sitio en espanol), el selector de
   cuantos productos por pagina y el de cuantas columnas. Son ajustes de
   vitrina que el cliente no necesita y que en un celular ocupan la primera
   pantalla entera. Se apagan con display:none, que ademas los saca del
   lector de pantalla: dejarlos invisibles pero navegables seria peor.

   OJO: el filtro lateral de la tienda NO se toca aca. Que la tienda tenga o
   no barra lateral es un ajuste del panel de Woodmart, no del codigo. */
.shop-loop-head .wd-show-sidebar-btn,
.shop-loop-head .wd-products-per-page,
.shop-loop-head .wd-products-shop-view{
  display:none;
}

/* La fila de herramientas queda con una sola cosa (el orden): que respire y
   no quede empujada a la derecha con un hueco raro al lado. */
.shop-loop-head .wd-shop-tools{
  gap:12px;
}


/* ══ 2 · la tarjeta dentro de la rejilla de Woodmart ═══════════════════
   Woodmart no usa <ul class="products"><li>, usa
   <div class="products wd-products wd-grid-g"> con display:grid y las
   columnas en variables (--wd-col-sm:2 en celular, 4 en escritorio). Eso ya
   coincide con el diseno, asi que la rejilla se aprovecha tal cual.

   Lo que si hay que arreglar: .wd-products trae align-items:flex-start, o
   sea que cada tarjeta mide lo que mide su contenido y en una fila quedan de
   alturas distintas, con los botones "Agregar" a distinto nivel. Con
   height:100% cada tarjeta se estira hasta el alto de su fila. */
.wd-products .hbx-prod,
.products .hbx-prod{
  height:100%;
  /* La pastilla "Ahorras $5.000" cuelga de la tarjeta, no del enlace de la
     foto (ver el porque en content-product.php). Necesita este ancla para
     caer en la misma esquina de siempre: como la foto empieza justo en el
     borde de arriba de la tarjeta, top:10px/left:10px dan el mismo punto. */
  position:relative;
  /* Defensa: si algun filtro de Woodmart le cuela la clase .wd-product a la
     tarjeta, hereda su relleno y su sombra y la caja se ve doble. */
  padding:0;
  margin:0;
  box-shadow:none;
}

/* Un hijo de una rejilla tiene min-width:auto, o sea que crece hasta el
   ancho de su contenido: un nombre largo sin espacios ensanchaba la columna
   y la pagina terminaba con scroll horizontal. */
.hbx-prod .hbx-prod-cuerpo{
  min-width:0;
}
.hbx-prod .hbx-prod-cuerpo h3{
  overflow-wrap:anywhere;
}

/* El formato se corta a dos lineas. Sin esto, un producto con la descripcion
   corta larga estiraba su tarjeta y arrastraba a toda la fila. */
.wd-products .hbx-prod .hbx-form{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* ══ 3 · las piezas nuevas de esta pagina ══════════════════════════════ */

/* El rotulo de la categoria, arriba del nombre. Es el .cat del diseno.
   En la maqueta cada producto tenia su color; aca la categoria la pone el
   dueno desde el panel, asi que va en el morado de la marca para todas: un
   color inventado por producto se desalinearia el dia que agregue una
   categoria nueva. */
.hbx-prod .hbx-cat{
  margin:0;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--morado,#581fb6);
}

/* Precio de los productos con rango ("desde $x"): lo escribe WooCommerce con
   su propio marcado. Se le da el tamano y el peso del precio del diseno sin
   pelear con sus etiquetas. */
.hbx-prod .hbx-prec-wc{
  font-size:1.1875rem;
  font-weight:700;
  letter-spacing:-.045em;
}
.hbx-prod .hbx-prec-wc del{
  font-size:.8125rem;
  font-weight:400;
  color:var(--texto-3,#6b6e88);
}
.hbx-prod .hbx-prec-wc ins{
  text-decoration:none;
}

/* Boton de los productos que todavia no se pueden comprar (sin precio
   cargado, o variables): lleva a la ficha. Va en version secundaria a
   proposito, para no prometer una compra de un clic que no va a ocurrir. */
.hbx-prod .hbx-agregar-alt{
  background:#fff;
  color:var(--texto,#14173a);
  border:1.5px solid var(--borde-2,#cfc8e2);
  font-weight:600;
}
.hbx-prod .hbx-agregar-alt:hover,
.hbx-prod .hbx-agregar-alt:focus{
  background:#fff;
  color:var(--morado,#581fb6);
  border-color:var(--morado,#581fb6);
}

/* Si un plugin de terceros escribe algo en los enganches de WooCommerce, sale
   aca. Hoy queda vacio y no se ve; el dia que aparezca algo, se vera separado
   del resto en vez de encimarse con el boton. */
.hbx-prod .hbx-extras:empty{
  display:none;
}
.hbx-prod .hbx-extras{
  padding:0 14px 14px;
}


/* ══ 4 · orden, recuento y paginacion ══════════════════════════════════
   Se conservan los tres. Solo se les pone la letra y los colores de la
   marca para que no desentonen con la tarjeta nueva. */
.shop-loop-head .woocommerce-result-count,
.shop-loop-head .woocommerce-breadcrumb,
.woocommerce-ordering select.orderby{
  font-family:var(--hbx-fuente,'Poppins',system-ui,sans-serif);
  font-size:.8125rem;
  color:var(--hbx-texto-2,#5d6081);
}

.woocommerce-ordering select.orderby{
  /* 44 px de alto: es lo minimo que se puede tocar con el pulgar. */
  min-height:44px;
  padding:0 12px;
  border:1.5px solid var(--hbx-borde,#e6e2f0);
  border-radius:999px;
  background-color:#fff;
  color:var(--hbx-texto,#14173a);
  font-weight:600;
}

.wd-pagination ul.page-numbers{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  padding:0;
  margin:24px 0 0;
  list-style:none;
}
.wd-pagination ul.page-numbers li{
  margin:0;
  list-style:none;
}
.wd-pagination .page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  border:1.5px solid var(--hbx-borde,#e6e2f0);
  border-radius:999px;
  background-color:#fff;
  color:var(--hbx-texto,#14173a);
  font-family:var(--hbx-fuente,'Poppins',system-ui,sans-serif);
  font-size:.9375rem;
  font-weight:600;
  text-decoration:none;
}
.wd-pagination a.page-numbers:hover,
.wd-pagination a.page-numbers:focus{
  border-color:var(--hbx-morado,#581fb6);
  color:var(--hbx-morado,#581fb6);
}
.wd-pagination .page-numbers.current{
  border-color:var(--hbx-morado,#581fb6);
  background-color:var(--hbx-morado,#581fb6);
  color:#fff;
}


/* ══ 5 · escritorio ════════════════════════════════════════════════════
   Woodmart ya pasa a 4 columnas por su cuenta con --wd-col-lg. Aca solo se
   le da un poco mas de aire al cuerpo de la tarjeta, que en pantallas
   grandes queda apretado. */
@media (min-width:1025px){
  .wd-products .hbx-prod .hbx-prod-cuerpo{
    padding:16px;
  }
}


/* ── Foco de teclado ──────────────────────────────────────────────────
   Esta hoja era la unica de las cuatro sin foco visible. Quien navega con
   teclado (o con un lector de pantalla) no tenia forma de saber donde
   estaba parado dentro de la rejilla de productos. */
.hbx-prod a:focus-visible,
.hbx-prod button:focus-visible,
.hbx-agregar:focus-visible,
.woocommerce-pagination a:focus-visible,
.woocommerce-ordering select:focus-visible{
  outline:2px solid var(--hbx-morado,#581fb6);
  outline-offset:2px;
  border-radius:6px;
}