/* ===================================================================
   hn-cl-tienda.css — Diseño página de tienda WooCommerce
   Aplica SOLO en is_shop() / is_product_category() via snippet PHP.
   Reutiliza tokens de hn-cl-product.css (ya declarados en :root global).
   =================================================================== */


/* -------------------------------------------------------------------
   A. HERO DE TIENDA
   Inyectado por PHP (woocommerce_before_shop_loop, priority 5)
   Solo visible en /tienda/, no en archives de categoría.
   ------------------------------------------------------------------- */
.hn-shop-hero {
  position: relative;
  overflow: hidden;
  min-height: 66vh;
  display: flex;
  align-items: center;
  padding: 48px 24px;
  text-align: left;
  margin-bottom: 0;
  background-color: #14210C;
}
.hn-shop-hero__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hn-shop-hero__bg-img img {
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 50%;
  display: block;
}
@media(max-width:920px){
  .hn-shop-hero__bg-img img { object-position: 75% 30%; }
}
.hn-shop-hero__bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(10,20,5,.78) 0%,
    rgba(10,20,5,.55) 32%,
    rgba(10,20,5,.15) 58%,
    rgba(10,20,5,0) 75%);
}
.hn-shop-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-inline: 0;
}
.hn-shop-hero__eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-h, #67A81C);
  background: var(--verde-lt, #EBF7D4);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.hn-shop-hero__title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 10px;
}
.hn-shop-hero__sub {
  font-size: .95rem;
  color: rgba(255,255,255,.82);
  margin: 0 0 22px;
  line-height: 1.5;
}
.hn-shop-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: 12px 22px;
  border-radius: 100px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
  transition: background .2s ease, transform .15s ease;
}
.hn-shop-hero__cta:hover {
  background: #1EB85A;
  transform: translateY(-2px);
}
.hn-shop-hero__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* -------------------------------------------------------------------
   B. PILLS DE CATEGORÍA
   Inyectado por PHP (woocommerce_before_shop_loop, priority 10)
   Aparece en /tienda/ y en archives de categoría.
   ------------------------------------------------------------------- */
.hn-cat-pills-wrap {
  background: #fff;
  border-bottom: 1px solid var(--border, #E5E7EB);
  padding: 16px 24px;
}
.hn-cat-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  max-width: 1200px;
  margin-inline: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.hn-cat-pills::-webkit-scrollbar { display: none; }

.hn-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border, #E5E7EB);
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text, #2B2B2B);
  text-decoration: none !important;
  background: #fff;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.hn-cat-pill:hover {
  border-color: var(--verde, #78BE20);
  background: var(--verde-lt, #EBF7D4);
  color: var(--text, #2B2B2B) !important;
}
.hn-cat-pill--active {
  background: var(--verde, #78BE20) !important;
  border-color: var(--verde, #78BE20) !important;
  color: var(--text, #2B2B2B) !important;
}
.hn-cat-pill__count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted, #6B7280);
  background: var(--surface, #F7F9F4);
  border-radius: 100px;
  padding: 1px 7px;
  line-height: 1.6;
}
.hn-cat-pill--active .hn-cat-pill__count {
  background: rgba(0,0,0,.1);
  color: var(--text, #2B2B2B);
}


/* -------------------------------------------------------------------
   C. WRAPPER PRINCIPAL — padding en #primary (patrón más fiable)
   Kadence controla #primary. Ponemos padding ahí y usamos
   margin negativo en hero/pills para que rompan al 100% de ancho.
   ------------------------------------------------------------------- */

/* 1. Padding lateral en el contenedor de Kadence para páginas de tienda */
.woocommerce-page #primary,
body.post-type-archive-product #primary,
body.tax-product_cat #primary {
  padding-left: clamp(16px, 5vw, 48px) !important;
  padding-right: clamp(16px, 5vw, 48px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;  /* evita scroll horizontal */
}

/* 2. Hero y pills rompen el padding con margin negativo (full-bleed) */
.hn-shop-hero,
.hn-cat-pills-wrap {
  margin-left: calc(-1 * clamp(16px, 5vw, 48px)) !important;
  margin-right: calc(-1 * clamp(16px, 5vw, 48px)) !important;
}

/* 3. El .woocommerce interno no necesita padding propio */
.woocommerce-page .woocommerce,
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce {
  padding: 0 !important;
  max-width: 1200px;
  margin-inline: auto;
}

/* 4. Grid: quita padding del ul (ya lo tiene el #primary) */
.woocommerce ul.products {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 60px !important;
}

/* 5. Sort + count: solo espaciado vertical */
.woocommerce .woocommerce-result-count {
  padding: 20px 0 0 !important;
  margin: 0 !important;
}
.woocommerce .woocommerce-ordering {
  padding: 16px 0 0 !important;
  margin: 0 !important;
}


/* -------------------------------------------------------------------
   D. TOOLBAR (sort + count + grid/list toggle)
   ------------------------------------------------------------------- */
.woocommerce-products-header {
  display: none; /* El H1 de archivo va en el hero */
}

/* Toggle "vista de cuadrícula / vista de lista" de Kadence: se mantiene
   visible. La preferencia se guarda en la cookie
   {theme}-shopLayout y persiste entre visitas — por eso la vista de
   lista necesita su propio diseño bueno (sección E2 más abajo), no basta
   con ocultar el botón: quien ya tenía "lista" guardada se quedaba sin
   forma de volver a cuadrícula. */

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  float: none;
}

.woocommerce nav.woocommerce-ordering select,
.woocommerce-page nav.woocommerce-ordering select {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--text, #2B2B2B);
  border: 1.5px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease;
}
.woocommerce nav.woocommerce-ordering select:focus,
.woocommerce-page nav.woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--verde, #78BE20);
}

.woocommerce-result-count {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--muted, #6B7280);
  margin: 0;
  line-height: 2.2;
}

/* Barra sort + count en row */
.woocommerce .woocommerce-products-header + *,
.hn-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}


/* -------------------------------------------------------------------
   E. GRID DE PRODUCTOS
   (Reemplaza la sec. 7 de 02-additional-css.css que se elimina)
   ------------------------------------------------------------------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px 24px !important;
  float: none !important;
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* -------------------------------------------------------------------
   E2. VISTA DE LISTA (.products-list-view)
   Filas horizontales: imagen a la izquierda, contenido a la derecha.
   Todo lo de la sección F (cards) se piensa para grid — acá se
   sobreescribe lo necesario para que la fila se vea bien, sin tocar F.
   ------------------------------------------------------------------- */
.woocommerce ul.products.products-list-view {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.woocommerce ul.products.products-list-view li.product {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  align-items: stretch !important;
}
.woocommerce ul.products.products-list-view li.product a.woocommerce-loop-product__link,
.woocommerce ul.products.products-list-view li.product > a:first-child {
  aspect-ratio: auto !important;
  height: 100% !important;
  padding: 18px !important;
  border-radius: 20px 0 0 20px !important;
}
.woocommerce ul.products.products-list-view li.product .entry-content-wrap {
  padding: 20px 24px 20px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}
.woocommerce ul.products.products-list-view li.product .woocommerce-loop-product__title,
.woocommerce ul.products.products-list-view li.product h2 {
  text-align: left !important;
  margin: 0 0 6px !important;
  min-height: 0 !important;
  -webkit-line-clamp: 2 !important;
  font-size: 1.05rem !important;
}
.woocommerce ul.products.products-list-view li.product .star-rating,
.woocommerce ul.products.products-list-view li.product .glsr {
  text-align: left !important;
  margin: 0 0 8px !important;
  order: 1;
}
.woocommerce ul.products.products-list-view li.product h2,
.woocommerce ul.products.products-list-view li.product .woocommerce-loop-product__title {
  order: 0;
}
.woocommerce ul.products.products-list-view li.product .price { order: 2; }
.woocommerce ul.products.products-list-view li.product .price::after { order: 3; }
.woocommerce ul.products.products-list-view li.product .product-action-wrap { order: 4; }
.woocommerce ul.products.products-list-view li.product .price {
  text-align: left !important;
  margin: 0 0 2px !important;
}
.woocommerce ul.products.products-list-view li.product .price::after {
  text-align: left !important;
  margin: 2px 0 14px !important;
}
.woocommerce ul.products.products-list-view li.product .button,
.woocommerce ul.products.products-list-view li.product a.button {
  width: auto !important;
  min-width: 200px;
  display: inline-block !important;
  margin: 0 !important;
  padding: 11px 28px !important;
}
@media (max-width: 560px) {
  .woocommerce ul.products.products-list-view li.product {
    grid-template-columns: 1fr !important;
  }
  .woocommerce ul.products.products-list-view li.product a.woocommerce-loop-product__link,
  .woocommerce ul.products.products-list-view li.product > a:first-child {
    aspect-ratio: 1/1 !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .woocommerce ul.products.products-list-view li.product .entry-content-wrap {
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
  }
  .woocommerce ul.products.products-list-view li.product .woocommerce-loop-product__title,
  .woocommerce ul.products.products-list-view li.product .star-rating,
  .woocommerce ul.products.products-list-view li.product .price,
  .woocommerce ul.products.products-list-view li.product .price::after {
    text-align: center !important;
  }
  .woocommerce ul.products.products-list-view li.product .button,
  .woocommerce ul.products.products-list-view li.product a.button {
    width: 100% !important;
  }
}


/* -------------------------------------------------------------------
   F. CARDS DE PRODUCTO — diseño completo
   ------------------------------------------------------------------- */

/* ── Cancelar el patrón "on-hover" de Kadence ───────────────────────
   Kadence usa .woo-archive-action-on-hover + posiblemente .first/.last
   para ocultar .product-action-wrap. Usamos body en el selector para
   ganar en especificidad sobre cualquier regla del tema padre.        */

body .woocommerce ul.products li.product .product-action-wrap,
body ul.products li.product .product-action-wrap,
body ul.products li.first .product-action-wrap,
body ul.products li.last .product-action-wrap {
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: none !important;
  background: transparent !important;
  transform: none !important;
}

body .woocommerce ul.products li.product .entry-content-wrap,
body ul.products li.product .entry-content-wrap {
  transform: none !important;
  transition: none !important;
  background: transparent !important;
}

/* Restaurar colores de texto (Kadence los pone en blanco para overlay) */
.woocommerce ul.products li.product .entry-content-wrap,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  color: var(--text, #2B2B2B) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price * {
  color: var(--verde-h, #67A81C) !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del * {
  color: var(--muted, #6B7280) !important;
  opacity: .7 !important;
}

/* ── Card base ───────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid rgba(43,43,43,.06);
  border-radius: 20px;
  overflow: visible !important;  /* NO hidden: el botón quedaba recortado fuera del borde */
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(23,23,23,.04), 0 8px 24px rgba(23,23,23,.05);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(23,23,23,.05), 0 24px 48px rgba(23,23,23,.14);
}

/* Contenedor imagen — aquí sí overflow:hidden + border-radius top */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-child {
  display: block;
  background: #F6F7F2;
  padding: 24px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 20px 20px 0 0; /* esquinas superiores de la card */
  position: relative;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(43,43,43,.05);
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product > a:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  filter: none !important;
  opacity: 1 !important;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.06);
}

/* Cuerpo de la card (bajo la imagen) — todo centrado para un catálogo más prolijo */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #2B2B2B);
  line-height: 1.35;
  margin: 20px 16px 10px;
  letter-spacing: -.01em;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

/* Estrellas de reseña — el widget real es el plugin Site Reviews (.glsr),
   no el .star-rating nativo de WooCommerce (ese casi no se usa acá). */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .glsr {
  margin: 0 16px 10px !important;
  font-size: .82rem;
  opacity: .92;
  display: block !important;
  text-align: center !important;
  width: auto !important;
}

/* Precio */
.woocommerce ul.products li.product .price {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--verde-h, #67A81C);
  margin: 0 16px 4px;
  letter-spacing: -.02em;
  text-align: center;
}
.woocommerce ul.products li.product .price del {
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted, #6B7280);
  opacity: .7;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}
.woocommerce ul.products li.product .price::after {
  content: 'Precio de venta sugerido';
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted, #6B7280);
  text-align: center;
  margin: 4px 0 14px;
}

/* Spacer para empujar botón al fondo */
.woocommerce ul.products li.product .woocommerce-loop-product__title ~ * {
  /* El botón va al fondo de la card */
}
.woocommerce ul.products li.product {
  justify-content: flex-start; /* flex-direction:column ya puesto arriba */
}

/* Área del botón — siempre visible, siempre al fondo de la card.
   Kadence trae una regla con :not() que suma especificidad
   (.woo-archive-btn-button, .kb-button) y le gana a la nuestra si no
   marcamos !important en CADA propiedad — no solo en display/opacity.
   Confirmado en vivo: sin !important en background, 9 de 12 botones
   quedaban con fondo transparente (invisibles sobre blanco). */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: static !important;

  width: calc(100% - 32px) !important;
  margin: auto 16px 16px !important;
  margin-top: auto !important;
  padding: 13px 0 !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border-radius: 100px !important;
  border: 2px solid var(--verde, #78BE20) !important;
  background: var(--verde, #78BE20) !important;
  color: #fff !important;          /* texto blanco sobre verde */
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important;
  box-shadow: 0 4px 14px rgba(120,190,32,.28) !important;
  line-height: 1.4 !important;
}
/* Kadence agrega una flecha SVG después del texto — fuera, no la queremos */
.woocommerce ul.products li.product .button .kadence-svg-iconset,
.woocommerce ul.products li.product a.button .kadence-svg-iconset,
.woocommerce ul.products li.product .button svg,
.woocommerce ul.products li.product a.button svg {
  display: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--verde-h, #67A81C) !important;
  border-color: var(--verde-h, #67A81C) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(120,190,32,.4) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}

/* Productos variables → mismo verde sólido + texto blanco */
.woocommerce ul.products li.product a.button.product_type_variable {
  background: var(--verde, #78BE20) !important;
  color: #fff !important;
  border-color: var(--verde, #78BE20) !important;
}

/* Badge "En oferta" */
.woocommerce ul.products li.product span.onsale {
  background: var(--verde, #78BE20) !important;
  color: var(--text, #2B2B2B) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  min-height: unset !important;
  min-width: unset !important;
  padding: 3px 10px !important;
  font-size: .68rem !important;
  line-height: 1.5 !important;
  top: 12px !important;
  left: 12px !important;
}


/* -------------------------------------------------------------------
   G. PAGINACIÓN
   ------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
  margin-top: 40px;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 4px;
  border: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
}
/* Kadence define .page-numbers con color:inherit y gana la especificidad
   (misma familia de bug que el botón de agregar al carrito) — resultado:
   el "2" y la flecha "→" heredaban un color casi blanco e invisible.
   Todo con !important para blindarlo. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  line-height: 1 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border, #E5E7EB) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  color: var(--text, #2B2B2B) !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: all .18s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--verde, #78BE20) !important;
  border-color: var(--verde, #78BE20) !important;
  color: var(--text, #2B2B2B) !important;
}


/* -------------------------------------------------------------------
   H. RESPONSIVE MOBILE
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hn-shop-hero {
    min-height: auto;
    padding: 32px 16px 28px;
  }
  .hn-shop-hero__bg-img::after {
    background: linear-gradient(180deg,
      rgba(10,20,5,.4) 0%,
      rgba(10,20,5,.75) 55%,
      rgba(10,20,5,.92) 100%);
  }
  .hn-shop-hero__inner {
    max-width: 100%;
  }
  .hn-cat-pills-wrap {
    padding: 12px 16px;
  }
  .woocommerce-page .woocommerce,
  body.post-type-archive-product .woocommerce,
  body.tax-product_cat .woocommerce {
    padding: 20px 14px 48px;
  }
}

@media (max-width: 480px) {
  .hn-shop-hero__title {
    font-size: 1.4rem;
  }
}


/* -------------------------------------------------------------------
   I. HEADER DEL ARCHIVE DE CATEGORÍA (cuando no hay hero)
   Muestra el nombre de la categoría de forma estilizada.
   ------------------------------------------------------------------- */
.tax-product_cat .hn-cat-archive-header {
  padding: 32px 24px 16px;
  max-width: 1200px;
  margin-inline: auto;
}
.tax-product_cat .hn-cat-archive-header h1 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: var(--text, #2B2B2B);
  letter-spacing: -.025em;
  margin: 0;
}
.tax-product_cat .hn-cat-archive-header p {
  font-size: .9rem;
  color: var(--muted, #6B7280);
  margin: 6px 0 0;
}


/* -------------------------------------------------------------------
   J. DISEÑO PREMIUM — PÁGINAS DE CATEGORÍA (.tax-product_cat)
   Clases para el HTML del term description de cada categoría.
   ------------------------------------------------------------------- */

/* J1. Hero de categoría — gradiente oscuro full-bleed */
.hn-cat-hero {
  background: linear-gradient(160deg,#1c3a08 0%,#266431 100%);
  color:#fff;
  padding:56px 24px 48px;
  text-align:center;
  margin-left:calc(-1 * clamp(16px,5vw,48px));
  margin-right:calc(-1 * clamp(16px,5vw,48px));
  margin-bottom:0;
}
.hn-cat-hero__inner { max-width:720px; margin-inline:auto; }
.hn-cat-hero__eyebrow {
  display:inline-block;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#2B2B2B;background:#78BE20;border-radius:100px;
  padding:4px 16px;margin-bottom:18px;
}
.hn-cat-hero h1,.hn-cat-hero__title {
  font-family:'Inter',-apple-system,sans-serif;
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;
  color:#fff;line-height:1.15;letter-spacing:-.03em;margin:0 0 14px;
}
.hn-cat-hero__sub {
  font-size:1rem;color:rgba(255,255,255,.82);
  margin:0 auto 28px;line-height:1.6;max-width:540px;
}
.hn-cat-hero__trust {
  display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:28px;
}
.hn-cat-hero__trust-item {
  display:flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9);
}
.hn-cat-hero__trust-item svg { width:16px;height:16px;flex-shrink:0;opacity:.9; }
.hn-cat-hero__ctas { display:flex;justify-content:center;flex-wrap:wrap;gap:12px; }
.hn-cat-hero__cta-wa {
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#2B2B2B !important;font-weight:700;font-size:.9rem;
  padding:13px 24px;border-radius:100px;text-decoration:none !important;
  box-shadow:0 4px 16px rgba(37,211,102,.4);transition:background .2s,transform .15s;
}
.hn-cat-hero__cta-wa:hover { background:#1EB85A;transform:translateY(-2px); }
.hn-cat-hero__cta-ghost {
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:#fff !important;font-weight:700;font-size:.9rem;
  padding:12px 24px;border-radius:100px;border:1.5px solid rgba(255,255,255,.6);
  text-decoration:none !important;transition:border-color .2s,transform .15s;
}
.hn-cat-hero__cta-ghost:hover { border-color:#fff;transform:translateY(-2px); }

/* J2. TL;DR box */
.hn-cat-tldr {
  background:#F7F9F4;border-left:4px solid #78BE20;
  border-radius:0 12px 12px 0;padding:18px 22px;margin:32px 0;
}
.hn-cat-tldr ul { margin:0;padding-left:0;list-style:none; }
.hn-cat-tldr ul li {
  padding:4px 0;font-size:.9rem;color:#2B2B2B;line-height:1.5;
  display:flex;gap:8px;
}
.hn-cat-tldr ul li::before { content:'✓';color:#78BE20;font-weight:700;flex-shrink:0; }

/* J3. Lineup de productos (cards editoriales) */
.hn-cat-lineup {
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0;
}
@media(max-width:860px) {
  .hn-cat-lineup { grid-template-columns:1fr;max-width:480px;margin-inline:auto; }
}
.hn-cat-card {
  background:#fff;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;
  box-shadow:0 6px 30px rgba(0,0,0,.08);
  display:flex;flex-direction:column;position:relative;
  transition:transform .22s ease,box-shadow .22s ease;
}
.hn-cat-card:hover { transform:translateY(-4px);box-shadow:0 12px 48px rgba(0,0,0,.14); }
.hn-cat-card__badge {
  position:absolute;top:12px;left:12px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;line-height:1.6;z-index:1;
}
.hn-cat-card__badge--available { background:#78BE20;color:#2B2B2B; }
.hn-cat-card__badge--soon { background:#E5E7EB;color:#6B7280; }
.hn-cat-card__img-wrap {
  background:#F5EDE4;padding:32px 28px 24px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hn-cat-card__img-wrap img {
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  transition:transform .3s ease;
}
.hn-cat-card:hover .hn-cat-card__img-wrap img { transform:scale(1.05); }
.hn-cat-card__body { padding:20px 20px 22px;display:flex;flex-direction:column;flex:1; }
.hn-cat-card__type {
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#67A81C;background:#EBF7D4;border-radius:100px;
  padding:3px 10px;display:inline-block;margin-bottom:10px;
}
.hn-cat-card h3 {
  font-family:'Inter',-apple-system,sans-serif;
  font-size:1.1rem;font-weight:700;color:#2B2B2B;
  line-height:1.3;margin:0 0 8px;letter-spacing:-.015em;
}
.hn-cat-card__desc { font-size:.875rem;color:#6B7280;line-height:1.55;margin:0 0 16px;flex:1; }
.hn-cat-card__price {
  font-size:1.35rem;font-weight:800;color:#67A81C;
  letter-spacing:-.02em;margin-bottom:4px;font-variant-numeric:tabular-nums;
}
.hn-cat-card__price-label { font-size:.75rem;color:#6B7280;margin-bottom:16px;display:block; }
.hn-cat-card__cta {
  display:block;text-align:center;font-weight:700;font-size:.875rem;
  padding:11px 20px;border-radius:100px;text-decoration:none !important;
  transition:background .18s,transform .15s;
}
.hn-cat-card__cta--primary { background:#266431;color:#fff !important; }
.hn-cat-card__cta--primary:hover { background:#2d7d3a;transform:translateY(-1px); }
.hn-cat-card__cta--wa { background:#25D366;color:#2B2B2B !important; }
.hn-cat-card__cta--wa:hover { background:#1EB85A;transform:translateY(-1px); }

/* J4. Tabla comparativa premium */
.hn-cat-table-wrap {
  overflow-x:auto;margin:32px 0;border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
table.hn-cat-table {
  width:100%;border-collapse:collapse;
  font-family:'Inter',sans-serif;font-size:.875rem;background:#fff;
}
table.hn-cat-table thead tr { background:#F7F9F4; }
table.hn-cat-table th {
  padding:14px 16px;font-weight:700;color:#2B2B2B;text-align:left;
  border-bottom:2px solid #E5E7EB;white-space:nowrap;
}
table.hn-cat-table th.hn-featured,
table.hn-cat-table td.hn-featured { background:#EBF7D4;font-weight:700; }
table.hn-cat-table td {
  padding:12px 16px;color:#2B2B2B;border-bottom:1px solid #E5E7EB;vertical-align:top;
}
table.hn-cat-table tbody tr:last-child td { border-bottom:none; }
table.hn-cat-table tbody tr:hover { background:#FAFAFA; }

/* J5. Grid de pilares nutricionales */
.hn-cat-pillars { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:32px 0; }
@media(max-width:600px) { .hn-cat-pillars { grid-template-columns:1fr; } }
.hn-cat-pillar {
  background:#fff;border:1px solid #E5E7EB;border-radius:14px;
  padding:22px 20px;display:flex;gap:16px;align-items:flex-start;
}
.hn-cat-pillar__icon {
  width:44px;height:44px;background:#EBF7D4;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hn-cat-pillar__icon svg { width:22px;height:22px; }
.hn-cat-pillar h4 { font-size:.95rem;font-weight:700;color:#2B2B2B;margin:0 0 6px;line-height:1.3; }
.hn-cat-pillar p { font-size:.85rem;color:#6B7280;margin:0;line-height:1.55; }

/* J6. Tabs de preparación */
.hn-cat-prep { margin:32px 0; }
.hn-cat-prep__tabs {
  display:flex;gap:0;border-bottom:2px solid #E5E7EB;margin-bottom:24px;
  overflow-x:auto;scrollbar-width:none;
}
.hn-cat-prep__tabs::-webkit-scrollbar { display:none; }
.hn-cat-prep__tab {
  padding:10px 20px;font-size:.875rem;font-weight:600;color:#6B7280;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;
  user-select:none;transition:color .18s,border-color .18s;
  background:none;border-top:none;border-left:none;border-right:none;
}
.hn-cat-prep__tab:hover { color:#2B2B2B; }
.hn-cat-prep__tab.active { color:#266431;border-bottom-color:#78BE20;font-weight:700; }
.hn-cat-prep__panel { display:none; }
.hn-cat-prep__panel.active { display:block; }
.hn-cat-prep__steps { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px; }
.hn-cat-prep__step { display:flex;gap:16px;align-items:flex-start; }
.hn-cat-prep__num {
  width:32px;height:32px;border-radius:50%;
  background:#78BE20;color:#2B2B2B;font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hn-cat-prep__step-text { font-size:.9rem;color:#2B2B2B;line-height:1.55;padding-top:5px; }
.hn-cat-prep__step-text strong { color:#266431; }

/* J7. Expert/autor CTA */
.hn-cat-expert {
  background:#F5EDE4;border-radius:16px;padding:32px;
  display:flex;gap:24px;align-items:flex-start;margin:40px 0;
}
@media(max-width:600px) {
  .hn-cat-expert { flex-direction:column;align-items:center;text-align:center;padding:24px 20px; }
}
.hn-cat-expert__photo {
  width:80px;height:80px;border-radius:50%;object-fit:cover;
  flex-shrink:0;border:3px solid #78BE20;
}
.hn-cat-expert__content { flex:1; }
.hn-cat-expert__title {
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#67A81C;margin:0 0 6px;display:block;
}
.hn-cat-expert__name { font-size:1.1rem;font-weight:700;color:#2B2B2B;margin:0 0 6px; }
.hn-cat-expert__bio { font-size:.875rem;color:#6B7280;line-height:1.6;margin:0 0 18px; }
.hn-cat-expert__stats { display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px; }
.hn-cat-expert__stat strong { display:block;font-size:1.1rem;font-weight:800;color:#266431; }
.hn-cat-expert__stat span { font-size:.75rem;color:#6B7280; }
.hn-cat-expert__cta {
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#2B2B2B !important;font-weight:700;font-size:.875rem;
  padding:12px 22px;border-radius:100px;text-decoration:none !important;
  box-shadow:0 4px 14px rgba(37,211,102,.3);transition:background .2s,transform .15s;
}
.hn-cat-expert__cta:hover { background:#1EB85A;transform:translateY(-2px); }

/* J8. FAQ accordion */
.hn-cat-faq { margin:40px 0; }
.hn-cat-faq__item { border-bottom:1px solid #E5E7EB; }
.hn-cat-faq__item:first-child { border-top:1px solid #E5E7EB; }
.hn-cat-faq__q {
  width:100%;background:none;border:none;padding:18px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:'Inter',-apple-system,sans-serif;font-size:.95rem;font-weight:700;
  color:#2B2B2B;cursor:pointer;text-align:left;
}
.hn-cat-faq__icon {
  width:22px;height:22px;border:2px solid #E5E7EB;border-radius:50%;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.hn-cat-faq__icon::after { content:'+';font-size:.9rem;font-weight:700;color:#6B7280;line-height:1; }
.hn-cat-faq__item.open .hn-cat-faq__icon { background:#78BE20;border-color:#78BE20; }
.hn-cat-faq__item.open .hn-cat-faq__icon::after { content:'−';color:#2B2B2B; }
.hn-cat-faq__a { display:none;padding:0 0 18px;font-size:.9rem;color:#6B7280;line-height:1.65; }
.hn-cat-faq__item.open .hn-cat-faq__a { display:block; }

/* J9. Wrapper de secciones con label + heading */
.hn-cat-sec { padding:48px 0; }
.hn-cat-sec--warm {
  background:#F5EDE4;
  margin-left:calc(-1 * clamp(16px,5vw,48px));
  margin-right:calc(-1 * clamp(16px,5vw,48px));
  padding-left:clamp(16px,5vw,48px);
  padding-right:clamp(16px,5vw,48px);
}
.hn-cat-sec__label {
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#67A81C;display:block;margin-bottom:8px;
}
.hn-cat-sec h2 {
  font-family:'Inter',-apple-system,sans-serif;
  font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800;
  color:#2B2B2B;line-height:1.25;letter-spacing:-.025em;margin:0 0 12px;
}
.hn-cat-sec__intro { font-size:.95rem;color:#6B7280;line-height:1.65;max-width:640px;margin:0 0 32px; }

/* J. Mobile overrides */
@media(max-width:640px) {
  .hn-cat-hero { padding:40px 20px 36px; }
  .hn-cat-hero h1,.hn-cat-hero__title { font-size:1.7rem; }
  .hn-cat-hero__trust { gap:12px; }
  .hn-cat-expert { padding:24px 16px; }
  .hn-cat-sec { padding:32px 0; }
  table.hn-cat-table th,table.hn-cat-table td { padding:10px 12px;font-size:.8rem; }
}

/* -------------------------------------------------------------------
   FIN — hn-cl-tienda.css v2.0  2026-07-01
   ------------------------------------------------------------------- */