/* ============================================================
   inloff — Página de categoría CRO
   Tokens de marca (alineados con el resto del theme):
     Navy:  #1B2B4B
     Beige: #F5EFE7
     Gold:  #C8A464
     Coral: #E2725B (acento sale)
   ============================================================ */

:root {
    --ic-navy: #1B2B4B;
    --ic-navy-soft: #2C3E63;
    --ic-beige: #F5EFE7;
    --ic-beige-light: #FAF6EF;
    --ic-gold: #C8A464;
    --ic-gold-text: #7A5C3E; /* bronce oscuro AA (~4.6:1 sobre blanco) para el oro usado como TEXTO pequeño */
    --ic-coral: #C2410C;
    --ic-green: #15803D;
    --ic-ink: #1B2B4B;
    --ic-ink-soft: #5F6979; /* a11y: 4,9:1 sobre el beige #F5EFE7 (antes #6B7587 = 4,07:1) */
    --ic-line: #E8E2D6;
    --ic-line-soft: #F0EBE0;
    --ic-white: #FFFFFF;
    --ic-radius-sm: 6px;
    --ic-radius-md: 10px;
    --ic-radius-lg: 14px;
    --ic-radius-pill: 999px;
    --ic-shadow-sm: 0 1px 2px rgba(27,43,75,.06);
    --ic-shadow-md: 0 4px 16px rgba(27,43,75,.08);
    --ic-shadow-lg: 0 12px 36px rgba(27,43,75,.12);
    --ic-ease: cubic-bezier(.4,0,.2,1);
}

/* Reset suave dentro del main.
   Solo list-style aquí — el margin/padding lo controla cada __list
   específico para no perder centrado max-width via especificidad. */
.inloff-cat,
.inloff-cat * { box-sizing: border-box; }
.inloff-cat { color: var(--ic-ink); font-family: inherit; }
.inloff-cat ul[role="list"],
.inloff-cat ol[role="list"] { list-style: none; }

/* Ocultar elementos Flatsome que pueden colarse fuera del layout */
.inloff-category-page .page-title-inner,
.inloff-category-page .shop-page-title,
.inloff-category-page .woocommerce-products-header,
.inloff-category-page .term-description,
.inloff-category-page .woocommerce-breadcrumb {
    display: none !important;
}

/* ============================================================
   1. HERO
   ============================================================ */

.inloff-cat-hero {
    position: relative;
    width: 100%;
    min-height: 360px;
    overflow: hidden;
    background: var(--ic-navy);
    color: var(--ic-white);
}
.inloff-cat-hero--gradient {
    background: linear-gradient(135deg, var(--ic-navy) 0%, var(--ic-navy-soft) 100%);
}
.inloff-cat-hero__picture,
.inloff-cat-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.inloff-cat-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(27,43,75,.15) 0%, rgba(27,43,75,.65) 100%);
}
.inloff-cat-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 24px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
}
.inloff-cat-hero__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.78);
}
.inloff-cat-hero__crumbs li:not(:last-child)::after {
    content: "›";
    margin-left: 6px;
    opacity: .5;
}
.inloff-cat-hero__crumbs a { color: inherit; text-decoration: none; }
.inloff-cat-hero__crumbs a:hover { color: var(--ic-white); }
.inloff-cat-hero__crumbs [aria-current="page"] { color: var(--ic-white); font-weight: 600; }
.inloff-cat-hero__overline {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--ic-gold);
    font-weight: 600;
}
.inloff-cat-hero__title {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    color: var(--ic-white);
}
.inloff-cat-hero__sub {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 580px;
    color: rgba(255,255,255,.92);
}
.inloff-cat-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* O2.12 — Trust pills hero PLP: fondo sólido navy 70% (sin backdrop-filter,
   ADR-077 prohíbe blur en scrolling content por su coste GPU). Contraste AA
   garantizado del texto blanco sobre el navy semi-transparente, sea cual
   sea la zona de la foto. */
.inloff-cat-hero__pills li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background-color: rgba(19, 26, 46, 0.7);
    border-radius: var(--ic-radius-pill);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ic-white);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 1px 3px rgba(19, 26, 46, 0.18);
}
.inloff-cat-hero__pills svg { flex-shrink: 0; }

/* ── Hero de RESULTADOS DE BÚSQUEDA ── */
.inloff-cat-hero__q { color: var(--inloff-heart, #C5A184); font-style: italic; }
.inloff-cat-hero__searchcats {
    list-style: none; margin: 22px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.inloff-cat-hero__searchcats a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background-color: rgba(19, 26, 46, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ic-radius-pill);
    color: var(--ic-white); font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
.inloff-cat-hero__searchcats a:hover { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.inloff-cat-hero__searchcats a span {
    font-size: 11px; color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.12); border-radius: 999px;
    padding: 1px 7px; font-variant-numeric: tabular-nums;
}

/* Hero de BÚSQUEDA: compacto (sin imagen, no debe sepultar el grid bajo el
   pliegue) y alineado arriba en vez de al pie como el hero de categoría.
   Doble clase (.inloff-cat-hero.inloff-cat-hero--search) para ganar en
   especificidad a las media queries de `.inloff-cat-hero { min-height }`. */
.inloff-cat-hero.inloff-cat-hero--search { min-height: 0; }
.inloff-cat-hero--search .inloff-cat-hero__inner {
    min-height: 0;
    justify-content: flex-start;
    padding: 40px 24px 34px;
}
@media (min-width: 768px) {
    .inloff-cat-hero.inloff-cat-hero--search { min-height: 0; }
    .inloff-cat-hero--search .inloff-cat-hero__inner { min-height: 0; padding: 52px 32px 40px; }
}
@media (min-width: 1024px) {
    .inloff-cat-hero.inloff-cat-hero--search { min-height: 0; }
}
.inloff-cat-hero--search .inloff-cat-hero__pills { margin-top: 6px; }
.inloff-cat-hero--search .inloff-cat-hero__searchcats { margin-top: 18px; }

/* "¿Quizá quisiste decir…?" — aflora la corrección fuzzy */
.inloff-cat-hero__dym {
    margin: -6px 0 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
}
.inloff-cat-hero__dym a {
    color: var(--ic-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 1px;
}
.inloff-cat-hero__dym a:hover { border-bottom-color: var(--inloff-heart, #C5A184); }
.inloff-cat-hero__dym .inloff-cat-hero__q { border: 0; }

/* Caja de búsqueda del hero: hereda el dropdown bespoke (clase .searchform +
   input[name=s]). Input crema sobre el navy, borde bronce al foco. */
.inloff-cat-hero__searchbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    margin: 4px 0 2px;
    padding: 5px 5px 5px 16px;
    background: var(--ic-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--ic-radius-lg);
    box-shadow: 0 10px 30px rgba(10, 15, 30, 0.24);
    transition: border-color 0.16s var(--ic-ease), box-shadow 0.16s var(--ic-ease);
}
.inloff-cat-hero__searchbox:focus-within {
    border-color: var(--inloff-heart, #C5A184);
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.35), 0 10px 30px rgba(10, 15, 30, 0.24);
}
.inloff-cat-hero__searchbox-ico { flex: 0 0 auto; color: var(--ic-ink-soft); }
.inloff-cat-hero__searchbox input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    margin: 0;              /* Flatsome pone margin-bottom en inputs */
    background: transparent;
    font-size: 15px;
    line-height: 1.2;
    color: var(--ic-ink);
    padding: 11px 0;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
}
.inloff-cat-hero__searchbox input[type="search"]::placeholder { color: var(--ic-ink-soft); }
.inloff-cat-hero__searchbox input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.inloff-cat-hero__searchbox button[type="submit"] {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    background: var(--ic-navy);
    color: var(--ic-white);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;         /* Flatsome pone line-height ~2.4em en button */
    margin: 0;              /* y margin-bottom → descentra el align-items:center */
    padding: 13px 22px;
    border-radius: var(--ic-radius-md);
    transition: background-color 0.16s var(--ic-ease);
}
.inloff-cat-hero__searchbox button[type="submit"]:hover { background: #24365c; }
/* En desktop el buscador del header ya es persistente → la caja del hero sería
   redundante. Se muestra SOLO en móvil/tablet (<850px, donde el header colapsa
   el buscador tras el menú). 850px = breakpoint de nav de Flatsome. */
@media (min-width: 850px) {
    .inloff-cat-hero__searchbox { display: none; }
}

/* Rejilla de recuperación del estado SIN resultados (best-sellers + populares) */
.inloff-search-recovery {
    max-width: 1240px;
    margin: 4px auto 12px;
    padding: 0 24px;
}
.inloff-search-recovery__head { text-align: center; margin: 4px 0 22px; }
.inloff-search-recovery__title {
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 700;
    color: var(--ic-ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.inloff-search-recovery__sub { font-size: 15px; color: var(--ic-ink-soft); margin: 0; }
.inloff-search-recovery__popular { margin: 30px 0 6px; text-align: center; }
.inloff-search-recovery__poplabel {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ic-ink-soft);
    font-weight: 700;
    margin-bottom: 12px;
}
.inloff-search-recovery__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.inloff-search-recovery__chips a {
    display: inline-flex;
    padding: 9px 16px;
    background: var(--ic-beige-light);
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-pill);
    color: var(--ic-navy);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.16s var(--ic-ease), border-color 0.16s var(--ic-ease), color 0.16s var(--ic-ease);
}
.inloff-search-recovery__chips a:hover { background: var(--ic-navy); border-color: var(--ic-navy); color: var(--ic-white); }

/* Flash sutil al saltar desde el sticky "Ordenar" */
.inloff-cat-sort--flash { animation: inloff-cat-sort-flash 0.9s var(--ic-ease); }
@keyframes inloff-cat-sort-flash {
    0%, 100% { background: transparent; }
    30% { background: rgba(197, 161, 132, 0.16); }
}
@media (prefers-reduced-motion: reduce) { .inloff-cat-sort--flash { animation: none; } }

@media (min-width: 768px) {
    .inloff-cat-hero { min-height: 440px; }
    .inloff-cat-hero__inner { min-height: 440px; padding: 80px 32px 64px; }
}
@media (min-width: 1024px) {
    .inloff-cat-hero { min-height: 480px; }
    .inloff-cat-hero__inner { min-height: 480px; }
}

/* ============================================================
   2. SUBCATEGORY CHIPS
   ============================================================ */

.inloff-cat-subchips {
    background: var(--ic-beige-light);
    border-bottom: 1px solid var(--ic-line);
}
.inloff-cat-subchips__list {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.inloff-cat-subchips__list::-webkit-scrollbar { display: none; }
.inloff-cat-subchips__item { scroll-snap-align: start; flex-shrink: 0; }
.inloff-cat-subchips__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    background: var(--ic-white);
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-pill);
    text-decoration: none;
    color: var(--ic-ink);
    font-size: 13px;
    font-weight: 500;
    transition: all .18s var(--ic-ease);
}
.inloff-cat-subchips__item a:hover {
    border-color: var(--ic-navy);
    box-shadow: var(--ic-shadow-sm);
    transform: translateY(-1px);
}
.inloff-cat-subchips__thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ic-beige);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.inloff-cat-subchips__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Icono SVG cuando la subcategoría no tiene thumbnail pero sí mapping en
   `inloff_subcat_icon_map()`. Trazo heart-dark sobre fondo cream. */
.inloff-cat-subchips__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--inloff-heart-dark, #AD8763);
}
.inloff-cat-subchips__icon svg {
    width: 60%;
    height: 60%;
    display: block;
}
.inloff-cat-subchips__placeholder {
    font-size: 13px;
    font-weight: 700;
    color: var(--ic-navy);
}
.inloff-cat-subchips__count {
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--ic-beige);
    border-radius: var(--ic-radius-pill);
    font-size: 11px;
    color: var(--ic-ink-soft);
    font-weight: 600;
}

/* ============================================================
   3. QUICK FILTER PILLS
   ============================================================ */

.inloff-cat-qf {
    background: var(--ic-white);
    border-bottom: 1px solid var(--ic-line);
}
.inloff-cat-qf__list {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.inloff-cat-qf__list::-webkit-scrollbar { display: none; }
.inloff-cat-qf__pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--ic-beige-light);
    border: 1px solid transparent;
    border-radius: var(--ic-radius-pill);
    text-decoration: none;
    color: var(--ic-ink);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all .15s var(--ic-ease);
    flex-shrink: 0;
}
.inloff-cat-qf__pill:hover {
    background: var(--ic-beige);
    border-color: var(--ic-line);
}
.inloff-cat-qf__pill.is-active {
    background: var(--ic-navy);
    color: var(--ic-white);
    font-weight: 600;
}

/* ============================================================
   4. LAYOUT (sidebar + main)
   ============================================================ */

.inloff-cat__layout {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1024px) {
    .inloff-cat__layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 40px;
        padding: 40px 24px;
    }
    /* Búsqueda sin resultados: sin sidebar → una sola columna (evita el hueco
       muerto que dejaba la sidebar de filtros junto al mensaje corto). */
    .inloff-cat__layout--full { grid-template-columns: 1fr; }
}
.inloff-cat__layout--full .inloff-cat__main { text-align: center; padding: 8px 0 4px; }

/* Toolbar */
.inloff-cat-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ic-line);
}
.inloff-cat-toolbar__count {
    margin: 0;
    font-size: 13px;
    color: var(--ic-ink-soft);
    font-weight: 500;
}
.inloff-cat-toolbar .woocommerce-result-count { margin: 0; font-size: 13px; color: var(--ic-ink-soft); }
@media (min-width: 768px) {
    .inloff-cat-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.inloff-cat-sort__list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.inloff-cat-sort__pill {
    display: inline-flex;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-pill);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ic-ink-soft);
    text-decoration: none;
    transition: all .15s var(--ic-ease);
}
.inloff-cat-sort__pill:hover { border-color: var(--ic-navy); color: var(--ic-ink); }
.inloff-cat-sort__pill.is-active {
    background: var(--ic-navy);
    color: var(--ic-white);
    border-color: var(--ic-navy);
}
/* Área táctil mínima (44px) en móvil sin engordarlas en desktop */
@media (max-width: 1023px) {
    .inloff-cat-sort__pill { min-height: 44px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
}

/* ============================================================
   5. SIDEBAR DE FILTROS (rediseño 4-oct-2026)
   En ordenador va sobre la página, sin tarjeta: grupos separados por una
   línea fina y controles propios (Flatsome pone negrita y márgenes a cada
   label, li e input, y las casillas quedaban desalineadas y con mucho aire).
   No es sticky: el body tiene su propio scroll y el sticky no se aplicaba.
   En el móvil es una hoja a pantalla completa con cabecera y botón de cerrar.
   ============================================================ */

.inloff-cat-sidebar {
    --ic-control: #B9B1A3; /* borde de casillas y opciones: visible sobre blanco y sobre beige */
    align-self: start;
    font-size: 14px;
    color: var(--ic-ink);
}
.inloff-cat-sidebar ul,
.inloff-cat-sidebar li { margin: 0; padding: 0; list-style: none; }
.inloff-cat-sidebar label { margin: 0; font-size: inherit; font-weight: 400; }
.inloff-cat-sidebar__top { display: none; }

.inloff-cat-sidebar__group { padding: 20px 0; border-top: 1px solid var(--ic-line); }
.inloff-cat-sidebar__form > .inloff-cat-sidebar__group:first-child { padding-top: 2px; border-top: 0; }
.inloff-cat-sidebar__h {
    margin: 0 0 10px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ic-navy);
}

/* Explorar: filas compactas; la actual, en beige. */
.inloff-cat-sidebar__tree { display: flex; flex-direction: column; gap: 1px; }
.inloff-cat-sidebar__tree a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    margin: 0 -10px;
    padding: 6px 10px;
    border-radius: var(--ic-radius-sm);
    color: var(--ic-ink);
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s var(--ic-ease);
}
.inloff-cat-sidebar__tree a:hover { background: var(--ic-beige-light); }
.inloff-cat-sidebar__tree a:focus-visible { outline: 2px solid var(--ic-gold); outline-offset: 1px; }
.inloff-cat-sidebar__tree a.is-current { background: var(--ic-beige); font-weight: 600; }
.inloff-cat-sidebar__tree-txt { min-width: 0; }
.inloff-cat-sidebar__tree-n {
    flex: none;
    font-size: 12.5px;
    color: var(--ic-ink-soft);
    font-variant-numeric: tabular-nums;
}
.inloff-cat-sidebar__tree a.is-current .inloff-cat-sidebar__tree-n { color: var(--ic-navy); }

.inloff-cat-sidebar__more summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 6px 0;
    list-style: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ic-navy);
}
.inloff-cat-sidebar__more summary::-webkit-details-marker { display: none; }
.inloff-cat-sidebar__more summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s var(--ic-ease);
}
.inloff-cat-sidebar__more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.inloff-cat-sidebar__more summary:focus-visible { outline: 2px solid var(--ic-gold); outline-offset: 2px; border-radius: 2px; }
.inloff-cat-sidebar__more-menos,
.inloff-cat-sidebar__more[open] .inloff-cat-sidebar__more-ver { display: none; }
.inloff-cat-sidebar__more[open] .inloff-cat-sidebar__more-menos { display: inline; }

/* Precio: dos campos con su «€». */
.inloff-cat-price { display: flex; align-items: center; gap: 10px; }
.inloff-cat-price__f { position: relative; display: block; flex: 1; min-width: 0; }
.inloff-cat-sidebar .inloff-cat-price input[type="number"] {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 30px 0 12px;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-sm);
    background: var(--ic-white);
    box-shadow: none;
    color: var(--ic-ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    transition: border-color .15s var(--ic-ease), box-shadow .15s var(--ic-ease);
}
.inloff-cat-sidebar .inloff-cat-price input[type="number"]:hover { border-color: var(--ic-control); }
.inloff-cat-sidebar .inloff-cat-price input[type="number"]:focus {
    outline: 0;
    border-color: var(--ic-navy);
    box-shadow: 0 0 0 3px rgba(27,43,75,.12);
}
.inloff-cat-price input::-webkit-outer-spin-button,
.inloff-cat-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inloff-cat-price__eur {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ic-ink-soft);
    pointer-events: none;
}
.inloff-cat-price__a { font-size: 13px; color: var(--ic-ink-soft); }

/* Casillas y opciones propias: toda la fila es pulsable; el número, a la derecha. */
.inloff-cat-sidebar__opts { display: flex; flex-direction: column; gap: 1px; }
.inloff-cat-sidebar .inloff-cat-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    margin: 0 -10px;
    padding: 6px 10px;
    border-radius: var(--ic-radius-sm);
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s var(--ic-ease);
}
.inloff-cat-opt:hover { background: var(--ic-beige-light); }
.inloff-cat-opt__txt { flex: 1; min-width: 0; color: var(--ic-ink); }
.inloff-cat-opt__n {
    flex: none;
    font-size: 12.5px;
    color: var(--ic-ink-soft);
    font-variant-numeric: tabular-nums;
}
.inloff-cat-sidebar .inloff-cat-opt__in {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--ic-control);
    border-radius: 5px;
    background: var(--ic-white) center / 12px 12px no-repeat;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s var(--ic-ease), border-color .15s var(--ic-ease), box-shadow .15s var(--ic-ease);
}
.inloff-cat-sidebar .inloff-cat-opt__in[type="radio"] { border-radius: 50%; }
.inloff-cat-opt:hover .inloff-cat-opt__in { border-color: var(--ic-navy); }
.inloff-cat-sidebar .inloff-cat-opt__in:checked { border-color: var(--ic-navy); background-color: var(--ic-navy); }
.inloff-cat-sidebar .inloff-cat-opt__in[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.3 4.8-5.1' fill='none' stroke='%23FAF6EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.inloff-cat-sidebar .inloff-cat-opt__in[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--ic-white); }
.inloff-cat-sidebar .inloff-cat-opt__in:focus-visible { outline: 2px solid var(--ic-gold); outline-offset: 2px; }
.inloff-cat-opt:has(.inloff-cat-opt__in:checked) .inloff-cat-opt__txt { font-weight: 500; }
.inloff-cat-opt:has(.inloff-cat-opt__in:checked) .inloff-cat-opt__n { color: var(--ic-navy); }

.inloff-cat-sidebar__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.inloff-cat-sw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-pill);
    cursor: pointer;
    transition: border-color .12s var(--ic-ease), background-color .12s var(--ic-ease);
    font-size: 12px;
}
.inloff-cat-sw input { display: none; }
.inloff-cat-sw__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ic-line);
    box-shadow: inset 0 0 0 1px rgba(27,43,75,.08);
}
.inloff-cat-sw:hover { border-color: var(--ic-navy); }
.inloff-cat-sw.is-selected,
.inloff-cat-sw:has(input:checked) {
    border-color: var(--ic-navy);
    background: var(--ic-beige-light);
    font-weight: 600;
}

.inloff-cat-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--ic-line);
}
.inloff-cat-sidebar__apply {
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--ic-radius-md);
    background: var(--ic-navy);
    color: var(--ic-beige-light);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s var(--ic-ease);
}
.inloff-cat-sidebar__apply:hover { background: var(--ic-navy-soft); }
.inloff-cat-sidebar__apply:focus-visible { outline: 2px solid var(--ic-gold); outline-offset: 2px; }
.inloff-cat-sidebar__reset {
    align-self: center;
    padding: 6px 4px;
    font-size: 13px;
    color: var(--ic-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.inloff-cat-sidebar__reset:hover { color: var(--ic-navy); }

@media (max-width: 1023px) {
    .inloff-cat-sidebar {
        position: fixed;
        inset: 0;
        z-index: 9000;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 20px;
        background: var(--ic-white);
        font-size: 15px;
        transform: translateY(100%);
        transition: transform .3s var(--ic-ease);
    }
    body.is-inloff-cat-filters-open .inloff-cat-sidebar { transform: translateY(0); }
    body.is-inloff-cat-filters-open::before {
        content: "";
        position: fixed;
        inset: 0;
        /* Overlay sólido en vez de backdrop-filter: blur a viewport completo
           (coste de GPU; jank device-dependent al abrir filtros y scrollear). */
        background: rgba(27,43,75,.6);
        z-index: 8500;
    }
    .inloff-cat-sidebar__top {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -20px;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 20px;
        background: var(--ic-white);
        border-bottom: 1px solid var(--ic-line);
    }
    .inloff-cat-sidebar__title {
        margin: 0;
        font-family: "Nunito Sans", sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--ic-navy);
    }
    .inloff-cat-sidebar__close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--ic-navy);
        cursor: pointer;
    }
    .inloff-cat-sidebar__close:focus-visible { outline: 2px solid var(--ic-gold); outline-offset: 2px; }
    .inloff-cat-sidebar__form > .inloff-cat-sidebar__group:first-child { padding-top: 18px; }
    .inloff-cat-sidebar__tree a,
    .inloff-cat-opt { min-height: 44px; }
    .inloff-cat-sidebar__more summary { min-height: 44px; }
    .inloff-cat-sidebar__actions {
        position: sticky;
        bottom: 0;
        margin: 0 -20px;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--ic-white);
    }
    .inloff-cat-sidebar__reset { min-height: 44px; display: inline-flex; align-items: center; }
    /* El botón flotante de CookieYes tapaba «Aplicar filtros» con la hoja abierta. */
    body.is-inloff-cat-filters-open .cky-btn-revisit-wrapper { display: none; }
}

/* ============================================================
   6. GRID DE PRODUCTOS
   ============================================================ */

.inloff-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px 4px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}
@media (min-width: 640px)  { .inloff-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 6px; } }
@media (min-width: 1024px) { .inloff-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 6px; } }
@media (min-width: 1280px) { .inloff-cat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 8px; } }

/* ============================================================
   7. PRODUCT CARD (.inloff-pc)
   ============================================================ */

.inloff-pc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ic-white);
    border-radius: var(--ic-radius-md);
    overflow: visible;
    /* Flatsome inyecta padding 0 15px 30px via la clase .col del grid system.
       Lo neutralizamos: el espacio entre cards lo controla nuestro grid gap. */
    padding: 0 !important;
    margin: 0 !important;
}

/* Wrap del media: contenedor relative para badges/actions absolutos.
   Importante: no podemos meter badges/actions dentro del <a> porque
   YITH inserta otros <a> dentro y eso rompe el DOM (autoclose). */
.inloff-pc__media-wrap {
    position: relative;
    border-radius: var(--ic-radius-md);
    overflow: hidden;
    background: var(--ic-beige-light);
    aspect-ratio: 1 / 1;
}

/* Media (4:5) — solo envuelve las imágenes */
.inloff-pc__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
}
.inloff-pc__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: opacity .35s var(--ic-ease), transform .6s var(--ic-ease);
}
.inloff-pc__img--front { opacity: 1; }
.inloff-pc__img--back { opacity: 0; transform: scale(1.04); }
.inloff-pc--has-hover:hover .inloff-pc__img--front { opacity: 0; }
.inloff-pc--has-hover:hover .inloff-pc__img--back { opacity: 1; transform: scale(1); }
.inloff-pc__media:hover .inloff-pc__img--front { transform: scale(1.02); }

.inloff-pc__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ic-beige) 0%, var(--ic-beige-light) 100%);
}

/* Badges */
.inloff-pc__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* cada chip, del ancho de su texto: no se estira al del más largo */
    gap: 5px;
    z-index: 2;
    pointer-events: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inloff-pc__badge {
    width: fit-content;
    margin: 0;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--ic-radius-pill);
    line-height: 1;
}
.inloff-pc__badge--navy { background: var(--ic-navy); color: var(--ic-white); }
.inloff-pc__badge--gold { background: var(--ic-gold); color: var(--ic-navy); }
.inloff-pc__badge--red  { background: var(--ic-coral); color: var(--ic-white); }
.inloff-pc__badge--green { background: var(--ic-green); color: var(--ic-white); }
.inloff-pc__badge[data-type="stock"] { animation: ic-pulse 1.8s ease-in-out infinite; }
@keyframes ic-pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Out of stock label */
.inloff-pc__oos-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(27,43,75,.92);
    color: var(--ic-white);
    padding: 8px 18px;
    border-radius: var(--ic-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    z-index: 3;
}

/* Actions: stack vertical de iconos (quick view + wishlist) en top-right.
   - Reseteamos todo el cascade Flatsome/YITH dentro de este contenedor.
   - Cada acción es un círculo 36px con SVG centrado.
   - El dropdown legacy .wishlist-popup.dark se oculta (es feo y redundante). */
.inloff-pc__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s var(--ic-ease), transform .2s var(--ic-ease);
    pointer-events: auto;
}
.inloff-pc:hover .inloff-pc__actions,
.inloff-pc:focus-within .inloff-pc__actions {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 1023px) {
    /* Always visible on touch */
    .inloff-pc__actions { opacity: 1; transform: none; }
}

/* Botón base — aplica a nuestro .inloff-pc__act Y al .wishlist-icon Flatsome */
.inloff-pc__actions > a,
.inloff-pc__actions > button,
.inloff-pc__actions > .wishlist-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    box-shadow: var(--ic-shadow-sm);
    color: var(--ic-navy);
    cursor: pointer;
    text-decoration: none;
    font-size: 0;          /* oculta texto "Quick View" / "Lista de deseos" */
    line-height: 0;
    overflow: hidden;
    transition: background .15s var(--ic-ease), color .15s var(--ic-ease), transform .15s var(--ic-ease);
}
.inloff-pc__actions > a:hover,
.inloff-pc__actions > button:hover,
.inloff-pc__actions > .wishlist-icon:hover .wishlist-button {
    background: var(--ic-navy);
    color: var(--ic-white);
    transform: scale(1.06);
}

/* SVG iconos: centrar */
.inloff-pc__actions svg {
    width: 18px;
    height: 18px;
    display: block;
    color: currentColor;
}

/* ---- Wishlist Flatsome (.wishlist-icon > .wishlist-button > i.icon-heart) ---- */
.inloff-pc__actions .wishlist-icon {
    /* el wrapper que mete Flatsome */
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    width: 36px;
    height: 36px;
    overflow: visible;
}
.inloff-pc__actions .wishlist-icon .wishlist-button {
    position: absolute;
    inset: 0;
    width: 36px !important;
    height: 36px !important;
    min-width: 0;
    border: 0 !important;
    background: rgba(255,255,255,.96) !important;
    border-radius: 50% !important;
    box-shadow: var(--ic-shadow-sm);
    color: var(--ic-navy) !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition: all .15s var(--ic-ease);
}
.inloff-pc__actions .wishlist-icon .wishlist-button:hover {
    background: var(--ic-navy) !important;
    color: var(--ic-white) !important;
}
/* Ocultar el icono font Flatsome (puede no cargarse) y poner SVG via mask */
.inloff-pc__actions .wishlist-icon .wishlist-button i.icon-heart {
    display: block;
    width: 18px;
    height: 18px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") center/18px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") center/18px no-repeat;
}
/* Cuando ya está añadido a la wishlist, el corazón se vuelve sólido */
.inloff-pc__actions .wishlist-icon .wishlist-button.in-wishlist i.icon-heart,
.inloff-pc__actions .wishlist-icon .wishlist-button.added i.icon-heart {
    background-color: var(--ic-coral);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") center/18px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") center/18px no-repeat;
}

/* Ocultar dropdown wishlist legacy de Flatsome (popup oscuro feo) */
.inloff-pc__actions .wishlist-popup,
.inloff-pc__actions .wishlist-popup.dark { display: none !important; }
.inloff-pc__actions .yith-wcwl-add-to-wishlist { display: none !important; }

/* Quick view custom */
.inloff-pc__act--qv svg { transition: transform .2s var(--ic-ease); }
.inloff-pc__act--qv:hover svg { transform: scale(1.1); }

/* Body */
/* `flex: 1` es lo que permite alinear el botón: sin esto el cuerpo acaba donde
   acaba el texto y el CTA queda a una altura distinta en cada tarjeta, aunque la
   rejilla ya estire todas las tarjetas de la fila a la misma altura. */
.inloff-pc__body {
    padding: 18px 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Una sola línea, siempre. El nombre de categoría cede (se recorta con
   puntos suspensivos) y el contador de ventas se mantiene entero: al revés,
   «2546+ vendidos» se partía en dos y descuadraba la tarjeta entera. */
.inloff-pc__meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-ink-soft);
    font-weight: 600;
}
.inloff-pc__cat {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 60%;
    /* `min-width: 0` anula el mínimo de contenido que trae por defecto un
       elemento flex; sin él no puede encogerse y empuja al contador. */
    flex: 0 1 auto; min-width: 0;
}
.inloff-pc__rating {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 3px;
    color: var(--ic-gold-text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}
.inloff-pc__rating-count { color: var(--ic-ink-soft); font-weight: 500; font-size: 11px; }
.inloff-pc__sold {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--ic-coral);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 600;
}

.inloff-pc__title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}
.inloff-pc__title a {
    color: var(--ic-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.inloff-pc__title a:hover { color: var(--ic-navy); }

/* Swatches */
.inloff-pc__swatches {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inloff-pc__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ic-line);
    box-shadow: inset 0 0 0 1px rgba(27,43,75,.12);
    display: inline-block;
}
.inloff-pc__dot-more {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ic-ink-soft);
    padding: 0 6px;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-pill);
    height: 14px;
    line-height: 12px;
    display: inline-block;
}

/* Price ----------------------------------------------------------------------
   Convención (alineada con content-product.php):
   - .inloff-pc__price-current  → navy ink. Precio normal SIEMPRE, incluido
                                  para variables "desde X €" y bulk
                                  "desde X €/ud" (sin oferta real).
   - .inloff-pc__price-sale     → heart/coral. SOLO con `is_on_sale()` +
                                  regular_price > sale_price.
   - <del>                      → tachado gris soft (precio antes).

   `<ins>` sin la clase `.inloff-pc__price-sale` NO debe colorear coral.
   `get_price_html()` para variables emite `<ins>` internamente sin haber
   oferta, y eso pintaba "desde 4,25 €" en heart sin descuento real.
   Tabular-nums alinea columnas de importes en el grid del PLP. */
.inloff-pc__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ic-ink);
    font-variant-numeric: tabular-nums;
}
.inloff-pc__price del,
.inloff-pc__price del .amount,
.inloff-pc__price del bdi {
    color: var(--ic-ink-soft);
    font-size: 12.5px;
    text-decoration: line-through;
    font-weight: 400;
}
.inloff-pc__price-current,
.inloff-pc__price-current ins,
.inloff-pc__price-current .amount,
.inloff-pc__price-current bdi {
    color: var(--ic-ink);
    background: transparent;
    text-decoration: none;
    font-weight: 700;
}
.inloff-pc__price-sale,
.inloff-pc__price-sale .amount,
.inloff-pc__price-sale bdi {
    color: var(--ic-coral);
    background: transparent;
    text-decoration: none;
    font-weight: 700;
}
.inloff-pc__save {
    flex-basis: 100%;
    font-size: 11.5px;
    color: var(--ic-coral);
    font-weight: 600;
    letter-spacing: .02em;
}
.inloff-pc__price .amount { font: inherit; }

/* Precio «desde X €/ud a partir de N uds» (tramos por volumen). Venía como
   `inline-flex`, que nunca parte de línea: en la rejilla de móvil (169 px de
   tarjeta) se salía por la derecha y quedaba cortado. Ahora parte ENTRE sus
   piezas —nunca por dentro de una—, así que si no cabe baja «a partir de N uds»
   en vez de recortar el importe. */
.inloff-pc__price-current { min-width: 0; }
.inloff-pc__price .inloff-bp-from {
    flex-wrap: wrap;
    min-width: 0;
    gap: 2px;
}
.inloff-pc__price .inloff-bp-from > * { white-space: nowrap; }
/* La coletilla y el «desde» bajan medio punto SOLO en la tarjeta (en la ficha
   de producto hay sitio de sobra y se quedan como están). Con esto la línea
   entera cabe de una vez a 1440 px con 9 px de margen; si algún día no cupiera
   —un tramo de cuatro cifras—, el `flex-wrap` de arriba la baja limpia en vez
   de sacarla de la tarjeta. */
.inloff-pc__price .inloff-bp-from__qty,
.inloff-pc__price .inloff-bp-from__label { font-size: 11.5px; }

/* Delivery */
.inloff-pc__delivery {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ic-green);
    font-weight: 600;
}

/* CTA — O2.10:
   - Hover envuelto en @media (hover:hover) para evitar sticky-hover en táctil
   - :active scale(0.97) para feedback físico de press
   - Flecha SVG (último child) hace translateX(3px) en hover → microinteracción
   - `transition: all` reemplazado por propiedades explícitas (evita pintar
     properties que no cambian, mejor performance) */
.inloff-pc__cta {
    /* `auto` lo empuja al fondo del cuerpo, que a su vez llena la tarjeta: es
       lo que iguala la altura del botón en todas las tarjetas de una fila. El
       `gap` del cuerpo (10 px) garantiza el aire mínimo cuando el texto es largo. */
    margin-top: auto;
    padding: 11px 16px;
    background: var(--ic-white);
    border: 1.5px solid var(--ic-navy);
    border-radius: var(--ic-radius-md);
    color: var(--ic-navy);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 180ms ease, color 180ms ease, transform 80ms ease-out, border-color 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
.inloff-pc__cta svg {
    transition: transform 200ms var(--ic-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.inloff-pc__cta:active {
    transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
    .inloff-pc__cta:hover {
        background: var(--ic-navy);
        color: var(--ic-white);
    }
    .inloff-pc__cta:hover svg {
        transform: translateX(3px);
    }
}
.inloff-pc--oos .inloff-pc__cta {
    pointer-events: none;
    opacity: .5;
    border-color: var(--ic-line);
    color: var(--ic-ink-soft);
}

/* ============================================================
   8. EDITORIAL CARD (span 2 cols)
   ============================================================ */

.inloff-cat-editorial {
    grid-column: span 1;
}
@media (min-width: 640px) {
    .inloff-cat-editorial { grid-column: span 2; }
}
.inloff-cat-editorial__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    background: var(--ic-navy);
    color: var(--ic-white);
    border-radius: var(--ic-radius-md);
    overflow: hidden;
    text-decoration: none;
}
.inloff-cat-editorial__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.inloff-cat-editorial__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ic-ease); }
.inloff-cat-editorial__inner:hover .inloff-cat-editorial__media img { transform: scale(1.05); }
.inloff-cat-editorial__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.inloff-cat-editorial__eyebrow {
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ic-gold);
    font-weight: 700;
}
.inloff-cat-editorial__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.inloff-cat-editorial__text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
}
.inloff-cat-editorial__cta {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ic-gold);
}

/* ============================================================
   9. TRUST BANNER mid-grid
   ============================================================ */

.inloff-cat-trust {
    background: var(--ic-beige);
    padding: 56px 24px;
    margin: 32px 0 0;
}
/* Wrapper LI cuando la trust banner se inserta MID-GRID dentro del
   <ul class="products inloff-cat-grid">. Hace que el banner ocupe TODO
   el ancho del grid (4 cols desktop, 2 mobile) en lugar de comportarse
   como un item del grid. */
.inloff-cat-trust-wrap {
    grid-column: 1 / -1;
    list-style: none;
    margin: 8px 0 16px;
    padding: 0;
}
.inloff-cat-trust-wrap .inloff-cat-trust {
    margin: 0;
}
.inloff-cat-trust__inner { max-width: 1240px; margin: 0 auto; text-align: center; }
.inloff-cat-trust__title {
    margin: 0 0 32px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--ic-navy);
}
.inloff-cat-trust__title span { color: var(--ic-gold-text); }
.inloff-cat-trust__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) { .inloff-cat-trust__list { grid-template-columns: repeat(4, 1fr); } }
/* Sin el punto de reseñas (por debajo del mínimo) quedan tres: sin hueco en escritorio y el tercero a lo ancho en móvil. */
.inloff-cat-trust__list--3 > li:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .inloff-cat-trust__list--3 { grid-template-columns: repeat(3, 1fr); }
    .inloff-cat-trust__list--3 > li:last-child { grid-column: auto; }
}
.inloff-cat-trust__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.inloff-cat-trust__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ic-white);
    display: grid;
    place-items: center;
    color: var(--ic-navy);
    margin-bottom: 4px;
}
.inloff-cat-trust__h {
    font-size: 14px;
    font-weight: 700;
    color: var(--ic-navy);
}
.inloff-cat-trust__sub {
    font-size: 12.5px;
    color: var(--ic-ink-soft);
    line-height: 1.45;
    max-width: 220px;
}

/* ============================================================
   10. OCASIONES
   ============================================================ */

.inloff-cat-occasions { padding: 56px 24px; }
.inloff-cat-occasions__inner { max-width: 1240px; margin: 0 auto; }
.inloff-cat-occasions__title {
    margin: 0 0 28px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--ic-navy);
    text-align: center;
}
.inloff-cat-occasions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) { .inloff-cat-occasions__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .inloff-cat-occasions__grid { grid-template-columns: repeat(4, 1fr); } }
.inloff-cat-occ-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--ic-radius-md);
    background: var(--ic-navy);
    text-decoration: none;
    color: var(--ic-white);
}
.inloff-cat-occ-card__media,
.inloff-cat-occ-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ic-ease);
}
.inloff-cat-occ-card:hover .inloff-cat-occ-card__media img { transform: scale(1.05); }
.inloff-cat-occ-card__body {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(27,43,75,0) 50%, rgba(27,43,75,.85) 100%);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.inloff-cat-occ-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.inloff-cat-occ-card__sub {
    font-size: 12px;
    color: rgba(255,255,255,.8);
    margin-top: 2px;
}
.inloff-cat-occ-card__arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--ic-navy);
    display: grid;
    place-items: center;
    font-size: 14px;
    transition: transform .2s var(--ic-ease);
}
.inloff-cat-occ-card:hover .inloff-cat-occ-card__arrow {
    transform: translate(2px,-2px);
    background: var(--ic-gold);
}

/* ============================================================
   11. TESTIMONIALS
   ============================================================ */

.inloff-cat-tt { background: var(--ic-beige-light); padding: 56px 24px; }
.inloff-cat-tt__inner { max-width: 1240px; margin: 0 auto; }
.inloff-cat-tt__title {
    margin: 0 0 32px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--ic-navy);
    text-align: center;
}
.inloff-cat-tt__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) { .inloff-cat-tt__grid { grid-template-columns: repeat(3, 1fr); } }
.inloff-cat-tt__card {
    background: var(--ic-white);
    padding: 20px;
    border-radius: var(--ic-radius-md);
    box-shadow: var(--ic-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inloff-cat-tt__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ic-radius-sm);
    margin: -20px -20px 4px;
}
.inloff-cat-tt__photo img { width: 100%; height: 100%; object-fit: cover; }
.inloff-cat-tt__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--ic-line);
}
.inloff-cat-tt__stars svg.is-full { color: var(--ic-gold); }
.inloff-cat-tt__quote {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ic-ink);
    font-style: italic;
}
.inloff-cat-tt__meta {
    font-size: 12.5px;
    color: var(--ic-ink-soft);
    font-style: normal;
}
.inloff-cat-tt__meta strong { color: var(--ic-navy); font-weight: 700; }

/* ============================================================
   12. FAQ
   ============================================================ */

.inloff-cat-faq { padding: 56px 24px; }
.inloff-cat-faq__inner { max-width: 820px; margin: 0 auto; }
.inloff-cat-faq__title {
    margin: 0 0 28px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--ic-navy);
    text-align: center;
}
.inloff-cat-faq__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.inloff-cat-faq details {
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-md);
    background: var(--ic-white);
    overflow: hidden;
    transition: box-shadow .2s;
}
.inloff-cat-faq details[open] { box-shadow: var(--ic-shadow-sm); }
.inloff-cat-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ic-navy);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.inloff-cat-faq summary::-webkit-details-marker { display: none; }
.inloff-cat-faq__chev {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ic-beige);
    color: var(--ic-navy);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .2s var(--ic-ease);
}
.inloff-cat-faq details[open] .inloff-cat-faq__chev {
    transform: rotate(45deg);
    background: var(--ic-navy);
    color: var(--ic-white);
}
.inloff-cat-faq__a {
    padding: 0 22px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ic-ink);
}

/* ============================================================
   13. SEO content collapsible
   ============================================================ */

.inloff-cat-seo {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px;
    border-top: 1px solid var(--ic-line);
}
.inloff-cat-seo details summary {
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--ic-navy);
    text-decoration: underline;
    padding: 8px 0;
}
.inloff-cat-seo details summary::-webkit-details-marker { display: none; }
.inloff-cat-seo__body {
    padding: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ic-ink-soft);
    max-width: 820px;
}
.inloff-cat-seo__body h2,
.inloff-cat-seo__body h3 { color: var(--ic-navy); margin: 16px 0 6px; }
.inloff-cat-seo__body a { color: var(--ic-navy); }

/* ============================================================
   14. STICKY BOTTOM CTA (mobile)
   ============================================================ */

.inloff-cat-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    background: var(--ic-white);
    border-top: 1px solid var(--ic-line);
    padding: 10px 16px max(10px, env(safe-area-inset-bottom)) 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 16px rgba(27,43,75,.08);
    transform: translateY(0);
    transition: transform .25s var(--ic-ease);
}
@media (min-width: 1024px) { .inloff-cat-sticky { display: none; } }
.inloff-cat-sticky__filters,
.inloff-cat-sticky__sort {
    flex: 1;
    padding: 10px 14px;
    background: var(--ic-navy);
    color: var(--ic-white);
    border: 0;
    border-radius: var(--ic-radius-md);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.inloff-cat-sticky__sort {
    background: var(--ic-white);
    color: var(--ic-navy);
    border: 1.5px solid var(--ic-navy);
}
.inloff-cat-sticky__count {
    font-size: 12.5px;
    color: var(--ic-ink-soft);
    font-weight: 600;
    white-space: nowrap;
}
/* N3.5 — 4to slot Wishlist en sticky CTA mobile PLP */
.inloff-cat-sticky__wishlist {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--ic-navy);
    border-radius: var(--ic-radius-md);
    color: var(--ic-navy);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 180ms ease, color 180ms ease, transform 80ms ease-out;
}
.inloff-cat-sticky__wishlist:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
    .inloff-cat-sticky__wishlist:hover { background: var(--ic-navy); color: var(--ic-white); }
}
.inloff-cat-sticky__wishlist-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--ic-coral, #A86847);
    color: #fff;
    border: 1.5px solid #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.inloff-cat-sticky__wishlist-count[data-yith-wcwl-count="0"] { display: none; }
.inloff-cat-sticky__reset {
    font-size: 12px;
    color: var(--ic-coral);
    text-decoration: underline;
    font-weight: 600;
}

/* Padding extra al main para que sticky no tape paginación en mobile */
@media (max-width: 1023px) {
    .inloff-cat__main { padding-bottom: 80px; }
}

/* ============================================================
   15. Paginación WC custom
   ============================================================ */

.inloff-cat .woocommerce-pagination {
    text-align: center;
    margin-top: 24px;
}
.inloff-cat .woocommerce-pagination .page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    justify-content: center;
}
.inloff-cat .woocommerce-pagination .page-numbers li { border: 0; }
.inloff-cat .woocommerce-pagination .page-numbers li a,
.inloff-cat .woocommerce-pagination .page-numbers li span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ic-line);
    background: var(--ic-white);
    color: var(--ic-ink);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--ic-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .12s;
}
.inloff-cat .woocommerce-pagination .page-numbers li a:hover {
    background: var(--ic-beige-light);
    border-color: var(--ic-navy);
}
.inloff-cat .woocommerce-pagination .page-numbers li .current {
    background: var(--ic-navy);
    color: var(--ic-white);
    border-color: var(--ic-navy);
}

/* ============================================================
   16. Focus visible (a11y)
   ============================================================ */

.inloff-cat a:focus-visible,
.inloff-cat button:focus-visible,
.inloff-cat input:focus-visible,
.inloff-cat summary:focus-visible {
    outline: 2px solid var(--ic-navy);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   O2.11 — Chip-summary de filtros activos sobre el grid
   ----------------------------------------------------------------
   Renderizado por inloff_category_render_active_filter_chips()
   hook woocommerce_before_shop_loop pri 12 (antes del grid).
   Solo aparece cuando hay ≥1 filtro en la URL. Cada chip es un
   link que quita ese filtro. "Limpiar todo" al final.
   ============================================================ */
.inloff-cat-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--ic-cream-light, #FDFBF7);
    border: 1px solid var(--ic-line, rgba(27, 37, 64, 0.10));
    border-radius: 12px;
}
.inloff-cat-active-filters__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ic-ink-soft, #6B7587);
    letter-spacing: 0.02em;
    margin-right: 2px;
}
.inloff-cat-active-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.inloff-cat-active-filters__list li { margin: 0 !important; padding: 0 !important; }

.inloff-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    background: #fff;
    border: 1px solid var(--ic-line-strong, rgba(27, 37, 64, 0.16));
    border-radius: 999px;
    color: var(--ic-navy, #1B2540);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 80ms ease-out;
    -webkit-tap-highlight-color: transparent;
}
.inloff-cat-chip svg {
    color: var(--ic-ink-soft, #6B7587);
    transition: color 180ms ease;
    flex-shrink: 0;
}
.inloff-cat-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .inloff-cat-chip:hover {
        background: var(--ic-navy, #1B2540);
        border-color: var(--ic-navy, #1B2540);
        color: #fff;
    }
    .inloff-cat-chip:hover svg { color: #fff; }
}

.inloff-cat-active-filters__clear {
    margin-left: auto;
    font-size: 12px;
    color: var(--ic-coral, #A86847);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 0;
    transition: color 180ms ease;
}
.inloff-cat-active-filters__clear:hover {
    color: var(--ic-navy, #1B2540);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 600px) {
    .inloff-cat-active-filters { gap: 6px 8px; padding: 10px 12px; }
    .inloff-cat-active-filters__clear { margin-left: 0; width: 100%; padding-top: 6px; border-top: 1px solid var(--ic-line, rgba(27, 37, 64, 0.10)); }
}