/* ================================================================
   Left facet panel — products.php
   ----------------------------------------------------------------
   Desktop: a sticky rail beside the grid. Mobile: an off-canvas drawer
   opened by the "Filters" button, because a 260px rail on a 375px
   screen leaves no room for products.
   ================================================================ */

:root {
    --fp-gold: #d4a373;
    --fp-ink: #1a1a1a;
    --fp-muted: #8a8a8a;
    --fp-line: #ece7e1;
    --fp-card: #fff;
}

/* Two columns: rail + results. minmax(0,1fr) on the content column so a wide
   card can never push the grid past the viewport (`1fr` alone floors at
   min-content and would widen the page). */
.plist-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.fp-panel {
    background: var(--fp-card);
    border: 1px solid var(--fp-line);
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 86px;                 /* clears the sticky site header */
    /* No max-height / overflow-y here on purpose. It used to cap the panel at
       the viewport and scroll inside itself, so reaching Rating at the bottom
       meant finding and using a second scrollbar nested in the page. The panel
       now takes its natural height and the page scroll reaches all of it. The
       mobile drawer below is a different case and does need to scroll. */
    font-size: .84rem;
}

.fp-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--fp-line);
    font-weight: 800; font-size: .9rem; color: var(--fp-ink);
}
.fp-head i { color: var(--fp-gold); }
.fp-clear { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--fp-gold); text-decoration: none; }
.fp-close { display: none; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--fp-muted); cursor: pointer; }

/* ---- applied filter chips ---- */
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--fp-line); }
.fp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fdf6ef; border: 1px solid #e8d5c0; color: #8a5a2b;
    border-radius: 30px; padding: 4px 10px; font-size: .72rem; font-weight: 600; text-decoration: none;
}
.fp-chip i { font-size: .62rem; opacity: .75; }
.fp-chip:hover { background: #f7e6d6; }

/* ---- one collapsible section ---- */
.fp-sec { border-bottom: 1px solid var(--fp-line); }
.fp-sec:last-child { border-bottom: 0; }
.fp-sec > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 15px; cursor: pointer;
    font-size: .7rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    color: var(--fp-ink); list-style: none;
}
.fp-sec > summary::-webkit-details-marker { display: none; }
.fp-sec > summary i { font-size: .64rem; color: var(--fp-muted); transition: transform .2s; }
.fp-sec[open] > summary i { transform: rotate(180deg); }
.fp-body { padding: 0 15px 12px; }

/* ---- an option row ---- */
.fp-opt {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 0; text-decoration: none; color: #444; font-size: .8rem;
}
.fp-opt:hover .fp-lbl { color: var(--fp-gold); }
.fp-opt.on .fp-lbl { color: var(--fp-ink); font-weight: 700; }
.fp-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-n { color: var(--fp-muted); font-size: .72rem; flex: 0 0 auto; }

.fp-box, .fp-radio {
    flex: 0 0 auto; width: 16px; height: 16px;
    border: 1.5px solid #cfc6bb; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem; color: #fff;
}
.fp-box { border-radius: 4px; }
.fp-radio { border-radius: 50%; font-size: .42rem; }
.fp-opt.on .fp-box, .fp-opt.on .fp-radio { background: var(--fp-gold); border-color: var(--fp-gold); }

/* Options past the first few stay hidden until "+ N more" is pressed. */
.fp-extra { display: none; }
.fp-body.fp-open .fp-extra { display: flex; }
.fp-more { background: none; border: none; padding: 6px 0 0; color: var(--fp-gold); font: 700 .74rem inherit; cursor: pointer; }

/* ---- mobile: the rail becomes a drawer ---- */
.fp-toggle { display: none; }
.fp-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 998; }
.fp-backdrop.on { display: block; }

@media (max-width: 900px) {
    .plist-layout { grid-template-columns: 1fr; padding: 0 14px; }

    .fp-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        background: #fff; border: 1px solid var(--fp-line); border-radius: 30px;
        padding: 9px 16px; font: 700 .8rem inherit; color: var(--fp-ink); cursor: pointer;
    }
    .fp-toggle .fp-count { background: var(--fp-gold); color: #fff; border-radius: 20px; padding: 0 7px; font-size: .68rem; }

    .fp-panel {
        position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw;
        z-index: 999; border-radius: 0; max-height: none;
        /* A full-height drawer pinned top to bottom genuinely has to scroll —
           there is no page behind it to scroll instead. */
        overflow-y: auto;
        transform: translateX(-100%); transition: transform .28s ease;
    }
    .fp-panel.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.3); }
    .fp-close { display: block; }
    .fp-head { position: sticky; top: 0; background: var(--fp-card); z-index: 2; }
}