/* Shop / Categorías (template-categorias.php + taxonomy-product_cat.php) */

.cat-hero {
  background-image: var(--cat-hero-image, url('../images/category-hero-products.png')), linear-gradient(to right, #f7f4fc, #f1ecf9);
  background-position: right center, center;
  background-size: auto 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.shop-layout { display: flex; gap: var(--sp-5); margin-top: var(--sp-5); margin-bottom: var(--sp-7); align-items: flex-start; }
.shop-sidebar { width: 280px; flex-shrink: 0; }
.sidebar-widget { background: #fff; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid #eee; margin-bottom: var(--sp-4); }
.sidebar-title { font-size: var(--fs-smd); font-weight: 700; color: var(--ink); margin-top: 0; margin-bottom: var(--sp-4); letter-spacing: 1px; }
.filter-group { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid #eee; }
.filter-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-title { font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.filter-title svg { transition: transform 0.3s ease; transform: rotate(180deg); width: 20px; height: 20px; fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.filter-title.is-collapsed svg { transform: rotate(0deg); }
.filter-options-wrapper { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease; }
.filter-options-wrapper.is-collapsed { grid-template-rows: 0fr; }
.filter-options { overflow: hidden; padding-top: 4px; }
.filter-label { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); color: var(--primary); font-size: var(--fs-smd); cursor: pointer; }
.filter-label input[type="checkbox"] { width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 4px; accent-color: var(--primary); }

/* Price range slider (antes inline en shop-layout.php) */
.dual-range-slider { position: relative; width: 100%; height: 4px; background: #e5e7eb; border-radius: 4px; margin-top: 15px; margin-bottom: 25px; }
.dual-range-slider input[type="range"] {
  position: absolute; width: 100%; height: 4px; top: -2px; pointer-events: none;
  -webkit-appearance: none; background: transparent; margin: 0; padding: 0; outline: none; z-index: 2;
}
.dual-range-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px;
  background: var(--primary, #5a1cdc); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.dual-range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px;
  background: var(--primary, #5a1cdc); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.help-box { background: var(--lavender); padding: var(--sp-4); border-radius: var(--r-md); margin-top: 0; }
.help-box-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 20px; }
.help-icon { color: var(--primary); width: 48px; height: 48px; flex-shrink: 0; }
.help-icon svg { width: 100%; height: 100%; }
.help-text { text-align: left; }
.help-text strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--fs-md); font-weight: 700; }
.help-text p { font-size: var(--fs-sm); color: var(--primary); margin: 0; line-height: 1.4; font-weight: 500; }
.help-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); width: 100%; padding: var(--sp-2); background: #fff; color: var(--primary); border: 1px solid rgba(50, 16, 185, 0.15); border-radius: var(--r-sm); font-weight: 600; cursor: pointer; transition: 0.3s; text-decoration: none; }
.help-btn:hover { background: var(--primary); color: #fff; }
.help-btn svg { width: 18px; height: 18px; fill: currentColor; }

.shop-main { flex-grow: 1; min-width: 0; transition: opacity 0.3s ease; }
.shop-main.is-loading { opacity: 0.5; pointer-events: none; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); background: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid #eee; }
.toolbar-results { color: var(--primary); font-size: var(--fs-smd); }
.toolbar-results strong { color: var(--ink); }
.toolbar-sort { display: flex; align-items: center; gap: var(--sp-3); }
.sort-rating { color: #f59e0b; font-weight: 600; font-size: var(--fs-smd); }
.sort-text { color: var(--primary); font-size: var(--fs-sm); }
.sort-select {
  padding: 8px 36px 8px 16px;
  border: 1px solid rgba(50, 16, 185, 0.15);
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--primary);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--white);
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233210b9%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px auto;
  box-shadow: 0 1px 3px rgba(50, 16, 185, 0.05);
}

.pagination { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-5); }
.page-btn, .pagination .page-numbers { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; background: #fff; border-radius: var(--r-sm); cursor: pointer; color: var(--ink); text-decoration: none; font-size: var(--fs-smd); }
.page-btn.active, .pagination .page-numbers.current { background: var(--primary); color: #fff; border-color: var(--primary); }