@charset "UTF-8";
/* Nidoo CSS architecture bundle.
 * WooCommerce archive layout, product cards and filters.
 * Migrated from legacy numbered module 13.
 */
/* Source: 34-nidoo-shop-redesign.php */
/* ============================================================
   NIDOO SHOP PAGE — Premium Mobile Grid Redesign
   Tarjetas editoriales · Simetría · Alta gama
   ============================================================ */
/* ── Remove extra spacing from Astra container on shop ── */
.woocommerce-page .ast-woocommerce-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   1. PRODUCT CARD — Contenedor individual tipo tarjeta
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--nidoo-surface) !important;
  border-radius: var(--nidoo-radius-md) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

/* Remove Astra's default padding on product items */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   2. PRODUCT IMAGE — Full-width, rounded top, subtle border
   ============================================================ */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img {
  border-radius: var(--nidoo-radius-md) 12px 0 0 !important;
  width: 100% !important;
  margin: 0 !important;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-bottom: none !important;
  box-sizing: border-box;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  margin: 0 !important;
}

/* ============================================================
   3. CONTENT AREA — Min-height for symmetry, flex to anchor
      price at the bottom
   ============================================================ */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 10px 12px !important;
  margin: 0 !important;
  background: var(--nidoo-surface) !important;
  min-height: 82px !important;
}

/* ── 3a. Product Title — Max 2 lines with ellipsis ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nidoo-text) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
  margin: 0 0 auto 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.7em !important;
  word-break: break-word;
}

/* ── 3b. Category badge — hide for cleaner look ── */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category {
  display: none !important;
}

/* ── 3c. Price — Green mint, anchored to bottom ── */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--nidoo-primary) !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount {
  color: var(--nidoo-primary) !important;
}

.woocommerce ul.products li.product .price span,
.woocommerce-page ul.products li.product .price span {
  color: var(--nidoo-primary) !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #bbb !important;
  opacity: 0.7 !important;
  margin-right: 4px;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* ── 3d. Star ratings — hide on catalog grid ── */
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
  display: none !important;
}

/* ============================================================
   4. SALE BADGE — Pill verde menta homogéneo
   ============================================================ */
.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale,
.ast-onsale-card {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  background: var(--nidoo-primary) !important;
  color: var(--nidoo-on-primary) !important;
  border-radius: var(--nidoo-radius-pill) !important;
  padding: 3px 11px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: var(--nidoo-shadow-primary) !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  width: auto !important;
  height: auto !important;
  z-index: 5;
}

/* ============================================================
   5. GRID GAP — Espaciado entre tarjetas
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  gap: 12px !important;
}

/* ============================================================
   6. ORDERING DROPDOWN — Redondeado, estilizado
      Desktop: compacto (max-width 250px), empujado a la derecha.
   ============================================================ */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  float: none !important;
  margin-bottom: 10px !important;
  width: 100%;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 10px 40px 10px 16px;
  border: 1.5px solid var(--nidoo-border-control) !important;
  border-radius: var(--nidoo-radius-md) !important;
  background-color: var(--nidoo-surface) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nidoo-text-body) !important;
  line-height: 1.4 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px !important;
  transition: border-color 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}

.woocommerce .woocommerce-ordering select:focus,
.woocommerce-page .woocommerce-ordering select:focus {
  border-color: var(--nidoo-primary) !important;
  outline: none !important;
  box-shadow: var(--nidoo-focus-ring-soft) !important;
}

/* ── Desktop: ordenador compacto y alineado a la derecha ── */
@media (min-width: 922px) {
  .woocommerce .woocommerce-ordering,
  .woocommerce-page .woocommerce-ordering {
    width: auto !important;
    max-width: 250px !important;
    min-width: 180px !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .woocommerce .woocommerce-ordering select,
  .woocommerce-page .woocommerce-ordering select {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 36px 8px 14px !important;
    font-size: 13px !important;
  }
}
/* ============================================================
   7. RESULT COUNT — Texto de resultados
      Desktop: alineado a la izquierda, sin margen inferior.
   ============================================================ */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #aaa !important;
  margin-bottom: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

@media (min-width: 922px) {
  .woocommerce .woocommerce-result-count,
  .woocommerce-page .woocommerce-result-count {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: 40px !important;
  }
}
/* ============================================================
   8. PAGINATION — Píldoras redondeadas, verde menta
   ============================================================ */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
  margin-top: 24px !important;
  padding-top: 4px;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: inline-block !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 4px !important;
  border: 1.5px solid var(--nidoo-border-control) !important;
  border-radius: var(--nidoo-radius-pill) !important;
  background: var(--nidoo-surface) !important;
  color: #888 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
  float: none !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
  background: var(--nidoo-primary) !important;
  border-color: var(--nidoo-primary) !important;
  color: var(--nidoo-on-primary) !important;
  font-weight: 600 !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce-page nav.woocommerce-pagination ul li a:hover {
  border-color: #778ccf !important;
  color: #778ccf !important;
  background: rgba(119, 140, 207, 0.06) !important;
}

.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce-page nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce-page nav.woocommerce-pagination ul li a.prev {
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0 12px !important;
}

.woocommerce nav.woocommerce-pagination ul li span.dots,
.woocommerce-page nav.woocommerce-pagination ul li span.dots {
  border: none !important;
  background: transparent !important;
  color: #ccc !important;
  min-width: 20px !important;
  font-size: 14px !important;
  padding: 0 !important;
}

/* ============================================================
   9. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 544px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 10px !important;
  }
  .woocommerce ul.products li.product .astra-shop-summary-wrap,
  .woocommerce-page ul.products li.product .astra-shop-summary-wrap {
    padding: 8px 8px 10px !important;
    min-height: 74px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size: 14px !important;
  }
  .woocommerce .woocommerce-ordering select,
  .woocommerce-page .woocommerce-ordering select {
    min-height: 44px;
    padding: 8px 36px 8px 14px;
    font-size: 13px !important;
  }
  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce-page nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span,
  .woocommerce-page nav.woocommerce-pagination ul li span {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 12px !important;
  }
  .woocommerce .woocommerce-result-count,
  .woocommerce-page .woocommerce-result-count {
    text-align: center;
    font-size: 11px !important;
  }
}
@media (min-width: 545px) and (max-width: 921px) {
  .woocommerce ul.products li.product .astra-shop-summary-wrap,
  .woocommerce-page ul.products li.product .astra-shop-summary-wrap {
    padding: 12px 12px 14px !important;
    min-height: 90px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
  }
}
@media (min-width: 922px) {
  .woocommerce ul.products li.product .astra-shop-summary-wrap,
  .woocommerce-page ul.products li.product .astra-shop-summary-wrap {
    padding: 14px 14px 16px !important;
    min-height: 96px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size: 16px !important;
  }
  .woocommerce ul.products li.product:hover,
  .woocommerce-page ul.products li.product:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  }
}
/* ============================================================
   10. ARCHIVE DESCRIPTION / BREADCRUMB
   ============================================================ */
.woocommerce-page .ast-archive-description {
  padding: 0 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: none !important;
}

.woocommerce-page .ast-archive-description .page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--nidoo-text) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.02em;
}

.woocommerce-page .ast-archive-description .ast-breadcrumbs-wrapper {
  padding: 0 !important;
  margin: 0 0 4px !important;
}

.woocommerce-page .ast-archive-description .ast-breadcrumbs-wrapper .trail-items {
  font-size: 11px !important;
}

.woocommerce-page .ast-archive-description .ast-breadcrumbs-wrapper .trail-items li a {
  color: #999 !important;
}

.woocommerce-page .ast-archive-description .ast-breadcrumbs-wrapper .trail-items li span {
  color: #bbb !important;
}

/* ============================================================
   11. WOOF — Limpiar estilos
   ============================================================ */
.woof_shortcode_output {
  margin: 0 !important;
}

/* ============================================================
   12. ASTRA OVERLAY ACTIONS — Ocultar
        Oculta acciones superpuestas de Astra, no botones reales del loop.
        HUSKY puede reinyectarlas durante render AJAX.
   ============================================================ */
.woocommerce ul.products li.product .ast-on-card-button:not(.ast-onsale-card),
.woocommerce-page ul.products li.product .ast-on-card-button:not(.ast-onsale-card),
.woocommerce ul.products li.product .ast-select-options-trigger,
.woocommerce-page ul.products li.product .ast-select-options-trigger {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   13. FILTROS ACTIVOS — CHIPS LIMPIOS + SIDEBAR SIN DOBLE FONDO
        Diseño: pastillas blancas individuales (border-radius: var(--nidoo-radius-pill)),
        borde 1px gris claro, "×" tipográfica verde menta.
        Sin texto prefijo, sin iconos PNG, sin fondo gris heredado.
        Comportamiento: flex-wrap, gap 6px.
        TARGET: .woof_products_top_panel (top panel), sidebar
   ============================================================ */
/* ── 13a. TOP PANEL — Contenedor principal ── */
.woof_products_top_panel {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 8px 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

/* ── 13b. CONTENIDO DEL PANEL — Antes oculto, ahora visible ── */
.woof_products_top_panel_content {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ── 13c. LISTA INTERNA — flex-wrap sin punto ni margen ── */
.woof_products_top_panel > ul,
.woof_products_top_panel_content > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── 13d. CHIP INDIVIDUAL — pastilla blanca, 50px radius ── */
.woof_products_top_panel li,
.woof_products_top_panel_content li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: var(--nidoo-surface) !important;
  border: 1px solid #e0dbd3 !important;
  border-radius: var(--nidoo-radius-pill) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #444 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  margin: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* ── 13e. TEXTO DEL FILTRO dentro del chip ── */
.woof_products_top_panel li a,
.woof_products_top_panel_content li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #444 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ── 13f. ELIMINAR icono PNG (delete.png) de WOOF inline CSS ──
     Solo aplica a spans tipo botón (close icon), NO a .woof_remove_ppi
     que contiene el nombre del filtro. */
.woof_products_top_panel li span:not(.woof_remove_ppi),
.woof_products_top_panel_content li span:not(.woof_remove_ppi) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: unset !important;
  background-position: unset !important;
  position: relative !important;
  opacity: 0.45 !important;
  transition: opacity 0.2s ease !important;
  cursor: pointer !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.woof_products_top_panel li span:not(.woof_remove_ppi):hover,
.woof_products_top_panel_content li span:not(.woof_remove_ppi):hover {
  opacity: 1 !important;
}

/* ── 13g. ELIMINADO — migrado a 15e para .woof_remove_ppi ── */
/* ── 13h. BOTÓN "Borrar filtros" — pastilla con borde verde ── */
.woof_products_top_panel li.woof_reset_filter_btn,
.woof_products_top_panel_content li.woof_reset_filter_btn,
.woof_products_top_panel .woof_reset_filter_btn,
.woof_products_top_panel_content .woof_reset_filter_btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: transparent !important;
  border: 1px solid var(--nidoo-primary) !important;
  border-radius: var(--nidoo-radius-pill) !important;
  color: var(--nidoo-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  transition: opacity 0.2s ease !important;
  line-height: 1.4 !important;
  gap: 4px !important;
  margin: 0 !important;
  list-style: none !important;
}

.woof_products_top_panel li.woof_reset_filter_btn:hover,
.woof_products_top_panel_content li.woof_reset_filter_btn:hover {
  opacity: 0.7 !important;
}

/* ── 13i. SIDEBAR — QUITAR DOBLE FONDO GRIS ──
     Elimina el recuadro gris secundario que envuelve los filtros
     y aplana la jerarquía visual. */
/* Fondo del widget — transparente */
.widget-area .widget,
.widget-area .woof_container,
.widget-area .woof {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}

/* Quitar fondo gris de ast-woo-sidebar */
.widget-area.secondary,
.ast-woo-sidebar-widget-area {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── 13j. SIDEBAR — OCULTAR TÍTULOS h4 ("Categorías del producto:" etc) ── */
.woof_container h4 {
  display: none !important;
}

/* ── 13k. SIDEBAR — OCULTAR iconos delete.png en radio/checkbox ── */
.woof_container a.woof_radio_term_reset,
.woof_container a.woof_checkbox_term_reset,
.woof_container .woof_radio_term_reset,
.woof_container .woof_checkbox_term_reset {
  display: none !important;
}

/* ── 13l. SIDEBAR — LIMPIAR RADIO/CHECKBOX (quitar círculos rosas/azules) ── */
.woof_container input[type="radio"],
.woof_container input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 1.5px solid #d4cfc7 !important;
  border-radius: 50% !important;
  background: var(--nidoo-surface) !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.woof_container input[type="radio"]:focus-visible,
.woof_container input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--nidoo-primary) !important;
  outline-offset: 2px !important;
  box-shadow: var(--nidoo-focus-ring) !important;
}

.woof_container input[type="checkbox"] {
  border-radius: 3px !important;
}

.woof_container input[type="radio"]:checked,
.woof_container input[type="checkbox"]:checked {
  border-color: var(--nidoo-primary) !important;
  background: var(--nidoo-primary) !important;
}

.woof_container input[type="radio"]:checked::before,
.woof_container input[type="checkbox"]:checked::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--nidoo-surface) !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.woof_container input[type="checkbox"]:checked::before {
  width: 8px !important;
  height: 8px !important;
  border-radius: 1px !important;
}

/* ── 13m. SIDEBAR — ETIQUETAS de los filtros ── */
.woof_container .woof_radio_label,
.woof_container .woof_checkbox_label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--nidoo-text-muted) !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ── 13n. SIDEBAR — LISTAS sin margen extra ── */
.woof_container .woof_list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.woof_container .woof_list li {
  padding: 3px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ── 13o. SIDEBAR — OVERLAY ITEM oculto ── */
.woof_container_overlay_item {
  display: none !important;
}

/* ── 13p. BOTÓN "Re-inicializar" en sidebar ── */
.woof_submit_search_form_container .woof_reset_search_form {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  background: transparent !important;
  border: 1px solid #e0dbd3 !important;
  border-radius: var(--nidoo-radius-pill) !important;
  color: #888 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.woof_submit_search_form_container .woof_reset_search_form:hover {
  border-color: var(--nidoo-primary) !important;
  color: var(--nidoo-primary) !important;
}

/* ── 13r. MÓVIL — ajustes finos ── */
@media (max-width: 544px) {
  .woof_products_top_panel,
  .woof_products_top_panel_content {
    padding: 2px 0 6px 0 !important;
    gap: 5px !important;
  }
  .woof_products_top_panel li,
  .woof_products_top_panel_content li {
    padding: 3px 10px !important;
    font-size: 11px !important;
  }
  .woocommerce .woocommerce-ordering,
  .woocommerce-page .woocommerce-ordering {
    margin-bottom: 8px !important;
  }
  .woocommerce .woocommerce-result-count,
  .woocommerce-page .woocommerce-result-count {
    margin-bottom: 6px !important;
  }
  .woof_container .woof_radio_label,
  .woof_container .woof_checkbox_label {
    font-size: 12px !important;
  }
}
/* ── 13s. TABLETA ── ── */
@media (min-width: 545px) and (max-width: 921px) {
  .woof_products_top_panel,
  .woof_products_top_panel_content {
    gap: 6px !important;
  }
}
/* ============================================================
   14. BARRA SUPERIOR — FILTROS + RESULTADOS + ORDEN EN FILA
        Desktop: toggle a la izquierda, resultados al lado,
        ordenamiento a la derecha. Todo en una misma fila.
   ============================================================ */
/* ── 14a. Toggle "Filtros" — botón verde menta ── */
.nidoo-filter-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: var(--nidoo-primary) !important;
  color: var(--nidoo-surface) !important;
  border: 1px solid var(--nidoo-primary) !important;
  border-radius: var(--nidoo-radius-md) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.nidoo-filter-toggle:hover {
  opacity: 0.85 !important;
  transform: translateY(-1px) !important;
}

.nidoo-filter-toggle svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--nidoo-surface) !important;
  display: block !important;
}

.nidoo-filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--nidoo-radius-pill) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--nidoo-surface) !important;
  line-height: 1 !important;
}

/* ── 14b. Desktop: fila única ── */
@media (min-width: 922px) {
  #woof_results_by_ajax {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* Si el toggle JS está dentro del flex, order -1 para que sea el PRIMERO */
  #woof_results_by_ajax > .nidoo-filter-toggle {
    order: -1 !important;
    margin-right: 0 !important;
  }
  .woocommerce-result-count {
    order: 2 !important;
    margin-right: auto !important;
  }
  /* ordering → right */
  .woocommerce-ordering {
    order: 3 !important;
    margin-left: auto !important;
  }
  /* active filter chips → full width below the top bar */
  .woof_products_top_panel,
  .woof_products_top_panel_content {
    order: 4 !important;
    width: 100% !important;
  }
  /* notices → full width */
  .woocommerce-notices-wrapper {
    order: 5 !important;
    width: 100% !important;
  }
  /* products grid → full width */
  ul.products {
    order: 6 !important;
    width: 100% !important;
  }
  /* pagination → full width */
  nav.woocommerce-pagination {
    order: 7 !important;
    width: 100% !important;
  }
}
/* ── 14c. Móvil: toggle + resultado apilados ── */
@media (max-width: 921px) {
  .nidoo-filter-toggle {
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  .woocommerce-result-count {
    text-align: center !important;
  }
}
/* ============================================================
   15. ACTIVE FILTER CHIPS — Poblar desde sidebar via JS
        Script que inserta chips en el panel de filtros activos
        cuando se navega con filtros via URL (swoof endpoint).
   ============================================================ */
/* ── 15a. Chip de filtro activo genérico (para JS-injected) ── */
.nidoo-active-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: var(--nidoo-surface) !important;
  border: 1px solid #e0dbd3 !important;
  border-radius: var(--nidoo-radius-pill) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #444 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease !important;
  margin: 0 !important;
}

.nidoo-active-chip .nidoo-chip-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--nidoo-primary) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
  transition: opacity 0.2s ease !important;
  text-decoration: none !important;
}

.nidoo-active-chip .nidoo-chip-remove:hover {
  opacity: 1 !important;
}

/* ── 15b. Botón "Limpiar filtros" (link minimalista) ── */
.nidoo-clear-filters-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: transparent !important;
  border: none !important;
  color: var(--nidoo-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  transition: opacity 0.2s ease !important;
  white-space: nowrap !important;
}

.nidoo-clear-filters-link:hover {
  opacity: 0.7 !important;
  text-decoration: underline !important;
}

/* ── 15c. Ocultar "Clear All" de WOOF ── */
.woof_products_top_panel .woof_reset_filter_btn,
.woof_products_top_panel_content .woof_reset_filter_btn,
.woof_products_top_panel button.woof_reset_button_2 {
  display: none !important;
}

/* ── 15d. QUITAR OUTLINE DEL PANEL Y SUS HIJOS ── */
.woof_products_top_panel,
.woof_products_top_panel *,
.woof_products_top_panel_content,
.woof_products_top_panel_content *,
.woof_products_top_panel2,
.woof_products_top_panel2 * {
  outline: none !important;
}

/* Restore keyboard focus after WOOF's visual reset. */
.woof_products_top_panel :where(a, button, input, select, textarea):focus-visible,
.woof_products_top_panel_content :where(a, button, input, select, textarea):focus-visible,
.woof_products_top_panel2 :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--nidoo-primary) !important;
  outline-offset: 2px !important;
}

/* ── 15d2. OCULTAR PANEL DUPLICADO (WOOF genera .woof_products_top_panel2) ── */
.woof_products_top_panel2 {
  display: none !important;
}

/* ── 15e. APLANAR ESTRUCTURA ANIDADA DE WOOF ──
     WOOF genera <ul data-container="product_cat"> con:
       <li>Product categories:</li>  ← texto estático
       <li><a><span class="woof_remove_ppi">Juguetes</span></a></li>
     Aplanamos: quitamos el label, inline-flex el nested ul. */
/* Mostrar nested ul como inline-flex */
.woof_products_top_panel ul[data-container],
.woof_products_top_panel_content ul[data-container] {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: none !important;
  background: transparent !important;
}

/* Ocultar <li> con texto estático de prefijo ("Product categories:" etc) */
.woof_products_top_panel ul[data-container] > li:first-child,
.woof_products_top_panel_content ul[data-container] > li:first-child {
  display: none !important;
}

/* Estilo del chip real dentro del nested ul */
.woof_products_top_panel ul[data-container] li:last-child,
.woof_products_top_panel_content ul[data-container] li:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: var(--nidoo-surface) !important;
  border: 1px solid #e0dbd3 !important;
  border-radius: var(--nidoo-radius-pill) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #444 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* Link dentro del chip */
.woof_products_top_panel ul[data-container] li:last-child a,
.woof_products_top_panel_content ul[data-container] li:last-child a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #444 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Span woof_remove_ppi — texto del chip + "×" heredado */
.woof_products_top_panel .woof_remove_ppi,
.woof_products_top_panel_content .woof_remove_ppi {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #444 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* Tratar el woof_remove_ppi como chip completo (sin +) */
.woof_products_top_panel .woof_remove_ppi::after,
.woof_products_top_panel_content .woof_remove_ppi::after {
  content: "×" !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--nidoo-primary) !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin-left: 4px !important;
  opacity: 0.5 !important;
  transition: opacity 0.2s ease !important;
}

.woof_products_top_panel .woof_remove_ppi:hover::after,
.woof_products_top_panel_content .woof_remove_ppi:hover::after {
  opacity: 1 !important;
}

/* ── 15f. Quitar padding/margen extra del panel principal ── */
.woof_products_top_panel ul.woof_products_top_panel_ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: none !important;
  background: transparent !important;
}

.woof_products_top_panel_ul > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  border: none !important;
  background: transparent !important;
}

/* ── 15h. OCULTAR CÍRCULOS/INDICADORES ROSAS DENTRO DE CHIPS ──
     WOOF/iCheck puede inyectar radio-buttons personalizados
     (círculos rosas/fucsia) dentro de los chips activos.
     Ocultamos inputs, labels decorativos e indicadores iCheck. */
.woof_products_top_panel input[type="radio"],
.woof_products_top_panel input[type="checkbox"],
.woof_products_top_panel_content input[type="radio"],
.woof_products_top_panel_content input[type="checkbox"],
.woof_products_top_panel .woof_radio_term_reset,
.woof_products_top_panel .woof_checkbox_term_reset,
.woof_products_top_panel .woof_radio_label::before,
.woof_products_top_panel .woof_checkbox_label::before,
.woof_products_top_panel2 input[type="radio"],
.woof_products_top_panel2 input[type="checkbox"],
.woof_products_top_panel2 .woof_radio_term_reset,
.woof_products_top_panel2 .woof_checkbox_term_reset {
  display: none !important;
}

/* Ocultar elementos iCheck (círculos personalizados) dentro del panel */
.woof_products_top_panel .icheckbox,
.woof_products_top_panel .iradio,
.woof_products_top_panel .icheckbox *,
.woof_products_top_panel .iradio *,
.woof_products_top_panel_content .icheckbox,
.woof_products_top_panel_content .iradio,
.woof_products_top_panel_content .icheckbox *,
.woof_products_top_panel_content .iradio *,
.woof_products_top_panel2 .icheckbox,
.woof_products_top_panel2 .iradio {
  display: none !important;
}

/* Cualquier pseudo-elemento circular/radio en chips (no afecta chips reales) */
.woof_products_top_panel .woof_radio_label::before,
.woof_products_top_panel .woof_checkbox_label::before,
.woof_products_top_panel .ichackbox::before,
.woof_products_top_panel .iradio::before,
.woof_products_top_panel_content .woof_radio_label::before,
.woof_products_top_panel_content .woof_checkbox_label::before,
.woof_products_top_panel2 .woof_radio_label::before,
.woof_products_top_panel2 .woof_checkbox_label::before {
  display: none !important;
}

/* ============================================================
   16. FALLBACK — TARJETAS SIN WRAPPERS ASTRA (HUSKY/SWOOF)
        HUSKY/SWOOF re-renderiza el loop con el template DEFAULT
        de WooCommerce, que NO genera .astra-shop-summary-wrap ni
        .astra-shop-thumbnail-wrap. Sin esas clases el padding de
        las secciones 1-3 no aplica y el contenido queda pegado a
        la imagen. Aquí replicamos el padding SIN depender de los
        wrappers de Astra, usando :not(:has()) para NO duplicar el
        espaciado en las tarjetas que sí traen wrapper Astra.
   ============================================================ */
/* 16a. Imagen full-width, esquinas superiores redondeadas */
.woocommerce ul.products li.product:not(:has(.astra-shop-thumbnail-wrap)) img,
.woocommerce-page ul.products li.product:not(:has(.astra-shop-thumbnail-wrap)) img {
  border-radius: var(--nidoo-radius-md) 12px 0 0 !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 16b. El <a> que envuelve imagen + texto: bloque sin padding */
.woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a,
.woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 16c. Padding horizontal a todo el contenido de texto (no imagen) */
.woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img),
.woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img) {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* 16d. Título: padding superior (separa de la imagen) */
.woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) .woocommerce-loop-product__title {
  padding-top: 10px !important;
}

/* 16e. Precio + último bloque de texto: padding inferior */
.woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) .price,
.woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) .price,
.woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img):last-child,
.woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img):last-child {
  padding-bottom: 12px !important;
}

/* 16f. Responsive: igualar padding de secciones 9 (móvil/tablet/desktop) */
@media (max-width: 544px) {
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img),
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) .woocommerce-loop-product__title {
    padding-top: 8px !important;
  }
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) .price,
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) .price,
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img):last-child,
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img):last-child {
    padding-bottom: 10px !important;
  }
}
@media (min-width: 545px) {
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img),
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) .woocommerce-loop-product__title {
    padding-top: 14px !important;
  }
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) .price,
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) .price,
  .woocommerce ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img):last-child,
  .woocommerce-page ul.products li.product:not(:has(.astra-shop-summary-wrap)) > a > *:not(img):last-child {
    padding-bottom: 16px !important;
  }
}
/* ============================================================
   17. HUSKY/SWOOF LOADING POPUP ("Cargando...") — CENTRAR
        Default del plugin usa top:48%/left:48% SIN transform, así
        la esquina (no el centro) queda al 48% → se ve descentrado.
        Centramos de verdad con translate(-50%,-50%).
   ============================================================ */
#woof_html_buffer.woof_info_popup,
div.woof_info_popup {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  background-color: rgba(45, 42, 36, 0.92) !important;
  border-radius: 14px !important;
  padding: 16px 28px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
  text-align: center !important;
  white-space: nowrap !important;
}