/* HERO SECTION */
.hero {background: no-repeat center / cover url("../images/laptop-Img2.webp"); padding-block: 80px;}
.hero .title > :first-child {font-size: var(--fs-lg); color: #fff; text-align: center;}

/* BREADCRUMB SECTION */
.breadCrumb ul {display: flex; align-items: center; gap: 5px; margin-block: 13px;}
.breadCrumb li {display: flex; align-items: center; position: relative;}
.breadCrumb ul a {font-size: var(--fs-base); transition: var(--transition);}
.breadCrumb ul a:hover {color: var(--c-primary);}
.breadCrumb ul > :not(:first-child) {padding-left: 16px; color: #000;}
.breadCrumb ul > :not(:first-child)::after {width: 7px; height: 10px; background: no-repeat center / cover url('../images/icons/chevron-right.svg'); position: absolute; left: 0; top: 50%; content: ""; transform: translateY(-50%); filter: var(--_c-light-filter);} 

/* CSS FOR FILTER SECTION */

.filter .sorted {display: none;}
.filter .filter-ul > ul {display: flex; flex-direction: column;  gap: 10px;}
.filter .filter-ul > ul > :nth-child(2) {border: 1px solid var(--c-light-bg); border-radius: 8px;}
.filter .filter-ul > ul > li > :where(a, button) {width: 100%; text-align: start; color: #000; position: relative; background-color: var(--c-light-bg); padding: 8px 25px 8px 15px; border-radius: 8px; transition: var(--transition);}
.filter .filter-ul > ul > li > :where(a, button):hover {color: var(--c-primary);}
.filter .filter-ul > ul button {width: 100%; text-align: start; color: #000; padding: 8px 25px 8px 15px; position: relative; transition: var(--transition);}
.filter .filter-ul > ul button:hover {color: var(--c-primary);}
.filter .filter-ul > ul button::after {width: 11px; height: 11px; background: no-repeat center / cover url("../images/icons/chevron-down.svg"); margin-block: auto; margin-left: auto; position: absolute; inset: 0; right: 25px; content: "";}
.filter .filter-ul > ul button:hover::after {filter: var(--_c-primary-filter);}
.filter .filter-ul > ul > li ul li ul li a {padding: 4px 15px 4px 30px; transition: var(--transition);}
.filter .filter-ul > ul > li ul li ul li a:hover {color: var(--c-primary);}

.filter .filter-section {padding-block: 20px 30px;}
.filter .title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;}
.filter .title > :first-child {font-size: calc(var(--fs-md) - 2px);}
.filter .title button {font-size: var(--fs-base); color: #000; text-decoration: underline; text-underline-offset: .3rem; transition: var(--transition);}
.filter .title button:hover {color: var(--c-primary);}
.filter .stock {margin-top: 10px;}
.filter .stock >:first-child {display: block; width: 100%; font-size: var(--fs-base); font-weight: 500; color: #000; padding-bottom: 10px; border-bottom: 1px solid #00000014; text-align: start; position: relative; visibility: visible !important;}
.filter .stock .content {padding-block: 1rem; padding-right: 1rem; flex-wrap: wrap; gap: 10px;}
.filter .stock .content > :first-child > :first-child {font-weight: 700;}
.filter .stock .content > * {display: flex; align-items: center; gap: .5rem;}
.filter .pricing .content {display: flex; flex-direction: column; align-items: start; padding-block: 1rem 0;}
.filter .pricing .slider-container {width: 100%; max-width: 300px; position: relative; display: block; height: 20px;}
.filter .pricing .slider-container > :first-child {z-index: 334 !important;}
.filter .pricing .slider-container > :nth-child(2) {z-index: 333 !important;}
.filter .range {display: flex;}
.filter .range > * {height: 40px; border: 1px solid #00000033; border-radius: 4px; padding: 5px 20px;}
.filter .range > * >:first-child {font-size: calc(var(--fs-xs) - 2px); line-height: 1; display: flex; flex-direction: column;} 
.filter .range > * >:nth-child(2) {font-size: var(--fs-xs); display: flex; flex-direction: column;}
.filter .range input:focus {outline: none;}  
.filter .range > *:has(input:focus) {border: 1px solid transparent; outline: 2px solid #000;}
.filter .slider {height: 5px; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; pointer-events: none; background: none; z-index: 1; margin-block: auto;}
.filter .slider::-webkit-slider-thumb {-webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #000; cursor: pointer; pointer-events: all; position: relative; top: -7px; z-index: 20;}
.filter .slider::-webkit-slider-runnable-track {height: 5px; background: transparent;}
.filter .track {position: absolute; top: 27px; width: 100%; height: 5px; background: #ddd; z-index: 0;}
.filter .range-values {display: flex; justify-content: space-between; font-weight: bold;}
.filter .sorting {display: none;}

/* CATEGORIES SECTION */
.categories .wrapper {display: grid; grid-template-columns: minmax(240px, 300px) minmax(681px, 1040px); gap: 30px;}
.categories .head {background-color: var(--c-light-bg); display: flex; align-items: center; justify-content: end; gap: 5px; padding: 10px; border-radius: 8px;}
.categories .head > :first-child {font-size: calc(var(--fs-base) - 1px); font-weight: 400; color: #000000CC;}
.categories .head select {width: 100%; max-width: 151px; padding: 8px; border: 1px solid #00000014; border-radius: 4px; cursor: pointer;}
.categories .head select:focus {outline: .1rem solid #00000080;}
.categories .head :where(select, option) {font-size: calc(var(--fs-xs) - 1px);}
.categories .head > :nth-child(3) {font-size: var(--fs-xs); font-weight: 400; color: #000000B3; margin-left: 1.5rem;}
.categories .head > :last-child {display: none; align-items: center; gap: 10px; font-size: var(--fs-xs); color: #000;}
.categories .head > :last-child img {width: 18px; height: 18px;}
.categories .text-content {padding-block: 80px; text-align: center;}
.categories .text-content > :first-child {max-width: 840px; font-size: calc(var(--fs-xl) + 35px); font-weight: bold; color: #0000004d; margin-inline: auto;}

.shop .category {padding-block: 60px 30px;}
.categories .sale .title {display: none;}
.categories .sale {margin-block: 30px; border-radius: 8px; padding-block: 1.5rem;}
.categories .sale .wrapper {grid-template-columns: repeat(4, 1fr);}

@media only screen and (max-width: 1200px) {
    .categories .sale .wrapper {grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 991px) {
    .categories .head > :not(:last-child) {display: none;}
    .categories .head > :last-child {display: flex;}
    .categories .wrapper {grid-template-columns: 1fr;}
    .filter {width: 310px !important; border-bottom-left-radius: 8px; border-top-left-radius: 8px;}
    .filter .filter-ul {padding: 15px;}
    .filter .title {display: none;}
    /* .filter .target {display: none;} */
    .filter .sorted {display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #0000001A;}
    .filter .sorted button img {height: 18px; width: 18px;}
    .filter .sorted > :first-child {display: flex; flex-direction: column; font-size: calc(var(--fs-base) + 2px);}
    .filter .sorted > :first-child > :nth-child(2) {font-size: calc(var(--fs-xs) - 2px);}
    /* .filter {} */
    .filter .sorting {display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}
    .filter .sorting select {width: 155px; padding: 12px; border: 1px solid #00000014; border-radius: 4px;}
    .filter .apply { display: block; padding: 15px; position: absolute; bottom: 0; border-top: 1px solid #00000014;}
}