/*=========================================================
    PRODUCT FILTER SECTION
    PART 1
=========================================================*/

:root{

    --pf-max-width:1280px;

    --pf-gap:28px;

    --pf-card-width:360px;

    --pf-image-height:460px;

    --pf-radius:14px;

    --pf-text:#222;

    --pf-light:#666;

    --pf-border:#e7e7e7;

    --pf-bg:#ffffff;

    --pf-orange:#e85b24;

}

/*=========================================================
    SECTION
=========================================================*/

.product-filter-section{

    width:100%;

    padding:90px 0;

    background:#fff;

    overflow:hidden;

}

.product-filter-container{

    max-width:var(--pf-max-width);

    margin:auto;

    padding:0 20px;

}

/*=========================================================
    CATEGORY TABS
=========================================================*/

.product-filter-tabs{

    display:flex;

    gap:32px;

    align-items:center;

    flex-wrap:wrap;

    margin-bottom:50px;

    border-bottom:1px solid var(--pf-border);

    padding-bottom:18px;

}

.product-filter-tab{

    position:relative;

    border:none;

    background:none;

    cursor:pointer;

    font-family:'League Spartan',sans-serif;

    font-size:18px;

    font-weight:500;

    color:#777;

    padding:0 0 14px;

    transition:.3s;

}

.product-filter-tab:hover{

    color:var(--pf-text);

}

.product-filter-tab.active{

    color:var(--pf-text);

    font-weight:600;

}

.product-filter-tab::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-19px;

    width:0;

    height:2px;

    background:var(--pf-text);

    transition:.35s;

}

.product-filter-tab.active::after{

    width:100%;

}

/*=========================================================
    SLIDER WRAPPER
=========================================================*/

.product-slider-wrapper{

    position:relative;

}

.product-slider{

    display:flex;

    gap:var(--pf-gap);

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

    padding-bottom:10px;

}

.product-slider::-webkit-scrollbar{

    display:none;

}

/*=========================================================
    PRODUCT CARD
=========================================================*/

.product-filter-card{

    flex:0 0 var(--pf-card-width);

    width:var(--pf-card-width);

    cursor:pointer;

    transition:.35s;

}

.product-filter-card:hover{

    transform:translateY(-6px);

}

/*=========================================================
    PRODUCT IMAGE
=========================================================*/

.product-filter-image{

    position:relative;

    width:100%;

    height:var(--pf-image-height);

    overflow:hidden;

    border-radius:var(--pf-radius);

    background:#f5f5f5;

}

.product-filter-image img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        opacity .35s ease,

        transform .45s ease;

}

.main-image{

    opacity:1;

    z-index:2;

}

.hover-image{

    opacity:0;

    z-index:1;

}

.product-filter-card:hover .main-image{

    opacity:0;

}

.product-filter-card:hover .hover-image{

    opacity:1;

}

.product-filter-card:hover img{

    transform:scale(1.05);

}

/*=========================================================
    PRODUCT FILTER SECTION
    PART 2
=========================================================*/

/*=========================================================
    PRODUCT INFO
=========================================================*/

.product-filter-info{

    padding:22px 4px 0;

}

.product-filter-info h3{

    margin:0 0 8px;

    font-family:'League Spartan',sans-serif;

    font-size:24px;

    font-weight:600;

    line-height:1.2;

}

.product-filter-info h3 a{

    color:var(--pf-text);

    text-decoration:none;

    transition:.3s;

}

.product-filter-info h3 a:hover{

    color:var(--pf-orange);

}

.product-price{

    margin-bottom:16px;

    font-family:'League Spartan',sans-serif;

    font-size:18px;

    font-weight:600;

    color:#111;

}

.product-filter-info p{

    margin:14px 0 0;

    font-family:'League Spartan',sans-serif;

    font-size:16px;

    line-height:1.6;

    color:var(--pf-light);

}

/*=========================================================
    COLOR SWATCHES
=========================================================*/

.product-colors{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:8px;

}

.color-swatch{

    width:20px;

    height:20px;

    border-radius:50%;

    border:2px solid transparent;

    cursor:pointer;

    transition:.25s;

    padding:0;

}

.color-swatch:hover{

    transform:scale(1.15);

}

.color-swatch.active{

    border-color:#111;

    box-shadow:0 0 0 2px #fff;

}

/*=========================================================
    ARROWS
=========================================================*/

.product-arrow{

    position:absolute;

    top:40%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#222;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 8px 24px rgba(0,0,0,.12);

    transition:.3s;

    z-index:20;

}

.product-arrow:hover{

    background:#222;

    color:#fff;

}

.product-arrow.disabled{

    opacity:.35;

    pointer-events:none;

}

.product-prev{

    left:-24px;

}

.product-next{

    right:-24px;

}

.product-arrow i{

    font-size:16px;

}

/*=========================================================
    FOOTER
=========================================================*/

.product-filter-footer{

    display:flex;

    justify-content:center;

    margin-top:60px;

}

/*=========================================================
    SHOP BUTTON
=========================================================*/

.shop-category-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:260px;

    padding:16px 36px;

    border:2px solid #222;

    border-radius:999px;

    background:#fff;

    color:#222;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-family:'League Spartan',sans-serif;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.shop-category-btn::after{

    content:"→";

    transition:.35s;

}

.shop-category-btn:hover{

    background:#222;

    color:#fff;

}

.shop-category-btn:hover::after{

    transform:translateX(6px);

}

/*=========================================================
    CARD HOVER DETAILS
=========================================================*/

.product-filter-card{

    border-radius:16px;

}

.product-filter-card:hover .product-price{

    color:var(--pf-orange);

}

.product-filter-card:hover h3 a{

    color:var(--pf-orange);

}

.product-filter-card:hover .product-filter-image{

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

/*=========================================================
    IMAGE LOADING
=========================================================*/

.product-filter-image img{

    opacity:0;

}

.product-filter-image img.loaded{

    opacity:1;

}

/*=========================================================
    REVEAL ANIMATION
=========================================================*/

.product-filter-card{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .6s ease,

        transform .6s ease;

}

.product-filter-card.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
    DRAGGING
=========================================================*/

.product-slider.dragging{

    cursor:grabbing;

    user-select:none;

    scroll-behavior:auto;

}

.product-slider.dragging .product-filter-card{

    pointer-events:none;

}

/*=========================================================
    FOCUS STATES
=========================================================*/

.product-filter-tab:focus-visible,

.shop-category-btn:focus-visible,

.color-swatch:focus-visible{

    outline:2px solid var(--pf-orange);

    outline-offset:3px;

}

/*=========================================================
    PRODUCT FILTER SECTION
    PART 3
=========================================================*/

/*=========================================================
    LARGE DESKTOP
=========================================================*/

@media (min-width:1600px){

:root{

    --pf-max-width:1500px;

    --pf-card-width:420px;

    --pf-image-height:540px;

}

.product-filter-container{

    padding:0 30px;

}

.product-filter-info h3{

    font-size:28px;

}

.product-price{

    font-size:20px;

}

}

/*=========================================================
    LAPTOP
=========================================================*/

@media (max-width:1400px){

:root{

    --pf-card-width:340px;

    --pf-image-height:440px;

}

.product-filter-tabs{

    gap:26px;

}

}

/*=========================================================
    TABLET
=========================================================*/

@media (max-width:1024px){

:root{

    --pf-card-width:320px;

    --pf-image-height:410px;

}

.product-filter-section{

    padding:70px 0;

}

.product-filter-tabs{

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    flex-wrap:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.product-filter-tabs::-webkit-scrollbar{

    display:none;

}

.product-filter-tab{

    white-space:nowrap;

    flex-shrink:0;

}

.product-arrow{

    width:42px;

    height:42px;

}

.product-prev{

    left:-10px;

}

.product-next{

    right:-10px;

}

.shop-category-btn{

    min-width:230px;

}

}

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

@media (max-width:768px){

:root{

    --pf-card-width:82vw;

    --pf-image-height:105vw;

}

.product-filter-section{

    padding:55px 0;

}

.product-filter-container{

    padding:0 16px;

}

.product-filter-tabs{

    gap:16px;

    margin-bottom:35px;

    padding-bottom:14px;

}

.product-filter-tab{

    font-size:16px;

    padding-bottom:12px;

}

.product-slider{

    gap:18px;

    scroll-snap-type:x mandatory;

    padding-bottom:6px;

}

.product-filter-card{

    scroll-snap-align:start;

}

.product-filter-info{

    padding-top:18px;

}

.product-filter-info h3{

    font-size:22px;

}

.product-price{

    font-size:18px;

}

.product-filter-info p{

    font-size:15px;

    line-height:1.5;

}

.product-arrow{

    display:none;

}

.shop-category-btn{

    width:100%;

    min-width:100%;

    padding:15px;

    font-size:14px;

}

.color-swatch{

    width:18px;

    height:18px;

}

}

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

@media (max-width:480px){

:root{

    --pf-card-width:88vw;

    --pf-image-height:112vw;

}

.product-filter-section{

    padding:45px 0;

}

.product-filter-container{

    padding:0 14px;

}

.product-filter-tabs{

    gap:14px;

}

.product-filter-tab{

    font-size:15px;

}

.product-filter-info h3{

    font-size:20px;

}

.product-price{

    font-size:17px;

}

.product-filter-info p{

    font-size:14px;

}

.shop-category-btn{

    font-size:13px;

    letter-spacing:.06em;

}

}

/*=========================================================
    TOUCH DEVICES
=========================================================*/

@media (hover:none){

.product-filter-card:hover{

    transform:none;

}

.product-filter-card:hover img{

    transform:none;

}

.product-arrow:hover{

    background:#fff;

    color:#222;

}

.color-swatch:hover{

    transform:none;

}

}

/*=========================================================
    REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/*=========================================================
    PRINT
=========================================================*/

@media print{

.product-arrow,

.product-filter-tabs,

.shop-category-btn{

    display:none;

}

.product-slider{

    overflow:visible;

    flex-wrap:wrap;

}

.product-filter-card{

    width:48%;

    flex:0 0 48%;

    break-inside:avoid;

}

}

/*=========================================================
    FINAL POLISH
=========================================================*/

.product-filter-section *{

    box-sizing:border-box;

}

.product-slider{

    cursor:grab;

}

.product-slider:active{

    cursor:grabbing;

}

.product-filter-card{

    overflow:hidden;

    border-radius:16px;

}

.product-filter-image{

    position:relative;

}

.product-filter-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.04),
        transparent 35%
    );

    pointer-events:none;

}

.product-filter-card:hover .product-filter-image::after{

    background:linear-gradient(
        to top,
        rgba(0,0,0,.08),
        transparent 40%
    );

}

.product-filter-info{

    min-height:170px;

}

.product-filter-info p{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.product-colors{

    margin-top:12px;

    margin-bottom:10px;

}

.color-swatch{

    flex-shrink:0;

}

.product-filter-card img{

    display:block;

    user-select:none;

    -webkit-user-drag:none;

}

.product-slider{

    scroll-padding-left:20px;

}

.product-filter-card{

    will-change:transform;

}

.product-filter-image img{

    will-change:transform, opacity;

}

.product-arrow,

.shop-category-btn,

.product-filter-tab,

.color-swatch{

    will-change:transform;

}

.product-filter-section{

    position:relative;

    z-index:1;

}

.product-filter-container{

    position:relative;

    z-index:2;

}