/* storefront.css — extracted from StoreFront.aspx inline <style> blocks.
   Place at app-root ~/css/storefront.css and reference via ResolveUrl. */

.products_wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* ===== PREVENT BROKEN FIRST PAINT ===== */

/* Hide until slick fully initialized */
#slider,
#categoryslider {
    visibility: hidden;
}

/* Once slick initializes */
.slick-initialized {
    visibility: visible !important;
}

.loading-block {
    pointer-events: none;
}

.pagination-wrapper {
    position: relative;
    z-index: 9999;
}

.awards_pro_div a {
    position: relative;
    z-index: 1;
}

#ChkEvents_list1_cat input[type="checkbox"] {
    display: none;
}

#demo_cat {
    min-height: 0px;
    max-height: 350px;
    overflow-y: scroll;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#ChkEvents_list1_sub_cat input[type="checkbox"] {
    display: none;
}

#demo_sub_cat {
    min-height: 0px;
    max-height: 350px;
    overflow-y: scroll;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#divprodevent table tr td, #divprodevent_cat table tr td, #divprodevent_sub_cat table tr td, #divprodcolor table tr td, #divprodprice table tr td, #divprodstyle table tr td {
    padding-bottom: 13px;
}

.check-Categories {
    padding: 0px;
}

.categoryredirect {
    padding-top: 10px;
    text-align: center;
    color: #000;
    font-size: 14px;
}

.sortby {
    /*float: right;
     margin: 0px 0px 10px 0px;*/
    float: unset;
}

    .sortby p {
        color: black;
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        padding-right: 8px;
    }

    .sortby select {
        /*height: 23px;
         font-size: 14px;
         border: 2px solid #000;*/
        padding: 6px 10px !important;
        font-size: 14px;
        float: left;
        box-sizing: border-box;
        width: -webkit-fill-available;
        line-height: 24px;
        position: relative;
        top: -7px;
    }

#paginationControls a.page-btn {
    padding: 10px 15px;
    margin: 5px;
    background-color: #ccc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    #paginationControls a.page-btn.disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    #paginationControls a.page-btn.active {
        background-color: #777;
        cursor: not-allowed;
    }

#paginationControls1 a.page-btn {
    padding: 10px 15px;
    margin: 5px;
    background-color: #ccc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    #paginationControls1 a.page-btn.disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    #paginationControls1 a.page-btn.active {
        background-color: #777;
        cursor: not-allowed;
    }

.loader-demo-box {
    border-radius: 0.25rem !important;
}

.loader-demo-box {
    width: 100%;
    height: 200px;
}

.jumping-dots-loader {
    /*  width: 100px;
 height: 100px;
 border-radius: 100%;
 position: absolute;
 margin: 20% 0px 20% 40%;
 z-index: 999;
width: 100%; */

    position: absolute;
    z-index: 9999;
    /*  top: 2%;*/
    right: 45%;
}

    .jumping-dots-loader span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        /*background-color:rgb(253 79 8);*/
        background-color: #ffa326;
        margin: 35px 5px;
    }

        .jumping-dots-loader span:nth-child(1) {
            animation: bounce 1s ease-in-out infinite;
        }

        .jumping-dots-loader span:nth-child(2) {
            animation: bounce 1s ease-in-out 0.33s infinite;
        }

        .jumping-dots-loader span:nth-child(3) {
            animation: bounce 1s ease-in-out 0.66s infinite;
        }

@keyframes bounce {
    0%, 75%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    25% {
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
/*        .cat_slid_lis {
    display: flex;
    justify-content: center;
}*/
.us_product_head a {
    padding: 0 0 10px;
    margin: 0;
    display: block;
    color: #000 !important;
}

.us_content_page .price_line,
.us_content_page .Pricetype_line {
    display: block;
}

/* ---- Empty state: no products found ---- */
.no_products {
    width: 100%;
    max-width: 520px;
    margin: 48px auto;
    padding: 40px 28px;
    text-align: center;
    color: #5b6470;
    background: #fafbfc;
    border: 1px solid #e6e9ed;
    border-radius: 12px;
}

    .no_products .no_products_icon {
        width: 72px;
        height: 72px;
        color: #2b3138; /* black */
        margin-bottom: 18px;
    }

    .no_products h3 {
        margin: 0 0 8px;
        font-size: 22px;
        font-weight: 700;
        color: #2b3138;
    }

    .no_products p {
        margin: 0 auto;
        max-width: 380px;
        font-size: 15px;
        line-height: 1.5;
        color: #6b7480;
    }

/* ============================================================
   MOBILE FILTER POPUP  (<=768px only; desktop untouched)
   The existing "Refine/Filter By" button (#refineToggle) opens
   the Filter panel (#uni-filter-by) as a slide-in popup with a
   dark overlay and an X to close. Shop by Category / Shop by
   Sports stay as their normal dropdown buttons. Overlay + X are
   injected by storefront.js; visuals live here.
   ============================================================ */
.sf-filter-overlay,
.sf-filter-close {
    display: none;
}

@media (max-width: 768px) {

    /* Filter panel becomes a full-screen slide-in popup.
       Closed = display:none so it can never create horizontal
       overflow or a side gap; open = full width sliding in. */
    #uni-filter-by {
        display: none !important;
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 18px 18px 28px !important;
        background: #fff !important;
        z-index: 1060 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    body.sf-filter-open #uni-filter-by {
        display: block !important;
        animation: sfFilterSlideIn .28s ease both;
    }

    @keyframes sfFilterSlideIn {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /* "Filter" heading row inside the popup leaves room for the X */
    #uni-filter-by > h3 {
        margin: 0 0 14px;
        padding: 0 40px 10px 0;
        border-bottom: 2px solid #2b3138;
        font-size: 18px;
        font-weight: 700;
        color: #2b3138;
    }

    /* Dark overlay behind the popup */
    .sf-filter-overlay {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1055;
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease;
    }

    body.sf-filter-open .sf-filter-overlay {
        opacity: 1;
        visibility: visible;
    }

    body.sf-filter-open {
        overflow: hidden;
    }

    /* X close button inside the popup */
    .sf-filter-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border: none;
        background: #f1f2f4;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
        color: #2b3138;
        cursor: pointer;
        z-index: 2;
    }
}

/* ---- Mobile popup polish: close (X) icon + SORT BY dropdown ---- */
@media (max-width: 768px) {

    /* Cleaner, clearly-designed close button */
    #uni-filter-by .sf-filter-close {
        top: 12px;
        right: 20px;
        width: 34px;
        height: 34px;
        background: #fff;
        border: 1.5px solid #d7dbe0;
        border-radius: 50%;
        font-size: 0; /* hide the text glyph; draw X with SVG */
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        transition: background .15s ease, border-color .15s ease;
    }

        #uni-filter-by .sf-filter-close::before {
            content: "";
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 16px;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232b3138' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
        }

        #uni-filter-by .sf-filter-close:active {
            background: #f1f2f4;
            border-color: #c2c8cf;
        }

    /* Style the SORT BY (Best Match) dropdown to match the rest.
       The base ".sortby select" rule uses !important padding + top:-7px +
       float:left, which misaligns it here, so we override with !important. */
    #uni-filter-by .sortby select,
    #uni-filter-by .sortby .sortby select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block !important;
        float: none !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 11px 40px 11px 14px !important;
        border: 1px solid #d7dbe0 !important;
        border-radius: 8px !important;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 13px center;
        background-size: 14px 14px;
        font-size: 14px;
        font-weight: 500;
        color: #2b3138;
        line-height: 1.3 !important;
        cursor: pointer;
        box-shadow: none;
        outline: none;
    }

        #uni-filter-by .sortby select:focus {
            border-color: #2b3138 !important;
        }

    #uni-filter-by .sortby {
        margin: 0;
        float: none !important;
    }
}

/* ---- Mobile: 2 products per row + overflow safety ---- */
@media (max-width: 768px) {

    /* Guard against any stray horizontal scrolling */
    html, body {
        overflow-x: hidden;
    }

    /* Force exactly two product cards per row */
    .products_wrapper,
    #tdprod {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch;
    }

        .products_wrapper > .awards_pro_div,
        #tdprod > .awards_pro_div {
            flex: 0 0 50% !important;
            max-width: 50% !important;
            width: 50% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            padding: 6px !important;
        }
}

/* ---- Mobile: Shop by Category / Shop by Sports layout + dropdowns ---- */
@media (max-width: 768px) {

    /* Lay the sidebar out so the two shop buttons sit side by side and
       "Refine/Filter By" spans full width underneath. Lift the whole
       sidebar above the (non-positioned) product grid. */
    #txtsearchlist.filter-right {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start;
        gap: 8px;
    }

        #txtsearchlist.filter-right > #div_head {
            order: 1;
            flex: 1 1 calc(50% - 5px);
            min-width: 0;
            margin: 0 !important;
        }

        #txtsearchlist.filter-right > #div_head2 {
            order: 2;
            flex: 1 1 calc(50% - 5px);
            min-width: 0;
            margin: 0 !important;
        }

        #txtsearchlist.filter-right > #refineToggle {
            order: 3;
            flex: 1 1 100%;
            width: 100% !important;
            margin: 0 !important;
        }

    /* The collapsible lists must be positioned so z-index applies, opaque,
       and floating above the products. Category opens from the left edge,
       Sports from the right edge, so neither runs off-screen. */
    #divevent_sub_cat, #divevent_cat {
        position: relative;
    }

    #demo_sub_cat,
    #demo_cat {
        position: absolute !important;
        top: calc(100% + 6px);
        z-index: 100 !important;
        width: 78vw !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        background: #fff !important;
        border: 1px solid #e3e6ea !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .18) !important;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #demo_sub_cat {
        left: 0 !important;
        right: auto !important;
    }

    #demo_cat {
        right: 0 !important;
        left: auto !important;
    }

        /* Solid rows so nothing shows through the option text */
        #demo_sub_cat li, #demo_cat li,
        #demo_sub_cat .Categories_check, #demo_cat .Categories_check,
        #demo_sub_cat #divprodevent_sub_cat, #demo_cat #divprodevent_cat {
            background: #fff;
        }
}

/* ---- Mobile: one shop dropdown open at a time, equal width ---- */
@media (max-width: 768px) {
    /* Both closed by default; only the tapped one opens (toggled by JS) */
    #demo_sub_cat, #demo_cat {
        display: none !important;
    }

        #demo_sub_cat.sf-open, #demo_cat.sf-open {
            display: block !important;
        }

    /* Identical width for both dropdowns */
    #demo_sub_cat, #demo_cat {
        width: 80vw !important;
        max-width: 320px !important;
    }

    /* Force "Refine/Filter By" into normal flow on its own row below the
       two buttons (global CSS positions it absolute, which made it overlap). */
    #txtsearchlist.filter-right > #refineToggle {
        position: static !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: block;
    }
}

/* ---- Mobile: FORCE layout with max specificity (beats global !important) ---- */
@media (max-width: 768px) {
    #txtsearchlist#txtsearchlist.filter-right {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

        #txtsearchlist#txtsearchlist.filter-right > #div_head#div_head {
            order: 1 !important;
            -webkit-order: 1 !important;
            flex: 1 1 calc(50% - 5px) !important;
            width: calc(50% - 5px) !important;
            margin: 0 !important;
            float: none !important;
            position: static !important;
        }

        #txtsearchlist#txtsearchlist.filter-right > #div_head2#div_head2 {
            order: 2 !important;
            -webkit-order: 2 !important;
            flex: 1 1 calc(50% - 5px) !important;
            width: calc(50% - 5px) !important;
            margin: 0 0 0 8px !important;
            float: none !important;
            position: static !important;
        }

        #txtsearchlist#txtsearchlist.filter-right > #refineToggle#refineToggle {
            order: 3 !important;
            -webkit-order: 3 !important;
            flex: 1 1 100% !important;
            width: 100% !important;
            margin: 8px 0 0 !important;
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            float: none !important;
            clear: both !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }
    /* Filter (sliders) icon on the right of Refine/Filter By */
    #refineToggle::after {
        content: "";
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b3138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    }

    #txtsearchlist#txtsearchlist.filter-right > #uni-filter-by#uni-filter-by {
        order: 4 !important;
        -webkit-order: 4 !important;
    }
}

/* ---- Mobile: Refine/Filter By — no down chevron ---- */
@media (max-width: 768px) {
    #refineToggle .fa-angle-down,
    #refineToggle i.fa-angle-down {
        display: none !important;
    }
}

/* ---- Mobile: shop dropdown spans FULL width (below the button row) ---- */
@media (max-width: 768px) {
    /* position:relative (no z-index) gives the dropdown a full-width anchor
       without trapping the filter popup behind the overlay */
    #txtsearchlist.filter-right {
        position: relative;
    }

    #div_head, #div_head2,
    #divevent_sub_cat, #divevent_cat {
        position: static !important;
    }

    #demo_sub_cat, #demo_cat {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        /* vertical position (top) is set by JS to sit under the buttons */
    }
}

/* ---- Mobile: product grid symmetric left/right (no stray side bars) ---- */
@media (max-width: 768px) {
    #listdiv, #listdiv.page-content, .awards_pro_list,
    .products_wrapper, #tdprod {
        border-left: 0 !important;
        border-right: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }
    /* Equal gutters on both sides of the two-column grid */
    .products_wrapper, #tdprod {
        padding-left: 6px !important;
        padding-right: 6px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        .products_wrapper > .awards_pro_div,
        #tdprod > .awards_pro_div {
            padding: 6px !important;
        }
}

/* ---- Mobile: align product grid edges with Refine/Filter By edges ---- */
@media (max-width: 768px) {
    /* Remove the extra horizontal insets that pushed the grid in further
       than the Refine/Filter By button (which sits at its column edge). */
    .common-space,
    #listdiv, #listdiv.page-content, .page-content, .awards_pro_list {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .products_wrapper, #tdprod {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
        /* Two columns: outer edges flush with the container, 12px gap between */
        .products_wrapper > .awards_pro_div,
        #tdprod > .awards_pro_div {
            flex: 0 0 calc(50% - 6px) !important;
            max-width: calc(50% - 6px) !important;
            width: calc(50% - 6px) !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }
}

/* ---- Mobile: two buttons one line aligned w/ Refine + list row spacing ---- */
@media (max-width: 768px) {
    /* Equal 8px gap, both buttons exactly half so they fill one line and the
       pair's left/right edges match the Refine/Filter By button. */
    #txtsearchlist#txtsearchlist.filter-right {
        gap: 8px !important;
    }

        #txtsearchlist#txtsearchlist.filter-right > #div_head#div_head,
        #txtsearchlist#txtsearchlist.filter-right > #div_head2#div_head2 {
            flex: 0 0 calc(50% - 4px) !important;
            width: calc(50% - 4px) !important;
            max-width: calc(50% - 4px) !important;
            margin: 0 !important;
        }
    /* Slight space after each option row in the open dropdowns */
    #demo_sub_cat li, #demo_cat li {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    #demo_sub_cat, #demo_cat {
        padding-bottom: 8px !important;
    }
}

/* ---- Mobile: spacing below the Category/Sports button line ---- */
@media (max-width: 768px) {
    /* horizontal gap between the two buttons; no auto vertical gap */
    #txtsearchlist#txtsearchlist.filter-right {
        column-gap: 8px !important;
        row-gap: 0 !important;
    }
        /* slight breathing room after the one-line button row */
        #txtsearchlist#txtsearchlist.filter-right > #div_head#div_head,
        #txtsearchlist#txtsearchlist.filter-right > #div_head2#div_head2 {
            margin: 0 0 10px 0 !important;
        }

        #txtsearchlist#txtsearchlist.filter-right > #refineToggle#refineToggle {
            margin-top: 0 !important;
        }
}

/* ---- Mobile: make Category/Sports label fill the button + Refine bottom gap ---- */
@media (max-width: 768px) {
    /* Inner wrappers must fill the half-width button (kills the empty right box) */
    #div_head > .coler_by_pricrang,
    #div_head2 > .coler_by_pricrang,
    #div_head .awadrs-filter-devision-list,
    #div_head2 .awadrs-filter-devision-list,
    #divevent_sub_cat, #divevent_cat {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
        /* Label fills the button: text left, chevron right */
        #divevent_sub_cat > h4,
        #divevent_cat > h4 {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            white-space: nowrap;
        }

    /* Gap at the bottom of the Refine/Filter By button */
    #txtsearchlist#txtsearchlist.filter-right > #refineToggle#refineToggle {
        margin: 0 0 12px 0 !important;
    }
}

/* ---- Mobile: loader overlay inside the Refine/Filter popup ---- */
.sf-popup-loader {
    display: none;
}

@media (max-width: 768px) {
    body.sf-popup-loading #uni-filter-by .sf-popup-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(255, 255, 255, .72);
        z-index: 5;
    }

    .sf-popup-loader .jumping-dots-loader {
        position: static !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        z-index: auto !important;
    }

        .sf-popup-loader .jumping-dots-loader span {
            margin: 0 5px !important;
        }
}

/* ---- Mobile: no gap between the two products in a row ---- */
@media (max-width: 768px) {
    .products_wrapper, #tdprod {
        display: flex !important;
        flex-wrap: wrap !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        gap: 0 !important;
    }

        .products_wrapper > .awards_pro_div,
        #tdprod > .awards_pro_div {
            flex: 0 0 50% !important;
            max-width: 50% !important;
            width: 50% !important;
            box-sizing: border-box !important;
            padding: 0 !important;
        }
}