/* ============================================================================
   tienda2026.css — Listados de la tienda: categoria, marca, busqueda.
   ----------------------------------------------------------------------------
   Cabeceras, barra de filtros, modal de filtros, estado vacio y paginacion.
   Depende de las variables --ft-* definidas en home2026.css, que se carga antes.
   ========================================================================== */

/* ── Cabecera de categoria / marca ───────────────────────────────────────── */
.ft-listhead {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(150deg, #102b19 0%, #1a5730 60%, #24803a 130%);
    color: #fff; padding: 46px 0 52px;
}
.ft-listhead .ft-wrap { position: relative; z-index: 2; }
.ft-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.ft-migas a { color: rgba(255,255,255,.78); transition: var(--ft-ease); }
.ft-migas a:hover { color: #fff; text-decoration: underline; }
.ft-migas__actual { color: #fff; font-weight: 600; }
.ft-listhead__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; line-height: 1.14; }
.ft-listhead__desc { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.8); max-width: 66ch; margin: 0; }
.ft-listhead__logo { background: #fff; border-radius: 14px; padding: 12px 18px; display: inline-block; margin-bottom: 16px; }
.ft-listhead__logo img { max-height: 62px; width: auto; }
.ft-listhead__search {
    display: flex; align-items: center; gap: 10px; margin-top: 26px; max-width: 520px;
    background: #fff; border-radius: var(--ft-r-pill); padding: 6px 6px 6px 18px;
    box-shadow: 0 14px 34px rgba(6,26,14,.28);
}
.ft-listhead__search svg { color: var(--ft-green); flex: none; }
.ft-listhead__search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: .95rem; color: var(--ft-ink); padding: 10px 2px; min-width: 0; }
.ft-listhead__search button { flex: none; padding: 10px 22px; border-radius: var(--ft-r-pill); background: var(--ft-green); color: #fff; font-size: .88rem; font-weight: 600; }
.ft-listhead__search button:hover { background: var(--ft-green-dark); }

/* ── Barra de categorias / marcas ────────────────────────────────────────── */
.ft-catbar { background: #fff; border-bottom: 1px solid var(--ft-line); }
.ft-catbar__scroll { display: flex; gap: 10px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; scrollbar-width: none; }
.ft-catbar__scroll::-webkit-scrollbar { display: none; }
.ft-catbar__item {
    flex: none; padding: 9px 18px; border-radius: var(--ft-r-pill);
    background: var(--ft-cream); border: 1px solid var(--ft-line);
    font-size: .88rem; font-weight: 600; color: var(--ft-body); white-space: nowrap; transition: var(--ft-ease);
}
.ft-catbar__item:hover { border-color: var(--ft-green); color: var(--ft-green); transform: translateY(-2px); }
.ft-catbar__item.is-on { background: var(--ft-green); border-color: var(--ft-green); color: #fff; }
.ft-catbar__item--todas { background: transparent; border-style: dashed; }

/* ── Barra de filtros ────────────────────────────────────────────────────── */
.ft-filtros { margin-bottom: 32px; }
.ft-filtros__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ft-filtros__count { font-size: .95rem; color: var(--ft-body); margin: 0; display: flex; align-items: center; gap: 10px; }
.ft-filtros__count strong { color: var(--ft-ink); font-size: 1.05rem; }
.ft-filtros__badge { font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: var(--ft-r-pill); background: var(--ft-green-soft); color: var(--ft-green-dark); }
.ft-filtros__acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ft-filtros__abrir {
    display: inline-flex; align-items: center; gap: 8px; position: relative;
    padding: 10px 20px; border-radius: var(--ft-r-pill); border: 1.5px solid var(--ft-line);
    background: #fff; font-family: inherit; font-size: .9rem; font-weight: 600;
    color: var(--ft-ink); transition: var(--ft-ease);
}
.ft-filtros__abrir:hover { border-color: var(--ft-green); color: var(--ft-green); }
.ft-filtros__abrir svg { color: var(--ft-green); }
.ft-filtros__punto { min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--ft-r-pill); background: var(--ft-green); color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ft-filtros__orden { display: flex; align-items: center; gap: 8px; }
.ft-filtros__ordenLabel { font-size: .85rem; color: var(--ft-muted); }
.ft-filtros__orden select {
    padding: 10px 16px; border-radius: var(--ft-r-pill); border: 1.5px solid var(--ft-line);
    background: #fff; font-family: inherit; font-size: .9rem; color: var(--ft-ink); cursor: pointer;
}
.ft-filtros__orden select:hover { border-color: var(--ft-green); }
.ft-filtros__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ft-fchip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
    border-radius: var(--ft-r-pill); background: var(--ft-green-soft);
    color: var(--ft-green-dark); font-size: .84rem; font-weight: 600; transition: var(--ft-ease);
}
.ft-fchip span { font-size: 1.05rem; line-height: 1; opacity: .7; }
.ft-fchip:hover { background: var(--ft-green); color: #fff; }
.ft-fchip--limpiar { background: transparent; border: 1px dashed var(--ft-line); color: var(--ft-muted); }
.ft-fchip--limpiar:hover { background: transparent; border-color: var(--ft-ink); color: var(--ft-ink); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.ft-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ft-modal[hidden] { display: none; }
.ft-modal__fondo { position: absolute; inset: 0; background: rgba(10,26,16,.6); backdrop-filter: blur(4px); animation: ft-fade .22s ease; }
@keyframes ft-fade { from { opacity: 0; } to { opacity: 1; } }
.ft-modal__caja {
    position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 86vh;
    display: flex; flex-direction: column; background: #fff; border-radius: var(--ft-r-lg);
    overflow: hidden; box-shadow: 0 30px 80px rgba(6,26,14,.4);
    animation: ft-pop .26s cubic-bezier(.34,1.3,.64,1);
}
@keyframes ft-pop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.ft-modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--ft-line); }
.ft-modal__cabecera h2 { font-size: 1.15rem; font-weight: 700; color: var(--ft-ink); margin: 0; }
.ft-modal__x { width: 34px; height: 34px; border-radius: 50%; background: var(--ft-cream); color: var(--ft-body); font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: var(--ft-ease); }
.ft-modal__x:hover { background: var(--ft-ink); color: #fff; }
.ft-modal__cuerpo { padding: 22px 24px; overflow-y: auto; flex: 1; }
.ft-modal__grupo { margin-bottom: 26px; }
.ft-modal__grupo:last-child { margin-bottom: 0; }
.ft-modal__grupo h3 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ft-muted); margin: 0 0 12px; }
.ft-modal__pista { font-size: .84rem; color: var(--ft-muted); margin: 0 0 12px; }
.ft-modal__pie { display: flex; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--ft-line); background: var(--ft-cream); }
.ft-modal__pie .ft-btn { flex: 1; }

.ft-radios { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.ft-radio, .ft-check { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; cursor: pointer; transition: var(--ft-ease); font-size: .93rem; color: var(--ft-body); }
.ft-radio:hover, .ft-check:hover { background: var(--ft-cream); }
.ft-radio input, .ft-check input { accent-color: var(--ft-green); width: 17px; height: 17px; flex: none; cursor: pointer; }
.ft-radio span small { color: var(--ft-muted); font-size: .78rem; margin-left: 4px; }
.ft-check { margin-bottom: 2px; }
.ft-precio { display: flex; gap: 12px; }
.ft-precio label { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ft-muted); }
.ft-precio input { width: 100%; min-width: 0; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--ft-line); font-family: inherit; font-size: .95rem; color: var(--ft-ink); outline: 0; }
.ft-precio input:focus { border-color: var(--ft-green); }

body.ft-modal-abierto { overflow: hidden; }

/* ── Estado vacio ────────────────────────────────────────────────────────── */
.ft-vacio { text-align: center; padding: 72px 20px; }
.ft-vacio__ico { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; background: var(--ft-green-soft); color: var(--ft-green); display: flex; align-items: center; justify-content: center; }
.ft-vacio h2 { font-size: 1.4rem; font-weight: 700; color: var(--ft-ink); margin: 0 0 10px; }
.ft-vacio p { color: var(--ft-muted); margin: 0 0 26px; }
.ft-vacio__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Paginacion ──────────────────────────────────────────────────────────── */
.ft-pag { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 52px; flex-wrap: wrap; }
.ft-pag__b { padding: 12px 26px; border-radius: var(--ft-r-pill); border: 1.5px solid var(--ft-line); font-size: .92rem; font-weight: 600; color: var(--ft-ink); transition: var(--ft-ease); }
.ft-pag__b:hover { border-color: var(--ft-green); color: var(--ft-green); transform: translateY(-2px); }
.ft-pag__n { font-size: .9rem; color: var(--ft-muted); }

@media (max-width: 720px) {
    .ft-listhead { padding: 32px 0 38px; }
    .ft-filtros__top { gap: 12px; }
    .ft-filtros__ordenLabel { display: none; }
    .ft-filtros__orden { flex: 1; }
    .ft-filtros__orden select { width: 100%; }
    .ft-filtros__acciones { width: 100%; }
    /* En movil el modal sube desde abajo, como una app */
    .ft-modal { padding: 0; align-items: flex-end; }
    .ft-modal__caja { max-width: none; max-height: 92vh; border-radius: var(--ft-r-lg) var(--ft-r-lg) 0 0; animation: ft-up .3s cubic-bezier(.4,0,.2,1); }
    @keyframes ft-up { from { transform: translateY(100%); } to { transform: none; } }
    .ft-precio { flex-direction: column; gap: 10px; }
}

/* Bloque partido SIN imagen: se lee de arriba abajo, centrado y con el texto
   a un ancho comodo. Antes se repartia en dos columnas y el titulo quedaba
   suelto a un lado, que se leia raro. */
.ft-split__grid.ft-split--solo { grid-template-columns: 1fr; max-width: 940px; margin: 0 auto; }
.ft-split--solo .ft-split__text { text-align: left; }
.ft-split--solo .ft-lead, .ft-split--solo .ft-split__text p { max-width: 72ch; }
.ft-split--solo .ft-split__list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.ft-split--solo .ft-stats { border-top: 1px solid var(--ft-line); padding-top: 26px; }
@media (max-width: 720px) {
    .ft-split--solo .ft-split__list { grid-template-columns: 1fr; }
}

/* ── Tarjetas de categoria altas: el texto tiene que leerse sobre CUALQUIER
   foto, incluidas las de producto sobre fondo blanco. ───────────────────── */
.ft-cat--tall .ft-cat__img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,28,16,.94) 0%, rgba(8,28,16,.55) 38%, rgba(8,28,16,.12) 70%, transparent 100%);
}
.ft-cat--tall .ft-cat__body { background: none; padding: 26px 22px; }
.ft-cat--tall .ft-cat__name { font-size: 1.22rem; line-height: 1.22; margin-bottom: 7px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.ft-cat--tall .ft-cat__more { font-size: .88rem; }
.ft-cat--tall .ft-cat__img { background: linear-gradient(150deg, #1a5730, #2f9e44); }
.ft-cat--tall .ft-cat__img img { object-fit: cover; }

/* ── Alineacion de la rejilla de productos ───────────────────────────────────
   En una rejilla, la fila crece hasta la tarjeta mas alta y las demas se
   estiran: sin esto la foto se agranda y los precios quedan a distinta altura.
   Se fija la foto y se reserva sitio para dos lineas de nombre, de modo que
   marca, nombre y precio caen siempre en la misma linea horizontal. */
.ft-prod__img { flex: none; }
.ft-prod__brand { min-height: 1em; }
.ft-prod__name { min-height: 2.6em; }
.ft-prod__foot { margin-top: auto; padding-top: 6px; }

/* ── Nada se sale por el lado en movil ───────────────────────────────────────
   Una sola pieza que desborde saca barra horizontal y descoloca TODA la
   pagina. Se corta de raiz y se obliga a los titulares a partir palabras. */
html, body { max-width: 100%; overflow-x: hidden; }
.ft-hero, .ft-listhead, .ft-sec, .ft-usp, .ft-cta, .ft-catbar { max-width: 100vw; }
.ft-hero__title, .ft-listhead__title, .ft-h2, .ft-cta__title { overflow-wrap: break-word; hyphens: auto; }
.ft-search__form, .ft-stickysearch__form, .ft-listhead__search { max-width: 100%; }
.ft-prod__name, .ft-cat__name { overflow-wrap: break-word; }