#subsubcategoryBreadcrumb, #subsubcategoryBreadcrumb + .icon {
    display: none;
}

#category {
    padding-left: 5%;
    padding-bottom: 40px;
}

#categoryHeader, #productHeader {
    font-size: 32px;
    color: var(--kia-dark-blue);
    font-weight: bold;
    margin: 40px 0;
}

#subcategories {
    width: 97.5%;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.subcategory {
    width: 15%;
    cursor: pointer;
}

    .subcategory img {
        width: 100%;
        aspect-ratio: 1 / 1;
    }

.subcategory-header {
    font-size: 18px;
    font-weight: bold;
    color: var(--kia-dark-blue);
    text-align: center;
    margin-top: 8px;
    text-underline-offset: 5px;
}

.subcategory:hover .subcategory-header {
    text-decoration: underline;
}

#productsContainer {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--kia-extra-light-gray);
    padding-top: 36px;
    padding-left: 6%;
    padding-right: 5%;
    padding-bottom: 90px;
    display: flex;
    flex-direction: column;
}

#productsHeader, #productsBody, #productsFooter {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#productsHeader {
    align-items: center;
    margin-bottom: 32px;
}

.products-section-left {
    width: 22.5%;
}

.products-section-right {
    width: 75%;
}

#filterBy {
    color: var(--kia-dark-blue);
    font-size: 16px;
}

#resultsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#resultsShowing {
    color: var(--kia-dark-blue);
    font-size: 16px;
}

#resultsControls {
    display: flex;
    align-items: center;
}

#sortDropdown {
    font-family: kiaSignature, sans-serif;
    padding: 4px 8px;
    min-width: 150px;
}

#resultsView {
    margin-left: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--kia-dark-blue);
}

    #resultsView .icon {
        cursor: pointer;
    }

    #resultsView .grid-view-icon {
        margin-left: 4px;
        margin-right: 4px;
    }

.filter-section {
    padding-bottom: 24px;
}

.filter-heading {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.filter-header {
    font-size: 16px;
    font-weight: bold;
    color: var(--kia-dark-blue);
}

.filter-heading .icon {
    filter: brightness(25%);
}

.filter-section:not(:first-child) {
    border-top: 2px solid var(--kia-light-gray);
    padding-top: 24px;
}

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s, padding 0.3s;
}

    .filter-list.open {
        padding: 25px 0 15px;
        max-height: 850px;
    }

.filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .filter > div {
        display: flex;
        align-items: center;
    }

    .filter label {
        width: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: var(--kia-dark-blue);
    }

    .filter input {
        display: none;
    }

    .filter span {
        width: 24px;
        height: 24px;
        border: 1px solid #707070;
        background-color: var(--kia-polar-white);
        margin-right: 8px;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
    }

    .filter input:checked + span {
        background-color: var(--kia-polar-white);
        border-color: var(--kia-dark-blue);
    }

        .filter input:checked + span::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            background-color: var(--kia-dark-blue);
        }

.filter-count {
    padding: 3px 10px;
    background-color: var(--kia-font-dark-gray);
    font-size: 11px;
    color: var(--kia-polar-white);
    font-weight: normal;
    text-align: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    box-sizing: border-box;
}

#results {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 32px 16px;
}

.results-card {
    max-height: 520px;
    flex: 0 0 calc((100% - 32px) / 3);
    background-color: var(--kia-polar-white);
    border: 1px solid #dddddd;
    padding: 16px;
    padding-bottom: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.results-card-upper {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 24px;
}

.results-card:hover .btn {
    opacity: 1;
}

.results-card .btn {
    width: 25%;
    opacity: 0;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    padding: 12px 58px;
    background-color: var(--kia-dark-blue);
    border: 2px solid var(--kia-midnight-black);
    white-space: nowrap;
}

.results-card:hover .btn {
    transition: opacity 0.3s;
}

.results-card .btn:hover {
    background-color: #69727A;
    border: 2px solid #69727A;
}

.results-card-header {
    font-size: 18px;
    font-weight: bold;
    color: var(--kia-dark-blue);
}

    .results-card-header a {
        text-decoration: none;
    }

.results-card-prod-no {
    margin-top: 4px;
    font-size: 12px;
    color: var(--kia-font-dark-gray);
    text-transform: uppercase;
}

.results-card-price {
    margin-top: 12px;
    font-size: 18px;
    font-weight: bold;
    color: var(--kia-dark-blue);
}

.list-view .results-card {
    transition: all 0.3s;
    display: flex;
    flex: 100%;
    padding-bottom: 16px;
    flex-direction: row;
}

.list-view .results-card-upper {
    width: 25%;
    margin-bottom: 0;
}

.list-view .btn {
    transform: unset;
    left: 108%;
    opacity: 1;
    transition: unset;
}

.list-view .results-card-info {
    margin-left: 24px;
}

.list-view .results-card-header, .list-view .results-card-price {
    font-size: 22px;
}

.list-view .results-card-prod-no {
    font-size: 14px;
}

#productsFooterPagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    font-size: 13px;
    color: var(--kia-dark-blue);
    padding: 4px;
    margin-top: 60px;
}

#perPageDropdown {
    margin-left: 4px;
    font-family: kiaSignature, sans-serif;
    font-size: 13px;
    color: var(--kia-dark-blue);
    border: 1px solid #c1c1c1;
    padding: 6px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem; /* Make space for the arrow */
    background: url('data:image/svg+xml;utf8,<svg fill="black" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 0.5rem center;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#paginationControls {
    display: flex;
    gap: 14px;
}

    #paginationControls .icon {
        width: 36px;
        height: 36px;
        cursor: pointer;
    }

#quickViewModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(199,200,202, 0.76);
    display: none;
    opacity: 0;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 99;
}

    #quickViewModal.open {
        display: flex;
        opacity: 1;
    }

#quickViewModalContent {
    position: relative;
    width: 62.5%;
    height: 45%;
    opacity: 1;
    background-color: var(--kia-polar-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
    box-sizing: border-box;
    gap: 76px;
}

#quickViewClose {
    font-size: 14px;
    top: 24px;
    right: 28px;
}

#quickViewModalContent img {
    max-height: 100%;
    /* margin-right: 76px; */
}

#quickViewHeader {
    font-size: 24px;
    color: var(--kia-dark-blue);
    font-weight: bold;
    margin-bottom: 6px;
}

#quickViewProdNo {
    text-transform: uppercase;
    font-size: 14px;
    color: var(--kia-font-dark-gray);
    margin-bottom: 8px;
}

#quickViewPrice {
    font-size: 18px;
    color: var(--kia-dark-blue);
    font-weight: bold;
    margin-bottom: 36px;
}

#quickViewControls {
    width: 100%;
    display: flex;
}

#quickViewInput {
    background-color: var(--kia-extra-light-gray);
    border: 2px solid var(--kia-light-gray);
    font-size: 14px;
    color: var(--kia-dark-blue);
    font-family: kiaSignature, sans-serif;
    margin-right: 16px;
    max-width: 20%;
    padding: 8px;
    box-sizing: border-box;
}

#quickViewControls .btn {
    font-size: 14px;
    padding: 8px 36px;
}

#mobileFiltersContainer {
    display: none;
}

.hidden {
    display: none;
}

@media only screen and (max-width: 1400px) {
    #category, #productsContainer {
        padding-left: 3%;
    }

    #productsContainer {
        padding-right: 2.5%;
    }
}

@media only screen and (max-width: 1000px) {
    #category {
        background-color: white;
        padding-top: 28px;
    }

    #categoryHeader, #productHeader {
        font-size: 28px;
        margin: 0;
        padding-bottom: 28px;
        background-color: white;
    }

    #subcategories {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .subcategory {
        width: 25%;
        margin: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .subcategory-header {
        font-size: 12px;
    }

    .subcategory img {
        width: 100px;
    }

    #productHeader {
        padding-left: 2.55%;
        padding-top: 20px;
    }

    #productsContainer {
        padding-top: 24px;
        padding-bottom: 45px;
    }

    #productsHeader {
        flex-direction: column;
    }

    #resultsHeader {
        width: 97.5%;
    }

    #resultsShowing {
        font-size: 12px;
    }

    #filterBy {
        display: none;
    }

    #productsBody {
        flex-direction: column;
    }

    .products-section-left, .products-section-right {
        width: 100%;
    }

    #filters {
        display: none;
    }

    .filter-header {
        font-size: 14px;
    }

    .filter {
        font-size: 14px;
    }

        .filter span {
            width: 18px;
            height: 18px;
        }

    .filter-list.open {
        padding: 15px 0 10px;
    }

    .filter-section {
        padding-bottom: 18px;
    }

        .filter-section:not(:first-child) {
            padding-top: 18px;
        }

    .results-card {
        padding-bottom: 32px;
    }

    .results-card-upper {
        margin-bottom: 12px;
    }

    .results-card-header {
        font-size: 14px;
    }

    .results-card-prod-no {
        font-size: 10px;
    }

    .results-card-price {
        font-size: 14px;
    }

    .results-card .btn {
        width: 10%;
        font-size: 10px;
        bottom: 0px;
        padding: 4px 40px;
    }

    #productsFooter .products-section-left {
        display: none;
    }

    #productsFooterPagination {
        margin-top: 30px;
    }

    #quickViewModalContent {
        flex-direction: column;
        width: 80%;
        height: 55%;
    }

        #quickViewModalContent img {
            max-height: unset;
            max-height: 50%;
            max-width: 85%;
        }

    #quickViewHeader {
        font-size: 20px;
    }

    #quickViewProdNo {
        font-size: 12px;
    }

    #quickViewPrice {
        font-size: 16px;
        margin-bottom: 18px;
    }

    #quickViewInput {
        font-size: 12px;
    }

    #mobileFiltersContainer {
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #mobileFiltersHeading {
        width: 100%;
        border-top: 1px solid var(--kia-light-gray);
        border-bottom: 1px solid var(--kia-light-gray);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 2.5%;
        color: var(--kia-dark-blue);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        box-sizing: border-box;
    }

    #filtersForMobile {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 2.5%;
        font-weight: normal;
        transition: max-height 0.3s ease, padding 0.3s ease;
        background-color: var(--kia-extra-light-gray);
        box-sizing: border-box;
    }

        #filtersForMobile.open {
            padding: 15px 2.5%;
            max-height: fit-content;
            border-bottom: 1px solid var(--kia-light-gray);
        }
}

@media only screen and (max-width: 750px) {
    #category, #productsContainer, #productHeader {
        padding-left: 5%;
    }

    #productsContainer {
        padding-right: 5%;
    }

    #sortDropdown {
        min-width: unset;
        width: 50%;
    }

    .results-card {
        flex: unset;
        width: 100%;
    }

    .results-card-upper {
        max-width: unset;
        width: 100%;
    }

    .results-card .btn {
        width: 40%;
        font-size: 14px;
        padding: 12px 40px;
    }

    .list-view .results-card .btn {
        width: 15%;
        font-size: 10px;
        padding: 4px 40px;
        position: unset;
        margin-top: auto;
    }

    .results-card-header, .list-view .results-card-header {
        font-size: 18px;
    }

    .results-card-prod-no, .list-view .results-card-price {
        font-size: 12px;
    }

    .results-card-price, .list-view .results-card-price {
        font-size: 18px;
    }

    #mobileFiltersHeading {
        padding: 20px 5%;
    }

    #filtersForMobile {
        padding: 0 5%;
    }

        #filtersForMobile.open {
            padding: 15px 5%;
        }

    #quickViewModalContent {
        width: 75%;
        height: 90%;
        padding: 56px 20px;
    }

    #quickViewInfo {
        width: 100%;
    }

    #quickViewHeader {
        font-size: 24px;
    }

    #quickViewProdNo {
        font-size: 16px;
    }

    #quickViewPrice {
        font-size: 22px;
    }

    #quickViewInput {
        font-size: 18px;
    }

    #quickViewModalContent .btn {
        font-size: 16px;
    }
}