/* ============================================================
   Charsutra — Shop / category listing
   ------------------------------------------------------------
   Loaded on every page from the layout head. Everything is scoped
   to .hz-filter-*, .th-sort-bar or .shop-* classes.

   IMPORTANT specificity note: shop.blade.php carries an inline
   <style> block inside @section('main'), i.e. it renders in the
   BODY, after this file in the head. Same-specificity rules there
   therefore win, which is why several rules below need !important.
   ============================================================ */

:root {
    --csh-navy: #0F1E33;
    --csh-gold: #A9825A;
    --csh-line: #E7E2DA;
    --csh-ink: #16233A;
    --csh-muted: #6B7688;
}

/* ============================================================
   1. Filter bar
   ============================================================ */
.hz-filter-bar {
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--csh-line) !important;
}

.hz-filter-btn {
    padding: 9px 18px !important;
    border: 1.5px solid var(--csh-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--csh-ink) !important;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease !important;
}

/* The inline block paints these teal (#008080), a colour that appears
   nowhere else on the site. */
.hz-filter-btn:hover,
.hz-filter-btn--open {
    border-color: var(--csh-gold) !important;
    color: var(--csh-gold) !important;
}

.hz-filter-btn--active {
    background: var(--csh-navy) !important;
    border-color: var(--csh-navy) !important;
    color: #fff !important;
}

.hz-filter-badge {
    background: var(--csh-gold) !important;
    color: var(--csh-navy) !important;
    font-size: 10.5px !important;
}

.hz-filter-arrow {
    font-size: 10px !important;
}

.hz-filter-panel {
    border: 1px solid var(--csh-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(15, 30, 51, .16) !important;
}

/* The label is width:100% inside a flex row, which pushes its trailing
   "(24)" count past the panel edge. Make it a proper flex child instead. */
.hz-filter-panel .form-check {
    width: 100%;
    min-width: 0;
}

/* Nothing inside the panel may force it wider than the sheet */
.hz-filter-panel,
.hz-filter-panel ul,
.hz-filter-panel li,
.hz-filter-panel .hz-filter-item {
    min-width: 0;
    max-width: 100%;
}

.hz-filter-panel {
    overflow-x: hidden;
}

.hz-filter-label {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    font-size: 13.5px !important;
    color: var(--csh-ink) !important;
}

.hz-filter-label:hover {
    color: var(--csh-gold) !important;
}

.form-check-input:checked {
    background-color: var(--csh-navy) !important;
    border-color: var(--csh-navy) !important;
}

.color-filter:checked + label {
    border-color: var(--csh-gold) !important;
}

/* ============================================================
   2. Sort bar
   ============================================================ */
.th-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 0 18px !important;
    margin: 0 0 22px !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--csh-line);
    border-radius: 0 !important;
}

.th-sort-bar .row {
    width: 100%;
    align-items: center;
}

.th-sort-bar .woocommerce-result-count {
    padding-left: 0 !important;
    font-size: 13.5px;
    color: var(--csh-muted) !important;
}

.th-sort-bar .woocommerce-result-count strong {
    color: var(--csh-navy);
    font-weight: 800;
}

.th-sort-bar select {
    height: 44px !important;
    min-width: 210px !important;
    padding: 0 38px 0 16px !important;
    border: 1.5px solid var(--csh-line) !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600;
    color: var(--csh-ink) !important;
    cursor: pointer;
}

/* Active filter chips */
.filterbadge {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--csh-line);
    border-radius: 999px;
    background-color: #FAF7F2;
    font-size: 12px;
    font-weight: 600;
    color: var(--csh-ink);
}

.filterbadge .filterclosebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    border-radius: 50%;
    background-color: rgba(15, 30, 51, .08);
    color: var(--csh-muted);
    font-size: 9px;
}

.filterbadge .filterclosebtn:hover {
    background-color: #B5523B;
    color: #fff;
}

/* ============================================================
   3. Mobile
   ============================================================ */
@media (max-width: 991.98px) {
    /* --- Pills scroll sideways instead of wrapping onto three rows --- */
    .hz-filter-bar > .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .hz-filter-bar > .d-flex::-webkit-scrollbar {
        display: none;
    }

    /* Fade the right edge so it's obvious there are more filters to swipe.
       Done with a pseudo-element, NOT mask-image: a mask makes the element a
       containing block for fixed-position descendants, which broke the
       bottom sheet below (it is position: fixed and lives inside this bar). */
    .hz-filter-bar {
        position: relative;
    }

    .hz-filter-bar::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 44px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%);
        pointer-events: none;
    }

    .hz-filter-group {
        flex: 0 0 auto;
    }

    .hz-filter-btn {
        padding: 8px 15px !important;
        font-size: 12.5px !important;
    }

    /* --- Panels become bottom sheets ---
       The existing toggleHzFilter() only adds/removes .hz-open, so this
       needs no JS change at all: the same class that showed a dropdown
       now slides a sheet up from the bottom. The panels already contain
       a d-lg-none header with a close button, which finally has a job.

       The scrim is the panel's own spread box-shadow rather than a new
       element — again, so no markup or JS has to change. Tapping it
       falls through to the existing document click handler, which closes
       any open panel. */
    .hz-filter-panel {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 74vh !important;
        margin: 0 !important;
        padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -6px 30px rgba(15, 30, 51, .2),
                    0 0 0 100vmax rgba(10, 18, 32, .45) !important;
        z-index: 1100 !important;
        overscroll-behavior: contain;
    }

    .hz-filter-panel.hz-open {
        animation: csh-sheet-up .28s cubic-bezier(.2, .7, .3, 1) !important;
    }

    @keyframes csh-sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Grab handle */
    .hz-filter-panel::before {
        content: '';
        display: block;
        width: 44px;
        height: 4px;
        margin: -6px auto 12px;
        border-radius: 4px;
        background-color: #DDD6CB;
    }

    /* Sheet header stays put while the list scrolls */
    .hz-filter-panel > .d-flex {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 0 6px !important;
        padding: 0 0 10px !important;
        background-color: #fff;
    }

    .hz-filter-panel h6 {
        font-size: 15px !important;
    }

    .hz-filter-panel .btn-close {
        flex: 0 0 auto;
    }

    .hz-filter-item {
        padding: 9px 0 !important;
    }

    .hz-filter-label {
        font-size: 14px !important;
        min-height: 24px;
    }

    /* Bigger tap targets for the checkboxes */
    .hz-filter-panel .form-check-input {
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
    }

    /* --- Sort bar --- */
    .th-sort-bar {
        padding-bottom: 14px !important;
        margin-bottom: 18px !important;
    }

    .th-sort-bar .row {
        row-gap: 10px !important;
    }

    .th-sort-bar .woocommerce-result-count {
        font-size: 12.5px;
    }

    .th-sort-bar select {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        font-size: 13px !important;
    }

    .th-sort-bar .col-md-auto {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* 30px gutters between two columns on a phone wasted a third of the
       row; product cards read fine at 14px apart. */
    .row.gy-30.gx-30 {
        --bs-gutter-x: 14px !important;
        --bs-gutter-y: 16px !important;
    }
}

/* ============================================================
   4. Pagination
   ============================================================ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
    padding: 0;
    list-style: none;
}

.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--csh-line);
    border-radius: 999px;
    background-color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--csh-ink);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pagination li a:hover {
    border-color: var(--csh-gold);
    color: var(--csh-gold);
}

.pagination li.active span,
.pagination li .active {
    background-color: var(--csh-navy);
    border-color: var(--csh-navy);
    color: #fff;
}

.pagination li.disabled span {
    opacity: .45;
}

@media (max-width: 575.98px) {
    .pagination {
        gap: 6px;
        margin-top: 26px;
    }

    .pagination li a,
    .pagination li span {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 12.5px;
    }
}

/* ============================================================
   5. Empty state
   ============================================================ */
.alert.alert-info {
    padding: 34px 20px !important;
    border: 1px dashed var(--csh-line) !important;
    border-radius: 16px !important;
    background-color: #FAF8F5 !important;
    color: var(--csh-muted) !important;
    text-align: center;
    font-size: 14px;
}

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hz-filter-panel.hz-open {
        animation: none !important;
    }

    .hz-filter-btn,
    .pagination li a {
        transition: none;
    }
}