/* ============================================================================
   LIVE YOUR DREAM — WooCommerce · Archivo de producto (listado de categoría)
   RE-SKIN "Salomón": angular (radios 0), alto contraste B/N, tipografía
   condensada en MAYÚSCULAS para nav/kickers/titulares/CTA, separadores finos
   en lugar de tarjetas flotadas, teal (--accent) como acento PUNTUAL.
   Fuente: design/assets/explorations/02-listado-categoria-salomon-light.html
   Todo el markup cuelga del wrapper del tema: <main class="lyd-woo"><div class="lyd-container">.
   Tokens: assets/css/variables.css · base: assets/css/base.css. Solo light. Mobile-first.
   ============================================================================ */

.lyd-woo {
  --lyd-filters-w: 268px;   /* ancho del sidebar de filtros en desktop */
  --lyd-toolbar-h: 66px;    /* alto aprox. del toolbar sticky (para anclar chipsbar/aside) */
  --lyd-sticky-top: var(--topnav-h, 72px);
}

/* ============================================================================
   1. Breadcrumb  (salida de woocommerce_breadcrumb())
   ============================================================================ */
.lyd-breadcrumb {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}
.lyd-woo .woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.lyd-woo .woocommerce-breadcrumb a { color: var(--text-muted); transition: color 160ms ease; }
.lyd-woo .woocommerce-breadcrumb a:hover { color: var(--text-primary); }
.lyd-woo .woocommerce-breadcrumb > *:last-child { color: var(--text-primary); font-weight: var(--fw-bold); }
.lyd-woo .woocommerce-breadcrumb .lyd-breadcrumb__sep { color: var(--text-tertiary); font-weight: var(--fw-medium); }

/* ============================================================================
   2. Cabecera de categoría
   ============================================================================ */
.lyd-cathead { padding-bottom: var(--space-6); }
.lyd-cathead__inner { display: flex; flex-direction: column; gap: var(--space-4); }
.lyd-cathead__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.lyd-cathead__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  color: var(--text-primary);
}
.lyd-cathead__kicker::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--accent);
}
.lyd-cathead__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 0.92;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  color: var(--text-primary);
}
.lyd-cathead__count {
  font-size: var(--text-body);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  margin: var(--space-3) 0 0;
}
.lyd-cathead__count strong { color: var(--text-primary); font-weight: var(--fw-bold); }
.lyd-cathead__lead {
  font-size: var(--text-body);
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0;
}
.lyd-cathead__lead > * { margin: 0; }

/* Subcategorías: chips rectangulares con scroll horizontal */
.lyd-subcats {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: var(--space-2) 0 var(--space-1);
  scrollbar-width: none;
}
.lyd-subcats::-webkit-scrollbar { display: none; }
.lyd-subcat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 16px;
  border-radius: 0;
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.lyd-subcat:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.lyd-subcat.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}
.lyd-subcat__count {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.lyd-subcat.is-active .lyd-subcat__count { color: rgba(255, 255, 255, 0.7); }

/* ============================================================================
   3. Toolbar (contador + filtros + orden) — sticky bajo el topnav
   ============================================================================ */
.lyd-toolbar {
  position: sticky;
  top: var(--lyd-sticky-top);
  z-index: 80;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) 0;
}
.lyd-toolbar__row { display: flex; align-items: center; gap: var(--space-3); }
.lyd-toolbar__count {
  display: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}
.lyd-toolbar__count strong { color: var(--text-primary); font-weight: var(--fw-bold); }
/* Reusa la salida nativa de woocommerce_result_count() como contador */
.lyd-woo .lyd-toolbar__count .woocommerce-result-count { margin: 0; font: inherit; color: inherit; }
.lyd-toolbar__actions { display: flex; align-items: center; gap: 2px; flex: 1; }
.lyd-toolbar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 0;
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.lyd-toolbar__btn:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.lyd-toolbar__btn svg { width: 18px; height: 18px; stroke-width: 1.6; }
.lyd-toolbar__btn-sortval { font-weight: var(--fw-medium); color: var(--text-muted); }
.lyd-toolbar__btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
/* Botón "Filtros" (móvil): siempre invertido negro (acción principal, no teal) */
.lyd-toolbar__btn--filters { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.lyd-toolbar__btn--filters:hover { background: #000000; border-color: #000000; color: #ffffff; }
.lyd-toolbar__btn--filters .lyd-toolbar__btn-count { background: #ffffff; color: var(--ink); }

/* Orden nativo de Woo (woocommerce_catalog_ordering) */
.lyd-toolbar__ordering { flex: 1; margin: 0; }
.lyd-woo .lyd-toolbar__ordering .orderby,
.lyd-woo form.woocommerce-ordering select.orderby {
  width: 100%;
  min-height: 44px;
  padding: 8px 34px 8px 14px;
  border: 1px solid var(--border-default);
  border-radius: 0;
  background: var(--bg-base);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.lyd-woo .lyd-toolbar__ordering .orderby:focus { outline: none; border-color: var(--ink); box-shadow: var(--shadow-focus); }

@media (min-width: 1024px) {
  .lyd-toolbar__count { display: block; flex: 0 0 auto; margin-right: auto; }
  .lyd-toolbar__actions { flex: 0 0 auto; gap: var(--space-2); }
  .lyd-toolbar__btn { flex: 0 0 auto; }
  .lyd-toolbar__ordering { flex: 0 0 auto; }
  .lyd-woo .lyd-toolbar__ordering .orderby { min-width: 220px; }
  /* En desktop los filtros viven en el sidebar; se ocultan botón filtros y sort-sheet trigger */
  .lyd-toolbar__btn--filters,
  .lyd-toolbar__btn--sort { display: none; }
}
@media (max-width: 1023px) {
  /* En móvil/tablet el select nativo se oculta: se usa el bottom-sheet de orden */
  .lyd-toolbar__ordering { display: none; }
}

/* ============================================================================
   4. Chipsbar (filtros activos) — angular, monocromo
   ============================================================================ */
.lyd-chipsbar {
  position: sticky;
  top: calc(var(--lyd-sticky-top) + var(--lyd-toolbar-h));
  z-index: 75;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) 0;
}
.lyd-chipsbar__inner { display: flex; align-items: center; gap: var(--space-3); }
.lyd-chipsbar__title {
  display: none;
  flex: 0 0 auto;
  padding-right: var(--space-3);
  border-right: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.lyd-chipsbar__title-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  margin-left: var(--space-2);
  border-radius: 0;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.lyd-chipsbar__list {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
}
.lyd-chipsbar__list::-webkit-scrollbar { display: none; }
.lyd-chip-active {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 6px 6px 12px;
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.lyd-chip-active:hover { background: var(--ink); color: #ffffff; }
.lyd-chip-active__label { color: var(--text-muted); font-weight: var(--fw-medium); }
.lyd-chip-active:hover .lyd-chip-active__label { color: rgba(255, 255, 255, 0.7); }
.lyd-chip-active__value { font-weight: var(--fw-bold); }
.lyd-chip-active__swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 0;
  border: 1px solid var(--border-default);
  box-shadow: inset 0 0 0 1px #ffffff;
  margin-right: 2px;
}
.lyd-chip-active__close {
  width: 22px; height: 22px;
  border-radius: 0;
  background: var(--bg-subtle);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease;
}
.lyd-chip-active:hover .lyd-chip-active__close { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
.lyd-chip-active__close svg { width: 12px; height: 12px; stroke-width: 2.4; }
.lyd-chipsbar__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 0;
  border: 1px dashed var(--border-default);
  background: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.lyd-chipsbar__clear:hover { background: var(--bg-sunken); border-color: var(--border-strong); color: var(--text-primary); }
.lyd-chipsbar__clear svg { width: 14px; height: 14px; stroke-width: 2; }
@media (min-width: 768px) {
  .lyd-chipsbar__title { display: inline-flex; align-items: center; }
}

/* ============================================================================
   5. Layout del listado (sidebar + grid)
   ============================================================================ */
.lyd-listing { padding: var(--space-6) 0 var(--space-16); }
.lyd-listing__grid { display: block; }
.lyd-listing__main { min-width: 0; }
@media (min-width: 1024px) {
  .lyd-listing__grid {
    display: grid;
    grid-template-columns: var(--lyd-filters-w) 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

/* ============================================================================
   6. Sidebar de filtros (desktop) + grupos (compartidos con bottom-sheet)
   ============================================================================ */
.lyd-filters { display: none; }
@media (min-width: 1024px) {
  .lyd-filters {
    display: block;
    position: sticky;
    top: calc(var(--lyd-sticky-top) + var(--lyd-toolbar-h) + var(--space-4));
    max-height: calc(100vh - var(--lyd-sticky-top) - var(--lyd-toolbar-h) - var(--space-8));
    overflow-y: auto;
    padding-right: var(--space-6);
    border-right: 1px solid var(--border-subtle);
  }
  .lyd-filters::-webkit-scrollbar { width: 6px; }
  .lyd-filters::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 0; }
}
.lyd-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: var(--space-2);
}
.lyd-filters__title {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.lyd-filters__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  margin-left: var(--space-2);
  border-radius: 0;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.lyd-filters__clear {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}
.lyd-filters__clear:hover { color: var(--accent-on); border-bottom-color: var(--accent); }

/* Grupo de filtro (<details>) */
.lyd-fgroup { border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) 0; }
.lyd-fgroup:first-of-type { padding-top: 0; }
.lyd-fgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.lyd-fgroup__head::-webkit-details-marker { display: none; }
.lyd-fgroup__head .lyd-fgroup__chev {
  width: 18px; height: 18px;
  stroke-width: 2;
  transition: transform 200ms ease;
  flex: 0 0 auto;
}
.lyd-fgroup[open] .lyd-fgroup__head .lyd-fgroup__chev { transform: rotate(180deg); }
.lyd-fgroup__meta { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.lyd-fgroup__hint {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.lyd-fgroup__body {
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Checkbox row (marca, género, disponibilidad, genérico) — enlace real de layered nav */
.lyd-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  min-height: 32px;
  color: inherit;
}
.lyd-check__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.lyd-check__box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-default);
  border-radius: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  transition: background 180ms ease, border-color 180ms ease;
}
.lyd-check__box svg { width: 12px; height: 12px; stroke-width: 3; color: #ffffff; opacity: 0; transition: opacity 120ms ease; }
.lyd-check.is-active .lyd-check__box { background: var(--ink); border-color: var(--ink); }
.lyd-check.is-active .lyd-check__box svg { opacity: 1; }
.lyd-check__count { font-size: var(--text-micro); color: var(--text-muted); font-weight: var(--fw-medium); }
.lyd-filters__more {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}
.lyd-filters__more:hover { color: var(--accent-on); border-bottom-color: var(--accent); }

/* Pills (tallas) — cuadradas, activo negro */
.lyd-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lyd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border-radius: 0;
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.lyd-pill:hover { border-color: var(--border-strong); }
.lyd-pill.is-active { background: var(--ink); border-color: var(--ink); color: #ffffff; }

/* Swatches (color) — cuadrados, activo con anillo negro + halo teal */
.lyd-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lyd-swatch {
  width: 32px; height: 32px;
  border-radius: 0;
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 2px #ffffff;
  transition: transform 180ms ease, border-color 180ms ease;
}
.lyd-swatch:hover { transform: scale(1.06); }
.lyd-swatch.is-active { border-color: var(--ink); transform: scale(1.06); }
.lyd-swatch.is-active::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 0;
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Rango de precio (form real: min_price / max_price) — negro */
.lyd-price-range { padding: var(--space-3) 0; }
.lyd-price-range__track { position: relative; height: 3px; background: var(--bg-sunken); border-radius: 0; }
.lyd-price-range__fill { position: absolute; inset: 0 25% 0 12%; background: var(--ink); border-radius: 0; }
.lyd-price-range__thumb {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--ink);
  border: 2px solid var(--ink);
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.lyd-price-range__thumb--min { left: 12%; }
.lyd-price-range__thumb--max { left: 75%; }
.lyd-price-range__inputs { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.lyd-price-range__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 11px 12px;
  border: 1px solid var(--border-default);
  border-radius: 0;
  background: var(--bg-base);
  font-size: var(--text-small);
}
.lyd-price-range__input:focus-within { border-color: var(--ink); }
.lyd-price-range__input span { color: var(--text-muted); font-size: var(--text-micro); }
.lyd-price-range__input input {
  flex: 1; width: 100%;
  border: 0; background: transparent;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-size: var(--text-body);
  min-width: 0;
}
.lyd-price-range__input input:focus { outline: none; }
.lyd-price-range__apply { margin-top: var(--space-3); }

/* Switch (toggle) — track negro al activar */
.lyd-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  min-height: 32px;
}
.lyd-switch__label { font-size: var(--text-small); color: var(--text-primary); font-weight: var(--fw-medium); }
.lyd-switch__track {
  width: 40px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  position: relative;
  flex: 0 0 auto;
  transition: background 180ms ease;
}
.lyd-switch__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-xs);
  transition: transform 180ms ease;
}
.lyd-switch input { display: none; }
.lyd-switch input:checked ~ .lyd-switch__track { background: var(--ink); }
.lyd-switch input:checked ~ .lyd-switch__track::after { transform: translateX(18px); }

/* ============================================================================
   7. Grid de productos (ul.products de Woo) + card (li.product / .lyd-card)
   Look Salomón: sin borde/sombra; separación por líneas finas (gap sobre fondo).
   ============================================================================ */
.lyd-woo ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  background: var(--bg-base);
}
.lyd-woo ul.products::before,
.lyd-woo ul.products::after { content: none; }
@media (min-width: 768px)  { .lyd-woo ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .lyd-woo ul.products { grid-template-columns: repeat(4, 1fr); } }

.lyd-woo ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  background: var(--bg-base);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.lyd-woo ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.lyd-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-base);
  overflow: hidden;
  display: block;
}
.lyd-card__media-link { display: block; width: 100%; height: 100%; }
.lyd-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}
.lyd-woo ul.products li.product:hover .lyd-card__media img { transform: scale(1.05); }

/* Badges: rectangulares, condensados en mayúsculas (colores desde base.css) */
.lyd-card__badges {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.lyd-card__badges .lyd-badge {
  border-radius: 0;
  padding: 5px 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Favorito (solo-visual): cuadrado, aparece en hover */
.lyd-card__fav {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 38px; height: 38px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 180ms ease, color 160ms ease, background 160ms ease;
}
.lyd-woo ul.products li.product:hover .lyd-card__fav { opacity: 1; }
.lyd-card__fav:hover { color: var(--ink); background: #ffffff; }
.lyd-card__fav svg { width: 18px; height: 18px; stroke-width: 1.6; }
/* El fav de productos agotados (avisarme) sigue visible siempre */
.lyd-woo ul.products li.product.outofstock .lyd-card__fav { opacity: 1; }
@media (hover: none) {
  .lyd-card__fav { opacity: 1; }
}

/* Overlay agotado */
.lyd-woo ul.products li.product.outofstock .lyd-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 1;
}

/* Quick-add: barra pegada al borde inferior de la imagen (envuelve el add-to-cart AJAX de Woo) */
.lyd-card__quickadd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 200ms ease, transform 200ms ease;
}
.lyd-woo ul.products li.product .lyd-card__quickadd a.button,
.lyd-woo ul.products li.product .lyd-card__quickadd a.add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  background: var(--ink);
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: background 180ms ease, color 180ms ease;
}
.lyd-woo ul.products li.product .lyd-card__quickadd a.button:hover,
.lyd-woo ul.products li.product .lyd-card__quickadd a.add_to_cart_button:hover {
  background: var(--accent);
  color: var(--accent-on);
}
.lyd-woo ul.products li.product .lyd-card__quickadd a.added { display: none; }
.lyd-woo ul.products li.product .lyd-card__quickadd a.loading { opacity: 0.7; }
.lyd-woo ul.products li.product .lyd-card__quickadd .added_to_cart { display: none; }
@media (hover: hover) {
  .lyd-woo ul.products li.product:hover .lyd-card__quickadd { opacity: 1; transform: translateY(0); }
}
/* Touch: sin hover, la barra queda siempre visible */
@media (hover: none) {
  .lyd-card__quickadd { opacity: 1; transform: none; }
}

.lyd-card__body {
  padding: var(--space-4) var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.lyd-card__brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.lyd-card__name {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 160ms ease;
}
.lyd-card__name:hover { color: var(--text-secondary); }
.lyd-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
/* Precio: reutiliza .lyd-price de base.css, en columna dentro de la card. Rebaja = negro */
.lyd-card__bottom .lyd-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.lyd-card__bottom .lyd-price__now { font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--price-text); line-height: 1.1; }
.lyd-card__bottom .lyd-price--sale .lyd-price__now { color: var(--price-discount); }
.lyd-card__bottom .lyd-price__was { margin-left: 0; font-size: 0.8125rem; color: var(--price-strike); text-decoration: line-through; }
/* Precio nativo de Woo por si se usa get_price_html() como fallback */
.lyd-card__bottom .lyd-price .price,
.lyd-card__bottom .lyd-price ins { font-weight: var(--fw-bold); text-decoration: none; }
.lyd-card__bottom .lyd-price del { color: var(--price-strike); font-size: var(--text-small); }

.lyd-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}
.lyd-card__rating svg { width: 14px; height: 14px; color: var(--rating-filled); }
.lyd-woo ul.products li.product.outofstock .lyd-card__bottom .lyd-price__now,
.lyd-woo ul.products li.product.outofstock .lyd-card__bottom .lyd-price .price { color: var(--text-muted); }

/* ============================================================================
   8. Paginación (woocommerce_pagination → ul.page-numbers) + nota de progreso
   ============================================================================ */
.lyd-woo .woocommerce-pagination {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}
.lyd-woo .woocommerce-pagination ul.page-numbers {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}
.lyd-woo .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
.lyd-woo .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: var(--bg-base);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.lyd-woo .woocommerce-pagination a.page-numbers:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.lyd-woo .woocommerce-pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}
.lyd-woo .woocommerce-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Nota de progreso del listado (visual, encima de la paginación) */
.lyd-pagination-hint {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.lyd-pagination-hint__text { font-size: var(--text-small); color: var(--text-muted); margin: 0; }
.lyd-pagination-hint__text strong { color: var(--text-primary); font-weight: var(--fw-bold); }
.lyd-pagination-hint__bar { width: 100%; max-width: 360px; height: 3px; background: var(--bg-sunken); border-radius: 0; overflow: hidden; }
.lyd-pagination-hint__fill { height: 100%; background: var(--ink); border-radius: 0; }

/* ============================================================================
   9. Estado vacío (no-products-found override → .lyd-empty)
   ============================================================================ */
.lyd-woo .woocommerce-no-products-found { padding: var(--space-4) 0; }

/* ============================================================================
   10. Bottom-sheets (móvil): filtros y orden — angulares
   ============================================================================ */
.lyd-sheet { position: fixed; inset: 0; z-index: 200; display: none; }
.lyd-sheet.is-open { display: block; }
.lyd-sheet__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.55); border: 0; width: 100%; }
.lyd-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  background: var(--bg-base);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(17, 17, 17, 0.18);
}
.lyd-sheet__handle { width: 40px; height: 3px; border-radius: 0; background: var(--border-default); margin: var(--space-3) auto var(--space-2); }
.lyd-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-strong);
}
.lyd-sheet__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
}
.lyd-sheet__close {
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}
.lyd-sheet__close:hover { background: var(--bg-elevated); }
.lyd-sheet__close svg { width: 20px; height: 20px; stroke-width: 1.8; }
.lyd-sheet__body { padding: var(--space-2) var(--space-5) var(--space-5); overflow-y: auto; flex: 1; }
.lyd-sheet__foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.lyd-sheet__foot .lyd-btn { flex: 1; }
.lyd-sheet__foot .lyd-btn--ghost { flex: 0 0 auto; }
@media (min-width: 1024px) {
  .lyd-sheet { display: none !important; } /* En desktop los filtros/orden viven en sidebar + toolbar */
}

/* Lista de orden (sheet de ordenación) — enlaces reales ?orderby= */
.lyd-sortlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lyd-sortlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-body);
  color: var(--text-primary);
}
.lyd-sortlist__item:last-child { border-bottom: 0; }
.lyd-sortlist__item.is-active { font-weight: var(--fw-bold); }
.lyd-sortlist__radio {
  width: 22px; height: 22px;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.lyd-sortlist__item.is-active .lyd-sortlist__radio { border-color: var(--ink); }
.lyd-sortlist__item.is-active .lyd-sortlist__radio::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
}