/*========== HERO ==========*/

.powder-detail-hero{

    position:relative;
    width:100%;
    min-height:78vh;

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

    text-align:center;
    overflow:hidden;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}


/* PRODUCT BACKGROUND IMAGES ONLY */

/*========== POWDER HERO IMAGES ==========*/

.turmeric-powder-hero{

    background:url("../images/turmeric-powder.jpg");

    background-size:cover;

    background-position:center;

}


.cumin-powder-hero{

    background:url("../images/cumin-powder.jpg");

    background-size:cover;

    background-position:center;

}


.red-chilli-powder-hero{

    background:url("../images/Red-Chilli-Powder.jpg");

    background-size:cover;

    background-position:center;

}




.powder-detail-hero-content{

    position:relative;

    z-index:2;

    width:90%;

    max-width:900px;

    color:#FFFFFF;

}


.powder-detail-hero-content span{

    display:inline-block;

    padding:10px 24px;

    background:rgba(212,175,55,.22);

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

    border-radius:50px;

    color:#FFE27A;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

    text-transform:uppercase;

    backdrop-filter:blur(4px);

}


.powder-detail-hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:76px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

    color:#FFFFFF;

    letter-spacing:.5px;

    text-shadow:0 5px 20px rgba(0,0,0,.55);

}


.powder-detail-hero-content p{

    font-family:'Montserrat',sans-serif;

    font-size:21px;

    font-weight:400;

    line-height:1.8;

    max-width:760px;

    margin:auto;

    color:#FFFFFF;

    text-shadow:0 3px 12px rgba(0,0,0,.45);

}


/*========== BUTTONS ==========*/

.powder-detail-btns{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.quote-btn,
.spec-btn{

    padding:15px 38px;

    border-radius:50px;

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.35s;

}

.quote-btn{

    background:#D4AF37;

    color:#12372A;

}

.quote-btn:hover{

    background:#FFFFFF;

    transform:translateY(-5px);

}

.spec-btn{

    border:2px solid #FFFFFF;

    color:#FFFFFF;

}

.spec-btn:hover{

    background:#FFFFFF;

    color:#12372A;

}

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

.powder-detail-overview{

    padding:25px 0 80px;

    background:var(--bg-dark);

}
.powder-detail-overview .container{
    width:90%;
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:45% 55%;
    gap:60px;
    align-items:stretch;   /* changed from start */
}

/*==================================
        LEFT COLUMN
==================================*/

.powder-detail-left{

    display:flex;

    flex-direction:column;

}

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

.powder-detail-image{

    position:relative;

    margin-bottom:40px;

}

.powder-detail-image img{

    width:100%;

    max-width:100%;

    height:430px;

    object-fit:cover;

    display:block;

    border-radius:25px;

    border:4px solid #FFFFFF;

    outline:2px solid #D4AF37;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

    transition:.4s;

}

.powder-detail-image img:hover{

    transform:scale(1.03);

}

/*==================================
        PRODUCT DETAILS
==================================*/

.powder-detail-description{

    margin-top:0;

}

.powder-detail-description h2{

    color:var(--gold);

    font-size:38px;

    font-weight:700;

    margin-bottom:18px;

}

.powder-detail-description p{

    color:var(--text-light);

    font-size:17px;

    line-height:1.8;

    margin-bottom:30px;

}



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

.powder-detail-spec{
    display:flex;
    flex-direction:column;
    height:100%;
}

.powder-detail-spec .section-heading{

    text-align:left;

    margin-bottom:25px;

}

.powder-detail-spec .section-heading small{

    display:block;

    color:var(--gold);

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;

}

.powder-detail-spec .section-heading h2{

    color:var(--gold);

    font-size:36px;

    font-weight:700;

    margin-bottom:12px;

}

.powder-detail-spec .section-heading p{

    color:var(--text-light);

    font-size:15px;

    line-height:1.6;

}

/*==================================
        SPEC LIST - SIMPLE
==================================*/

.spec-list{
    list-style:none;
    padding:0;
    margin:0;

    flex:1;
    overflow-y:auto;

    max-height:760px;   /* adjust if needed */
    padding-right:8px;
}

.spec-list li{

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

    transition:.3s;

}

.spec-list li:last-child{

    border-bottom:none;

}

/*==============================
        TITLE + ICON
==============================*/

.spec-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:8px;

}

.spec-title i{

    color:var(--gold);

    font-size:18px;

    width:22px;

    text-align:center;

    flex-shrink:0;

    opacity:1;

    transition:.3s;

}

.spec-title span{

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    line-height:1.2;

}

/*==============================
        VALUE
==============================*/

.spec-list strong{

    display:block;

    margin-left:34px;

    color:var(--white);

    font-size:17px;

    font-weight:500;

    line-height:1.6;

    word-break:break-word;

}

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

.spec-list li:hover{

    padding-left:8px;

}

.spec-list li:hover i{

    transform:scale(1.08);

}

.spec-list li:hover span{

    color:#E8C75A;

}

.spec-list li:hover strong{

    color:#FFFFFF;

}

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

@media(max-width:768px){

    .spec-list li{

        padding:15px 0;

    }

    .spec-title{

        gap:10px;

        margin-bottom:6px;

    }

    .spec-title i{

        font-size:16px;

        width:20px;

    }

    .spec-title span{

        font-size:12px;

    }

    .spec-list strong{

        margin-left:30px;

        font-size:15px;

        line-height:1.5;

    }

}


/*==================================
        REQUEST QUOTE
==================================*/

.spec-inquiry-btn{

    margin-top:30px;

}

.spec-inquiry-btn a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 32px;

    background:var(--gold);

    color:var(--bg-dark);

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.spec-inquiry-btn a:hover{

    background:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}


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

@media(max-width:991px){

    .powder-detail-overview{

        padding:80px 0;

    }

    .powder-detail-overview .container{

        width:92%;

        grid-template-columns:1fr;

        gap:45px;

    }

    .powder-detail-left{

        order:1;

    }

    .powder-detail-spec{

        order:2;

    }

    .powder-detail-image{

        margin-bottom:30px;

    }

    .powder-detail-description{

        margin-top:0;

    }

}


@media(max-width:768px){

    .powder-detail-overview{

        padding:60px 0;

    }

    .powder-detail-overview .container{

        width:95%;

        gap:35px;

    }

    .powder-detail-image{

        margin-bottom:25px;

    }

    .powder-detail-image img{

        width:100%;

        max-width:100%;

        height:300px;

    }

    .powder-detail-description h2{

        font-size:30px;

    }

    .powder-detail-description p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:25px;

    }

    .powder-detail-spec{

        padding:22px;

        border-radius:18px;

    }

    .powder-detail-spec .section-heading h2{

        font-size:28px;

    }

    .powder-detail-spec .section-heading p{

        font-size:14px;

    }

    .spec-list li{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

        padding:14px;

    }

    .spec-list strong{

        text-align:left;

    }

    .spec-inquiry-btn a{

        width:100%;

        justify-content:center;

    }

}
.packaging-list{
    margin-top:12px;
    padding-left:22px;
}

.packaging-list li{
    color:var(--white);
    opacity:1;
    font-family:'Montserrat',sans-serif;
    font-size:17px;
    font-weight:500;
    line-height:1.8;
}

.packaging-list li::marker{
    color:var(--gold);
}

@media(max-width:576px){

    .powder-detail-overview{

        padding:50px 0;

    }

    .powder-detail-image img{

        height:240px;

    }

    .powder-detail-description h2{

        font-size:26px;

    }

    .powder-detail-description p{

        font-size:14px;

    }

    .powder-detail-spec{

        padding:18px;

    }
 .spec-list::-webkit-scrollbar{
    width:8px;
}

.spec-list::-webkit-scrollbar-thumb{
    background:#D4AF37;
    border-radius:20px;
}

.spec-list::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
}
} 
.packaging-list{
    margin-top:10px;
    padding-left:20px;
}

.packaging-list li{
    list-style-type:disc;
    margin-bottom:8px;
}
/*==================================
        POWDER FEATURES
==================================*/

.powder-detail-list{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

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

    gap:12px;

}

.powder-detail-list li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 16px;

    min-height:52px;

    background:#FFFFFF;

    border-left:4px solid var(--gold);

    border-radius:10px;

    color:#12372A;

    font-size:15px;

    font-weight:600;

    line-height:1.2;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.powder-detail-list li:hover{

    transform:translateX(5px);

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

}

.powder-detail-list li i{

    color:var(--gold);

    font-size:16px;

    min-width:18px;

    flex-shrink:0;

}

@media(max-width:768px){

    .powder-detail-list{

        grid-template-columns:1fr;

        gap:10px;

    }

    .powder-detail-list li{

        min-height:48px;

        padding:10px 14px;

        font-size:14px;

    }

}
/*==================================
        PRODUCT NAME
==================================*/

.product-name{

    background:var(--bg-dark);

    padding:20px 0 15px;

    text-align:center;

}

.product-name .container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

.product-name h1{

    margin:0;

    font-family:'Cormorant Garamond', serif;

    font-size:52px;

    font-weight:700;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    line-height:1.1;

    position:relative;

    display:inline-block;

    padding-bottom:12px;

}

.product-name h1::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:80px;

    height:3px;

    background:var(--gold);

    border-radius:10px;

}

@media(max-width:768px){

    .product-name{

        padding:15px 0 10px;

    }

    .product-name h1{

        font-size:36px;

        padding-bottom:10px;

    }

    .product-name h1::after{

        width:60px;

    }

}
/* Back Button */

.back-arrow{

    position:absolute;

    top:30px;
    left:8%;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 20px;

    background:var(--gold);

    color:var(--bg-dark);

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:600;

    letter-spacing:.5px;

    border-radius:50px;

    box-shadow:0 8px 20px rgba(0,0,0,.4);

    transition:.3s;

    z-index:100;

}



.back-arrow:hover{

    background:var(--white);

    color:var(--bg-dark);

    transform:translateX(-5px);

}
/*========================================================
        CHS INTERNATIONAL
        PREMIUM POWDER PRODUCT ANIMATIONS
        ADD THIS AT THE END OF YOUR EXISTING CSS
========================================================*/


/*========================================================
        HERO PREMIUM OVERLAY
========================================================*/

.powder-detail-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            120deg,
            rgba(11,31,26,.72),
            rgba(11,43,38,.38),
            rgba(11,31,26,.68)
        );

    pointer-events:none;

}


/*========================================================
        HERO CINEMATIC LIGHT
========================================================*/

.powder-detail-hero::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.14),
            rgba(212,175,55,.05) 35%,
            transparent 70%
        );

    z-index:1;

    pointer-events:none;

    animation:
        productHeroGlow 8s ease-in-out infinite alternate;

}


/*========================================================
        HERO CONTENT
========================================================*/

.powder-detail-hero-content{

    animation:
        productHeroContent 1.1s cubic-bezier(.2,.7,.2,1) both;

}


/*========================================================
        HERO BADGE
========================================================*/

.powder-detail-hero-content span{

    animation:
        productBadgeReveal .8s .15s ease both;

    box-shadow:
        0 0 0 rgba(212,175,55,0);

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

}


.powder-detail-hero-content span:hover{

    transform:translateY(-3px);

    box-shadow:
        0 8px 30px rgba(212,175,55,.20);

}


/*========================================================
        HERO TITLE
========================================================*/

.powder-detail-hero-content h1{

    animation:
        productTitleReveal 1s .25s cubic-bezier(.2,.7,.2,1) both;

}


/*========================================================
        HERO DESCRIPTION
========================================================*/

.powder-detail-hero-content p{

    animation:
        productDescriptionReveal .9s .45s ease both;

}


/*========================================================
        HERO BUTTONS
========================================================*/

.powder-detail-btns{

    animation:
        productButtonsReveal .9s .6s ease both;

}


/*========================================================
        PREMIUM BUTTON BASE
========================================================*/

.quote-btn,
.spec-btn{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

}


/*========================================================
        BUTTON SHINE
========================================================*/

.quote-btn::before,
.spec-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:65%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:skewX(-25deg);

    transition:left .8s ease;

    z-index:-1;

}


.quote-btn:hover::before,
.spec-btn:hover::before{

    left:150%;

}


/*========================================================
        QUOTE BUTTON
========================================================*/

.quote-btn{

    box-shadow:
        0 8px 25px rgba(212,175,55,.20);

}


.quote-btn:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 15px 35px rgba(212,175,55,.28);

}


/*========================================================
        SPEC BUTTON
========================================================*/

.spec-btn:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 12px 30px rgba(255,255,255,.15);

}


/*========================================================
        PRODUCT NAME
========================================================*/

.product-name{

    position:relative;

    overflow:hidden;

}


.product-name::before{

    content:"";

    position:absolute;

    width:400px;

    height:200px;

    left:50%;

    top:50%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(212,175,55,.08),
            transparent 70%
        );

    pointer-events:none;

    animation:
        productNameGlow 6s ease-in-out infinite alternate;

}


.product-name h1{

    animation:
        productNameReveal .9s cubic-bezier(.2,.7,.2,1) both;

}


.product-name h1::after{

    animation:
        productUnderline 1s .5s ease both;

    transform-origin:center;

}


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

.powder-detail-overview{

    position:relative;

    overflow:hidden;

}


/*========================================================
        IMAGE CONTAINER
========================================================*/

.powder-detail-image{

    perspective:1000px;

    animation:
        productImageReveal 1s .2s cubic-bezier(.2,.7,.2,1) both;

}


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

.powder-detail-image img{

    position:relative;

    transform:
        scale(.96);

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        box-shadow .7s ease,
        filter .5s ease;

}


/*========================================================
        IMAGE SHINE
========================================================*/

.powder-detail-image::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    border-radius:25px;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:skewX(-25deg);

    pointer-events:none;

    transition:left 1s ease;

}


.powder-detail-image:hover::after{

    left:150%;

}


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

.powder-detail-image:hover img{

    transform:
        scale(1.035)
        rotateX(1deg)
        rotateY(-1deg);

    box-shadow:
        0 28px 60px rgba(0,0,0,.28),
        0 0 25px rgba(212,175,55,.12);

    filter:
        brightness(1.04)
        saturate(1.05);

}


/*========================================================
        DESCRIPTION REVEAL
========================================================*/

.powder-detail-description{

    animation:
        productDescriptionBlock .9s .35s ease both;

}


.powder-detail-description h2{

    position:relative;

}


.powder-detail-description h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin-top:10px;

    border-radius:10px;

    background:var(--gold);

    transform-origin:left;

    animation:
        descriptionLine 1s .8s ease both;

}


/*========================================================
        SPECIFICATION BLOCK
========================================================*/

.powder-detail-spec{

    animation:
        productSpecReveal 1s .35s cubic-bezier(.2,.7,.2,1) both;

}


/*========================================================
        SPEC HEADING
========================================================*/

.powder-detail-spec .section-heading{

    animation:
        specHeadingReveal .8s .45s ease both;

}


/*========================================================
        SPEC LIST
========================================================*/

.spec-list{

    scrollbar-width:thin;

    scrollbar-color:
        var(--gold)
        rgba(255,255,255,.08);

}


/*========================================================
        SPEC ITEMS
========================================================*/

.spec-list li{

    position:relative;

    overflow:hidden;

    animation:
        specItemReveal .65s ease both;

}


/*========================================================
        STAGGER SPEC ITEMS
========================================================*/

.spec-list li:nth-child(1){
    animation-delay:.15s;
}

.spec-list li:nth-child(2){
    animation-delay:.22s;
}

.spec-list li:nth-child(3){
    animation-delay:.29s;
}

.spec-list li:nth-child(4){
    animation-delay:.36s;
}

.spec-list li:nth-child(5){
    animation-delay:.43s;
}

.spec-list li:nth-child(6){
    animation-delay:.50s;
}

.spec-list li:nth-child(7){
    animation-delay:.57s;
}

.spec-list li:nth-child(8){
    animation-delay:.64s;
}

.spec-list li:nth-child(9){
    animation-delay:.71s;
}

.spec-list li:nth-child(10){
    animation-delay:.78s;
}

.spec-list li:nth-child(11){
    animation-delay:.85s;
}

.spec-list li:nth-child(12){
    animation-delay:.92s;
}


/*========================================================
        SPEC GOLD LIGHT
========================================================*/

.spec-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:3px;

    height:0;

    background:var(--gold);

    border-radius:10px;

    transform:translateY(-50%);

    transition:
        height .35s ease;

}


.spec-list li:hover::before{

    height:65%;

}


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

.spec-title i{

    transition:
        transform .4s ease,
        text-shadow .4s ease;

}


.spec-list li:hover .spec-title i{

    transform:
        scale(1.15)
        rotate(-5deg);

    text-shadow:
        0 0 12px rgba(212,175,55,.55);

}


/*========================================================
        SPEC VALUE
========================================================*/

.spec-list strong{

    transition:
        transform .35s ease,
        color .35s ease;

}


.spec-list li:hover strong{

    transform:
        translateX(3px);

}


/*========================================================
        PACKAGING
========================================================*/

.packaging-list li{

    transition:
        transform .35s ease,
        color .35s ease;

}


.packaging-list li:hover{

    transform:
        translateX(6px);

    color:var(--gold);

}


/*========================================================
        PRODUCT FEATURES
========================================================*/

.powder-detail-list li{

    position:relative;

    overflow:hidden;

    animation:
        featureReveal .7s ease both;

}


.powder-detail-list li:nth-child(1){
    animation-delay:.1s;
}

.powder-detail-list li:nth-child(2){
    animation-delay:.18s;
}

.powder-detail-list li:nth-child(3){
    animation-delay:.26s;
}

.powder-detail-list li:nth-child(4){
    animation-delay:.34s;
}

.powder-detail-list li:nth-child(5){
    animation-delay:.42s;
}

.powder-detail-list li:nth-child(6){
    animation-delay:.50s;
}


/*========================================================
        FEATURE SHINE
========================================================*/

.powder-detail-list li::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:skewX(-25deg);

    transition:left .7s ease;

}


.powder-detail-list li:hover::after{

    left:145%;

}


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

.powder-detail-list li i{

    transition:
        transform .4s ease,
        text-shadow .4s ease;

}


.powder-detail-list li:hover i{

    transform:
        scale(1.2);

    text-shadow:
        0 0 12px rgba(212,175,55,.45);

}


/*========================================================
        INQUIRY BUTTON
========================================================*/

.spec-inquiry-btn{

    animation:
        inquiryReveal .8s .7s ease both;

}


.spec-inquiry-btn a{

    position:relative;

    overflow:hidden;

    box-shadow:
        0 8px 22px rgba(212,175,55,.18);

}


.spec-inquiry-btn a::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:skewX(-25deg);

    transition:left .8s ease;

}


.spec-inquiry-btn a:hover::before{

    left:145%;

}


.spec-inquiry-btn a:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px rgba(212,175,55,.25);

}


/*========================================================
        BACK BUTTON
========================================================*/

.back-arrow{

    overflow:hidden;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

    animation:
        backButtonReveal .8s .2s ease both;

}


.back-arrow::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.6),
            transparent
        );

    transform:skewX(-25deg);

    transition:left .7s ease;

}


.back-arrow:hover::before{

    left:145%;

}


.back-arrow i{

    transition:
        transform .35s ease;

}


.back-arrow:hover i{

    transform:
        translateX(-5px);

}


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

.spec-list::-webkit-scrollbar{

    width:7px;

}


.spec-list::-webkit-scrollbar-track{

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

    border-radius:20px;

}


.spec-list::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            var(--gold),
            var(--gold-light)
        );

    border-radius:20px;

}


.spec-list::-webkit-scrollbar-thumb:hover{

    background:
        var(--gold-light);

}


/*========================================================
        KEYFRAMES
========================================================*/

@keyframes productHeroGlow{

    0%{

        opacity:.35;

        transform:
            translate(-50%,-50%)
            scale(.85);

    }

    100%{

        opacity:.85;

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

    }

}


@keyframes productHeroContent{

    from{

        opacity:0;

        transform:
            translateY(35px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes productBadgeReveal{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.9);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes productTitleReveal{

    from{

        opacity:0;

        transform:
            translateY(35px)
            scale(.96);

        letter-spacing:7px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:.5px;

    }

}


@keyframes productDescriptionReveal{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes productButtonsReveal{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes productNameReveal{

    from{

        opacity:0;

        transform:
            translateY(20px);

        letter-spacing:8px;

    }

    to{

        opacity:1;

        transform:
            translateY(0);

        letter-spacing:2px;

    }

}


@keyframes productUnderline{

    from{

        width:0;

    }

    to{

        width:80px;

    }

}


@keyframes productNameGlow{

    from{

        opacity:.4;

        transform:
            translate(-50%,-50%)
            scale(.8);

    }

    to{

        opacity:.9;

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

    }

}


@keyframes productImageReveal{

    from{

        opacity:0;

        transform:
            translateX(-40px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateX(0)
            scale(1);

    }

}


@keyframes productDescriptionBlock{

    from{

        opacity:0;

        transform:
            translateY(30px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes descriptionLine{

    from{

        width:0;

    }

    to{

        width:55px;

    }

}


@keyframes productSpecReveal{

    from{

        opacity:0;

        transform:
            translateX(40px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes specHeadingReveal{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes specItemReveal{

    from{

        opacity:0;

        transform:
            translateX(20px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes featureReveal{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes inquiryReveal{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes backButtonReveal{

    from{

        opacity:0;

        transform:
            translateX(-25px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


/*========================================================
        MOBILE ANIMATION OPTIMIZATION
========================================================*/

@media(max-width:768px){

    .powder-detail-hero::after{

        width:400px;

        height:400px;

    }


    .powder-detail-image:hover img{

        transform:
            scale(1.02);

    }


    .powder-detail-list li:hover{

        transform:
            translateX(3px);

    }


    .spec-list li:hover{

        padding-left:5px;

    }


    .product-name h1::after{

        width:60px;

    }

}


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

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

    .powder-detail-hero::after,
    .powder-detail-hero-content,
    .powder-detail-hero-content span,
    .powder-detail-hero-content h1,
    .powder-detail-hero-content p,
    .powder-detail-btns,
    .product-name h1,
    .product-name h1::after,
    .powder-detail-image,
    .powder-detail-description,
    .powder-detail-spec,
    .powder-detail-spec .section-heading,
    .spec-list li,
    .powder-detail-list li,
    .spec-inquiry-btn,
    .back-arrow{

        animation:none !important;

    }

}