/* ===================================
   Ecooza — Public catalog (product list)
   Faceted sidebar + product grid.
   Depends on the design tokens in style.css.
   =================================== */

.catalog {
    /* Wide enough that the longest seeded category ("Wellness & Personal Care")
       sits on one line. It was wrapping to two at 244px, which is what made the
       sidebar look cramped while the page still had gutter to spare. */
    --catalog-sidebar: 274px;
    --catalog-radius: 14px;
    --catalog-line: #e8eade;
    --catalog-muted: #6f7566;
    background: #fbfbf8;
    padding-bottom: 4rem;
}

/* The catalog is a working surface, not editorial copy. The site-wide 3rem
   gutter buys nothing here — it just pushes the filter panel away from the edge
   and squeezes the grid. Reclaiming it is the space the sidebar widening spends.
   Fluid, so it never ends up tighter than the mobile gutter it replaces. */
.catalog .container {
    padding-inline: clamp(1rem, 1.6vw, 1.75rem);
}

/* --- Header ------------------------------------------------------------ */

.catalog-head {
    background: linear-gradient(115deg, #f4f8e9 0%, #eef4dc 45%, #f9fbf1 100%);
    border-bottom: 1px solid var(--catalog-line);
    padding: 0.95rem 0;
}

/* Title left, occasion shortcuts right, baseline-aligned. */
.catalog-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
}

.catalog-head__title { min-width: 0; }

.catalog-crumb {
    font-size: 0.74rem;
    color: var(--catalog-muted);
    margin-bottom: 0.15rem;
}

.catalog-crumb a { color: var(--color-primary-dark); }
.catalog-crumb a:hover { text-decoration: underline; }

.catalog-head h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-text-primary);
}

/* Occasion shortcuts — the fastest path into a gifting brief. */
.catalog-quicklinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.catalog-quicklinks .ql-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b9377;
    margin-right: 0.15rem;
}

.catalog-quicklinks .ql {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #dfe6c6;
    background: rgba(255, 255, 255, 0.8);
    color: #4d5a26;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.catalog-quicklinks .ql:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

.catalog-quicklinks .ql.is-on {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

/* --- Layout ------------------------------------------------------------ */

.catalog-body {
    display: grid;
    grid-template-columns: var(--catalog-sidebar) minmax(0, 1fr);
    gap: 1.5rem;
    padding-top: 1.25rem;
    align-items: start;
}

.catalog-aside {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd6bd transparent;
}

.catalog-aside::-webkit-scrollbar { width: 6px; }
.catalog-aside::-webkit-scrollbar-thumb { background: #d5dcc3; border-radius: 4px; }

/* --- Filter panel ------------------------------------------------------ */

.filter-panel {
    background: #fff;
    border: 1px solid var(--catalog-line);
    border-radius: var(--catalog-radius);
    overflow: hidden;
}

.filter-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--catalog-line);
}

.filter-panel__top h2 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    margin: 0;
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-panel__top .count-pill {
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
}

.filter-clear {
    font-size: 0.8rem;
    font-weight: 600;
    color: #b3362c;
}

.filter-clear:hover { text-decoration: underline; }

/* Only meaningful once the panel becomes a drawer. */
.filter-close {
    display: none;
    padding: 0.2rem 0.4rem;
    border: 0;
    background: none;
    font-size: 1.05rem;
    color: #7d8471;
    cursor: pointer;
}

/* --- Filter group (collapsible) ---------------------------------------- */

.fgroup {
    border-bottom: 1px solid var(--catalog-line);
}

.fgroup:last-of-type { border-bottom: 0; }

.fgroup--primary { background: #fcfdf8; }

.fgroup__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem 0.55rem 0.85rem;
    color: var(--color-text-primary);
}

.fgroup__head:hover { background: #f6f8ee; }

/* The toggle is a compact button; its ::after below stretches the hit area over
   the whole row. See the note in templates/products/_fgroup_head.html for why it
   is not simply a button wrapping everything. */
.fgroup__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.fgroup__toggle::after {
    content: '';
    position: absolute;
    inset: 0;
}

.fgroup__toggle:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: -2px;
    border-radius: 6px;
}

.fgroup__head .fi {
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    width: 0.9rem;
    text-align: center;
    flex: none;
}

.fgroup__title {
    font-family: var(--font-heading);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    flex: 1;
    min-width: 0;
}

/* --- Filter group tools (search / info) --------------------------------- */

.fgroup__tools {
    /* Above .fgroup__toggle::after so these buttons receive their own clicks
       instead of the row-wide collapse overlay swallowing them. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: none;
}

.fgroup__tool {
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #a3ab94;
    font-size: 0.66rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fgroup__tool:hover,
.fgroup__tool[aria-expanded="true"] {
    background: var(--color-primary-very-light);
    color: var(--color-primary-dark);
}

.fgroup__tool:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 1px;
}

/* Circled "i", so it reads as an info affordance at 1.4rem rather than as a
   stray glyph. */
.fgroup__info {
    border: 1px solid #d3dabf;
    font-size: 0.58rem;
    font-weight: 700;
}

.fgroup__infowrap {
    position: relative;
    display: inline-flex;
}

.fgroup__tip {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: -0.3rem;
    z-index: 30;
    width: max-content;
    max-width: 210px;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: #2f3327;
    color: #f4f6ee;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    box-shadow: 0 8px 20px rgba(40, 45, 30, 0.22);
    /* Hidden by opacity, not `display` or `visibility`: both of those drop the
       element out of the accessibility tree, which would make the
       aria-describedby on the button point at nothing. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.fgroup__tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 0.55rem;
    border: 5px solid transparent;
    border-bottom-color: #2f3327;
}

/* Hover and focus for pointer/keyboard; aria-expanded is set by the click
   handler so touch users can reach it too. */
.fgroup__info:hover + .fgroup__tip,
.fgroup__info:focus-visible + .fgroup__tip,
.fgroup__info[aria-expanded="true"] + .fgroup__tip {
    opacity: 1;
}

.fgroup__badge {
    background: var(--color-primary-very-light);
    color: var(--color-primary-dark);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    flex: none;
}

.fgroup__chev {
    color: #a9b099;
    font-size: 0.7rem;
    flex: none;
    transition: transform 0.18s ease;
}

.fgroup[data-open="true"] .fgroup__chev { transform: rotate(180deg); }

.fgroup__body { padding: 0 0.85rem 0.7rem; }
.fgroup[data-open="false"] .fgroup__body { display: none; }

/* Revealed by the magnifier in the group header. */
.fgroup__findwrap {
    position: relative;
    margin-bottom: 0.45rem;
}

.fgroup__findwrap[hidden] { display: none; }

.fgroup__findwrap > i {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a3ab94;
    font-size: 0.7rem;
    pointer-events: none;
}

.fgroup__find {
    width: 100%;
    padding: 0.36rem 0.5rem 0.36rem 1.65rem;
    border: 1px solid #e4e8da;
    border-radius: 7px;
    font: inherit;
    font-size: 0.76rem;
    background: #fafbf6;
}

.fgroup__find:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(144, 173, 68, 0.14);
}

.fgroup__list {
    max-height: 208px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d5dcc3 transparent;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.fgroup__list::-webkit-scrollbar { width: 5px; }
.fgroup__list::-webkit-scrollbar-thumb { background: #dde3ce; border-radius: 4px; }

.fopt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.22rem 0.3rem;
    border-radius: 6px;
    font-size: 0.795rem;
    color: #4a5044;
    cursor: pointer;
    line-height: 1.3;
}

.fopt:hover { background: #f4f7ec; }
.fopt[hidden] { display: none; }

.fopt input {
    accent-color: var(--color-primary);
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0;
    cursor: pointer;
}

.fopt__label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fopt__count {
    font-size: 0.69rem;
    color: #a3aa96;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.fopt.is-checked { color: var(--color-primary-dark); font-weight: 600; }
.fopt.is-empty { opacity: 0.45; cursor: not-allowed; }
.fopt.is-empty:hover { background: none; }

.fgroup__empty {
    font-size: 0.8rem;
    color: #9aa38c;
    padding: 0.2rem 0.35rem 0.4rem;
    margin: 0;
}

.fgroup__none {
    font-size: 0.8rem;
    color: #9aa38c;
    padding: 0.35rem;
    margin: 0;
}

.filter-actions {
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--catalog-line);
}

.filter-actions .btn { width: 100%; }
.filter-panel.js-on .filter-actions { display: none; }

/* --- Results ----------------------------------------------------------- */

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

.catalog-toolbar .result-count {
    font-size: 0.92rem;
    color: #56604c;
}

.catalog-toolbar .result-count b { color: var(--color-text-primary); }

.catalog-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--catalog-muted);
}

.catalog-sort select {
    padding: 0.48rem 2rem 0.48rem 0.75rem;
    border: 1px solid #dfe3d4;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.catalog-sort select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.filter-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #dfe3d4;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

/* Active filter chips */
.fchips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding-bottom: 1.1rem;
}

.fchip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.55rem 0.3rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dde4cd;
    font-size: 0.79rem;
    color: #4c5443;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.fchip:hover {
    border-color: #c2ccab;
    background: #f7faee;
    text-decoration: none;
    color: #4c5443;
}

.fchip .g {
    color: #9aa38c;
    font-size: 0.71rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.fchip i { font-size: 0.65rem; color: #a9b099; }
.fchip:hover i { color: #b3362c; }

.fchips .fchip-clear {
    font-size: 0.79rem;
    font-weight: 600;
    color: #b3362c;
    margin-left: 0.25rem;
}

.fchips .fchip-clear:hover { text-decoration: underline; }

/* The product grid and card themselves are shared with the solutions and
   gifting pages and live in style.css alongside their markup contract. */

/* --- Empty state & pager ----------------------------------------------- */

.catalog-empty {
    background: #fff;
    border: 1px dashed #dbe0cd;
    border-radius: var(--catalog-radius);
    text-align: center;
    padding: 3.5rem 1.5rem;
}

.catalog-empty i {
    font-size: 2rem;
    color: #c6cdb6;
    margin-bottom: 0.9rem;
    display: block;
}

.catalog-empty h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
    color: var(--color-text-primary);
}

.catalog-empty p {
    color: var(--catalog-muted);
    font-size: 0.92rem;
    margin: 0 auto 1.3rem;
    max-width: 46ch;
}

.pager {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.pager a,
.pager span {
    min-width: 38px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--catalog-line);
    border-radius: 9px;
    background: #fff;
    font-size: 0.86rem;
    color: #4c5443;
    text-align: center;
}

.pager a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.pager .is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.pager .gap { border: 0; background: none; color: #b0b7a4; min-width: 0; padding: 0.45rem 0.2rem; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
    .catalog-body { grid-template-columns: 248px minmax(0, 1fr); gap: 1.5rem; }
    .catalog { --catalog-sidebar: 248px; }
}

@media (max-width: 900px) {
    .catalog-body { grid-template-columns: minmax(0, 1fr); }

    .filter-toggle { display: inline-flex; }

    .catalog-aside {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1200;
        width: min(340px, 88vw);
        max-height: none;
        background: #fff;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
        transform: translateX(-102%);
        transition: transform 0.25s ease;
        padding: 0;
    }

    .catalog-aside.is-open { transform: none; }
    .catalog-aside .filter-panel { border: 0; border-radius: 0; min-height: 100%; }
    .filter-close { display: block; }

    /* In the drawer nothing auto-applies, so the button comes back. */
    .filter-panel.js-on .filter-actions {
        display: block;
        position: sticky;
        bottom: 0;
        background: #fff;
    }

    /* Five stacked pills would push the grid off-screen; scroll them instead. */
    .catalog-quicklinks {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        margin-right: -1.2rem;
    }

    .catalog-quicklinks::-webkit-scrollbar { display: none; }
    .catalog-quicklinks .ql { flex: none; }

    .catalog-scrim {
        position: fixed;
        inset: 0;
        background: rgba(20, 24, 14, 0.45);
        z-index: 1199;
    }

    .pgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
}

@media (max-width: 480px) {
    .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .pcard__body { padding: 0.7rem 0.7rem 0.85rem; }
    .catalog-head { padding: 1.5rem 0 1.4rem; }
}