/* Sydak Living — facetas de search_api/facets (DOCS/02 §6.15, §9.3).
   Markup real del módulo: div.facets-widget-{tipo} > ul > li.facet-item;
   el widget checkbox inserta por JS input.facets-checkbox + label. */

/* ——— Bloque de facetas en sidebar ——— */

.block-facets {
  margin-block-end: var(--space-7);
}

/* Heading del bloque/widget con trato eyebrow. Si la plantilla de bloque
   ya aplica .u-eyebrow, utilities.css produce el mismo resultado. */
.block-facets > h2,
.block-facets > h3,
.facets-widget-checkbox > h3,
.facets-widget-links > h3,
.facets-widget-dropdown > h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--ff-display);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-caps-2);
  text-transform: uppercase;
  color: var(--div-accent-strong);
}

/* ——— Lista fina ——— */

.facets-widget-checkbox ul,
.facets-widget-links ul,
ul.item-list__checkbox,
ul.item-list__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jerarquía anidada. */
.facets-widget-checkbox ul ul,
.facets-widget-links ul ul {
  padding-inline-start: var(--space-5);
}

li.facet-item {
  position: relative; /* ancla el input invisible del widget checkbox */
  margin: 0;
  padding-block: var(--space-2);
}

.facet-item a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--div-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.facet-item a:hover {
  color: var(--div-accent-strong);
}

.facet-item__count {
  font-size: var(--fs-label);
  font-variant-numeric: lining-nums;
  letter-spacing: normal;
  color: var(--div-ink-soft);
}

/* Marcador "(-)" de desactivación del módulo: accesible pero invisible. */
.facet-item__status {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
}

/* ——— Estado activo ——— */

.facet-item a.is-active,
.facet-item label.is-active {
  color: var(--div-accent-strong);
}

.facet-item a.is-active .facet-item__value {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--div-accent-soft);
  text-underline-offset: 0.3em;
}

/* ——— Checkbox custom (widget checkbox, transformado por JS) ——— */

/* El input nativo queda operativo (foco/AT) pero invisible. */
.facets-checkbox {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
}

.facets-checkbox + label {
  position: relative;
  display: inline-block;
  padding-inline-start: calc(1rem + var(--space-3));
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--div-ink);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.facets-checkbox + label:hover {
  color: var(--div-accent-strong);
}

.facets-checkbox + label::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.2em;
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid var(--div-line-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Tick dibujado con bordes rotados (los pseudo-elementos sobre <input>
   no son fiables; sobre <label> sí). */
.facets-checkbox + label::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  inset-block-start: calc(0.2em + 0.3125rem);
  inline-size: 0.5rem;
  block-size: 0.25rem;
  border-inline-start: 1.5px solid var(--div-bg);
  border-block-end: 1.5px solid var(--div-bg);
  transform: rotate(-45deg);
  opacity: 0;
}

.facets-checkbox:checked + label::before {
  border-color: var(--div-accent-strong);
  background: var(--div-accent-strong);
}

.facets-checkbox:checked + label::after {
  opacity: 1;
}

.facets-checkbox:focus-visible + label::before {
  outline: 2px solid var(--div-focus);
  outline-offset: 2px;
}

/* ——— Enlace "mostrar más" del soft limit ——— */

.facets-soft-limit-link {
  display: inline-block;
  margin-block-start: var(--space-3);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps-2);
  text-transform: uppercase;
  color: var(--div-accent-strong);
  text-decoration: none;
}

.facets-soft-limit-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}