/**
 * LIESCO - Shop Page Styles V3
 * Premium compact + ancho útil (cards más grandes)
 * Grid estable 4/6 columnas + offset navbar sticky.
 */

:root {
  /* Shop-specific layout variables (colores y fuentes vienen de liesco-variables.css) */
  --liesco-header-offset: 140px;
  --sidebar-width: clamp(200px, 14vw, 240px);
  --content-gap: clamp(18px, 2vw, 32px);
  --liesco-container-pad: clamp(12px, 1.8vw, 28px);
  
  /* Responsive gaps para products grid */
  --products-gap-mobile: clamp(10px, 2.5vw, 14px);
  --products-gap-tablet: clamp(14px, 2vw, 20px);
  --products-gap-desktop: clamp(18px, 1.8vw, 24px);
}

/* ==========================================
   SHOP PAGE CONTAINER
   ========================================== */
.liesco-shop-page {
  background: var(--color-lino-crudo);
  min-height: 100vh;

  padding-bottom: clamp(40px, 6vw, 72px);
}


/* ==========================================
   CONTAINER FULL WIDTH (pegado a izquierda)
   ========================================== */
.liesco-shop-container {
  max-width: none;     /* usa todo el ancho */
  width: 100%;
  margin: 0;           /* no centrado */
  padding-left: 12px;  /* mínimo en mobile para que no toque borde */
  padding-right: 12px;
}

/* Desktop: pequeño aire premium (sin tocar grid) */
@media (min-width: 1025px) {
  .liesco-shop-container {
    padding-left: clamp(12px, 1.5vw, 28px);
    padding-right: clamp(12px, 1.5vw, 28px);
  }
}



/* ==========================================
   MOBILE FILTERS TOGGLE
   ========================================== */
.liesco-mobile-filters-toggle {
  display: none;
  margin-bottom: 18px;
}

.liesco-mobile-filters-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  min-height: 48px;
  background: white;
  border: 1px solid var(--color-arena);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gris-piedra);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.liesco-mobile-filters-btn:hover {
  border-color: var(--color-verde-oliva);
  color: var(--color-verde-oliva);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.liesco-mobile-filters-btn:active {
  transform: scale(0.98);
}

.liesco-mobile-filters-btn svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* ==========================================
   LAYOUT: SIDEBAR + MAIN
   ========================================== */
.liesco-shop-layout {
  display: grid;
  grid-template-columns: minmax(180px, var(--sidebar-width)) minmax(0, 1fr);
  gap: var(--content-gap);
  align-items: start;
}

/* ==========================================
   FILTERS SIDEBAR (STICKY)
   ========================================== */
/* ==========================================
   FILTERS SIDEBAR (sin scroll interno)
   ========================================== */
.liesco-filters-sidebar {
  position: sticky;

  /* ✅ Se pega arriba sin quedar “muy abajo” */
  top: 24px;

  background: transparent;
  max-height: none;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;

  /* ✅ aseguramos que arranque arriba dentro del grid */
  align-self: start;
}



/* Header del Sidebar */
.liesco-filters-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-arena);
}

.liesco-filters-sidebar__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-gris-piedra);
  margin: 0;
}

.liesco-filters-sidebar__clear {
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}

.liesco-filters-sidebar__clear:hover {
  color: var(--color-terracota);
}

/* ==========================================
   FILTER SECTIONS
   ========================================== */
.liesco-filter-section {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(232, 220, 200, 0.4);
}

.liesco-filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.liesco-filter-section__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-gris-piedra);
  margin-bottom: 12px;
}

/* Vista Controls */
.liesco-view-controls {
  display: flex;
  gap: 8px;
}

.liesco-view-control {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-arena);
  border-radius: 2px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
  padding: 0;
}

.liesco-view-control:hover {
  border-color: var(--color-verde-oliva);
  color: var(--color-verde-oliva);
}

.liesco-view-control:focus {
  outline: 2px solid var(--color-verde-oliva);
  outline-offset: 2px;
}

.liesco-view-control.active {
  background: var(--color-verde-oliva);
  border-color: var(--color-verde-oliva);
  color: white;
}

.liesco-view-control svg {
  width: 18px;
  height: 18px;
}

/* Filter Options (Checkboxes) */
.liesco-filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.liesco-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--color-gris-piedra);
  transition: color 0.2s ease;
}

.liesco-filter-checkbox:hover {
  color: var(--color-verde-oliva);
}

.liesco-filter-checkbox input[type="checkbox"] {
  display: none;
}

.liesco-checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-arena);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.liesco-filter-checkbox input[type="checkbox"]:checked + .liesco-checkbox-custom {
  background: var(--color-verde-oliva);
  border-color: var(--color-verde-oliva);
}

.liesco-checkbox-check {
  display: none;
  stroke: white;
}

.liesco-filter-checkbox input[type="checkbox"]:checked + .liesco-checkbox-custom .liesco-checkbox-check {
  display: block;
}

/* Color Swatches */
.liesco-color-filters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.liesco-color-filter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.liesco-color-filter:hover {
  transform: scale(1.08);
}

.liesco-color-filter:focus {
  outline: 2px solid var(--color-verde-oliva);
  outline-offset: 2px;
}

.liesco-color-filter.is-active {
  border-color: var(--color-negro);
  box-shadow: 0 0 0 2px var(--color-lino-crudo), 0 0 0 4px var(--color-negro);
}

.liesco-color-filter:active {
  transform: scale(0.96);
}

/* Size Buttons */
.liesco-size-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.liesco-size-filter {
  padding: 8px 0;
  border: 1px solid var(--color-arena);
  border-radius: 2px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gris-piedra);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.liesco-size-filter:hover {
  border-color: var(--color-verde-oliva);
  color: var(--color-verde-oliva);
}

.liesco-size-filter:focus {
  outline: 2px solid var(--color-verde-oliva);
  outline-offset: 2px;
}

.liesco-size-filter.is-active {
  background: var(--color-verde-oliva);
  border-color: var(--color-verde-oliva);
  color: white;
}

.liesco-size-filter:active {
  transform: scale(0.98);
}

/* Price Inputs */
.liesco-price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  
  /* NUEVO: Prevenir overflow */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.liesco-price-input {
  padding: 8px 10px;
  border: 1px solid var(--color-arena);
  border-radius: 2px;
  background: white;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--color-gris-piedra);
  transition: border-color 0.2s ease;
  
  /* CRÍTICO: Prevenir overflow */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.liesco-price-input:focus {
  outline: none;
  border-color: var(--color-verde-oliva);
}

.liesco-price-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
  font-size: 12px;
}

/* ==========================================
   MAIN CONTENT AREA
   ========================================== */
.liesco-shop-main {
  min-width: 0;
}

/* Ordenar */
.liesco-shop-orderby {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.liesco-orderby {
  min-width: 200px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--color-arena);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--color-gris-piedra);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.liesco-orderby:hover,
.liesco-orderby:focus {
  outline: none;
  border-color: var(--color-verde-oliva);
}

/* ==========================================
   FILTER CHIPS
   ========================================== */
.liesco-shop-chips {
  margin-bottom: 22px;
  min-height: 32px;
}

.liesco-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.liesco-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--color-arena);
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--color-gris-piedra);
  transition: all 0.2s ease;
}

.liesco-chip:hover {
  border-color: var(--color-terracota);
  color: var(--color-terracota);
}

.liesco-chip__label {
  line-height: 1;
}

.liesco-chip__close {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.liesco-chip--clear {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
  text-decoration: underline;
  padding: 6px 4px;
}

.liesco-chip--clear:hover {
  color: var(--color-terracota);
}

/* ==========================================
   PRODUCTS GRID - RESPONSIVE OPTIMIZADO
   Prevención overflow + gaps fluidos
   ========================================== */
/* wrapper NO es grid */
.liesco-products-grid {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* CRÍTICO: prevenir scroll horizontal */
}

/* el grid real vive en ul.products */
.liesco-products-grid > ul.products,
.liesco-products-grid > ul.products.columns-4,
ul.products.columns-4 {
  display: grid !important;
  gap: var(--products-gap-desktop);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
}

/* Desktop por defecto: 4 columnas */
@media (min-width: 1024px) {
  .liesco-products-grid > ul.products,
  .liesco-products-grid[data-columns="4"] > ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--products-gap-desktop);
  }
}

/* Desktop XL: 6 columnas */
@media (min-width: 1400px) {
  .liesco-products-grid[data-columns="6"] > ul.products {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px 12px;
  }
}

/* Tablet: 3 columnas siempre - SELECTOR NUCLEAR */
@media (min-width: 768px) and (max-width: 1023px) {
  .liesco-products-grid > ul.products,
  .liesco-products-grid[data-columns="2"] > ul.products,
  .liesco-products-grid[data-columns="3"] > ul.products,
  .liesco-products-grid[data-columns="4"] > ul.products,
  .liesco-products-grid[data-columns="6"] > ul.products,
  .liesco-products-grid > ul.products.columns-1,
  .liesco-products-grid > ul.products.columns-2,
  .liesco-products-grid > ul.products.columns-3,
  .liesco-products-grid > ul.products.columns-4,
  .liesco-products-grid > ul.products.columns-5,
  .liesco-products-grid > ul.products.columns-6,
  .woocommerce .liesco-products-grid > ul.products,
  .woocommerce-page .liesco-products-grid > ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--products-gap-tablet);
  }
}

/* Mobile: 2 columnas - SELECTOR NUCLEAR */
@media (max-width: 767px) {
  /* Todos los selectores posibles para máxima especificidad */
  .liesco-products-grid > ul.products,
  .liesco-products-grid[data-columns="2"] > ul.products,
  .liesco-products-grid[data-columns="3"] > ul.products,
  .liesco-products-grid[data-columns="4"] > ul.products,
  .liesco-products-grid > ul.products.columns-1,
  .liesco-products-grid > ul.products.columns-2,
  .liesco-products-grid > ul.products.columns-3,
  .liesco-products-grid > ul.products.columns-4,
  .liesco-products-grid > ul.products.columns-5,
  .liesco-products-grid > ul.products.columns-6,
  .woocommerce .liesco-products-grid > ul.products,
  .woocommerce-page .liesco-products-grid > ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--products-gap-mobile);
    grid-auto-rows: auto;
  }
}

/* Mobile pequeño: gap mínimo */
@media (max-width: 374px) {
  .liesco-products-grid > ul.products {
    gap: 8px;
  }
}

/* Reset ULTRA-AGRESIVO de los li para prevenir primera fila vacía */
.liesco-products-grid > ul.products > li {
  display: block;
  position: relative;
  float: none;
  clear: none;
  width: auto !important;  /* WC inyecta style="width:Xpx" inline */
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
  outline: none;
}

/* Reset pseudo-elementos — selector explícito (compatible Safari < 17.2) */
.liesco-products-grid > ul.products > li::before,
.liesco-products-grid > ul.products > li::after {
  content: none !important;
  display: none !important;
}

/* Asegurar específicamente que el primer elemento esté en la posición correcta */
.liesco-products-grid > ul.products > li:first-child {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.liesco-products-grid > ul.products > li.product {
  grid-column: auto;
  grid-row: auto;
}

/* Densidad controlada por media queries arriba */


/* ==========================================
   EMPTY STATE
   ========================================== */
.liesco-shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px;
  text-align: center;
  grid-column: 1 / -1;
}

.liesco-shop-empty svg {
  stroke: var(--color-text-secondary);
  opacity: 0.3;
  margin-bottom: 24px;
}

.liesco-shop-empty__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--color-gris-piedra);
  margin: 0 0 12px 0;
}

.liesco-shop-empty__text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0 0 28px 0;
}

.liesco-shop-empty__btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-verde-oliva);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.liesco-shop-empty__btn:hover {
  background: #9A8B82;
  transform: translateY(-2px);
}

/* ==========================================
   MOBILE DRAWER
   ========================================== */
.liesco-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.liesco-mobile-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.liesco-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 360px;
  background: var(--color-lino-crudo);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 24px 24px;
  
  /* Smooth scrolling en iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  
  /* Sombra para profundidad */
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.liesco-mobile-drawer.is-open {
  transform: translateX(0);
}

/* Espaciado entre secciones dentro del drawer */
.liesco-mobile-drawer .liesco-filter-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
}

.liesco-mobile-apply {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, var(--color-lino-crudo) 70%, transparent);
  border-top: 1px solid var(--color-arena);
  margin: 0 -24px -24px;
  z-index: 10;
}

.liesco-mobile-apply-btn {
  width: 100%;
  padding: 16px;
  min-height: 52px;
  background: var(--color-negro);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.liesco-mobile-apply-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.liesco-mobile-apply-btn:hover {
  background: #1a1818;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* ==========================================
   RESPONSIVE BREAKPOINTS (GRID REAL EN ul.products)
   ========================================== */

/* Mobile: default 2 columnas */
@media (max-width: 767px) {
  .liesco-products-grid > ul.products,
  .liesco-products-grid > ul.products.columns-4,
  ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important;
  }

  /* Si el usuario eligió "6" en mobile → usamos 3 (más usable) */
  .liesco-products-grid[data-columns="6"] > ul.products,
  .liesco-products-grid[data-columns="6"] > ul.products.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
  }
}
/* Mobile + grid 6 (renderizado como 3): ocultar Quick Add (+) */
@media (max-width: 767px) {
  .liesco-products-grid[data-columns="6"] .liesco-product-card__quick-add,
  .liesco-products-grid[data-columns="6"] .liesco-product-card__quick-add-btn,
  .liesco-products-grid[data-columns="6"] .liesco-product-card__quick-add-circle,
  .liesco-products-grid[data-columns="6"] .liesco-product-card__quick-add-panel,
  .liesco-products-grid[data-columns="6"] [class*="quick-add"],
  .liesco-products-grid[data-columns="6"] [class*="quickAdd"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Tablet: 3 columnas */
@media (min-width: 768px) and (max-width: 1023px) {
  .liesco-products-grid > ul.products,
  .liesco-products-grid > ul.products.columns-4,
  ul.products.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 16px;
  }
}

/* Desktop: 4 columnas (default) */
@media (min-width: 1024px) {
  .liesco-products-grid > ul.products,
  .liesco-products-grid > ul.products.columns-4,
  ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px 18px;
  }

  .liesco-products-grid[data-columns="6"] > ul.products,
  .liesco-products-grid[data-columns="6"] > ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px 12px;
  }
}

/* Desktop XL: 6 columnas reales */
@media (min-width: 1400px) {
  .liesco-products-grid[data-columns="6"] > ul.products,
  .liesco-products-grid[data-columns="6"] > ul.products.columns-4 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px 12px;
  }
}


/* ==========================================
   RESPONSIVE: FILTERS
   Tap targets y grids optimizados por breakpoint
   ========================================== */

/* Mobile: 320px - 767px */
@media (max-width: 767px) {
  /* Color filters: 4 columnas (era 5) para más espacio */
  .liesco-color-filters {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  .liesco-color-filter {
    width: 40px;  /* Tap target apropiado (era 32px) */
    height: 40px;
    border-width: 2.5px;  /* Más visible en mobile */
  }
  
  .liesco-color-filter:active {
    transform: scale(0.95);  /* Feedback táctil */
  }
  
  /* Size filters: 2 columnas (era 3) para mejor legibilidad */
  .liesco-size-filters {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .liesco-size-filter {
    padding: 12px 0;  /* Tap target apropiado */
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
  }
  
  .liesco-size-filter:active {
    transform: scale(0.98);  /* Feedback táctil */
  }
  
  /* Price inputs: más espaciados y grandes */
  .liesco-price-inputs {
    gap: 10px;
  }
  
  .liesco-price-input {
    padding: 12px 12px;
    font-size: 14px;
    min-height: 44px;  /* Tap target */
  }
  
  /* Filter checkboxes: más espacio para tap */
  .liesco-filter-checkbox {
    padding: 10px 0;
    min-height: 44px;
    gap: 12px;
    font-size: 14px;
  }
  
  .liesco-checkbox-custom {
    width: 22px;  /* Más grande para mobile */
    height: 22px;
    border-width: 2px;
  }
  
  /* View controls: más grandes en mobile */
  .liesco-view-control {
    width: 44px;
    height: 44px;
  }
  
  .liesco-view-control svg {
    width: 20px;
    height: 20px;
  }
  
  /* Filter section labels: más visibles */
  .liesco-filter-section__label {
    font-size: 12px;
    margin-bottom: 14px;
  }
  
  /* Sidebar header en mobile drawer */
  .liesco-filters-sidebar__header {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  
  .liesco-filters-sidebar__title {
    font-size: 15px;
  }
  
  .liesco-filters-sidebar__clear {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 36px;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Color filters: mantener 5 columnas pero con más espacio */
  .liesco-color-filters {
    gap: 10px;
  }
  
  .liesco-color-filter {
    width: 36px;
    height: 36px;
  }
  
  /* Size filters: mantener 3 columnas */
  .liesco-size-filters {
    gap: 8px;
  }
  
  .liesco-size-filter {
    padding: 10px 0;
    min-height: 40px;
  }
  
  /* Checkboxes: ligero ajuste */
  .liesco-filter-checkbox {
    padding: 6px 0;
    min-height: 40px;
  }
  
  .liesco-checkbox-custom {
    width: 18px;
    height: 18px;
  }
}

/* Desktop: 1024px+ (mantiene valores originales) */
@media (min-width: 1024px) {
  /* Hover effects solo en desktop con mouse */
  .liesco-color-filter:hover {
    transform: scale(1.12);
  }
  
  .liesco-size-filter:hover {
    transform: translateY(-1px);
  }
  
  .liesco-filter-checkbox:hover {
    transform: translateX(2px);
  }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
  .liesco-shop-page {
    padding-top: 0; /* ✅ El navbar-spacer ya compensa la altura del navbar */
  }

  .liesco-shop-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Ocultar sidebar en mobile */
  .liesco-shop-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .liesco-filters-sidebar {
    display: none;
  }

  /* Mostrar toggle de filtros mobile */
  .liesco-mobile-filters-toggle {
    display: block;
    margin-top: 12px; /* Pequeño espacio después del spacer */
    margin-bottom: 16px; /* Espacio entre botón filtros y productos */
  }

  .liesco-shop-orderby {
    margin-bottom: 12px;
  }

  .liesco-orderby {
    width: 100%;
  }
  
  /* NUEVO: Ocultar botón de vista de 6 columnas en mobile */
  .liesco-view-control[data-grid="6"] {
    display: none !important;
  }
}

/* Mobile pequeño: padding mínimo para aprovechar espacio */
@media (max-width: 374px) {
  .liesco-shop-container {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .liesco-shop-page {
    padding-top: 0; /* El navbar-spacer ya compensa */
    padding-bottom: clamp(32px, 5vw, 48px);
  }
  
  .liesco-mobile-filters-toggle {
    margin-top: 8px; /* Menos espacio en pantallas muy pequeñas */
  }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1023px) {
  .liesco-shop-container {
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
  }
  
  /* NUEVO: Ocultar botón de vista de 6 columnas en tablet (usa 3 columnas fijas) */
  .liesco-view-control[data-grid="6"] {
    display: none !important;
  }
}

/* Desktop XL: un poquito más de aire lateral sin desperdiciar */
@media (min-width: 1600px) {
  :root {
    --liesco-container-pad: clamp(16px, 2.5vw, 64px);
  }
}

/* Hide WooCommerce default elements */
.woocommerce-result-count,
.woocommerce-ordering {
  display: none !important;
}

/* ==========================================
   WOOCOMMERCE OVERRIDES CRÍTICOS
   Prevenir que WooCommerce rompa el grid
   ========================================== */

/* Override de floats globales de WooCommerce */
.woocommerce ul.products,
.woocommerce-page ul.products {
  margin: 0;
  padding: 0;
  clear: both;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none;
  clear: none;
  margin: 0;
  width: auto !important;  /* WC inyecta style="width:Xpx" inline */
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

/* Body lock cuando drawer está abierto */
body.filters-open {
  overflow: hidden;
}

/* ==========================================
   FIXES ESPECÍFICOS
   ========================================== */

/* FIX #6: Ocultar chips de filtros (redundante con sidebar) */
.liesco-shop-chips {
  display: none !important;
}

@media (min-width: 1400px) {
  .liesco-filters-sidebar {
    padding-left: 0;
  }
}
@media (min-width: 1600px) {
  .liesco-filters-sidebar {
    padding-left: 0;
  }
}


/* FIX #2: Forzar grid 4 columnas por defecto si no tiene data-columns */
.liesco-products-grid:not([data-columns]) > ul.products,
.liesco-products-grid[data-columns=""] > ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* ==========================================
   OVERRIDE NUCLEAR DE WOOCOMMERCE
   WooCommerce calcula el grid en px, esto lo fuerza a fr
   ========================================== */

/* Fallback grid-template-columns para selectores que WC puede pesar */
.woocommerce ul.products.columns-4,
body.woocommerce ul.products.columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.liesco-products-grid[data-columns="4"] > ul.products.columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* SOLO desktop XL: 6 columnas reales (evita romper mobile) */
@media (min-width: 1400px) {
  .liesco-products-grid[data-columns="6"] > ul.products.columns-4 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}


/* Items: solo width necesita !important (inline style de WC) */
.woocommerce ul.products.columns-4 li.product,
body .liesco-products-grid > ul.products > li {
  width: auto !important;
  max-width: none;
  min-width: 0;
  flex-basis: auto;
}
/* ==========================================
   PAGINACIÓN — estilo LIESCO
   WooCommerce genera .woocommerce-pagination
   ========================================== */
.woocommerce-pagination {
  margin: 40px 0 16px;
  text-align: center;
}

.woocommerce-pagination ul {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-pagination li {
  display: flex;
}

/* Números y links */
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gris-piedra);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 0.2s ease;
  letter-spacing: 0;
}

.woocommerce-pagination a:hover {
  color: var(--color-negro);
  border-color: var(--color-arena);
  background: rgba(232, 220, 200, 0.3);
}

/* Página activa */
.woocommerce-pagination span.current {
  color: var(--color-blanco);
  background: var(--color-verde-oliva);
  border-color: var(--color-verde-oliva);
  font-weight: var(--font-weight-semibold);
}

/* Prev / Next — arrows */
.woocommerce-pagination .prev,
.woocommerce-pagination .next {
  width: auto;
  min-width: 36px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gris-piedra);
  border-color: var(--color-arena);
}

.woocommerce-pagination .prev:hover,
.woocommerce-pagination .next:hover {
  color: var(--color-negro);
  border-color: var(--color-verde-oliva);
  background: rgba(168, 169, 144, 0.08);
}

.woocommerce-pagination .prev:disabled,
.woocommerce-pagination .next:disabled {
  opacity: 0.3;
  pointer-events: none;
}

html, body {
  overflow-x: hidden;
}

.liesco-shop-page {
  overflow-x: hidden;
}

/* ==========================================
   ORDEN DENTRO DE FILTROS + TALLES EN MAYÚSCULA
   ========================================== */

/* El select de orden dentro del sidebar: full width */
.liesco-filters-sidebar .liesco-orderby {
  width: 100%;
  min-width: 0;     /* importante para que no rompa layout */
  display: block;
}

/* Talas en mayúscula (premium / prolijo) */
.liesco-size-filter {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}