/* =========================================================================
   Sir Neko GP — Shop / archive. REDISEÑO DE CARD.
   Dirección estética (web-design-2026):
   - Emoción en 5s: calidez apetecible, confianza artesanal (alimentos naturales).
   - Arquetipo: Nature Distilled (crema + tierra) × Soft Brutalism (redondeado,
     pastel, sombra con profundidad). Tipografía Josefin Sans con contraste de peso.
   - Acción primaria de cada card: elegir peso / agregar.
   - NO parecerse a: grilla WooCommerce/Storefront default, card plana de Shopify.
   MOBILE-FIRST. Grid 2 (mobile) -> 3 (tablet) -> 4 (desktop).
   ========================================================================= */

/* ---------- Cabecera del archive ---------- */
.woocommerce-products-header { text-align: center; margin: var(--sn-space-6) 0 var(--sn-space-8); }
.woocommerce-products-header__title { font-size: var(--sn-fs-h2); }
.term-description { color: var(--sn-muted); max-width: 60ch; margin: var(--sn-space-3) auto 0; }

.woocommerce-result-count,
.woocommerce-ordering { font-size: .9rem; }
.woocommerce-ordering select {
  font-family: var(--sn-font);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-pill);
  padding: .5em 1em;
  background: var(--sn-white);
  color: var(--sn-ink);
}

/* ---------- GRID ---------- */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);   /* mobile */
  gap: var(--sn-space-3);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
ul.products::before, ul.products::after { display: none !important; }

/* ---------- CARD ---------- */
ul.products li.product {
  --sn-pad: var(--sn-space-4);              /* ÚNICO punto de control del padding lateral */
  position: relative;
  display: flex !important;
  flex-direction: column;
  background: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
  box-shadow: var(--sn-shadow-sm);
  overflow: hidden;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  transition: transform .35s var(--sn-spring), box-shadow .35s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: var(--sn-shadow-lg);
    border-color: transparent;
  }
}

/* imagen cuadrada, redondeada e inset del borde de la card + zoom sutil en hover */
ul.products li.product a img,
ul.products li.product img {
  margin: var(--sn-pad) var(--sn-pad) 0 !important;
  width: calc(100% - 2 * var(--sn-pad)) !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--sn-radius);
  background: var(--sn-cream-2);
  transition: transform .5s var(--sn-spring);
}
@media (prefers-reduced-motion: no-preference) {
  ul.products li.product:hover img { transform: scale(1.05); }
}

/* link que envuelve imagen + categoría + título + precio */
ul.products li.product a.woocommerce-LoopProduct-link { display: block; color: inherit; }

/* espacio uniforme bajo la imagen, exista o no el eyebrow de categoría
   (en archives de categoría el eyebrow se oculta desde PHP) */
ul.products li.product a.woocommerce-LoopProduct-link img + * { margin-top: var(--sn-space-4); }

/* ---------- Overlays sobre la imagen ---------- */
/* badge de descuento (% real) — verde-dark para contraste AA sobre blanco.
   Prefijo .woocommerce + span para ganarle a WC core
   (.woocommerce ul.products li.product .onsale{top:0;right:0;left:auto;margin:-.5em -.5em 0 0}, 0,4,2),
   que por defecto lo empuja FUERA de la card con margen negativo. */
.woocommerce ul.products li.product span.onsale {
  position: absolute;
  top: var(--sn-space-3); left: var(--sn-space-3); right: auto; bottom: auto;
  z-index: 3;
  margin: 0;
  background: var(--sn-green-dark);
  color: var(--sn-white);
  font-size: .72rem;
  font-weight: var(--sn-fw-bold);
  letter-spacing: .02em;
  padding: .3em .75em;
  border-radius: var(--sn-radius-pill);
  min-width: 0; min-height: 0;
  line-height: 1.2;
  box-shadow: var(--sn-shadow-sm);
}

/* chip de stock agotado (lo emite shop.php solo en productos sin stock) */
ul.products li.product .sn-card-stock {
  position: absolute;
  top: var(--sn-space-3); left: var(--sn-space-3);
  z-index: 4;
  background: var(--sn-ink);
  color: var(--sn-white);
  font-size: .68rem;
  font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-wide);
  text-transform: uppercase;
  padding: .35em .8em;
  border-radius: var(--sn-radius-pill);
}
ul.products li.product.outofstock .onsale { display: none; }      /* sin colisión con el chip */
ul.products li.product.outofstock img { opacity: .55; filter: grayscale(.35); }

/* wishlist (YITH 4.5 block) — círculo en la esquina. Robusto ante el markup
   hidratado por JS: oculta el label de forma accesible y centra el ícono (i o svg). */
ul.products li.product .yith-add-to-wishlist-button-block:not(:empty),
ul.products li.product .yith-wcwl-add-to-wishlist {
  position: absolute;
  top: var(--sn-space-2); right: var(--sn-space-2);
  z-index: 4;
  margin: 0 !important;
  width: 2.75rem; height: 2.75rem;          /* 44px target táctil */
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  box-shadow: var(--sn-shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--sn-spring), background .2s ease;
}
ul.products li.product .yith-add-to-wishlist-button-block:hover { background: var(--sn-white); transform: scale(1.08); }
ul.products li.product .yith-add-to-wishlist-button-block a,
ul.products li.product .yith-wcwl-add-to-wishlist a {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: var(--sn-ink);
  line-height: 1;
}
ul.products li.product .yith-add-to-wishlist-button-block a:hover,
ul.products li.product .yith-wcwl-add-to-wishlist a:hover { color: var(--sn-green); }
ul.products li.product .yith-add-to-wishlist-button-block i,
ul.products li.product .yith-add-to-wishlist-button-block svg,
ul.products li.product .yith-wcwl-add-to-wishlist i,
ul.products li.product .yith-wcwl-add-to-wishlist svg { font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }
/* label de texto: visually-hidden (mantiene nombre accesible, oculta la frase larga) */
ul.products li.product .yith-add-to-wishlist-button-block a span,
ul.products li.product .yith-wcwl-add-to-wishlist a span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Contenido textual ---------- */
/* categoría (eyebrow) como pill de marca pastel — solo en shop/búsqueda (PHP lo condiciona) */
ul.products li.product .sn-card-cat {
  display: inline-flex; align-items: center; gap: .4em;
  width: fit-content;
  margin: 0 var(--sn-pad);
  padding: .3em .8em;
  background: var(--sn-mint-soft);
  color: var(--sn-green-dark);
  font-size: .66rem;
  font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-wide);
  text-transform: uppercase;
  border-radius: var(--sn-radius-pill);
}
ul.products li.product .sn-card-cat::before {
  content: ""; width: .42em; height: .42em; border-radius: 50%; background: var(--sn-green);
}

/* título — clamp a 3 líneas (los títulos de Sir Neko son largos/descriptivos).
   Prefijo .woocommerce + h2 para ganarle a WC core (.woocommerce ul.products li.product
   .woocommerce-loop-product__title{padding:.5em 0;font-size:1em}, especificidad 0,4,2).
   min-height = 2 líneas: títulos cortos reservan espacio para que el precio alinee. */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  padding: var(--sn-space-2) var(--sn-pad) 0;
  margin: 0;
  font-size: .98rem;
  font-weight: var(--sn-fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--sn-ls-tight);
  color: var(--sn-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}

/* rating (si la tienda activa reviews) */
ul.products li.product .star-rating { margin: var(--sn-space-2) var(--sn-pad) 0; font-size: .85em; }

/* precio — el monto domina (tinta, grande, bold); "Desde:" subordinado y gris */
ul.products li.product .price {
  padding: 0 var(--sn-pad);
  margin-top: auto;   /* empuja el grupo precio+botón al FONDO → alinean en toda la fila sin importar
                         cuántas líneas ocupe el título o el eyebrow de categoría */
  color: var(--sn-muted);
  font-weight: var(--sn-fw-regular);
  font-size: .92rem;
  line-height: 1.2;
}
ul.products li.product .price .desde-label {
  display: block;
  font-size: .68rem;
  font-weight: var(--sn-fw-light);
  color: var(--sn-muted);
  text-transform: uppercase;
  letter-spacing: var(--sn-ls-wide);
}
ul.products li.product .price .woocommerce-Price-amount {
  color: var(--sn-ink);
  font-weight: var(--sn-fw-bold);
  font-size: 1.2rem;
  letter-spacing: var(--sn-ls-tight);
}
ul.products li.product .price del { font-weight: var(--sn-fw-light); margin-right: .3em; }
ul.products li.product .price del .woocommerce-Price-amount { color: var(--sn-muted); font-size: .9rem; font-weight: var(--sn-fw-light); }
ul.products li.product .price ins { text-decoration: none; }

/* swatches (wcboost), si existen */
ul.products li.product .wcboost-variation-swatches { padding: var(--sn-space-2) var(--sn-pad) 0; margin: 0; }

/* botón add-to-cart / elegir peso — full-width pill, pineado al FONDO de la card.
   Prefijo .woocommerce + a.button para ganarle a WC core
   (.woocommerce ul.products li.product .button{display:inline-block;margin-top:1em}, 0,4,2).
   el precio (margin-top:auto) ya empuja el grupo al fondo; acá solo dejamos un gap fijo arriba. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
  display: flex; align-items: center; justify-content: center;
  width: auto;
  margin: var(--sn-space-3) var(--sn-pad) var(--sn-pad);
  min-height: 44px;
  text-align: center;
  padding: .65em 1em;
  font-size: var(--sn-fs-small);
  font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-wide);
  text-transform: uppercase;
  background: var(--sn-ink);
  color: var(--sn-white);
  border-radius: var(--sn-radius-pill);
  transition: background .2s ease, transform .12s var(--sn-spring);
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover { background: var(--sn-green); color: var(--sn-white); }
.woocommerce ul.products li.product a.button:active { transform: scale(.97); }
.woocommerce ul.products li.product a.button.loading::after { vertical-align: middle; }

/* botón en producto agotado: apagado, no clickeable (supera al rule base 0,4,3) */
.woocommerce ul.products li.product.outofstock a.button {
  background: var(--sn-cream-2);
  color: var(--sn-muted);
  pointer-events: none;
}

/* ---------- Foco visible (teclado) en TODOS los interactivos de la card ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:focus-visible,
.woocommerce ul.products li.product a.button:focus-visible,
ul.products li.product .yith-add-to-wishlist-button-block a:focus-visible,
ul.products li.product .yith-wcwl-add-to-wishlist a:focus-visible {
  outline: 2px solid var(--sn-green);
  outline-offset: 2px;
  border-radius: var(--sn-radius-sm);
}

/* ---------- Paginación ---------- */
.woocommerce-pagination ul { border: none !important; display: flex; gap: var(--sn-space-2); justify-content: center; margin-top: var(--sn-space-12); }
.woocommerce-pagination ul li { border: none !important; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  border-radius: var(--sn-radius-pill) !important;
  min-width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sn-white);
  color: var(--sn-ink);
  font-weight: var(--sn-fw-semibold);
  box-shadow: var(--sn-shadow-sm);
}
.woocommerce-pagination ul li span.current { background: var(--sn-ink); color: var(--sn-white); }
.woocommerce-pagination ul li a:hover { background: var(--sn-green); color: var(--sn-white); }

/* =========================================================================
   TABLET (>=600px): 3 columnas
   ========================================================================= */
@media (min-width: 600px) {
  ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--sn-space-5); }
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title { font-size: 1.02rem; }
}

/* =========================================================================
   DESKTOP (>=1024px): 4 columnas
   ========================================================================= */
@media (min-width: 1024px) {
  ul.products { grid-template-columns: repeat(4, 1fr); gap: var(--sn-space-7); }
}

/* =========================================================================
   MOBILE (<=600px, cards angostas de 2 columnas): el eyebrow de categoría como
   PILL se desbordaba/cortaba con nombres largos ("Especias y Condimentos").
   Lo pasamos a texto chico de 1 línea con ellipsis (sin pill).
   ========================================================================= */
@media (max-width: 600px) {
  ul.products li.product .sn-card-cat {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0 var(--sn-pad);
    background: transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .62rem; letter-spacing: .03em;
  }
  ul.products li.product .sn-card-cat::before { display: none; }
  /* badge -% y corazón un poco más chicos en cards angostas */
  .woocommerce ul.products li.product span.onsale { font-size: .64rem; padding: .25em .6em; }
}

/* =========================================================================
   SIDEBAR del shop (categorías + etiquetas) — solo en archives de producto
   ========================================================================= */
/* Sidebar ANGOSTA (estilo Barberry, ancho fijo) + content flexible → se mantienen
   4 productos por fila. align-items:flex-start para que la sidebar arranque arriba. */
@media (min-width: 1024px) {
  body.sn-has-shop-sidebar #content.site-content { display: flex; align-items: flex-start; gap: 2.5rem; }
  body.sn-has-shop-sidebar #primary { flex: 1 1 auto; width: auto; max-width: none; }
  body.sn-has-shop-sidebar #right-sidebar { flex: 0 0 250px; width: 250px; }
  body.sn-has-shop-sidebar ul.products { grid-template-columns: repeat(4, 1fr); }
  /* Ambas columnas arrancan ARRIBA (el aire superior lo da el banner): el "Mostrando/Orden"
     y el primer widget de la sidebar quedan a la misma altura, alineados. */
  body.sn-has-shop-sidebar #main { margin-top: 0; }
  body.sn-has-shop-sidebar #primary .inside-article { padding-top: 0; }
  body.sn-has-shop-sidebar #right-sidebar .inside-right-sidebar { padding-top: 0; }
  body.sn-has-shop-sidebar #right-sidebar .sn-shop-widget:first-child,
  body.sn-has-shop-sidebar #right-sidebar .widget:first-child { margin-top: 0; }
}
/* < 1024px: ocultamos la sidebar (30+ categorías + tags bajo el grid = demasiado
   scroll) y el grid queda full-width. TODO: panel de filtros para mobile. */
@media (max-width: 1023px) {
  body.sn-has-shop-sidebar #right-sidebar { display: none; }
}

/* Banner full-width (breadcrumb + título) ARRIBA de las dos columnas. El título y el
   breadcrumb originales se sacaron de #primary vía PHP → grid + sidebar arrancan juntos
   debajo, en la tienda Y en cada categoría/etiqueta. */
.sn-shop-banner { padding: var(--sn-space-6) 0 var(--sn-space-5); }
.sn-shop-banner__inner { max-width: 1500px; margin: 0 auto; padding: 0 40px; text-align: center; }
.sn-shop-banner .woocommerce-breadcrumb {
  font-size: .82rem; color: var(--sn-muted); margin: 0 0 var(--sn-space-3); padding: 0;
}
.sn-shop-banner .woocommerce-breadcrumb a { color: var(--sn-muted); }
.sn-shop-banner .woocommerce-breadcrumb a:hover { color: var(--sn-green); }
.sn-shop-banner__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-tight); color: var(--sn-ink); margin: 0; line-height: 1.1;
}
.sn-shop-banner__desc { margin-top: var(--sn-space-3); color: var(--sn-muted); max-width: 70ch; line-height: 1.6; margin-left: auto; margin-right: auto; }

/* El header original del archive (título/desc) ya vive en el banner full-width;
   queda vacío en #primary ocupando ~90px y empuja el count/grid → ocultarlo para que
   el grid arranque arriba y la sidebar quede alineada (en shop Y en categorías). */
body.sn-has-shop-sidebar .woocommerce-products-header { display: none; }

.sn-shop-widget { margin-bottom: var(--sn-space-7); }
.sn-shop-widget__title {
  font-size: 1.05rem;
  font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-tight);
  color: var(--sn-ink);
  margin: 0 0 var(--sn-space-4);
  padding-bottom: var(--sn-space-3);
  border-bottom: 2px solid var(--sn-cream-2);
}

/* lista de categorías (con conteo) */
.sn-cat-list { list-style: none; margin: 0; padding: 0; }
.sn-cat-item a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .15rem; color: var(--sn-ink); font-size: .92rem; line-height: 1.3;
  border-bottom: 1px solid var(--sn-cream-2);
  transition: color .18s ease, padding-left .18s ease;
}
.sn-cat-item a:hover { color: var(--sn-green); padding-left: .4rem; }
.sn-cat-item.is-active a { color: var(--sn-green-dark); font-weight: var(--sn-fw-semibold); }
.sn-cat-count {
  flex-shrink: 0; font-size: .72rem; font-weight: var(--sn-fw-bold);
  color: var(--sn-muted); background: var(--sn-cream-2);
  padding: .12em .55em; border-radius: var(--sn-radius-pill);
  min-width: 1.6em; text-align: center;
}
.sn-cat-item a:hover .sn-cat-count,
.sn-cat-item.is-active .sn-cat-count { background: var(--sn-mint); color: var(--sn-green-dark); }

/* nube de etiquetas (pills) */
.sn-tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.sn-tag-pill {
  display: inline-flex; align-items: center;
  padding: .35em .8em; font-size: .76rem; font-weight: var(--sn-fw-semibold);
  color: var(--sn-ink); background: var(--sn-cream-2);
  border-radius: var(--sn-radius-pill);
  transition: background .18s ease, color .18s ease, transform .12s var(--sn-spring);
}
.sn-tag-pill:hover { background: var(--sn-mint); color: var(--sn-green-dark); transform: translateY(-1px); }
.sn-tag-pill.is-active { background: var(--sn-green); color: var(--sn-white); }

/* =========================================================================
   "Cargar más" (scroll infinito híbrido)
   ========================================================================= */
.sn-load-more-wrap { display: flex; justify-content: center; margin: var(--sn-space-7) 0 var(--sn-space-5); }
.sn-load-more {
  appearance: none; border: 1.5px solid var(--sn-ink); background: var(--sn-white);
  color: var(--sn-ink); font-family: var(--sn-font); font-size: .9rem; font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-wide); text-transform: uppercase;
  padding: .9em 2.4em; border-radius: var(--sn-radius-pill); cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s var(--sn-spring);
}
.sn-load-more:hover { background: var(--sn-ink); color: var(--sn-white); }
.sn-load-more:active { transform: scale(.97); }
.sn-load-more.is-loading { opacity: .65; pointer-events: none; }