/*
 * Segurillanta — Catalogue Filter Chips
 *
 * SEGURILLANTA_PRODUCT_FILTER_CHIPS_V1
 *
 * Native <details> popovers.
 * No price filter.
 * Native GET sort form.
 */


/* =========================================================
   TOP AREA
   ========================================================= */

.sg-product-filter-top--chips {
    position: relative;

    z-index: 50;

    clear: both;

    margin-top: 28px;
    margin-bottom: 26px;

    padding-left: 15px;
    padding-right: 15px;
}


.sg-product-filter-bar {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding:
        0
        0
        14px;

    overflow: visible;

    border-bottom:
        1px solid
        #e7eaee;
}


/* =========================================================
   CHIPS
   ========================================================= */

.sg-product-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    min-width: 0;

    overflow: visible;
}


.sg-filter-chip {
    position: relative;

    margin: 0;
    padding: 0;
}


.sg-filter-chip > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    margin: 0;
    padding:
        8px
        14px;

    list-style: none;

    background:
        #ffffff;

    border:
        1px solid
        #d7dce2;

    border-radius:
        999px;

    color:
        #343a42;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-select:
        none;

    transition:
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease,
        transform .16s ease;
}


.sg-filter-chip > summary::-webkit-details-marker {
    display: none;
}


.sg-filter-chip > summary:hover {
    background:
        #f7f8f9;

    border-color:
        #bcc3cb;

    transform:
        translateY(-1px);
}


.sg-filter-chip > summary::after {
    content:
        "\f107";

    margin-left:
        1px;

    font-family:
        FontAwesome;

    color:
        #858d97;

    font-size:
        11px;

    transition:
        transform .16s ease;
}


.sg-filter-chip[open] > summary::after {
    transform:
        rotate(180deg);
}


.sg-filter-chip.is-active > summary {
    background:
        #fff4f5;

    border-color:
        rgba(215,25,32,.26);

    color:
        #bd171d;
}


.sg-filter-chip__active {
    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    background:
        #d71920;

    border-radius:
        50%;
}


/* =========================================================
   POPOVERS
   ========================================================= */

.sg-filter-chip__popover {
    position:
        absolute;

    top:
        calc(100% + 9px);

    left:
        0;

    z-index:
        200;

    width:
        280px;

    padding:
        15px;

    background:
        #ffffff;

    border:
        1px solid
        #e1e5e9;

    border-radius:
        12px;

    box-shadow:
        0 16px 38px
        rgba(17,24,39,.13);
}


.sg-filter-chip--measure
.sg-filter-chip__popover {
    width:
        410px;
}


.sg-filter-chip--type
.sg-filter-chip__popover {
    width:
        290px;
}


.sg-filter-chip--model
.sg-filter-chip__popover {
    width:
        330px;
}


/* =========================================================
   LEGACY FILTER CONTENT INSIDE POPOVER
   ========================================================= */

.sg-filter-chip__popover
.padding-30px-top {
    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.sg-filter-chip__popover
.border-bottom {
    margin-bottom:
        10px !important;

    padding-bottom:
        7px !important;

    border-bottom:
        1px solid
        #e7eaee !important;

    color:
        #272c32 !important;

    font-size:
        12px;

    font-weight:
        750;
}


.sg-filter-chip__popover
.margin-10px-bottom.padding-20px-left {
    min-height:
        22px;

    margin-bottom:
        5px !important;

    color:
        #656d77;

    font-size:
        12px;
}


.sg-filter-chip__popover
input[type="checkbox"] {
    width:
        14px;

    height:
        14px;

    accent-color:
        #d71920;

    cursor:
        pointer;
}


.sg-filter-chip__popover select,
.sg-filter-chip__popover input[type="text"],
.sg-filter-chip__popover input[type="number"] {
    min-height:
        36px;

    background:
        #ffffff;

    border:
        1px solid
        #d7dce2 !important;

    border-radius:
        8px !important;

    color:
        #394049;

    font-size:
        11.5px !important;

    outline:
        0;
}


.sg-filter-chip__popover select:focus,
.sg-filter-chip__popover input:focus {
    border-color:
        #b8c0c8 !important;

    box-shadow:
        0 0 0 3px
        rgba(215,25,32,.07);
}


/* =========================================================
   BRAND
   ========================================================= */

.sg-filter-chip--brand
.sg-filter-chip__popover
form {
    margin:
        0;
}


/* =========================================================
   MEASURE
   ========================================================= */

.sg-filter-chip--measure
.sg-filter-chip__popover
.width-100px {
    width:
        105px !important;
}


.sg-filter-chip--measure
.sg-filter-chip__popover
.width-auto {
    vertical-align:
        bottom;
}


/* =========================================================
   TYPE
   ========================================================= */

.sg-filter-chip--type
.sg-filter-chip__popover
.small-select {
    width:
        100% !important;
}


.sg-filter-chip--type
.sg-filter-chip__popover
select {
    width:
        100%;
}


/* =========================================================
   MODEL
   ========================================================= */

.sg-filter-chip--model
.sg-filter-chip__popover
.small-select {
    display:
        block !important;

    width:
        100% !important;

    margin-bottom:
        7px !important;
}


.sg-filter-chip--model
.sg-filter-chip__popover
select {
    width:
        100%;
}


/* =========================================================
   FILTER SEARCH BUTTONS
   ========================================================= */

.sg-filter-chip__popover
button,

.sg-filter-chip__popover
.btn {
    min-height:
        34px !important;

    padding:
        7px
        11px !important;

    border-radius:
        8px !important;

    font-size:
        10px !important;
}


/* =========================================================
   SORT
   ========================================================= */

.sg-product-sort--chips {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex:
        0 0 auto;

    margin:
        0;
}


.sg-product-sort--chips label {
    margin:
        0;

    color:
        #6c747e;

    font-size:
        11px;

    font-weight:
        650;

    white-space:
        nowrap;
}


.sg-product-sort--chips select {
    width:
        190px;

    height:
        38px;

    margin:
        0;

    padding:
        7px
        33px
        7px
        11px;

    background-color:
        #ffffff;

    border:
        1px solid
        #d7dce2;

    border-radius:
        9px;

    color:
        #2b3036;

    font-size:
        11.5px;

    font-weight:
        650;

    outline:
        0;

    cursor:
        pointer;
}


.sg-product-sort-apply {
    min-height:
        38px;

    margin:
        0;

    padding:
        8px
        13px;

    background:
        #1f2328;

    border:
        1px solid
        #1f2328;

    border-radius:
        9px;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.sg-product-sort-apply:hover {
    background:
        #090b0c;
}


/* =========================================================
   FULL WIDTH RESULTS
   ========================================================= */

.sg-product-listing-main--full {
    position:
        relative !important;

    z-index:
        1 !important;

    float:
        none !important;

    clear:
        both !important;

    width:
        100% !important;

    padding-left:
        15px !important;

    padding-right:
        15px !important;

    border-left:
        0 !important;
}


.sg-product-listing-main--full
.sg-product-listing-results {
    padding-right:
        0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sg-product-filter-top--chips {
        margin-top:
            18px;

        padding-left:
            0;

        padding-right:
            0;
    }


    .sg-product-filter-bar {
        display:
            block;
    }


    .sg-product-filter-chips {
        flex-wrap:
            nowrap;

        padding-bottom:
            5px;

        overflow-x:
            auto;

        overflow-y:
            visible;
    }


    .sg-filter-chip {
        flex:
            0 0 auto;
    }


    .sg-filter-chip__popover {
        position:
            fixed;

        top:
            auto;

        left:
            12px;

        right:
            12px;

        bottom:
            12px;

        width:
            auto !important;

        max-height:
            70vh;

        overflow-y:
            auto;

        z-index:
            2147482000;

        border-radius:
            16px;
    }


    .sg-product-sort--chips {
        margin-top:
            10px;
    }


    .sg-product-sort--chips label {
        display:
            none;
    }


    .sg-product-sort--chips select {
        flex:
            1 1 auto;

        width:
            auto;
    }

}

/* SEGURILLANTA_PRODUCT_FILTER_CHIP_POLISH_V1 */
.sg-filter-chip,
.sg-filter-chip[open] {
    overflow: visible;
}

.sg-filter-chip > summary {
    list-style: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid #d6dbe3;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sg-filter-chip > summary::-webkit-details-marker,
.sg-filter-chip > summary::marker {
    display: none;
    content: '';
}

.sg-filter-chip > summary:hover {
    border-color: #111827;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
    transform: translateY(-1px);
}

.sg-filter-chip > summary:focus,
.sg-filter-chip > summary:focus-visible {
    outline: none;
    border-color: #d91f2b;
    box-shadow:
        0 0 0 3px rgba(217, 31, 43, 0.10),
        0 6px 16px rgba(17, 24, 39, 0.08);
}

.sg-filter-chip[open] > summary,
.sg-filter-chip.is-active > summary {
    border-color: #efb4ba;
    background: #fff7f7;
    color: #c81e2b;
    box-shadow: 0 6px 18px rgba(217, 31, 43, 0.10);
}

.sg-filter-chip > summary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: transparent;
    flex: 0 0 6px;
    transition: background-color .18s ease;
}

.sg-filter-chip[open] > summary::before,
.sg-filter-chip.is-active > summary::before {
    background: currentColor;
}

.sg-filter-chip > summary::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    opacity: .75;
    transition:
        transform .18s ease,
        opacity .18s ease,
        border-color .18s ease;
}

.sg-filter-chip[open] > summary::after {
    transform: rotate(225deg);
    margin-top: -1px;
    opacity: 1;
}

.sg-filter-chip > summary .sg-filter-chip-square,
.sg-filter-chip > summary .sg-filter-chip-icon,
.sg-filter-chip > summary .sg-filter-chip-caret,
.sg-filter-chip > summary .sg-filter-chip-toggle,
.sg-filter-chip > summary .sg-filter-chip-arrow,
.sg-filter-chip > summary .sg-filter-chip-indicator,
.sg-filter-chip > summary .sg-chip-square,
.sg-filter-chip > summary .sg-chip-icon,
.sg-filter-chip > summary .chip-square,
.sg-filter-chip > summary .chip-icon,
.sg-filter-chip > summary .square,
.sg-filter-chip > summary i.fa-square,
.sg-filter-chip > summary i.fa-stop,
.sg-filter-chip > summary svg.square-icon {
    display: none !important;
}

/* END_SEGURILLANTA_PRODUCT_FILTER_CHIP_POLISH_V1 */