/* ── Variables ───────────────────────────────────────────── */

:root {

  --ks-terracota: #A46F64;

  --ks-marfil:    #F6F1EC;

  --ks-arena:     #D8C8BB;

  --ks-grafito:   #3A302C;

  --ks-taupe:     #8A7F79;

  --ks-rosa:      #E6D2CB;

  --ks-font:      'Gilroy', 'DM Sans', 'Inter', sans-serif;

  --ks-ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



/* ── Fix navbar mobile ancho completo ────────────────────── */

.pxl-header,

.pxl-header-wrap,

.header-wrap,

.header-inner {

  width: 100% !important;

  max-width: 100% !important;

  left: 0 !important;

  right: 0 !important;

  box-sizing: border-box !important;

}



/* ── Fix marquee del header ───────────────────────────────── */

.pxl-text-marquee {

  overflow: hidden !important;

}

/* Ocultar el track duplicado que el JS del tema apila debajo */

.pxl-text-marquee p.text-marquee-item.duplicated {

  display: none !important;

}



/* ── Reset de layout del tema ────────────────────────────── */

/* Elimina cualquier sidebar del tema en la página tienda */

.woocommerce .col-left,

.woocommerce .col2-set .col-1,

.pxl-sidebar-wrap,

.pxl-content-area.has-sidebar { float: none !important; width: 100% !important; }

body.page-id-5828 .pxl-sidebar { display: none !important; }



/* Fondo general */

.woocommerce, .woocommerce-page,

body.page-id-5828 { background: var(--ks-marfil) !important; }



/* ── Topbar personalizado ─────────────────────────────────

   Ocultamos el topbar nativo del tema si existe          */

.woocommerce-topbar { display: none !important; }



/* Nuestro topbar */

.ks-topbar {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 18px 0 20px;

  border-bottom: 1px solid var(--ks-arena);

  margin-bottom: 32px;

  flex-wrap: wrap;

  font-family: var(--ks-font);

}

.ks-topbar__count {

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--ks-taupe);

  flex: 1;

}

.ks-topbar__actions { display: flex; align-items: center; gap: 8px; }



/* Botón Filtros */

.ks-topbar__filter {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-family: var(--ks-font);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--ks-grafito);

  background: transparent;

  border: 1.5px solid var(--ks-arena);

  border-radius: 40px;

  padding: 9px 18px;

  cursor: pointer;

  transition: all 0.22s var(--ks-ease);

}

.ks-topbar__filter svg { width: 14px; height: 14px; stroke: var(--ks-terracota); fill: none; stroke-width: 1.8; stroke-linecap: round; }

.ks-topbar__filter:hover,

.ks-topbar__filter.is-active {

  background: var(--ks-grafito);

  border-color: var(--ks-grafito);

  color: var(--ks-marfil);

}

.ks-topbar__filter.is-active svg,

.ks-topbar__filter:hover svg { stroke: var(--ks-marfil); }



/* Grid switcher */

.ks-topbar__grid {

  display: flex; gap: 4px;

}

.ks-topbar__grid-btn {

  width: 34px; height: 34px;

  border: 1.5px solid var(--ks-arena);

  border-radius: 8px;

  background: transparent;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  color: var(--ks-taupe);

  transition: all 0.2s;

  padding: 0;

}

.ks-topbar__grid-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.ks-topbar__grid-btn:hover { border-color: var(--ks-terracota); color: var(--ks-terracota); }

.ks-topbar__grid-btn.is-active { background: var(--ks-grafito); border-color: var(--ks-grafito); color: var(--ks-marfil); }



/* ── Product grid ─────────────────────────────────────────── */

ul.products.columns-4,

ul.products.columns-3,

ul.products {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 20px !important;

  float: none !important;

  width: 100% !important;

}

body.ks-cols-2 ul.products.columns-4,

body.ks-cols-2 ul.products.columns-3,

body.ks-cols-2 ul.products { grid-template-columns: repeat(2, 1fr) !important; }

body.ks-cols-3 ul.products.columns-4,

body.ks-cols-3 ul.products.columns-3,

body.ks-cols-3 ul.products { grid-template-columns: repeat(3, 1fr) !important; }



/* Responsive — misma especificidad que la regla base */

@media (max-width: 1100px) {

  ul.products.columns-4,

  ul.products.columns-3,

  ul.products { grid-template-columns: repeat(3, 1fr) !important; }

}

@media (max-width: 768px) {

  ul.products.columns-4,

  ul.products.columns-3,

  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }



  /* Imagen más pequeña en mobile */

  ul.products li.product .product__featured,

  ul.products li.product .product__featured img,

  ul.products li.product img.wp-post-image,

  ul.products li.product .attachment-woocommerce_thumbnail {

    height: 160px !important;

  }



  /* Card padding compacto */

  ul.products li.product .product__content,

  ul.products li.product .woocommerce-loop-product__content {

    padding: 10px 12px 14px !important;

  }



  /* Nombre más pequeño */

  ul.products li.product .woocommerce-loop-product__title,

  ul.products li.product h2 {

    font-size: 12px !important;

    margin-bottom: 6px !important;

  }



  /* Precio más pequeño */

  ul.products li.product .price .woocommerce-Price-amount,

  ul.products li.product .price bdi {

    font-size: 13px !important;

  }



  /* Topbar compacto */

  .ks-topbar { padding: 14px 0 16px; margin-bottom: 20px; }

  .ks-topbar__count { font-size: 11px; }

}



/* ── Product card ─────────────────────────────────────────── */

ul.products li.product {

  background: #fff !important;

  border-radius: 14px !important;

  overflow: hidden !important;

  border: 1px solid rgba(216,200,187,0.4) !important;

  box-shadow: 0 2px 12px rgba(58,48,44,0.04) !important;

  display: flex !important;

  flex-direction: column !important;

  position: relative !important;

  margin: 0 !important;

  padding: 0 !important;

  float: none !important;

  width: 100% !important;

  min-width: 0 !important;

  transition: transform 0.3s var(--ks-ease), box-shadow 0.3s var(--ks-ease) !important;

}

ul.products li.product:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 16px 40px rgba(58,48,44,0.12) !important;

}



/* ── IMAGEN: altura fija + object-fit ───────────────────── */

/* Contenedor de imagen */

ul.products li.product .product__featured {

  display: flex !important;

  align-items: flex-end !important;

  justify-content: center !important;

  width: 100% !important;

  height: 260px !important;

  overflow: hidden !important;

  position: relative !important;

  background: var(--ks-marfil) !important;

  flex-shrink: 0 !important;

}

/* Link que envuelve la imagen (NO aplicarle height fija) */

ul.products li.product a.woocommerce-LoopProduct-link {

  display: block !important;

  height: auto !important;

}

/* La imagen en sí — contain para ver el producto completo */

ul.products li.product .product__featured img,

ul.products li.product img.wp-post-image,

ul.products li.product .attachment-woocommerce_thumbnail {

  width: 100% !important;

  height: 260px !important;

  object-fit: contain !important;

  object-position: center bottom !important;

  display: block !important;

  padding: 14px 10px 0 !important;

  transition: transform 0.5s var(--ks-ease) !important;

}

ul.products li.product:hover .product__featured img,

ul.products li.product:hover img.wp-post-image { transform: scale(1.04) translateY(-4px) !important; }



/* ── Ocultar swatches y variaciones en el loop ────────────

   Las cards no son el lugar para elegir color/talla       */

ul.products li.product .variations,

ul.products li.product .pxl-product-swatches,

ul.products li.product .pxl-swatch-list,

ul.products li.product .product-extra-link,

ul.products li.product form.cart,

ul.products li.product .woocommerce-variation-add-to-cart,

ul.products li.product table.variations {

  display: none !important;

}



/* Actions overlay */

ul.products li.product .product__actions {

  position: absolute !important;

  bottom: 0 !important; left: 0 !important; right: 0 !important;

  padding: 12px !important;

  display: flex !important; align-items: center !important;

  justify-content: center !important; gap: 8px !important;

  background: linear-gradient(to top, rgba(58,48,44,0.5), transparent) !important;

  opacity: 0 !important; transform: translateY(6px) !important;

  transition: opacity 0.25s var(--ks-ease), transform 0.25s var(--ks-ease) !important;

  pointer-events: none !important;

}

ul.products li.product:hover .product__actions {

  opacity: 1 !important; transform: translateY(0) !important;

  pointer-events: auto !important;

}



/* Botones de acción */

ul.products li.product .button--wishlist,

ul.products li.product .button--quickview,

ul.products li.product .button--compare {

  width: 36px !important; height: 36px !important; border-radius: 50% !important;

  background: rgba(246,241,236,0.92) !important; backdrop-filter: blur(6px) !important;

  border: none !important; display: inline-flex !important;

  align-items: center !important; justify-content: center !important;

  cursor: pointer !important; color: var(--ks-grafito) !important;

  transition: transform 0.2s !important;

}

ul.products li.product .button--cart,

ul.products li.product a.add_to_cart_button,

ul.products li.product a.ajax_add_to_cart {

  width: 42px !important; height: 42px !important; border-radius: 50% !important;

  background: var(--ks-terracota) !important; border: none !important;

  display: inline-flex !important; align-items: center !important;

  justify-content: center !important; cursor: pointer !important;

  color: var(--ks-marfil) !important; font-size: 0 !important;

  transition: background 0.2s, transform 0.2s !important;

  text-decoration: none !important;

}

ul.products li.product a.add_to_cart_button::after,

ul.products li.product a.ajax_add_to_cart::after {

  content: '＋';

  font-size: 20px !important;

  color: var(--ks-marfil) !important;

  line-height: 1 !important;

}

ul.products li.product .button--cart:hover,

ul.products li.product a.add_to_cart_button:hover {

  background: var(--ks-grafito) !important; transform: scale(1.08) !important;

}



/* Badge SALE / NUEVO */

ul.products li.product .product__label,

ul.products li.product .onsale,

ul.products li.product .pxl-label {

  position: absolute !important; top: 12px !important; left: 12px !important; z-index: 2 !important;

  font-family: var(--ks-font) !important; font-size: 10px !important; font-weight: 700 !important;

  letter-spacing: 0.1em !important; text-transform: uppercase !important;

  color: var(--ks-marfil) !important; background: var(--ks-terracota) !important;

  border-radius: 30px !important; padding: 4px 10px !important;

  border: none !important; line-height: 1.4 !important; min-height: auto !important;

  margin: 0 !important;

}



/* ── Content del card ─────────────────────────────────────── */

ul.products li.product .product__content,

ul.products li.product .woocommerce-loop-product__content {

  padding: 14px 16px 18px !important;

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

}



/* Nombre */

ul.products li.product .product__name a,

ul.products li.product .woocommerce-loop-product__title,

ul.products li.product h2 {

  font-family: var(--ks-font) !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1.35 !important;

  color: var(--ks-grafito) !important;

  text-decoration: none !important;

  display: block !important;

  margin: 0 0 8px !important;

  padding: 0 !important;

  transition: color 0.2s !important;

}

ul.products li.product h2 a:hover,

ul.products li.product .product__name a:hover { color: var(--ks-terracota) !important; }



/* Precio */

ul.products li.product .product__price,

ul.products li.product .price {

  font-family: var(--ks-font) !important;

  margin: 0 !important; padding: 0 !important;

  display: flex !important;

  align-items: baseline !important;

  gap: 6px !important;

  flex-wrap: wrap !important;

}

ul.products li.product .price .woocommerce-Price-amount,

ul.products li.product .price bdi {

  font-size: 15px !important;

  font-weight: 800 !important;

  letter-spacing: -0.02em !important;

  color: var(--ks-grafito) !important;

  font-family: var(--ks-font) !important;

}

ul.products li.product .price ins .woocommerce-Price-amount,

ul.products li.product .price ins bdi {

  color: var(--ks-terracota) !important;

  text-decoration: none !important;

}

ul.products li.product .price del .woocommerce-Price-amount,

ul.products li.product .price del bdi {

  font-size: 11px !important;

  font-weight: 400 !important;

  color: var(--ks-taupe) !important;

  opacity: 0.7 !important;

}



/* ── Paginación ───────────────────────────────────────────── */

.woocommerce-pagination,

nav.woocommerce-pagination {

  margin-top: 48px !important;

  display: flex !important;

  justify-content: center !important;

}

.woocommerce-pagination ul {

  list-style: none !important; margin: 0 !important; padding: 0 !important;

  display: flex !important; gap: 6px !important;

}

.woocommerce-pagination li { margin: 0 !important; }

.woocommerce-pagination .page-numbers,

.woocommerce-pagination a.page-numbers {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 40px !important; height: 40px !important; padding: 0 10px !important;

  font-family: var(--ks-font) !important;

  font-size: 13px !important; font-weight: 600 !important;

  color: var(--ks-taupe) !important;

  border: 1.5px solid var(--ks-arena) !important;

  border-radius: 10px !important;

  text-decoration: none !important;

  background: transparent !important;

  transition: all 0.2s !important;

}

.woocommerce-pagination .page-numbers:hover { border-color: var(--ks-terracota) !important; color: var(--ks-terracota) !important; }

.woocommerce-pagination span.current { background: var(--ks-grafito) !important; border-color: var(--ks-grafito) !important; color: var(--ks-marfil) !important; }

.woocommerce-pagination .dots { border-color: transparent !important; }



/* ══ DRAWER DE FILTROS ════════════════════════════════════ */

.ks-overlay {

  display: none; position: fixed; inset: 0;

  background: rgba(58,48,44,0.4);

  z-index: 9998; backdrop-filter: blur(2px);

  animation: ks-fade-in 0.25s ease;

}

.ks-overlay.is-open { display: block; }



.ks-drawer {

  position: fixed; top: 0; left: 0;

  width: 300px; max-width: 90vw;

  height: 100vh; overflow-y: auto;

  background: var(--ks-marfil);

  z-index: 9999;

  padding: 28px 24px 48px;

  transform: translateX(-100%);

  transition: transform 0.32s var(--ks-ease);

  box-shadow: 8px 0 40px rgba(58,48,44,0.15);

}

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



.ks-drawer__head {

  display: flex; align-items: center; justify-content: space-between;

  margin-bottom: 24px; padding-bottom: 16px;

  border-bottom: 1px solid var(--ks-arena);

}

.ks-drawer__title {

  font-family: var(--ks-font); font-size: 11px; font-weight: 700;

  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ks-grafito);

}

.ks-drawer__close {

  width: 30px; height: 30px; border-radius: 50%;

  border: 1.5px solid var(--ks-arena); background: transparent;

  cursor: pointer; display: flex; align-items: center; justify-content: center;

  color: var(--ks-taupe); transition: all 0.2s; padding: 0;

}

.ks-drawer__close svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.ks-drawer__close:hover { border-color: var(--ks-terracota); color: var(--ks-terracota); }



/* Sección de filtro */

.ks-f { margin-bottom: 20px; }

.ks-f__label {

  font-family: var(--ks-font); font-size: 10px; font-weight: 700;

  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ks-taupe);

  display: flex; align-items: center; justify-content: space-between;

  margin-bottom: 12px; cursor: pointer; user-select: none;

}

.ks-f__label svg { width: 10px; height: 10px; stroke: var(--ks-taupe); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s; }

.ks-f.collapsed .ks-f__label svg { transform: rotate(-90deg); }

.ks-f__body { transition: max-height 0.28s var(--ks-ease); overflow: hidden; }

.ks-f.collapsed .ks-f__body { max-height: 0 !important; }



.ks-f__list { display: flex; flex-direction: column; gap: 9px; }

.ks-f__item {

  display: flex; align-items: center; gap: 10px;

  cursor: pointer; font-family: var(--ks-font);

}

.ks-f__box {

  width: 17px; height: 17px;

  border: 1.5px solid var(--ks-arena); border-radius: 4px;

  flex-shrink: 0; display: flex; align-items: center; justify-content: center;

  transition: all 0.15s;

}

.ks-f__item.on .ks-f__box { background: var(--ks-terracota); border-color: var(--ks-terracota); }

.ks-f__item.on .ks-f__box::after {

  content: ''; width: 7px; height: 4px;

  border-left: 2px solid #fff; border-bottom: 2px solid #fff;

  transform: rotate(-45deg) translateY(-1px);

}

.ks-f__name { font-size: 13px; font-weight: 500; color: var(--ks-grafito); transition: color 0.15s; }

.ks-f__n { font-size: 10px; font-weight: 600; color: var(--ks-taupe); margin-left: auto; background: rgba(216,200,187,0.3); border-radius: 20px; padding: 2px 7px; }

.ks-f__item:hover .ks-f__name { color: var(--ks-terracota); }



.ks-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ks-chip {

  font-family: var(--ks-font); font-size: 11px; font-weight: 600;

  color: var(--ks-taupe); border: 1.5px solid var(--ks-arena);

  border-radius: 30px; padding: 5px 12px; cursor: pointer; transition: all 0.15s; user-select: none;

}

.ks-chip:hover, .ks-chip.on { border-color: var(--ks-terracota); color: var(--ks-terracota); background: rgba(164,111,100,0.07); }



.ks-sep { height: 1px; background: rgba(216,200,187,0.5); margin: 0 0 20px; }



.ks-reset {

  font-family: var(--ks-font); font-size: 11px; font-weight: 600;

  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ks-taupe);

  background: none; border: none; cursor: pointer;

  text-decoration: underline; text-decoration-color: var(--ks-arena);

  margin-top: 8px; transition: color 0.2s;

}

.ks-reset:hover { color: var(--ks-terracota); }



@keyframes ks-fade-in { from { opacity: 0; } to { opacity: 1; } }



.ks-search__input {

  width: 100%;

  font-family: var(--ks-font);

  font-size: 13px;

  color: var(--ks-grafito);

  background: #fff;

  border: 1.5px solid var(--ks-arena);

  border-radius: 10px;

  padding: 10px 14px;

  outline: none;

  box-sizing: border-box;

  transition: border-color .2s;

}

.ks-search__input:focus { border-color: var(--ks-terracota); }

.ks-search__input::placeholder { color: var(--ks-taupe); }



ul.products li.product.ks-hidden-product, body ul.products li.product.ks-hidden-product { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }

/* ── Añadidos del panel dinámico ─────────────────────────────────────────── */
/* Contador sin valor: no pintar la pastilla vacía. */
.ks-f__n:empty { display: none; }

/* Aviso cuando la combinación de filtros no deja ningún producto. */
.ks-noresults {
  grid-column: 1 / -1;
  width: 100%;
  margin: 40px 0 60px;
  text-align: center;
  font-family: var(--ks-font);
  font-size: 14px;
  color: var(--ks-taupe);
}