/* ═══════════════════════════════════════════════════════════════════════════
   Vitrina de productos — diseño v2

   Se carga SOLO en los negocios que encendieron el diseño nuevo. Todo cuelga
   de .feat-v2 para que ninguna regla se escape al tema clásico, que comparte
   página en el resto de los tenants.
   ═══════════════════════════════════════════════════════════════════════════ */

.feat-v2,
.pcard {
    /* El acento sale de los ajustes del negocio; el índigo es el del tema. */
    --accent: #717fe0;
    --accent-tint: rgba(113, 127, 224, .12);
    --ink: #222;
    --ink-2: #555;
    --ink-3: #888;
    --ink-4: #aaa;
    --line: #e6e6e6;
    --soft: #f7f7f7;
    --page: #fff;
    --teal: #66a8a6;
    --sale: #e0564f;
    --cols: 4;
    --r-card: 14px;
    --maxw: 1380px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --pad: 0%;

}

.feat-v2 {
    padding: clamp(44px, 7vh, 90px) 0;
    position: relative;
    color: var(--ink-2);
    font-family: 'Poppins', Arial, sans-serif;
}

/* La tarjeta suelta —dentro de las grillas que ya existían— necesita su
   propia tipografía, porque no la hereda de la sección. */
.pcard { font-family: 'Poppins', Arial, sans-serif; color: var(--ink-2); }
/* Dentro de las grillas de Bootstrap que ya existían, la tarjeta ocupa todo el
   alto de su columna para que la fila quede pareja. */
.col-sm-6 > .pcard, .col-md-3 > .pcard, [class*="col-"] > .pcard { height: 100%; }
.pcard *, .pcard *::before, .pcard *::after { box-sizing: border-box; }
.pcard a { color: inherit; text-decoration: none; }

.feat-v2 *, .feat-v2 *::before, .feat-v2 *::after { box-sizing: border-box; }
.feat-v2 a { color: inherit; text-decoration: none; }
.feat-v2 a:hover { color: var(--accent); }

.feat-v2 .feat-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 60px); }

/* ── Encabezado ───────────────────────────────────────────────────────── */
.feat-v2 .feat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.feat-v2 .feat-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.feat-v2 .feat-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
.feat-v2 .feat-title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.01em; color: var(--ink); }
.feat-v2 .feat-count { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.feat-v2 .feat-count b { color: var(--ink-2); font-weight: 600; }
.feat-v2 .feat-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--accent); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease); }
.feat-v2 .feat-all:hover { border-color: var(--accent); }
.feat-v2 .feat-all .material-icons { font-size: 18px; }

/* ── Barra de categorías y acciones ───────────────────────────────────── */
.feat-v2 .feat-toolbar { display: flex; align-items: center; gap: 14px; margin: 28px 0 24px; flex-wrap: nowrap; }
.feat-v2 .tabs-shell { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.feat-v2 .feat-tabs { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0; flex: 1 1 auto; min-width: 0; }
.feat-v2 .feat-tabs::-webkit-scrollbar { display: none; }
.feat-v2 .tabs-shell::before, .feat-v2 .tabs-shell::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s var(--ease); }
.feat-v2 .tabs-shell::before { left: 0; background: linear-gradient(90deg, var(--page), transparent); }
.feat-v2 .tabs-shell::after { right: 0; background: linear-gradient(270deg, var(--page), transparent); }
.feat-v2 .tabs-shell.can-l::before, .feat-v2 .tabs-shell.can-r::after { opacity: 1; }
.feat-v2 .tnav { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; display: none; place-items: center; cursor: pointer; z-index: 3; border: 1px solid var(--line); background: var(--page); color: var(--ink-2); transition: border-color .18s var(--ease), color .18s var(--ease); }
.feat-v2 .tnav:hover { border-color: var(--accent); color: var(--accent); }
.feat-v2 .tnav .material-icons { font-size: 18px; }
.feat-v2 .tabs-shell.can-l .tnav.l, .feat-v2 .tabs-shell.can-r .tnav.r { display: grid; }
.feat-v2 .tab { flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--page); color: var(--ink-2); transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }
.feat-v2 .tab:hover { color: var(--ink); border-color: var(--ink-4); }
.feat-v2 .tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.feat-v2 .feat-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; position: relative; }
.feat-v2 .act { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--page); color: var(--ink); transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.feat-v2 .act:hover { border-color: var(--accent); color: var(--accent); }
.feat-v2 .act.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.feat-v2 .act .material-icons { font-size: 18px; }
.feat-v2 .feat-search { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .3s var(--ease); }
.feat-v2 .feat-search.open { grid-template-columns: 1fr; }
.feat-v2 .feat-search .inner { overflow: hidden; }
.feat-v2 .feat-search input { width: clamp(160px, 22vw, 250px); border: 1px solid var(--line); background: var(--page); color: var(--ink); font-family: inherit; font-size: 13.5px; padding: 9px 13px; border-radius: 10px; outline: none; transition: border-color .18s, box-shadow .18s; }
.feat-v2 .feat-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.feat-v2 .sort-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 236px; display: none; padding: 8px; background: var(--page); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .14); }
.feat-v2 .sort-pop.open { display: block; }
.feat-v2 .sort-pop h4 { margin: 6px 10px 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.feat-v2 .sort-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); transition: background .14s, color .14s; }
.feat-v2 .sort-opt:hover { background: var(--soft); color: var(--ink); }
.feat-v2 .sort-opt .material-icons { font-size: 18px; opacity: 0; color: var(--accent); }
.feat-v2 .sort-opt.sel { color: var(--ink); font-weight: 600; }
.feat-v2 .sort-opt.sel .material-icons { opacity: 1; }

/* ── Filtro de talla (solo negocios de ropa) ──────────────────────────── */
.feat-v2 .age-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 26px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.feat-v2 .age-group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.feat-v2 .age-label { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.feat-v2 .age-label .material-icons { font-size: 16px; color: var(--accent); }
.feat-v2 .chip { cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--page); color: var(--ink-2); transition: color .16s, background .16s, border-color .16s; }
.feat-v2 .chip:hover { border-color: var(--accent); color: var(--accent); }
.feat-v2 .chip.active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.feat-v2 .age-clear { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; font-family: inherit; font-size: 12.5px; color: var(--ink-3); transition: color .16s; }
.feat-v2 .age-clear:hover { color: var(--sale); }
.feat-v2 .age-clear .material-icons { font-size: 16px; }

/* ── Grilla ───────────────────────────────────────────────────────────── */
.feat-v2 .feat-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: clamp(14px, 1.6vw, 24px); }
/* En la vitrina el aire bajo el título lo pone la barra de filtros. Donde no
   hay barra —los relacionados de la ficha— la grilla quedaba pegada al
   título, así que se lo pone ella misma. */
.feat-v2 .feat-head + .feat-grid { margin-top: clamp(24px, 3vw, 38px); }
.feat-v2 .feat-empty { display: none; padding: 56px 0; text-align: center; color: var(--ink-3); font-size: 14px; }
.feat-v2 .feat-empty.show { display: block; }

/* ── Tarjeta ──────────────────────────────────────────────────────────── */
.pcard { position: relative; display: flex; flex-direction: column; background: var(--page); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.pcard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); border-color: transparent; }

/* ── La foto ──────────────────────────────────────────────────────────
   El marco se adapta a la foto, no al revés.

   Antes el marco era cuadrado y la foto se metía adentro con `contain`. Eso
   no recortaba nada, pero una foto vertical —que es como se fotografía la
   ropa— quedaba flaca en el centro con dos franjas vacías a los lados. Con
   `cover` no había franjas, pero se comía la cabeza o los pies de la prenda.
   Las dos salidas eran malas.

   Acá la imagen entra con su alto natural (`height: auto`), así que se ve
   completa y llena el ancho de la tarjeta: ni recorte ni franjas. El costo es
   que las fotos quedan a distinta altura según la proporción de cada una; eso
   lo absorbe el pie de la tarjeta, que se estira, así que los precios de una
   misma fila siguen alineados.

   El `max-height` es solo un tope para fotos absurdamente largas: ahí sí se
   vuelve a `contain`, porque una tarjeta de tres metros es peor que dos
   franjas. */
.pc-media { position: relative; background: var(--page); overflow: hidden; }
/* En bloque: como enlace en línea dejaba el hueco del renglón bajo la foto,
   y ese hueco se leía como un borde raro entre la imagen y el pie. */
.pc-media .pc-link { display: block; }
.pc-media img {
    width: 100%; height: auto; display: block;
    max-height: 560px; object-fit: contain;
    padding: var(--pad);
    transition: transform .5s var(--ease);
}
/* Quien prefiera el recorte cuadrado lo pide por tarjeta. */
.pcard[data-fit="cover"] .pc-media { aspect-ratio: 1/1; }
.pcard[data-fit="cover"] .pc-media img { height: 100%; max-height: none; object-fit: cover; padding: 0; }
.pcard:hover .pc-media img { transform: scale(1.05); }

.pc-badges { position: absolute; top: 11px; left: 11px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pc-badge { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; color: #fff; line-height: 1; }
.pc-badge.sale { background: var(--sale); }

.pc-fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, .94); color: var(--ink-3); transition: transform .18s, color .18s; }
.pc-fav .fa { font-size: 17px; }
.pc-fav .fa.text-danger { color: var(--sale) !important; }
.pc-fav:hover { transform: scale(1.08); color: var(--sale); }
.pc-fav.on { color: var(--accent); }

.pc-actions { position: absolute; left: 11px; right: 11px; bottom: 11px; z-index: 2; display: flex; gap: 7px; opacity: 0; transform: translateY(12px); transition: opacity .26s var(--ease), transform .26s var(--ease); }
.pcard:hover .pc-actions { opacity: 1; transform: none; }
.pc-add { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--ink); color: var(--page); padding: 10px 12px; border-radius: 10px; transition: background .18s; }
.pc-add:hover { background: var(--accent); color: #fff; }
.pc-add .material-icons { font-size: 17px; }
.pc-detail { flex: 0 0 auto; width: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--page); color: var(--ink); border-radius: 10px; cursor: pointer; transition: border-color .18s, color .18s; }
.pc-detail:hover { border-color: var(--accent); color: var(--accent); }
.pc-detail .material-icons { font-size: 18px; }

/* El `flex: 1` de acá, más el `margin-top: auto` del renglón de precio, son
   los que enderezan la fila: la grilla estira todas las tarjetas al alto de
   la más alta, el pie se come el sobrante y el precio queda al fondo. Por eso
   los precios siguen alineados aunque las fotos midan distinto. */
.pc-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pc-cat { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pc-name { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.36; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.72em; }
.pc-stock { font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.pc-stock .material-icons { font-size: 14px; }
.pc-stock.order { color: var(--accent); }
.pc-sizes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.pc-size { font-size: 10.5px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; line-height: 1.2; }
.pc-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 5px; flex-wrap: wrap; }
.pc-price { font-size: 17.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.pc-was { font-size: 12.5px; color: var(--sale); text-decoration: line-through; }

/* ── Aviso de «agregado» ──────────────────────────────────────────────── */
.feat-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 2000; background: #222; color: #fff; font-family: 'Poppins', Arial, sans-serif; font-size: 13.5px; font-weight: 500; padding: 12px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 12px 36px rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.feat-toast.show { opacity: 1; transform: translate(-50%, 0); }
.feat-toast .material-icons { font-size: 18px; color: #7ee0a3; }
.feat-toast.error .material-icons { color: #ffb3ae; }

/* ── Entrada escalonada ───────────────────────────────────────────────── */
.feat-v2 .rv { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: no-preference) {
    .feat-v2 .rv { transition: opacity .5s var(--ease), transform .5s var(--ease); }
    .feat-v2.inview .rv { transition-delay: var(--d, 0s); }
}
.feat-v2.inview .rv { opacity: 1; transform: none; }

@media (max-width: 1100px) { .feat-v2 { --cols: 3; } }
@media (max-width: 800px) {
    .feat-v2 { --cols: 2; }
    .feat-v2 .feat-toolbar { flex-wrap: wrap; }
    .feat-v2 .tabs-shell { order: 2; flex-basis: 100%; }
    .feat-v2 .feat-actions { order: 1; margin-left: auto; }
}
@media (max-width: 440px) {
    .feat-v2 { --cols: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Departamentos y categorías — diseño v2

   Mismo lenguaje que la vitrina. El cambio de fondo respecto al diseño viejo:
   el nombre sale de la foto. Antes iba superpuesto en oscuro sobre la imagen y
   con una foto clara no se leía; ahora la foto queda limpia y el nombre va
   debajo.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-v2 {
    --accent: #717fe0;
    --accent-tint: rgba(113, 127, 224, .12);
    --ink: #222;
    --ink-2: #555;
    --ink-3: #888;
    --ink-4: #aaa;
    --line: #e6e6e6;
    --soft: #f7f7f7;
    --page: #fff;
    --r-card: 14px;
    --maxw: 1380px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    padding: clamp(44px, 7vh, 90px) 0;
    color: var(--ink-2);
    font-family: 'Poppins', Arial, sans-serif;
}

.nav-v2 *, .nav-v2 *::before, .nav-v2 *::after { box-sizing: border-box; }
.nav-v2 a { color: inherit; text-decoration: none; }
.nav-v2 .nav-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 60px); }

/* ── Encabezado ───────────────────────────────────────────────────────── */
.nav-v2 .nv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 38px); }
.nav-v2 .nv-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); margin: 0 0 10px; flex-wrap: wrap; }
.nav-v2 .nv-crumb .material-icons { font-size: 15px; color: var(--ink-4); }
.nav-v2 .nv-crumb a:hover { color: var(--accent); }
.nav-v2 .nv-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.nav-v2 .nv-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-v2 .nv-title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(26px, 3.1vw, 42px); line-height: 1.06; letter-spacing: -.01em; color: var(--ink); }
.nav-v2 .nv-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 46ch; }
.nav-v2 .nv-count { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.nav-v2 .nv-count b { color: var(--ink-2); font-weight: 600; }
.nav-v2 .nv-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--accent); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease); }
.nav-v2 .nv-all:hover { border-color: var(--accent); }
.nav-v2 .nv-all .material-icons { font-size: 18px; }

/* auto-fit reparte lo que haya: con 3 en una fila de 4 quedan alineados a la
   izquierda, no uno suelto y centrado en la fila siguiente. */
.nav-v2 .nv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.nav-v2 .nv-grid.chico { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(14px, 1.6vw, 22px); }

/* ── Tarjeta ──────────────────────────────────────────────────────────── */
.nav-v2 .nvcard { display: flex; flex-direction: column; background: var(--page); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.nav-v2 .nvcard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); border-color: transparent; }
.nav-v2 .nv-media { position: relative; aspect-ratio: 4/3; background: var(--soft); overflow: hidden; }
.nav-v2 .nv-grid.chico .nv-media { aspect-ratio: 1/1; }
.nav-v2 .nv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.nav-v2 .nvcard:hover .nv-media img { transform: scale(1.045); }
.nav-v2 .nv-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px 16px; }
.nav-v2 .nv-name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.nav-v2 .nv-grid.chico .nv-name { font-size: 14.5px; }
.nav-v2 .nv-go { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-3); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.nav-v2 .nv-go .material-icons { font-size: 18px; }
.nav-v2 .nvcard:hover .nv-go { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ── Cambiar de departamento ──────────────────────────────────────────── */
.nav-v2 .dtabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 0 clamp(22px, 2.6vw, 32px); }
.nav-v2 .dtabs::-webkit-scrollbar { display: none; }
.nav-v2 .dtab { flex: 0 0 auto; font-size: 13px; font-weight: 500; white-space: nowrap; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--page); color: var(--ink-2); transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }
.nav-v2 .dtab:hover { color: var(--ink); border-color: var(--ink-4); }
.nav-v2 .dtab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.nav-v2 .nv-empty { padding: 48px 0; text-align: center; color: var(--ink-3); font-size: 14px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Cuántos productos por fila — solo en pantalla chica

   En un celular la tarjeta a dos columnas deja la foto muy chica para juzgar
   una prenda. El control deja elegir; se recuerda entre pantallas. En
   escritorio no aparece: ahí el espacio alcanza y la grilla ya se acomoda.
   ═══════════════════════════════════════════════════════════════════════════ */
.vcols { display: none; }

@media (max-width: 1024px) {
    .vcols {
        display: flex; align-items: center; gap: 6px; margin: 0 0 14px;
        font-family: 'Poppins', Arial, sans-serif;
    }
    .vcols-lbl { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #888; margin-right: 2px; }
    .vcols button {
        width: 34px; height: 30px; display: grid; place-items: center; cursor: pointer;
        border: 1px solid #e6e6e6; background: #fff; color: #888; border-radius: 8px; padding: 0;
        transition: border-color .16s, color .16s, background .16s;
    }
    .vcols button .material-icons { font-size: 17px; }
    .vcols button.on { border-color: var(--accent, #717fe0); color: var(--accent, #717fe0); background: rgba(113,127,224,.08); }

    body.vcols-1 .feat-grid { --cols: 1; }
    body.vcols-2 .feat-grid { --cols: 2; }

    /* Las grillas de Bootstrap que ya existían: la columna manda sobre la
       tarjeta, así que hay que tocarla a ella y no a `.pcard`. */
    body.vcols-1 .isotope-item { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    body.vcols-2 .isotope-item { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Filtro del listado por categoría

   Mismo aspecto que la barra de la portada, pero sobre el marcado que ya
   escuchaba main.js: se cambia el vestido, no el mecanismo.
   ═══════════════════════════════════════════════════════════════════════════ */
.fv2-bar {
    --accent: #717fe0;
    --accent-tint: rgba(113, 127, 224, .12);
    --ink: #222; --ink-2: #555; --ink-3: #888; --ink-4: #aaa;
    --line: #e6e6e6; --soft: #f7f7f7; --page: #fff;
    --ease: cubic-bezier(.2, .7, .2, 1);

    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 0 0 22px; font-family: 'Poppins', Arial, sans-serif;
}

.fv2-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px 0; }
.fv2-tabs::-webkit-scrollbar { display: none; }
.fv2-tabs .tab {
    flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
    white-space: nowrap; padding: 9px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--page); color: var(--ink-2);
    transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.fv2-tabs .tab:hover { color: var(--ink); border-color: var(--ink-4); }
/* `how-active1` es la clase que main.js mueve entre pestañas. */
.fv2-tabs .tab.how-active1 { background: var(--accent); border-color: var(--accent); color: #fff; }

.fv2-acts { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.fv2-acts .act {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--page); color: var(--ink);
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.fv2-acts .act:hover { border-color: var(--accent); color: var(--accent); }
.fv2-acts .act .material-icons { font-size: 18px; }

.fv2-panel {
    --accent: #717fe0; --accent-tint: rgba(113, 127, 224, .12);
    --ink: #222; --ink-2: #555; --ink-3: #888; --line: #e6e6e6; --soft: #f7f7f7; --page: #fff;

    font-family: 'Poppins', Arial, sans-serif;
    background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px; margin: 0 0 24px;
    display: flex; flex-direction: column; gap: 14px;
}
.fv2-grupo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fv2-grupo-tit {
    flex: 0 0 auto; min-width: 74px; padding-top: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.fv2-chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; }
.fv2-chips .chip {
    cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--page); color: var(--ink-2);
    transition: color .16s, background .16s, border-color .16s;
}
.fv2-chips .chip:hover { border-color: var(--accent); color: var(--accent); }
/* main.js marca el elegido con `filter-link-active`. */
.fv2-chips .chip.filter-link-active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); font-weight: 600; }