/* Página de categoría (listado + filtros) */

.cat { padding-block: 16px 40px; }
.cat__crumbs { font-size: 12px; color: rgba(36,48,41,.6); margin-bottom: 10px; }
.cat__crumbs b { color: var(--green); }
.cat__head { margin-bottom: 14px; }
.cat__title { font-size: var(--fs-h2); color: var(--green); }
.cat__count { font-size: 13px; color: rgba(36,48,41,.6); margin-top: 2px; }

.cat__toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cat__filter-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: var(--cream); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: var(--r-md); }
.cat__sort { font-size: 12px; color: var(--ink); display: flex; gap: 6px; align-items: center; }
.cat__sort select { font: inherit; font-size: 13px; padding: 9px 10px; border-radius: var(--r-md); border: 1.5px solid rgba(59,91,68,.25); background: var(--card); color: var(--ink); }

.cat__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { background: var(--card); border: 1.5px solid rgba(59,91,68,.25); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; padding: 5px 6px 5px 12px; display: inline-flex; gap: 6px; align-items: center; }
.chip button { color: var(--green); font-weight: 800; font-size: 13px; width: 18px; height: 18px; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat__empty { color: rgba(36,48,41,.6); padding: 24px 0; }

/* ── Filtros ──────────────────────────────────────────────────────────────────
   Un grupo = una tarjeta, como el resto de la web. De entrada solo se abren Marca y
   Precio (ver rulos_render_filters_html): son por los que de verdad se busca; el resto
   son matices y abrirlos todos convertía el sidebar en un muro. */
.filters { position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 340px; background: var(--cream); z-index: 80; padding: 16px; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 50px rgba(36,48,41,.25); }
.filters.is-open { transform: none; }
.filters__backdrop { position: fixed; inset: 0; background: rgba(36,48,41,.45); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .25s; }
.filters__backdrop.is-open { opacity: 1; visibility: visible; }

.filters__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.filters__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 25px; color: var(--green); margin-right: auto; }
/* Contador de filtros activos: mostaza, como el resto de "atención" de la marca. */
.filters__badge { background: var(--gold); color: var(--ink); font-family: var(--font-ui); font-size: 13px; font-weight: 800; min-width: 22px; height: 22px; border-radius: var(--r-pill); display: grid; place-items: center; padding: 0 6px; }
/* display:grid pisa el atributo hidden, así que hay que anularlo a mano o se ve
   una pastilla mostaza vacía cuando no hay ningún filtro activo. */
.filters__badge[hidden] { display: none; }
.filters__clear { background: transparent; color: var(--green); border: 1.5px solid rgba(59,91,68,.3); border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; padding: 5px 12px; transition: background .15s ease, color .15s ease; }
.filters__clear:hover { background: var(--green); color: var(--cream); }
.filters__close { font-size: 18px; color: var(--ink); background: transparent; }

/* Grupo = tarjeta */
.fgroup { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 4px 18px 8px; margin-bottom: 12px; }
.fgroup__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: transparent; padding: 16px 0; font-family: var(--font-ui); font-size: 17px; font-weight: 800; color: var(--ink); cursor: pointer; }
/* Chevron en vez de +/−: gira al plegar, sin cambiar de carácter. */
.fgroup__sign { width: 8px; height: 8px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; flex: 0 0 auto; }
.fgroup:not(.is-open) .fgroup__sign { transform: rotate(-45deg); }
.fgroup__body { display: none; padding-bottom: 8px; }
.fgroup.is-open .fgroup__body { display: block; }

/* Opción: toda la fila es pulsable, no solo el cuadradito. */
.fopt { display: flex; align-items: center; gap: 11px; padding: 9px 8px; margin: 0 -8px; border-radius: var(--r-sm); font-size: 16px; cursor: pointer; transition: background .13s ease; }
.fopt:hover { background: var(--cream); }
.fopt input { position: absolute; opacity: 0; width: 0; height: 0; }   /* la casilla real, oculta pero accesible */
.fopt__box { width: 21px; height: 21px; flex: 0 0 auto; border-radius: 6px; border: 2px solid rgba(59,91,68,.35); background: #fff; position: relative; transition: background .13s ease, border-color .13s ease; }
.fopt__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform .13s ease; }
.fopt input:checked + .fopt__box { background: var(--green); border-color: var(--green); }
.fopt input:checked + .fopt__box::after { transform: rotate(45deg) scale(1); }
.fopt input:focus-visible + .fopt__box { outline: 3px solid var(--sea); outline-offset: 2px; }
.fopt__label { flex: 1 1 auto; }
.fopt input:checked ~ .fopt__label { font-weight: 700; color: var(--green); }
/* Nº de productos de la categoría en esa opción (no el global de la tienda). */
.fopt__count { font-size: 13px; font-weight: 700; color: rgba(36,48,41,.45); background: var(--cream); border-radius: var(--r-pill); padding: 2px 8px; flex: 0 0 auto; }
.fopt:hover .fopt__count { background: #fff; }

/* Listas largas (14 marcas): se recortan y se abren con "Ver más". */
.fgroup--long:not(.is-expanded) .fopt:nth-of-type(n+7) { display: none; }
.fgroup__more { background: transparent; color: var(--green); font-size: 14.5px; font-weight: 700; text-decoration: underline; padding: 6px 0 2px; }

@media (min-width: 768px) {
  .cat__filter-btn { display: none; }
  .filters__backdrop { display: none; }
  /* 280px y no 220: a 220 las tarjetas de filtro iban apretadas (nombre + contador en la
     misma línea) y se perdía justo el aire que hace que se vean limpias. La rejilla se
     corre a la derecha; con 1360px de contenedor, las tarjetas de producto siguen en ~320px. */
  .cat__layout { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: start; }
  /* sticky: bajas por 58 productos y los filtros siguen ahí. 96px = alto de la cabecera fija. */
  /* z-index: auto es OBLIGATORIO: en móvil este mismo bloque es un cajón con z-index 80,
     y ese 80 ganaba a la cabecera (50), así que el sidebar se pintaba ENCIMA del megamenú. */
  .filters { position: sticky; top: 96px; z-index: auto; transform: none; width: auto; max-width: none; box-shadow: none; padding: 0; background: transparent; overflow: visible; max-height: calc(100vh - 112px); overflow-y: auto; }
  .filters__close { display: none; }
  /* 3 columnas y no 4: con 4, las tarjetas volverían a ~250px y perderíamos justo lo
     que buscamos. Con 3 en 1360px la tarjeta mide ~340px, como las de Wild Balance. */
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ── Página de sección (Perros / Gatos) ── */
.seccion { padding-block: 16px 40px; }
.sec__crumbs { font-size: 12px; color: rgba(36,48,41,.6); margin-bottom: 10px; }
.sec__crumbs b { color: var(--green); }
.sec__title { font-size: var(--fs-h2); color: var(--green); margin-bottom: 16px; }
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* Tarjeta moderna: icono en pastilla + nombre, con elevación y sombra al hover. */
/* Tarjeta horizontal: icono a la izquierda, nombre al lado. Barra baja y compacta. */
.cat-tile { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid rgba(59,91,68,.10); border-radius: 14px; box-shadow: 0 2px 8px rgba(36,48,41,.06); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cat-tile__ic-wrap { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: rgba(93,139,78,.12); color: var(--green); display: grid; place-items: center; transition: background .18s ease, color .18s ease; }
/* El icono SVG se pinta con máscara para poder colorearlo con currentColor. */
.cat-tile__ic { width: 23px; height: 23px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.cat-tile__label { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; }
/* "Ver →" a la derecha del todo, aparece al hover. */
.cat-tile__go { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--coral); opacity: 0; transition: opacity .18s ease; }
@media (hover: hover) {
  .cat-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(36,48,41,.16); border-color: rgba(59,91,68,.28); }
  .cat-tile:hover .cat-tile__ic-wrap { background: var(--green); color: #fff; }
  .cat-tile:hover .cat-tile__go { opacity: 1; }
}
@media (min-width: 768px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } .cat-tile__label { font-size: 16px; } }

/* ── Banners de la página de categoría: estrella ancho + 2 cuadrados ── */
.cat-hero { display: flex; flex-direction: column; gap: 12px; }
.cat-hero--top { margin-bottom: 22px; }      /* banner principal: separado de las categorías */
.cat-hero--below { margin-top: 26px; }        /* ofertas+novedades: separados, debajo de las categorías */
.cat-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cat-banner { position: relative; display: block; overflow: hidden; border-radius: 16px; color: #fff; text-decoration: none; box-shadow: var(--shadow-card); background-size: cover; background-position: center; }
/* Banner principal: apaisado 2:1 (sube imagen 1200×600). */
.cat-banner--star { aspect-ratio: 2 / 1; background-image: linear-gradient(120deg, #3b5b44, #2f6f76); }
/* Ofertas y Novedades: cuadrados (sube imagen 1000×1000). */
.cat-hero__row .cat-banner { aspect-ratio: 1 / 1; }
.cat-banner--offer { background-image: linear-gradient(140deg, #ee7a4d, #d65f33); }
.cat-banner--news { background-image: linear-gradient(140deg, #ecb04a, #d2922c); }
/* "Plain" = imagen del cliente con su texto ya dentro: no overlay ni texto. */
.cat-banner--plain .cat-banner__ov, .cat-banner--plain .cat-banner__body { display: none; }
.cat-banner__ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(36,48,41,.55), rgba(36,48,41,0) 70%); }
.cat-banner__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px; }
.cat-banner__kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.cat-banner__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.12; }
.cat-banner--star .cat-banner__title { font-size: 28px; }
.cat-banner__cta { align-self: flex-start; margin-top: 8px; background: rgba(255,255,255,.95); color: var(--green); font-weight: 800; font-size: 13px; padding: 9px 16px; border-radius: 22px; }
.cat-banner__pct { position: absolute; top: 14px; right: 14px; z-index: 3; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 14px; padding: 5px 11px; border-radius: 8px; }
@media (max-width: 767px) {
  .cat-hero__row { grid-template-columns: 1fr; }
  .cat-banner--star { aspect-ratio: 16 / 9; }
}