/*======================================
PRODUCT PAGE
======================================*/

.product-single{

    position:relative;

    padding:70px 0 40px;

    overflow:hidden;

}

.product-single::before{

    content:"";

    position:absolute;

    inset:0;

    background:
            radial-gradient(circle at top right,color-mix(in srgb,var(--clr-blue) 7%,transparent),transparent 35%),
            radial-gradient(circle at bottom left,color-mix(in srgb,var(--clr-purple) 6%,transparent),transparent 40%);

    pointer-events:none;

}


/*======================================
Breadcrumb
======================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:40px;

    font-size:.9rem;

    flex-wrap:wrap;

}

.breadcrumb a{

    color:var(--clr-text-muted);

    transition:.25s;

}

.breadcrumb a:hover{

    color:var(--clr-blue);

}

.breadcrumb span{

    color:var(--clr-text);

    font-weight:600;

}

.breadcrumb i{

    font-size:.7rem;

    opacity:.5;

}


/*======================================
Gallery
======================================*/

.product-gallery{

    position:sticky;

    top:120px;

}

.gallery-main{

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:26px;

    padding:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    min-height:520px;

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

}

.gallery-main img{

    max-width:100%;

    max-height:420px;

    transition:.45s;

    object-fit:contain;

}

.gallery-main:hover img{

    transform:scale(1.06);

}

.gallery-thumbs{

    margin-top:18px;

    display:flex;

    gap:14px;

}

.gallery-thumbs button{

    width:82px;

    height:82px;

    background:var(--clr-bg-2);

    border:1px solid var(--clr-border);

    border-radius:20px;

    cursor:pointer;

    transition:.25s;

    padding:8px;

}

.gallery-thumbs button img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.gallery-thumbs button:hover,

.gallery-thumbs button.active{

    border-color:var(--clr-blue);

    transform:translateY(-4px);

}


/*======================================
Aside
======================================*/

.product-aside{

    position:sticky;

    top:120px;

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:30px;

    padding:30px;

    box-shadow:0 10px 28px rgba(0,0,0,.03);

}

.product-label{

    display:inline-flex;

    align-items:center;

    padding:7px 14px;

    border-radius:50px;

    background:color-mix(in srgb,var(--clr-blue) 8%,transparent);

    color:var(--clr-blue);

    font-size:.8rem;

    font-weight:600;

    margin-bottom:18px;

}

.product-aside h1{

    font-size:2rem;

    margin-bottom:15px;

    line-height:1.4;

    color:var(--clr-text);

}

.product-short{

    color:var(--clr-text-muted);

    line-height:2;

    margin-bottom:30px;

}


/*======================================
Meta
======================================*/

.product-meta{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:30px;

}

.product-meta div{

    background:var(--clr-bg-2);

    border-radius:16px;

    padding:18px;

    text-align:center;

}

.product-meta span{

    display:block;

    font-size:.8rem;

    color:var(--clr-text-muted);

    margin-bottom:8px;

}

.product-meta strong{

    color:var(--clr-text);

}


/*======================================
Price
======================================*/

.price-box{

    background:linear-gradient(135deg,
    color-mix(in srgb,var(--clr-blue) 8%,transparent),
    transparent);

    border:1px solid color-mix(in srgb,var(--clr-blue) 12%,transparent);

    border-radius:24px;

    padding:22px;

    margin-bottom:25px;

}

.price-box small{

    display:block;

    color:var(--clr-text-muted);

    margin-bottom:8px;

}

.price-box strong{

    font-size:2rem;

    color:var(--clr-blue);

    font-weight:700;

}


/*======================================
Quantity
======================================*/

.qty-box{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:25px;

}

.qty-box button{

    width:46px;

    height:46px;

    border:none;

    border-radius:16px;

    background:var(--clr-bg-2);

    cursor:pointer;

    transition:.25s;

    font-size:1.2rem;

}

.qty-box button:hover{

    background:var(--grad-brand);

    color:#fff;

}

.qty-box input{

    width:90px;

    height:46px;

    border:1px solid var(--clr-border);

    border-radius:14px;

    text-align:center;

    background:var(--clr-bg-2);

}
/*======================================
RELATED PRODUCTS
======================================*/

.related-products{

    padding:90px 0;

}

.section-head{

    display:flex;

    align-items:end;

    justify-content:space-between;

    margin-bottom:45px;

}

.section-head.center{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.section-head small{

    color:var(--clr-blue);

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-head h2{

    margin-top:8px;

    font-size:2rem;

}

.related-card{

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:26px;

    overflow:hidden;

    transition:.35s;

    height:100%;

}

.related-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    border-color:color-mix(in srgb,var(--clr-blue) 18%,transparent);

}

.related-card .image{

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:var(--clr-bg-2);

}

.related-card img{

    max-width:100%;

    max-height:170px;

    object-fit:contain;

    transition:.4s;

}

.related-card:hover img{

    transform:scale(1.08);

}

.related-card .content{

    padding:25px;

}

.related-card small{

    color:var(--clr-blue);

}

.related-card h3{

    margin:12px 0;

    font-size:1.1rem;

    min-height:55px;

}

.related-card strong{

    display:block;

    margin-top:20px;

    font-size:1.15rem;

    color:var(--clr-blue);

}



/*======================================
PRODUCT NAVIGATION
======================================*/

.product-navigation{

    padding:60px 0;

}

.navigation-wrapper{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.navigation-wrapper a{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:28px;

    border-radius:22px;

    border:1px solid var(--clr-border);

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    transition:.3s;

}

.navigation-wrapper a:hover{

    border-color:var(--clr-blue);

    transform:translateY(-6px);

}

.navigation-wrapper small{

    color:var(--clr-text-muted);

}

.navigation-wrapper span{

    color:var(--clr-text);

    font-weight:600;

}



/*======================================
ECOSYSTEM
======================================*/

.product-ecosystem{

    padding:90px 0;

    position:relative;

}

.ecosystem-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:0;

    margin-top:60px;

}

.eco-item{

    width:170px;

    height:170px;

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.eco-item:hover{

    transform:translateY(-8px);

}

.eco-item.active{

    background:var(--grad-brand);

    color:#fff;

    border-color:var(--clr-blue);

    transform:scale(1.05);

}

.eco-item.active .icon{

    background:#fff;

    color:var(--clr-blue);

}

.eco-item .icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:color-mix(in srgb,var(--clr-blue) 8%,transparent);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    font-size:1.7rem;

    color:var(--clr-blue);

}

.eco-line{

    width:90px;

    height:3px;

    background:linear-gradient(
            to left,
            var(--clr-blue),
            transparent
    );

}



/*======================================
FAQ
======================================*/

.product-faq{

    padding:90px 0;

}

.faq-wrapper{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:24px;

    overflow:hidden;

    margin-bottom:20px;

}

.faq-item button{

    width:100%;

    border:none;

    background:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    font-size:1rem;

    cursor:pointer;

}

.faq-item button i{

    transition:.3s;

}

.faq-item.active button i{

    transform:rotate(45deg);

}

.faq-body{

    display:none;

    padding:0 24px 24px;

    line-height:2;

    color:var(--clr-text-muted);

}

.faq-item.active .faq-body{

    display:block;

}



/*======================================
EXPERT CARD
======================================*/

.expert-box{

    padding:90px 0;

}

.expert-card{

    border-radius:30px;

    padding:50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:linear-gradient(
            135deg,
            color-mix(in srgb,var(--clr-blue) 8%,transparent),
            transparent
    );

    border:1px solid color-mix(in srgb,var(--clr-blue) 12%,transparent);

}

.expert-card h2{

    margin:15px 0;

}

.expert-card p{

    max-width:550px;

    line-height:2;

}



/*======================================
FLOAT CART
======================================*/

.floating-cart{

    position:fixed;

    bottom:30px;

    left:30px;

    z-index:100;

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:24px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 8px 22px rgba(0,0,0,.05);

}

.cart-info{

    display:flex;

    align-items:center;

    gap:10px;

}

.cart-info strong{

    color:var(--clr-blue);

}

.cart-actions a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:42px;

    padding:0 22px;

    border-radius:12px;

    background:var(--grad-brand);

    color:#fff;

    transition:.3s;

}

.cart-actions a:hover{

    transform:translateY(-3px);

}


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

.sticky-info{

    position:fixed;

    top:140px;

    right:30px;

    z-index:90;

    display:flex;

    flex-direction:column;

    gap:14px;

    width:220px;

}

.mini-card{

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:18px;

    padding:16px 18px;

    box-shadow:0 8px 22px rgba(0,0,0,.04);

    transition:.3s;

}

.mini-card:hover{

    transform:translateX(-4px);

    border-color:color-mix(in srgb,var(--clr-blue) 18%,var(--clr-border));

}

.mini-card span{

    display:block;

    font-size:.72rem;

    color:var(--clr-text-muted);

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:6px;

}

.mini-card strong{

    display:block;

    color:var(--clr-text);

    font-weight:700;

    font-size:.95rem;

}

.mini-card strong.text-success{

    color:var(--clr-success);

}
.text-fail{

    color:var(--clr-danger) !important;

}

.mini-card strong.price-highlight{

    color:var(--clr-blue);

    font-size:1.15rem;

}

@media (max-width:1399px){

    .sticky-info{

        display:none;

    }

}


/*======================================
PRODUCT HIGHLIGHTS
======================================*/

.product-highlights{

    padding:60px 0;

}

.product-highlights .container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.highlight-card{

    background:var(--clr-surface);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid var(--clr-border);

    border-radius:22px;

    padding:24px;

    transition:.3s;

}

.highlight-card:hover{

    transform:translateY(-4px);

    border-color:color-mix(in srgb,var(--clr-blue) 18%,var(--clr-border));

}

.highlight-card > div{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:16px;

}

.highlight-card small{

    color:var(--clr-text-muted);

    font-size:.72rem;

    letter-spacing:1px;

    text-transform:uppercase;

}

.highlight-card strong{

    color:var(--clr-text);

    font-weight:700;

}

.highlight-card .progress{

    height:8px;

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

    background:var(--clr-bg-2);

    overflow:hidden;

}

.highlight-card .progress span{

    display:block;

    height:100%;

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

    background:var(--grad-brand);

    transition:width 1s ease;

}


/*======================================
RECENT PRODUCTS
======================================*/

.recent-products{

    padding:90px 0;

}

#recentProducts{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

#recentProducts:empty{

    display:none;

}

#recentProducts .related-card{

    height:100%;

}

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

@media (max-width:1200px){

    .gallery-main{

        min-height:420px;

    }

    .product-aside{

        padding:25px;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    .eco-item{

        width:150px;

        height:150px;

    }

    .product-highlights .container,
    #recentProducts{

        grid-template-columns:repeat(2,1fr);

    }

}


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

@media (max-width:992px){

    .product-gallery,
    .product-aside{

        position:relative;

        top:auto;

    }

    .product-single{

        padding-top:40px;

    }

    .gallery-main{

        min-height:380px;

    }

    .gallery-main img{

        max-height:300px;

    }

    .navigation-wrapper{

        grid-template-columns:1fr;

    }

    .expert-card{

        flex-direction:column;

        align-items:flex-start;

        gap:30px;

    }

    .section-head{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

}


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

@media (max-width:768px){

    .breadcrumb{

        font-size:.8rem;

    }

    .product-aside h1{

        font-size:1.6rem;

    }

    .price-box strong{

        font-size:1.6rem;

    }

    .product-tabs{

        overflow:auto;

        flex-wrap:nowrap;

        padding-bottom:8px;

    }

    .product-tabs::-webkit-scrollbar{

        display:none;

    }

    .product-tabs button{

        white-space:nowrap;

    }

    .gallery-thumbs{

        justify-content:center;

    }

    .gallery-thumbs button{

        width:70px;

        height:70px;

    }

    .spec-table th{

        width:140px;

        font-size:.9rem;

    }

    .spec-table td{

        font-size:.9rem;

    }

    .ecosystem-wrapper{

        flex-direction:column;

    }

    .eco-line{

        width:3px;

        height:40px;

        background:linear-gradient(

                to bottom,

                var(--clr-blue),

                transparent

        );

    }

}


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

@media (max-width:576px){

    .product-single{

        padding-top:25px;

    }

    .gallery-main{

        min-height:280px;

        padding:20px;

        border-radius:18px;

    }

    .gallery-main img{

        max-height:220px;

    }

    .gallery-thumbs{

        gap:8px;

    }

    .gallery-thumbs button{

        width:58px;

        height:58px;

        border-radius:12px;

    }

    .product-aside{

        border-radius:18px;

        padding:18px;

    }

    .product-meta{

        grid-template-columns:1fr;

    }

    .aside-tools{

        grid-template-columns:repeat(3,1fr);

    }

    .content-card{

        padding:22px;

        border-radius:18px;

    }

    .content-card h2{

        font-size:1.3rem;

    }

    .related-card .image{

        height:180px;

    }

    .related-card img{

        max-height:120px;

    }

    .expert-card{

        padding:25px;

        border-radius:18px;

    }

    .expert-card h2{

        font-size:1.3rem;

    }

    .product-highlights .container,
    #recentProducts{

        grid-template-columns:1fr;

    }

    .highlight-card{

        padding:20px;

        border-radius:18px;

    }

}


/*======================================
BOTTOM CART (MOBILE)
======================================*/

@media (max-width:768px){

    .floating-cart{

        left:0;

        right:0;

        bottom:0;

        width:100%;

        border-radius:20px 20px 0 0;

        padding:18px;

        justify-content:space-between;

        border-bottom:none;

        box-shadow:0 -6px 22px rgba(0,0,0,.07);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

    }

    body{

        padding-bottom:95px;

    }

}


/*======================================
SMOOTH
======================================*/

.product-single *{

    scroll-margin-top:120px;

}

html{

    scroll-behavior:smooth;

}


/*======================================
BUY BUTTONS  (used in .product-aside)
======================================*/

.buy-buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:18px;

}

.btn-main{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:54px;

    border-radius:16px;

    background:var(--grad-brand);

    color:#fff;

    font-weight:700;

    font-size:.92rem;

    box-shadow:var(--shadow-blue);

    transition:transform .25s ease, box-shadow .25s ease;

}

.btn-main:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 36px rgba(14,165,233,.28);

}

.btn-main .ripple{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:rgba(255,255,255,.55);

    transform:translate(-50%,-50%) scale(0);

    pointer-events:none;

    animation:ripple-grow .7s ease-out forwards;

}

@keyframes ripple-grow{

    to{

        transform:translate(-50%,-50%) scale(22);

        opacity:0;

    }

}

.btn-border{

    display:flex;

    align-items:center;

    justify-content:center;

    height:54px;

    border-radius:16px;

    border:1px solid var(--clr-border);

    background:var(--clr-surface);

    color:var(--clr-text);

    font-weight:700;

    font-size:.92rem;

    transition:.25s;

}

.btn-border:hover{

    border-color:var(--clr-blue);

    color:var(--clr-blue);

    transform:translateY(-3px);

}

.price-on-request{

    color:var(--clr-warning) !important;
    font-size: 20px!important;

}


/*======================================
ASIDE TOOLS  &  GUARANTEE BOX
======================================*/

.aside-tools{

    display:flex;

    margin-bottom:22px;

}

.aside-tools button{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:44px;

    border-radius:14px;

    border:1px solid var(--clr-border);

    background:var(--clr-bg-2);

    color:var(--clr-text-muted);

    font-size:.85rem;

    transition:.25s;

}

.aside-tools button:hover{

    color:var(--clr-blue);

    border-color:color-mix(in srgb,var(--clr-blue) 25%,var(--clr-border));

}

.guarantee-box{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding-top:20px;

    border-top:1px solid var(--clr-border);

}

.guarantee-box div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:.85rem;

    color:var(--clr-text-muted);

}

.guarantee-box i{

    width:36px;

    height:36px;

    flex:0 0 36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:color-mix(in srgb,var(--clr-blue) 8%,transparent);

    color:var(--clr-blue);

}


/*======================================
PRODUCT TABS
======================================*/

.product-content-section{

    padding:30px 0 90px;

}

.product-tabs{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:30px;

    padding:6px;

    background:var(--clr-surface);

    border:1px solid var(--clr-border);

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    width:max-content;

    max-width:100%;

}

.product-tabs button{

    padding:12px 26px;

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

    font-size:.9rem;

    font-weight:600;

    color:var(--clr-text-muted);

    transition:.25s;

    white-space:nowrap;

}

.product-tabs button:hover{

    color:var(--clr-text);

}

.product-tabs button.active{

    background:var(--grad-brand);

    color:#fff;

    box-shadow:var(--shadow-blue);

}


/*======================================
TAB CONTENT / CONTENT CARD
======================================*/

.tab-content{

    display:none;

}

.tab-content.active{

    display:block;

    animation:tab-fade .35s ease;

}

@keyframes tab-fade{

    from{ opacity:0; transform:translateY(8px); }

    to{ opacity:1; transform:translateY(0); }

}

.content-card{

    background:var(--clr-surface);

    border:1px solid var(--clr-border);

    border-radius:26px;

    padding:38px;

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:var(--shadow-card);

}

.content-card h2{

    font-size:1.4rem;

    margin-bottom:22px;

    padding-bottom:18px;

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

}

.content-card .description{

    color:var(--clr-text-muted);

    line-height:2.1;

}

.content-card .description p{

    margin-bottom:16px;

}

.content-card .description h3{

    color:var(--clr-text);

    font-size:1.1rem;

    margin:26px 0 12px;

}

.content-card .description ul{

    margin:14px 0;

    padding-right:20px;

    list-style:disc;

}

.content-card .description li{

    margin-bottom:10px;

}

.content-card .description strong{

    color:var(--clr-text);

}

.content-card .description img{

    border-radius:16px;

    margin:18px 0;
}


/*======================================
FEATURE GRID
======================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    border-radius:16px;

    background:var(--clr-bg-2);

    border:1px solid var(--clr-border);

    font-size:.9rem;

    color:var(--clr-text);

    transition:.25s;

}

.feature-item:hover{

    border-color:color-mix(in srgb,var(--clr-blue) 20%,var(--clr-border));

    transform:translateY(-2px);

}

.feature-item i{

    color:var(--clr-success);

    font-size:1rem;

    flex:0 0 auto;

}


/*======================================
SPEC TABLE
======================================*/

.spec-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:16px;

}

.spec-table tr{

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

}

.spec-table tr:last-child{

    border-bottom:none;

}

.spec-table tr:nth-child(even){

    background:var(--clr-bg-2);

}

.spec-table th,
.spec-table td{

    padding:16px 20px;

    text-align:right;

    font-size:.92rem;

}

.spec-table th{

    width:220px;

    color:var(--clr-text-muted);

    font-weight:600;

}

.spec-table td{

    color:var(--clr-text);

    font-weight:600;

}


/*======================================
DOWNLOAD LIST
======================================*/

.download-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.download-list a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    border-radius:16px;

    background:var(--clr-bg-2);

    border:1px solid var(--clr-border);

    color:var(--clr-text);

    font-weight:600;

    font-size:.92rem;

    transition:.25s;

}

.download-list a:hover{

    border-color:var(--clr-blue);

    color:var(--clr-blue);

    transform:translateX(-4px);

}

.download-list a i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:color-mix(in srgb,var(--clr-blue) 8%,transparent);

    color:var(--clr-blue);

    font-size:.95rem;

}


/*======================================
NAV PLACEHOLDER
======================================*/

.nav-placeholder{

    visibility:hidden;

}


/*======================================
CUSTOM SCROLLBAR
======================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--clr-bg-2);

}

::-webkit-scrollbar-thumb{

    background:color-mix(in srgb,var(--clr-blue) 35%,transparent);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--clr-blue);

}
#qty::-webkit-outer-spin-button,
#qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#qty {
    -moz-appearance: textfield;
    appearance: textfield;
}
/*=====================================================
 TOAST CONTAINER
=====================================================*/

.fac-toast-container{

    position:fixed;

    top:26px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

    z-index:9999999;

    width:auto;

}


/*=====================================================
 TOAST
=====================================================*/

.fac-toast{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:320px;

    max-width:520px;

    padding:16px 26px;

    color:#fff;

    border-radius:22px;

    background:
            linear-gradient(
                    135deg,
                    rgba(24,32,38,.92),
                    rgba(34,45,52,.88)
            );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(26px);

    -webkit-backdrop-filter:blur(26px);

    box-shadow:
            0 30px 60px rgba(0,0,0,.28),
            0 12px 30px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.08);

    opacity:0;

    visibility:hidden;

    transform:
            translateY(-45px)
            scale(.88);

    transition:
            opacity .35s,
            transform .45s cubic-bezier(.22,1,.36,1),
            visibility .35s;

}


/*=====================================================
 GREEN GLOW
=====================================================*/

.fac-toast::before{

    content:"";

    position:absolute;

    left:-45px;
    top:-45px;

    width:140px;
    height:140px;

    border-radius:50%;

    background:

            radial-gradient(

                    rgba(34,197,94,.22),

                    transparent 70%

            );

    pointer-events:none;

}


/*=====================================================
 BOTTOM TIMER
=====================================================*/

.fac-toast::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    background:

            linear-gradient(
                    90deg,
                    #22c55e,
                    #4ade80
            );

    transform-origin:left;

}

.fac-toast-show::after{

    animation:toastTimer 3s linear forwards;

}

@keyframes toastTimer{

    to{

        transform:scaleX(0);

    }

}


/*=====================================================
 SHOW
=====================================================*/

.fac-toast.fac-toast-show{

    opacity:1;

    visibility:visible;

    transform:
            translateY(0)
            scale(1);

}


/*=====================================================
 ICON
=====================================================*/

.fac-toast i{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:14px;

    color:#fff;

    background:

            linear-gradient(
                    135deg,
                    #22c55e,
                    #16a34a
            );

    box-shadow:

            0 10px 25px rgba(34,197,94,.35);

    font-size:17px;

}


/*=====================================================
 TEXT
=====================================================*/

.fac-toast span{

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.2px;

    color:#fff;

}


/*=====================================================
 HOVER
=====================================================*/

.fac-toast:hover{

    transform:
            translateY(-3px)
            scale(1.02);

}


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

@media(max-width:768px){

    .fac-toast-container{

        top:18px;

        width:100%;

        padding:0 16px;

    }

    .fac-toast{

        min-width:unset;

        width:100%;

        max-width:none;

        padding:15px 18px;

        border-radius:18px;
        border-top:2px solid rgba(74,222,128,.55);

    }

    .fac-toast span{

        font-size:.88rem;

    }

}
.fac-toast .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.fac-toast .shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80px;

    height:100%;

    transform:skewX(-25deg);

    background:

            linear-gradient(

                    transparent,

                    rgba(255,255,255,.18),

                    transparent

            );

}

.fac-toast-show .shine::before{

    animation:toastShine 1.2s ease;

}

@keyframes toastShine{

    to{

        left:140%;

    }

}

#floatingDock {
    left: 0 !important;
    right: 28px !important;
}