/* ═══════════════════════════════════════════════════════════
   PECADO — tienda.css · Solo página de tienda (filtros, orden, paginación)
   ═══════════════════════════════════════════════════════════ */

.shop-layout { display: flex; gap: 36px; align-items: flex-start; }
.shop-layout > .shop-filters { flex: 0 0 240px; }
.shop-layout > #shop-main { flex: 1 1 0; min-width: 0; }

/* Carga por fetch sin recargar la página */
#shop-main { scroll-margin-top: calc(var(--header-h) + 16px); transition: opacity .15s ease; }
#shop-main.is-loading { opacity: .45; pointer-events: none; }
/* Sidebar pegajoso con alto fijo: la lista hace scroll interno y no estira la página */
.shop-filters {
    position: -webkit-sticky; position: sticky; position: sticky;
    top: calc(var(--header-h) + 20px);
    max-height: calc(100vh - var(--header-h) - 40px);
    display: flex; flex-direction: column;
}
/* Botón "Filtrar" — solo visible en móvil */
.filters-toggle { display: none; }
.filter-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; margin-bottom: 18px;
    display: flex; flex-direction: column; min-height: 0;
}
.filter-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; }
.filters-close { display: none; }
.filter-box h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 14px; }
.filter-list {
    display: flex; flex-direction: column; gap: 4px;
    min-height: 0; overflow-y: auto; padding-right: 6px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.filter-list::-webkit-scrollbar { width: 6px; }
.filter-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.filter-list a {
    padding: 8px 12px; border-radius: var(--radius-sm); font-size: .92rem;
    color: var(--text-soft); display: flex; justify-content: space-between;
    transition: var(--transition);
}
.filter-list a:hover { background: var(--surface-2); color: var(--text); }
.filter-list a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.filter-list a span { color: var(--text-faint); font-size: .8rem; }
.filter-list a.cat-hija { padding-left: 26px; font-size: .87rem; }

/* Acordeón: la categoría padre despliega sus subcategorías (una a la vez) */
.cat-grupo { display: flex; flex-direction: column; }
.cat-row { display: flex; align-items: stretch; gap: 2px; }
.cat-row .cat-padre { flex: 1; min-width: 0; }
.cat-toggle {
    flex: 0 0 auto; width: 30px; border: 0; background: none; cursor: pointer;
    color: var(--text-faint); border-radius: var(--radius-sm); font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.cat-toggle:hover { background: var(--surface-2); color: var(--text); }
.cat-toggle i { transition: transform .2s; }
.cat-grupo.abierto .cat-toggle i { transform: rotate(180deg); }
.cat-sub { display: none; flex-direction: column; gap: 4px; }
.cat-grupo.abierto .cat-sub { display: flex; }

.shop-toolbar {
    display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
}
.shop-toolbar .results { color: var(--text-soft); font-size: .9rem; }
.shop-toolbar select {
    margin-left: auto; background: var(--input-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem; outline: none;
}
.shop-toolbar .sort-form { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shop-toolbar .sort-form select { margin-left: 0; }

.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); color: var(--text-soft); font-weight: 600;
    font-size: .85rem; transition: var(--transition);
}
.pagination a:hover { border-color: var(--pecado-red); color: var(--accent-text); }
.pagination a.active { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.pagination span.disabled { opacity: .35; }
.pagination span.pag-dots { border: none; min-width: 14px; padding: 0; color: var(--text-faint); }

/* ══════════════ Responsive ══════════════ */
@media (max-width: 980px) {
    .shop-layout { flex-direction: column; gap: 18px; }
    .shop-layout > .shop-filters { flex-basis: auto; align-self: stretch; }
    .shop-filters { position: static; min-width: 0; max-height: none; width: 100%; }
    .shop-layout > * { min-width: 0; }
    /* Filtros colapsados tras el botón "Filtrar" (panel vertical con acordeón) */
    .filters-toggle {
        display: flex; align-items: center; gap: 10px; width: 100%;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 13px 16px; font-family: inherit; font-size: .92rem; font-weight: 600;
        color: var(--text); cursor: pointer; transition: var(--transition);
    }
    .filters-toggle > i:first-child { color: var(--accent-text); font-size: 1.15rem; }
    .filters-toggle .ft-arrow { margin-left: auto; color: var(--text-faint); font-size: 1.2rem; transition: transform .2s; }
    .shop-filters.abierto .filters-toggle .ft-arrow { transform: rotate(180deg); }
    /* Hoja de filtros que sube desde abajo: empieza bajo el botón (--filter-top) y llega al borde inferior */
    .filter-box {
        position: fixed; left: 0; right: 0; bottom: 0; top: var(--filter-top, 0); z-index: 950;
        margin: 0; padding: 0; background: var(--bg); border: none;
        border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
        overflow: hidden; transform: translateY(100%); visibility: hidden;
        transition: transform .3s ease, visibility .3s;
    }
    .shop-filters.abierto .filter-box { transform: none; visibility: visible; }
    .filter-head { padding: 14px 18px; border-bottom: 1px solid var(--border); }
    .filter-head h4 { margin-bottom: 0; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text); }
    .filters-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border: 0; border-radius: 50%;
        background: var(--surface-2); color: var(--text); font-size: 1.3rem; cursor: pointer;
    }
    .filter-list { flex: 1; overflow-y: auto; padding: 14px 18px 28px; }
    body.filters-open { overflow: hidden; }
}

@media (max-width: 720px) {
    .shop-toolbar { margin-bottom: 16px; gap: 10px; }
    .shop-toolbar .results { font-size: .82rem; }
    .shop-toolbar select { width: auto; margin-left: auto; padding: 8px 12px; font-size: .85rem; }
}