/* ===== Sticky stack (page sections) ===== */
.sticky-holder {
    position: sticky;
    top: var(--sticky-top);
    z-index: 1002;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.sticky-subrow {
    position: relative;
    z-index: 1;
}

/* Page scroll / anchor behavior */
#grid, #gridhead {
    overflow: visible !important;
    height: auto !important;
}

.target-head, .grid-category-header {
    scroll-margin-top: var(--sticky-offset);
    margin-top: 0;
    padding-top: 2px;
}

/* Search + sections */
.search-container {
    padding: 10px 8px 2px;
}

/* Toggleable panel */
.section-panel[hidden] {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
}

.section-panel {
    background: #fff;
    border-top: 1px dashed var(--brand-border);
    border-bottom: 1px dashed var(--brand-border);
    transition: max-height 240ms ease, padding 240ms ease, border-color 240ms ease;
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

    .section-panel.open {
        padding: 6px 8px;
        max-height: 180px;
    }

/* “CATEGORIES” toggle button */
#btnToggleSections {
    background: var(--brand-50);
    color: var(--brand-600);
    border: 1px solid var(--brand-600);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

    #btnToggleSections .fa {
        color: inherit;
    }

    #btnToggleSections:hover {
        background: var(--brand-100);
        border-color: var(--brand);
        box-shadow: 0 6px 14px rgba(0,191,255,.18);
    }

    #btnToggleSections:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,191,255,.28), 0 6px 14px rgba(0,191,255,.18);
    }

    #btnToggleSections:active {
        transform: translateY(1px);
        box-shadow: 0 3px 8px rgba(0,191,255,.14);
    }

    #btnToggleSections[aria-expanded="true"] {
        background: linear-gradient(180deg, var(--brand-100), var(--brand-50));
        border-color: var(--brand);
        box-shadow: 0 8px 18px rgba(0,191,255,.16);
    }

    #btnToggleSections:disabled {
        opacity: .55;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Section buttons */
.section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border-top: 1px dashed var(--brand-border);
    border-bottom: 1px dashed var(--brand-border);
    --btn-row-height: 36px;
    --btn-max-rows: 3;
    max-height: calc(var(--btn-row-height) * var(--btn-max-rows) + 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .section-buttons::-webkit-scrollbar {
        width: 8px;
    }

    .section-buttons::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 8px;
    }

.sec-btn {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    padding: 6px 12px;
    background: #f7f9fb;
    cursor: pointer;
    white-space: nowrap;
    font: 600 13px/1 system-ui, Arial;
    color: #0f1f2d;
}

    .sec-btn:hover {
        background: #eef6ff;
        border-color: var(--brand-border);
    }

    .sec-btn:focus {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

/* === Migrated from css.css/Site.css (auto-merged) === */

/* ===== Single sticky stack ===== */
.sticky-holder {
position: sticky;
    top: var(--sticky-top);
    z-index: 1002;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* ===== Search + section buttons ===== */
.search-container {
padding: 10px 8px 2px;
}

.section-buttons {
display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border-top: 1px dashed var(--brand-border);
    border-bottom: 1px dashed var(--brand-border);
    --btn-row-height: 36px;
    --btn-max-rows: 3;
    max-height: calc(var(--btn-row-height) * var(--btn-max-rows) + 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Section panel (toggle) */
.section-panel[hidden] {
display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
}

/* ===== Optional: product section heading in deepskyblue ===== */
.productsheading .Search_text {
background: deepskyblue !important;
    color: #fff !important;
}