/* ==========================================================
                    PLUSHORO
              Cute Plush & Squishy Store
========================================================== */

/* ================= GOOGLE FONT ================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Baloo+2:wght@600;700;800&display=swap');

/* ==========================================================
                    ROOT VARIABLES
========================================================== */

:root{

    --primary:#A56BFF;

    --primary-dark:#8B5CF6;

    --primary-light:#E9D8FD;

    --pink:#FF8BC2;

    --pink-light:#FFEAF5;

    --yellow:#FFECA8;

    --background:#FFFDFE;

    --section:#FAF7FF;

    --card:#FFFFFF;

    --text:#342E4F;

    --text-light:#7E7895;

    --border:#ECE5FF;

    --success:#34C759;

    --danger:#FF4D6D;

    --shadow:0 15px 40px rgba(165,107,255,.10);

    --shadow-hover:0 20px 50px rgba(165,107,255,.18);

    --radius:22px;

    --transition:.30s ease;

}

/* ==========================================================
                    RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    color:var(--text);

    overflow-x:hidden;

    background:
        url("images/Background_Sticker.jpeg")
        center top / cover
        fixed
        no-repeat;

    background-color:#FFFDFE;

}

/* ==========================================================
                    GLOBAL
========================================================== */

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:"Poppins",sans-serif;

}

input,

textarea,

select{

    font-family:"Poppins",sans-serif;

}

/* ==========================================================
                    NAVBAR
========================================================== */

nav{

    position:sticky;

    top:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 60px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:0 10px 30px rgba(0,0,0,.04);

}

/* ==========================================================
                    LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

}

.logo a{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:58px;

    height:58px;

    transition:.35s;

}

.logo img:hover{

    transform:rotate(-6deg) scale(1.08);

}

.logo span{

    font-family:"Baloo 2",cursive;

    font-size:38px;

    font-weight:700;

    color:var(--primary-dark);

}

/* ==========================================================
                    MENU
========================================================== */

nav ul{

    display:flex;

    align-items:center;

    gap:38px;

    list-style:none;

}

nav ul li{

    list-style:none;

}

nav ul li a{

    font-size:18px;

    font-weight:600;

    color:var(--text);

    transition:var(--transition);

}

nav ul li a:hover{

    color:var(--primary);

}

/* ==========================================================
                    CATEGORY SELECT
========================================================== */

nav select{

    padding:14px 18px;

    border-radius:14px;

    border:2px solid var(--border);

    background:white;

    font-size:16px;

    color:var(--text);

    cursor:pointer;

    transition:.30s;

}

nav select:hover{

    border-color:var(--primary);

}

nav select:focus{

    outline:none;

    border-color:var(--primary);

}

/* ==========================================================
                    SEARCH BAR
========================================================== */

.search{

    position:relative;

    display:flex;

    align-items:center;

}

.search input{

    width:360px;

    height:52px;

    padding-left:52px;

    padding-right:18px;

    border-radius:999px;

    border:2px solid var(--border);

    background:white;

    font-size:15px;

    color:var(--text);

    transition:.30s;

}

.search input::placeholder{

    color:#A8A3BD;

}

.search input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(165,107,255,.10);

}

.search-icon{

    position:absolute;

    left:18px;

    color:var(--primary);

    pointer-events:none;

}

/* ==========================================================
                    SEARCH RESULTS
========================================================== */

.search-results{

    position:absolute;

    top:110%;

    left:0;

    width:100%;

    background:white;

    border-radius:18px;

    overflow:hidden;

    display:none;

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

    box-shadow:var(--shadow);

    z-index:99999;

}

.search-item{

    padding:15px 18px;

    cursor:pointer;

    transition:.25s;

}

.search-item:hover{

    background:var(--section);

}

.no-results{

    padding:18px;

    color:var(--text-light);

}

/* ==========================================================
                    NAVBAR ICONS
========================================================== */

.icons{

    display:flex;

    align-items:center;

    gap:15px;

}

.icons .material-icons{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:white;

    color:var(--primary);

    cursor:pointer;

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

    box-shadow:0 6px 15px rgba(0,0,0,.05);

    transition:.30s;

}

.icons .material-icons:hover{

    transform:translateY(-3px);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

}

/* ==========================================================
                PROFILE DROPDOWN
========================================================== */

.profile-menu{

    position:relative;

}

.profile-dropdown{

    position:absolute;

    top:60px;

    right:0;

    width:300px;

    display:none;

    background:white;

    border-radius:20px;

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

    box-shadow:var(--shadow);

    overflow:hidden;

    z-index:999999;

}

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

.hero{

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

    backdrop-filter:blur(10px);

}

/* Decorative blobs */

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:#EFE5FF;

    border-radius:50%;

    top:-260px;

    right:-220px;

    opacity:.75;

    filter:blur(20px);

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#FFE8F4;

    border-radius:50%;

    bottom:-180px;

    left:-120px;

    opacity:.75;

    filter:blur(25px);

}

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

.hero-content{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}

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

.hero-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#F2EAFF;

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

    margin-bottom:30px;

}

.hero-text h1{

    font-size:72px;

    line-height:1.08;

    font-weight:800;

    color:var(--text);

    margin-bottom:28px;

}

.hero-text h1 span{

    display:block;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-text p{

    font-size:20px;

    color:var(--text-light);

    line-height:1.9;

    max-width:620px;

    margin-bottom:42px;

}

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

.hero-buttons{
    display:flex;
    gap:18px;
    margin-top:42px;
    align-items:center;
}

.btn-primary,
.btn-secondary{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    font-size:16px;
    font-weight:600;

    text-decoration:none;

    transition:.35s;
}

.btn-primary{

    color:#fff;

    background:linear-gradient(
        135deg,
        #8B5CF6,
        #F472B6
    );

    box-shadow:
        0 15px 40px rgba(139,92,246,.30);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 45px rgba(139,92,246,.40);

}

.btn-secondary{

    color:var(--primary);

    border:2px solid rgba(139,92,246,.18);

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

    backdrop-filter:blur(20px);

}

.btn-secondary:hover{

    background:#fff;

    transform:translateY(-4px);

}

/* ================= RIGHT ================= */

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:560px;

    animation:float 4s ease-in-out infinite;

    filter:drop-shadow(0 35px 55px rgba(165,107,255,.20));

}

/* ================= FLOAT ANIMATION ================= */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ==========================================================
                    CUSTOMER FAVOURITES
========================================================== */

.products-wrapper{

    padding:90px 8%;

    background:linear-gradient(
        180deg,
        #FFFFFF,
        #FBF8FF
    );

}

.products-heading{

    text-align:center;

    margin-bottom:60px;

}

.products-heading span{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:#F2EAFF;

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.products-heading h2{

    font-size:52px;

    font-weight:800;

    color:var(--text);

    margin-bottom:18px;

}

.products-heading p{

    max-width:700px;

    margin:auto;

    color:var(--text-light);

    font-size:18px;

    line-height:1.8;

}

/* ==========================================================
                    PRODUCT GRID
========================================================== */

.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:30px;
    align-items:start;
}

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

.card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(165,107,255,.12);

    transition:.35s;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    box-shadow:
        0 10px 30px rgba(40,25,80,.06);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 22px 55px rgba(139,92,246,.18);

    border-color:rgba(165,107,255,.25);

}

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

.card-image{

    position:relative;

    height:220px;

    background:
        linear-gradient(
            180deg,
            #FBF9FF,
            #F5EEFF
        );

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

}

.card-image img{

    max-width:85%;

    max-height:180px;

    object-fit:contain;

    transition:.35s;

}

.card:hover img{

    transform:scale(1.08);

}

/* ==========================================================
                    BADGES
========================================================== */

.product-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.stock-badge{

    position:absolute;

    top:18px;

    right:18px;

    background:#EFFFF2;

    color:var(--success);

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

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

.card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

    width:100%;

}

.card-rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:14px;

    color:#FFC83D;

    font-size:16px;

}

.card-rating span{

    color:var(--text-light);

    font-size:14px;

}

.card-content h3{

    font-size:23px;

    font-weight:700;

    color:var(--text);

    margin-bottom:14px;

    min-height:58px;

}

.card-price{

    font-size:32px;

    font-weight:800;

    color:var(--primary-dark);

    margin-bottom:12px;

}

.stock-text{

    color:var(--success);

    font-size:15px;

    font-weight:600;

    margin-bottom:22px;

}

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

.card-content button{

    width:100%;

    height:54px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.card-content button:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 35px rgba(165,107,255,.22);

}

.card-content button:disabled{

    background:#D7D4E6;

    color:#777;

    cursor:not-allowed;

    box-shadow:none;

}

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

.loading-product{

    text-align:center;

    padding:80px 20px;

    color:var(--text-light);

}

.loading-product h2{

    color:var(--text);

    margin-bottom:15px;

}

/* ==========================================================
                    SHOP BY CATEGORY
========================================================== */

.shop-categories{

    padding:100px 8%;

    background:linear-gradient(
        180deg,
        #FAF7FF,
        #FFFFFF
    );

}

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

.section-title{

    text-align:center;

    font-size:52px;

    font-weight:800;

    color:var(--text);

    margin-bottom:18px;

}

.section-subtitle{

    max-width:720px;

    margin:auto;

    margin-bottom:70px;

    text-align:center;

    font-size:18px;

    line-height:1.8;

    color:var(--text-light);

}

/* ==========================================================
                    CATEGORY GRID
========================================================== */

.category-grid{

    display:grid;

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

    gap:35px;

}

/* ==========================================================
                    CATEGORY CARD
========================================================== */

.category-card{

    background:white;

    border-radius:30px;

    padding:38px;

    text-align:center;

    cursor:pointer;

    transition:var(--transition);

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

    box-shadow:var(--shadow);

}

.category-card:hover{

    transform:translateY(-10px);

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

}

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

.category-emoji{

    width:100px;

    height:100px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:46px;

    background:linear-gradient(
        135deg,
        #F3EBFF,
        #FFEAF5
    );

    transition:.35s;

}

.category-card:hover .category-emoji{

    transform:rotate(-8deg) scale(1.12);

}

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

.category-card h3{

    font-size:26px;

    font-weight:700;

    color:var(--text);

    margin-bottom:14px;

}

.category-card p{

    color:var(--text-light);

    line-height:1.8;

    font-size:15px;

}

/* ==========================================================
                    CATEGORY BUTTON
========================================================== */

.category-btn{

    display:inline-block;

    margin-top:24px;

    padding:12px 24px;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary-dark);

    font-weight:600;

    transition:.3s;

}

.category-card:hover .category-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

}

/* ==========================================================
                    CATEGORY COLORS
========================================================== */

.category-card:nth-child(1) .category-emoji{

    background:linear-gradient(
        135deg,
        #EDE3FF,
        #F9ECFF
    );

}

.category-card:nth-child(2) .category-emoji{

    background:linear-gradient(
        135deg,
        #FFE8F3,
        #FFF1F8
    );

}

.category-card:nth-child(3) .category-emoji{

    background:linear-gradient(
        135deg,
        #FFF3D8,
        #FFF9EC
    );

}

.category-card:nth-child(4) .category-emoji{

    background:linear-gradient(
        135deg,
        #E6FFF2,
        #F2FFF8
    );

}

/* ==========================================================
                    CATEGORY ANIMATION
========================================================== */

.category-card{

    position:relative;

    overflow:hidden;

}

.category-card::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

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

    transition:.35s;

}

.category-card:hover::before{

    transform:scale(1.3);

}

/* ==========================================================
                    WHY PLUSHORO
========================================================== */

.why-plushoro{

    padding:100px 8%;

    background:linear-gradient(
        180deg,
        #FFFFFF,
        #FAF7FF
    );

}

.why-heading{

    text-align:center;

    margin-bottom:70px;

}

.why-heading h2{

    font-size:52px;

    font-weight:800;

    color:var(--text);

    margin-bottom:18px;

}

.why-heading p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================================================
                    FEATURES GRID
========================================================== */

.features-grid{

    display:grid;

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

    gap:30px;

}

/* ==========================================================
                    FEATURE CARD
========================================================== */

.feature-card{

    background:white;

    border-radius:28px;

    padding:40px 30px;

    text-align:center;

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

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.feature-card:hover{

    transform:translateY(-10px);

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

}

.feature-card .material-icons{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:24px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    color:white;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

}

.feature-card h3{

    font-size:24px;

    font-weight:700;

    color:var(--text);

    margin-bottom:14px;

}

.feature-card p{

    color:var(--text-light);

    line-height:1.8;

    font-size:15px;

}

/* ==========================================================
                    CUSTOMER PROMISE
========================================================== */

.promise{

    padding:110px 8%;

    background:#FFFFFF;

}

.promise-content{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

    max-width:1400px;

    margin:auto;

}

/* ==========================================================
                    LEFT SIDE
========================================================== */

.promise-text h2{

    font-size:56px;

    font-weight:800;

    color:var(--text);

    line-height:1.15;

    margin-bottom:24px;

}

.promise-text p{

    font-size:18px;

    color:var(--text-light);

    line-height:2;

}

/* ==========================================================
                    RIGHT SIDE
========================================================== */

.promise-stats{

    display:grid;

    gap:25px;

}

.promise-box{

    background:white;

    padding:32px;

    border-radius:24px;

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

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.promise-box:hover{

    transform:translateX(8px);

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

}

.promise-box h3{

    font-size:34px;

    color:var(--primary-dark);

    margin-bottom:10px;

}

.promise-box p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================================================
                    DECORATIVE BACKGROUND
========================================================== */

.promise{

    position:relative;

    overflow:hidden;

}

.promise::before{

    content:"🧸";

    position:absolute;

    top:40px;

    right:80px;

    font-size:80px;

    opacity:.08;

    transform:rotate(-10deg);

}

.promise::after{

    content:"💜";

    position:absolute;

    bottom:40px;

    left:70px;

    font-size:70px;

    opacity:.08;

}

/* ==========================================================
                    FEATURE COLORS
========================================================== */

.feature-card:nth-child(1) .material-icons{

    background:linear-gradient(
        135deg,
        #A56BFF,
        #C084FC
    );

}

.feature-card:nth-child(2) .material-icons{

    background:linear-gradient(
        135deg,
        #FF8BC2,
        #FFA7D5
    );

}

.feature-card:nth-child(3) .material-icons{

    background:linear-gradient(
        135deg,
        #7ED957,
        #5ACD72
    );

}

.feature-card:nth-child(4) .material-icons{

    background:linear-gradient(
        135deg,
        #FDBA74,
        #FB923C
    );

}

/* ==========================================================
                    NEWSLETTER
========================================================== */

.newsletter{

    padding:100px 8%;

    background:linear-gradient(
        135deg,
        #F8F3FF,
        #FFF7FC
    );

}

.newsletter-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.newsletter-content h2{

    font-size:52px;

    color:var(--text);

    font-weight:800;

    margin-bottom:20px;

}

.newsletter-content p{

    font-size:18px;

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:40px;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.newsletter-form input{

    width:420px;

    max-width:100%;

    padding:18px 24px;

    border:none;

    border-radius:999px;

    background:white;

    font-size:16px;

    color:var(--text);

    box-shadow:var(--shadow);

}

.newsletter-form input:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(165,107,255,.15);

}

.newsletter-form button{

    padding:18px 34px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    color:white;

    font-size:16px;

    font-weight:600;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    transition:var(--transition);

}

.newsletter-form button:hover{

    transform:translateY(-4px);

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

}

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

.footer{

    background:#2F2946;

    color:white;

    padding:80px 8% 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    margin-bottom:50px;

}

.footer h2{

    font-family:"Baloo 2",cursive;

    font-size:40px;

    color:white;

    margin-bottom:18px;

}

.footer h3{

    color:#F2EAFF;

    margin-bottom:18px;

}

.footer p{

    color:#D8D2E8;

    line-height:1.9;

}

.footer a{

    display:block;

    color:#D8D2E8;

    margin-bottom:14px;

    transition:.3s;

}

.footer a:hover{

    color:white;

    padding-left:8px;

}

.footer hr{

    border:none;

    height:1px;

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

    margin:40px 0 25px;

}

.footer-bottom{

    text-align:center;

    color:#C4BDD8;

    font-size:15px;

}


/*==========================================================
                    LOGIN MODAL
==========================================================*/

.login-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(15,18,30,.45);

    backdrop-filter:blur(14px);

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

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:99999;

}

.login-modal.show{

    opacity:1;

    visibility:visible;

}

/*==========================================================
                    LOGIN CARD
==========================================================*/

.login-card{

    position:relative;

    width:430px;

    max-width:92%;

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

    border-radius:28px;

    overflow:hidden;

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

    box-shadow:

        0 35px 80px rgba(0,0,0,.22),

        0 5px 20px rgba(139,92,246,.18);

    animation:loginPopup .35s ease;

}

@keyframes loginPopup{

    from{

        opacity:0;

        transform:translateY(40px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*==========================================================
                    HEADER
==========================================================*/

.login-header{

    position:relative;

    padding:42px 38px 36px;

    text-align:center;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #7C5CFF 0%,
            #9D63F8 45%,
            #E06DB8 100%
        );

}

.login-header::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.22),
        transparent 45%);

    pointer-events:none;

}

/*==========================================================
                    LOGO
==========================================================*/

.login-logo{

    width:78px;

    height:78px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

}

.login-logo img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

}

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

.login-header h2{

    font-size:34px;

    font-weight:700;

    letter-spacing:-0.5px;

    margin-bottom:10px;

    color:#fff;

}

.login-subtitle{

    font-size:15px;

    line-height:1.7;

    opacity:.92;

    max-width:270px;

    margin:auto;

    color:#fff;

}

/*==========================================================
                    CLOSE BUTTON
==========================================================*/

.close-btn{

    position:absolute;

    top:18px;

    right:18px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

    backdrop-filter:blur(8px);

}

.close-btn:hover{

    background:#fff;

    color:#8B5CF6;

    transform:rotate(90deg);

}

/*==========================================================
                    FORM
==========================================================*/

.login-form{

    padding:34px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.login-form input{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    border-radius:16px;

    padding:0 22px;

    font-size:15px;

    font-weight:500;

    color:#2E2A4A;

    background:#F8F7FD;

    border:2px solid transparent;

    transition:.3s;

}

.login-form input::placeholder{

    color:#9A96B6;

}

.login-form input:hover{

    background:#F3F1FD;

}

.login-form input:focus{

    background:#fff;

    border-color:#9D63F8;

    box-shadow:

        0 0 0 5px rgba(157,99,248,.12);

}

/*==========================================================
                    SIGN IN BUTTON
==========================================================*/

#loginBtn{

    height:58px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    letter-spacing:.3px;

    color:#fff;

    background:

        linear-gradient(

            135deg,

            #7C5CFF,

            #A56BFF,

            #EA6CB8

        );

    box-shadow:

        0 15px 35px rgba(139,92,246,.28);

    transition:.3s;

}

#loginBtn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 22px 45px rgba(139,92,246,.38);

}

#loginBtn:active{

    transform:scale(.98);

}

/*==========================================================
                    LOGIN OPTIONS
==========================================================*/

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:-4px;

    margin-bottom:8px;

    font-size:14px;

}

.login-options label{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6B6885;

    cursor:pointer;

    user-select:none;

}

.login-options input[type="checkbox"]{

    width:18px;

    height:18px;

    accent-color:#8B5CF6;

}

.login-options a{

    color:#8B5CF6;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.login-options a:hover{

    color:#6F46F7;

}

/*==========================================================
                    DIVIDER
==========================================================*/

.login-divider{

    display:flex;

    align-items:center;

    margin:28px 34px;

}

.login-divider::before,

.login-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E6E4F2;

}

.login-divider span{

    padding:0 18px;

    color:#9A96B6;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}

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

.login-footer{

    padding:0 34px 34px;

    text-align:center;

}

.login-footer p{

    margin:0;

    color:#7A7695;

    font-size:14px;

    line-height:1.8;

}

.login-footer a{

    color:#8B5CF6;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.login-footer a:hover{

    color:#6F46F7;

}

/*==========================================================
                FLOATING BACKGROUND BLOBS
==========================================================*/

.login-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-100px;

    border-radius:50%;

    background:radial-gradient(
        rgba(168,118,255,.18),
        transparent 70%
    );

    pointer-events:none;

}

.login-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    bottom:-90px;

    left:-80px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,130,185,.16),
        transparent 70%
    );

    pointer-events:none;

}

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

.login-card{

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

}

.login-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 45px 90px rgba(70,40,120,.18),

        0 15px 40px rgba(139,92,246,.16);

}

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

.login-form input::placeholder{

    color:#AAA6C6;

    letter-spacing:.2px;

}

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

.login-card *::selection{

    background:#C9B2FF;

    color:#fff;

}

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

.login-card::-webkit-scrollbar{

    width:8px;

}

.login-card::-webkit-scrollbar-thumb{

    background:#D5CCFF;

    border-radius:50px;

}

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

@media(max-width:600px){

    .login-card{

        width:94%;

        border-radius:24px;

    }

    .login-header{

        padding:34px 28px 28px;

    }

    .login-header h2{

        font-size:28px;

    }

    .login-form{

        padding:28px;

    }

    .login-footer{

        padding:0 28px 28px;

    }

}



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

.success-toast{

    position:fixed;

    bottom:25px;

    right:25px;

    display:flex;

    align-items:center;

    gap:16px;

    background:white;

    border-radius:20px;

    padding:18px 22px;

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

    transform:translateY(120px);

    opacity:0;

    transition:.35s;

    z-index:999999;

}

.success-toast.show{

    opacity:1;

    transform:translateY(0);

}

.success-toast .material-icons{

    font-size:34px;

    color:var(--success);

}

.success-toast strong{

    color:var(--text);

}

.success-toast p{

    color:var(--text-light);

    margin-top:4px;

}

/* ==========================================================
                    POPUP ANIMATION
========================================================== */

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

.product-top{

    padding:80px 8%;

    background:#FFFFFF;

}

.product-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    max-width:1400px;

    margin:auto;

}

.left-side{

    background:#FAF7FF;

    border-radius:28px;

    padding:40px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.main-image{

    width:100%;

    max-width:500px;

    object-fit:contain;

}

.right-side h1{

    font-size:42px;

    margin-bottom:15px;

    color:var(--text);

}

.rating{

    display:flex;

    align-items:center;

    gap:10px;

    color:#FFC83D;

    font-size:18px;

    margin-bottom:20px;

}

.rating span{

    color:var(--text-light);

}

.price{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.current-price{

    font-size:42px;

    color:var(--primary-dark);

    font-weight:800;

}

.old-price{

    color:#AAA;

    text-decoration:line-through;

}

.discount{

    background:#EFFFF2;

    color:var(--success);

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.tax{

    margin-bottom:30px;

    color:var(--text-light);

}

/* ================= SIZE ================= */

.sizes{

    display:flex;

    gap:12px;

    margin:15px 0 30px;

}

.sizes button{

    width:52px;

    height:52px;

    border-radius:14px;

    border:2px solid var(--border);

    background:white;

    cursor:pointer;

    font-weight:600;

}

.sizes button.selected{

    background:var(--primary);

    color:white;

    border-color:var(--primary);

}

/* ================= QUANTITY ================= */

.quantity{

    display:flex;

    align-items:center;

    gap:12px;

    margin:20px 0;

}

.quantity button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:22px;

    cursor:pointer;

}

.quantity input{

    width:70px;

    text-align:center;

    height:42px;

    border:2px solid var(--border);

    border-radius:12px;

}

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

.action-buttons{

    display:flex;

    gap:15px;

    margin:30px 0;

}

.action-buttons button,

.wishlist{

    flex:1;

    height:56px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.add-cart{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

}

.buy{

    background:#342E4F;

    color:white;

}

.wishlist{

    width:100%;

    background:white;

    border:2px solid var(--border);

    color:var(--primary-dark);

}

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

.description-section{

    padding:80px 8%;

    background:#FAF7FF;

}

.description-section h2{

    margin-bottom:25px;

}

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

.related-section{

    padding:80px 8%;

}

/* ==========================================================
                    CHECKOUT
========================================================== */

.checkout-page{

    padding:80px 8%;

    background:#FAF7FF;

}

.checkout-container{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

}

.checkout-form,

.checkout-summary{

    background:white;

    padding:35px;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.checkout-form input{

    width:100%;

    margin-bottom:18px;

    padding:16px;

    border-radius:14px;

    border:2px solid var(--border);

}

.row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.summary-row,

.summary-total{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

}

.summary-total{

    font-size:24px;

    font-weight:700;

}

/* ==========================================================
                    UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.hidden{

    display:none;

}

.fade-divider{

    height:120px;

    background:linear-gradient(
        180deg,
        #FFFFFF,
        #FAF7FF
    );

}

/* ==========================================================
                    RESPONSIVE
========================================================== */

@media(max-width:1100px){

    .hero-content,

    .product-container,

    .promise-content,

    .checkout-container{

        grid-template-columns:1fr;

    }

    .features-grid,

    .category-grid{

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

    }

    .footer-grid{

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

    }

}

@media(max-width:768px){

    nav{

        padding:15px 20px;

        flex-wrap:wrap;

        gap:18px;

    }

    nav ul{

        width:100%;

        justify-content:center;

    }

    .search{

        width:100%;

    }

    .search input{

        width:100%;

    }

    .hero{

        padding:70px 6%;

    }

    .hero-text{

        text-align:center;

        align-items:center;

    }

    .hero-text h1{

        font-size:46px;

    }

    .section-title,

    .products-heading h2,

    .why-heading h2,

    .newsletter-content h2{

        font-size:38px;

    }

    .features-grid,

    .category-grid,

    .footer-grid{

        grid-template-columns:1fr;

    }

    .action-buttons{

        flex-direction:column;

    }

    .row{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .hero-text h1{

        font-size:34px;

    }

    .logo span{

        font-size:30px;

    }

    .current-price{

        font-size:34px;

    }

    .card{

        border-radius:20px;

    }

}

/* ==========================================================
                    PROFILE MENU FIX
========================================================== */

.profile-menu{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.profile-dropdown{

    position:absolute;

    top:65px;

    right:0;

    width:290px;

    background:#fff;

    border-radius:20px;

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

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

    overflow:hidden;

    display:none;

    z-index:999999;

}

.profile-dropdown.show{

    display:block;

}

.profile-header{

    padding:25px;

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

}

.avatar{

    width:70px;

    height:70px;

    margin:0 auto 15px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    color:var(--primary-dark);

    font-size:28px;

    font-weight:700;

}

.profile-header h3{

    margin-bottom:6px;

}

.profile-header p{

    font-size:14px;

    opacity:.95;

}

.profile-dropdown hr{

    border:none;

    height:1px;

    background:#EEE;

}

.profile-dropdown a{

    display:block;

    padding:16px 22px;

    color:var(--text);

    font-weight:500;

    transition:.25s;

}

.profile-dropdown a:hover{

    background:#F7F2FF;

    color:var(--primary-dark);

}

/* ==========================================================
                    CART PAGE
========================================================== */

.cart-page{

    padding:80px 8%;

    background:#FAF7FF;

    min-height:100vh;

}

.cart-page h1{

    font-size:52px;

    font-weight:800;

    margin-bottom:45px;

    color:var(--text);

}

.cart-container{

    display:grid;

    grid-template-columns:68% 30%;

    gap:30px;

    align-items:start;

    max-width:1500px;

    margin:auto;

}

.cart-item{

    display:flex;

    align-items:center;

    gap:28px;

    padding:24px;

    border-radius:26px;

    background:linear-gradient(
        135deg,
        #FFFFFF,
        #FAF5FF
    );

    border:1px solid #EFE4FF;

    box-shadow:0 12px 35px rgba(165,107,255,.10);

    transition:.3s;

}

.cart-item:hover{

    transform:translateY(-4px);

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

}

/* ==========================================================
                    CART ITEM
========================================================== */

.cart-item{

    display:flex;

    align-items:center;

    gap:25px;

    background:white;

    padding:22px;

    border-radius:24px;

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

    box-shadow:var(--shadow);

}

.cart-item img{

    width:140px;

    height:140px;

    object-fit:contain;

    border-radius:18px;

    background:#FAF7FF;

    padding:12px;

}

.cart-details{

    flex:1;

}

.cart-details h3{

    font-size:24px;

    margin-bottom:10px;

}

.cart-details p{

    color:var(--text-light);

    margin-bottom:10px;

}

.cart-price{

    font-size:28px;

    color:var(--primary-dark);

    font-weight:700;

}

/* ==========================================================
                    CART QUANTITY
========================================================== */

.cart-quantity{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:18px;

}

.cart-quantity button{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

}

.cart-quantity span{

    font-weight:600;

    min-width:30px;

    text-align:center;

}

/* ==========================================================
                    CART SUMMARY
========================================================== */

.cart-summary{

    position:sticky;

    top:110px;

    background:linear-gradient(
        180deg,
        #FFFFFF,
        #F9F4FF
    );

    border-radius:28px;

    padding:32px;

    border:1px solid #E8DBFF;

    box-shadow:0 18px 45px rgba(165,107,255,.14);

}

.cart-summary h2{

    margin-bottom:25px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

}

.summary-total{

    display:flex;

    justify-content:space-between;

    font-size:26px;

    font-weight:700;

    margin-top:20px;

}

.checkout-btn{

    width:100%;

    margin-top:30px;

    height:58px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

}

.cart-details{

    flex:1;

}

.remove-btn{

    margin-top:20px;

    border:none;

    padding:10px 22px;

    border-radius:999px;

    cursor:pointer;

    color:white;

    background:#FF6B81;

    font-weight:600;

    transition:.3s;

}

.remove-btn:hover{

    background:#FF4F68;

}

/*==========================================================
                    ORDERS PAGE
==========================================================*/

.orders-page{

    width:100%;

    max-width:1350px;

    margin:auto;

    padding:80px 8%;

}

.orders-header{

    text-align:center;

    margin-bottom:60px;

}

.page-chip{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

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

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

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;

}

.orders-header h1{

    font-size:46px;

    font-weight:700;

    margin-bottom:18px;

}

.orders-subtitle{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    color:var(--text-light);

}

.orders-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));

    gap:30px;

    margin-top:55px;

}

.empty-orders{

    grid-column:1/-1;

    text-align:center;

    padding:80px 20px;

}

.empty-orders img{

    width:170px;

    margin:auto;

    margin-bottom:25px;

}

.empty-orders h2{

    margin-bottom:15px;

}

.empty-orders p{

    margin-bottom:35px;

}

.order-card{

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

    backdrop-filter:blur(16px);

    border-radius:24px;

    padding:30px;

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

    box-shadow:var(--shadow);

    transition:.3s;

}

.order-card:hover{

    transform:translateY(-6px);

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

}

.order-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.order-status{

    padding:8px 18px;

    border-radius:999px;

    background:#EAFBF1;

    color:#22C55E;

    font-weight:600;

    font-size:14px;

}

.order-body{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:25px;

}

.order-body p{

    color:var(--text-light);

}

.view-order-btn{

    width:100%;

    border:none;

    border-radius:999px;

    padding:15px;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--pink)
    );

    transition:.3s;

}

.view-order-btn:hover{

    transform:translateY(-3px);

}


.contact-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(25,25,40,.45);

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:30px;

}

.contact-modal.show{

    display:flex;

}

.close-btn{

    float:right;

    font-size:32px;

    cursor:pointer;

    color:#999;

    transition:.25s;

}

.close-btn:hover{

    color:var(--primary);

}

.contact-card h2{

    font-size:34px;

    margin-bottom:12px;

    color:var(--text);

}

.contact-card h3{

    margin-top:20px;

    margin-bottom:10px;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:25px 0;

}

.contact-info a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.contact-card hr{

    margin:22px 0;

    border:none;

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

}

@keyframes popup{

    from{

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

        opacity:0;

    }

    to{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}

/*==========================================================
                    SIGNUP PAGE
==========================================================*/

.signup-page{

    min-height:calc(100vh - 90px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 20px;

    position:relative;

}

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

.signup-card{

    width:620px;

    max-width:95%;

    position:relative;

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

    backdrop-filter:blur(24px);

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

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

    border-radius:32px;

    overflow:hidden;

    box-shadow:

        0 40px 90px rgba(50,40,90,.15),

        0 12px 35px rgba(139,92,246,.10);

}

/*==========================================================
                TOP ACCENT
==========================================================*/

.signup-top-accent{

    width:100%;

    height:7px;

    background:linear-gradient(

        90deg,

        #7C5CFF,

        #A56BFF,

        #F472B6

    );

}

/*==========================================================
                    HEADER
==========================================================*/

.signup-header{

    text-align:center;

    padding:45px 60px 25px;

}

/*==========================================================
                    LOGO
==========================================================*/

.signup-logo{

    width:82px;

    height:82px;

    object-fit:cover;

    border-radius:50%;

    display:block;

    margin:0 auto 22px;

    box-shadow:

        0 12px 30px rgba(139,92,246,.15);

}

/*==========================================================
                    JOIN CHIP
==========================================================*/

.signup-chip{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        rgba(124,92,255,.12),
        rgba(244,114,182,.10)
    );

    color:#7C5CFF;

    font-size:14px;

    font-weight:600;

    border:1px solid rgba(124,92,255,.18);

    margin-bottom:28px;

}

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

.signup-header h1{

    font-size:38px;

    font-weight:700;

    color:#2E2A4A;

    letter-spacing:-1px;

    margin-bottom:14px;

}

/*==========================================================
                    SUBTITLE
==========================================================*/

.signup-header p{

    max-width:460px;

    margin:auto;

    color:#787593;

    font-size:16px;

    line-height:1.8;

}

/*==========================================================
                    FORM
==========================================================*/

.signup-form{

    padding:20px 60px 55px;

}

/*==========================================================
                    INPUT GROUP
==========================================================*/

.input-group{

    position:relative;

    margin-bottom:28px;

}

.input-group label{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#55506E;

    margin-bottom:10px;

    letter-spacing:.2px;

}

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

.input-icon{

    position:absolute;

    left:18px;

    top:47px;

    font-size:21px;

    color:#9D63F8;

    pointer-events:none;

}

/*==========================================================
                    INPUT
==========================================================*/

.input-group input{

    width:100%;

    height:58px;

    border:1px solid #E8E5F5;

    border-radius:16px;

    background:#FCFCFE;

    padding-left:56px;

    padding-right:18px;

    font-size:15px;

    color:#2F2B4A;

    transition:.30s;

    outline:none;

}

.input-group input::placeholder{

    color:#A8A4C2;

}

.input-group input:hover{

    background:#FFFFFF;

    border-color:#D8D1F8;

}

.input-group input:focus{

    background:#FFFFFF;

    border-color:#9D63F8;

    box-shadow:

        0 0 0 5px rgba(157,99,248,.10);

}

/*==========================================================
                PASSWORD INFO
==========================================================*/

.password-info{

    margin-top:-12px;

    margin-bottom:28px;

    font-size:13px;

    color:#8A87A5;

    line-height:1.6;

}

/*==========================================================
                CREATE ACCOUNT BUTTON
==========================================================*/

#signupBtn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    letter-spacing:.3px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #7C5CFF,
        #A56BFF,
        #F472B6
    );

    box-shadow:
        0 15px 35px rgba(139,92,246,.25);

    transition:.30s;

}

#signupBtn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 25px 45px rgba(139,92,246,.35);

}

#signupBtn:active{

    transform:scale(.98);

}

/*==========================================================
                    DIVIDER
==========================================================*/

.signup-divider{

    display:flex;

    align-items:center;

    margin:35px 0;

}

.signup-divider::before,
.signup-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E6E3F4;

}

.signup-divider span{

    padding:0 18px;

    color:#A39DBF;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}

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

.login-text{

    text-align:center;

    font-size:15px;

    color:#75708F;

}

.login-text a{

    color:#7C5CFF;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.login-text a:hover{

    color:#5F39F4;

}

/*==========================================================
                    FLOATING BACKGROUND
==========================================================*/

.signup-page::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    top:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(124,92,255,.10),

            transparent 70%

        );

    pointer-events:none;

}

.signup-page::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-150px;

    bottom:-100px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(244,114,182,.08),

            transparent 70%

        );

    pointer-events:none;

}

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

.signup-card{

    transition:

        transform .35s,

        box-shadow .35s;

}

.signup-card:hover{

    transform:translateY(-5px);

    box-shadow:

        0 55px 110px rgba(60,40,120,.16),

        0 18px 45px rgba(139,92,246,.12);

}

/*==========================================================
                    INPUT AUTOFILL
==========================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:

        0 0 0 1000px #fff inset !important;

}

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

@media(max-width:768px){

    .signup-card{

        width:95%;

        border-radius:24px;

    }

    .signup-header{

        padding:35px 28px 18px;

    }

    .signup-header h1{

        font-size:30px;

    }

    .signup-header p{

        font-size:15px;

    }

    .signup-form{

        padding:18px 28px 35px;

    }

}

@media(max-width:480px){

    .signup-logo{

        width:72px;

        height:72px;

    }

    .signup-chip{

        font-size:13px;

        padding:8px 18px;

    }

    .input-group input{

        height:54px;

    }

    #signupBtn{

        height:54px;

    }

}

/* ===== Fix Script.js Product Cards ===== */

.card-badge{
    position:absolute;
    top:15px;
    left:15px;
    background:linear-gradient(135deg,#8B5CF6,#F472B6);
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    z-index:10;
}

.card-stock{
    color:#22c55e;
    font-weight:600;
    margin-bottom:15px;
}

.card-actions{

    display:flex;

    gap:12px;

    width:100%;

    margin-top:10px;

}

.card-actions button{

    flex:1;

    height:46px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}


.currency-selector{

    margin-left:20px;

}

.currency-selector select{

    height:48px;

    padding:0 14px;

    border-radius:14px;

    border:2px solid var(--border);

    background:#fff;

    color:var(--text);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.currency-selector select:hover{

    border-color:var(--primary);

}

.currency-selector select:focus{

    outline:none;

    border-color:var(--primary);

}

/* ======================================================
   PRODUCT WISHLIST HEART
====================================================== */

.card {
    position: relative;
}


/* Heart button */

.wishlist-product-btn {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 1px solid #eadcff;

    background: rgba(255, 255, 255, 0.95);

    color: #a46cff;

    font-size: 26px;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

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

}


/* Hover */

.wishlist-product-btn:hover {

    transform: scale(1.1);

    background: #ffffff;

    color: #ff5f8f;

    box-shadow:
        0 6px 18px rgba(164, 108, 255, 0.18);

}


/* Active heart */

.wishlist-product-btn.active {

    color: #ff5f8f;

    background: #fff0f5;

}


/* Active hover */

.wishlist-product-btn.active:hover {

    color: #ff477e;

    transform: scale(1.1);

}

/* =========================================================
   PLUSHORO PRODUCT PAGE FIX
   ========================================================= */

body {
    background: #faf7ff;
}


/* Product page main container */

#product-details {
    width: min(1250px, 92%);
    margin: 40px auto 70px;
}


/* Loading / error box */

#product-details > .loading-product {
    width: 100%;
    min-height: 300px;

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

    box-sizing: border-box;

    padding: 60px 30px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid #eadfff;

    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 10px 35px rgba(110, 70, 180, 0.06);
}


#product-details .loading-product h2 {
    margin: 0 0 10px;

    color: #3d2b5c;

    font-size: 30px;
}


#product-details .loading-product p {
    margin: 0;

    color: #8b7c9e;

    font-size: 17px;
}


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

#related-section {

    width: min(1250px, 92%);

    margin: 0 auto 80px;

    padding: 0;

    box-sizing: border-box;
}


#related-section h2 {

    margin: 0 0 25px;

    color: #35244f;

    font-size: 28px;

    font-weight: 800;
}


#related-products {

    width: 100%;

    display: grid;

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

    gap: 22px;

}


/* Related product card */

#related-products .card {

    background: #ffffff;

    border:
        1px solid #eadfff;

    border-radius: 20px;

    padding: 14px;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


#related-products .card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(100, 60, 170, 0.10);

}


#related-products .card img {

    width: 100%;

    height: 230px;

    object-fit: contain;

    display: block;

    border-radius: 15px;

    background: #faf7ff;

}


#related-products .card h3 {

    margin: 13px 4px 7px;

    color: #3c2a55;

    font-size: 16px;

}


#related-products .card p {

    margin: 0 4px;

    color: #7443c3;

    font-weight: 800;

}


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

@media (max-width: 900px) {

    #product-details,
    #related-section {

        width: 92%;

    }


    #related-products {

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

    }

}


@media (max-width: 600px) {

    #product-details,
    #related-section {

        width: 94%;

    }


    #related-products {

        grid-template-columns: 1fr;

    }

}

/* =========================================================
   PLUSHORO — FINAL PRODUCT PAGE DESIGN
   ========================================================= */

/* Product page background */
body {
    background:
        linear-gradient(
            180deg,
            rgba(250,247,255,0.96),
            rgba(255,255,255,0.98)
        ),
        url("images/Background_Sticker.jpeg")
        center top / cover
        fixed
        no-repeat;
}


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

#product-details {

    width: min(1250px, 92%);

    margin: 45px auto 70px;

}


/* =========================================================
   MAIN PRODUCT LAYOUT
   ========================================================= */

.product-page-card {

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    gap: 65px;

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

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

    border-radius: 30px;

    padding: 35px;

    box-shadow:
        0 20px 60px rgba(110,70,180,.10);

}


/* =========================================================
   PRODUCT GALLERY
   ========================================================= */

.product-gallery {

    min-width: 0;

}


.product-main-image {

    width: 100%;

    height: 520px;

    background:
        linear-gradient(
            145deg,
            #FBF8FF,
            #F4ECFF
        );

    border-radius: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border: 1px solid #EEE5FF;

}


.product-main-image img {

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    padding: 25px;

    transition: transform .35s ease;

}


.product-main-image:hover img {

    transform: scale(1.04);

}


/* =========================================================
   THUMBNAILS
   ========================================================= */

.product-thumbnails {

    display: flex;

    gap: 12px;

    margin-top: 15px;

    overflow-x: auto;

    padding: 4px;

}


.product-thumbnail {

    width: 78px;

    height: 78px;

    flex: 0 0 78px;

    border-radius: 15px;

    border: 2px solid var(--border);

    background: #FAF7FF;

    padding: 5px;

    cursor: pointer;

    transition: .25s;

}


.product-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 10px;

}


.product-thumbnail:hover {

    border-color: var(--primary);

    transform: translateY(-2px);

}


.product-thumbnail.active {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(165,107,255,.12);

}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.product-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.product-brand {

    color: var(--primary-dark);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 10px;

}


.product-info h1 {

    font-family: "Baloo 2", cursive;

    font-size: 46px;

    line-height: 1.1;

    color: var(--text);

    margin: 0 0 15px;

}


.product-description-short {

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 20px;

}


/* =========================================================
   PRICE
   ========================================================= */

.product-price {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 8px 0 25px;

}


.product-current-price {

    font-size: 38px;

    font-weight: 800;

    color: var(--primary-dark);

}


.product-compare-price {

    color: #AAA4B8;

    text-decoration: line-through;

    font-size: 18px;

}


.product-sale-badge {

    padding: 6px 12px;

    border-radius: 999px;

    background: #EFFFF2;

    color: #22A447;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   SHOPIFY OPTIONS
   ========================================================= */

.product-options {

    display: flex;

    flex-direction: column;

    gap: 22px;

    margin: 10px 0 25px;

}


.product-option {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.product-option-label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 15px;

    font-weight: 700;

    color: var(--text);

}


.product-option-value {

    color: var(--primary-dark);

    font-weight: 600;

}


/* Option buttons */

.product-option-values {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.product-option-values button {

    min-width: 52px;

    min-height: 46px;

    padding: 9px 18px;

    border-radius: 13px;

    border: 2px solid var(--border);

    background: white;

    color: var(--text);

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s;

}


.product-option-values button:hover {

    border-color: var(--primary);

    color: var(--primary-dark);

    transform: translateY(-2px);

}


.product-option-values button.selected {

    border-color: var(--primary);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--pink)
        );

    color: white;

    box-shadow:
        0 8px 20px rgba(165,107,255,.20);

}


/* Color circles */

.product-color-option {

    min-width: 48px !important;

    width: 48px;

    height: 48px;

    padding: 4px !important;

    border-radius: 50% !important;

}


.product-color-option span {

    display: block;

    width: 100%;

    height: 100%;

    border-radius: 50%;

}


/* =========================================================
   STOCK
   ========================================================= */

.product-stock {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    font-size: 14px;

    font-weight: 600;

}


.product-stock.available {

    color: #22A447;

}


.product-stock.unavailable {

    color: var(--danger);

}


/* =========================================================
   QUANTITY
   ========================================================= */

.product-quantity {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 5px 0 25px;

}


.product-quantity-label {

    font-size: 15px;

    font-weight: 700;

    margin-right: 5px;

}


.product-quantity-control {

    display: flex;

    align-items: center;

    border: 2px solid var(--border);

    border-radius: 999px;

    overflow: hidden;

    background: white;

}


.product-quantity-control button {

    width: 42px;

    height: 42px;

    border: none;

    background: transparent;

    color: var(--primary-dark);

    font-size: 21px;

    font-weight: 700;

    cursor: pointer;

}


.product-quantity-control button:hover {

    background: #F5EFFF;

}


.product-quantity-control input {

    width: 45px;

    height: 42px;

    border: none;

    outline: none;

    text-align: center;

    font-size: 15px;

    font-weight: 700;

    color: var(--text);

}


/* =========================================================
   PRODUCT ACTION BUTTONS
   ========================================================= */

.product-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.product-add-cart,

.product-buy-now {

    height: 56px;

    border: none;

    border-radius: 999px;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.product-add-cart {

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--pink)
        );

    color: white;

    box-shadow:
        0 12px 30px rgba(165,107,255,.25);

}


.product-buy-now {

    background: var(--text);

    color: white;

}


.product-add-cart:hover,
.product-buy-now:hover {

    transform: translateY(-3px);

}


.product-add-cart:hover {

    box-shadow:
        0 18px 38px rgba(165,107,255,.32);

}


.product-buy-now:hover {

    box-shadow:
        0 15px 30px rgba(52,46,79,.22);

}


/* =========================================================
   WISHLIST
   ========================================================= */

.product-wishlist {

    width: 100%;

    height: 52px;

    margin-top: 12px;

    border-radius: 999px;

    border: 2px solid var(--border);

    background: white;

    color: var(--primary-dark);

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}


.product-wishlist:hover {

    border-color: var(--primary);

    background: #FAF6FF;

}


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

.product-description-section {

    width: min(1250px, 92%);

    margin: 0 auto 70px;

    background: white;

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

    border-radius: 28px;

    padding: 40px 45px;

    box-shadow:
        0 12px 40px rgba(110,70,180,.06);

}


.product-description-section h2 {

    font-family: "Baloo 2", cursive;

    font-size: 32px;

    color: var(--text);

    margin-bottom: 18px;

}


.product-description-section p {

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.9;

}


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

#related-section {

    width: min(1250px, 92%);

    margin: 0 auto 80px;

}


#related-section h2 {

    font-family: "Baloo 2", cursive;

    font-size: 34px;

    color: var(--text);

    margin-bottom: 25px;

}


#related-products {

    display: grid;

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

    gap: 22px;

}


#related-products .card {

    background: white;

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

    border-radius: 22px;

    overflow: hidden;

}


#related-products .card img {

    width: 100%;

    height: 230px;

    object-fit: contain;

    background: #FAF7FF;

    padding: 18px;

}


#related-products .card h3 {

    margin: 14px 16px 7px;

    font-size: 17px;

}


#related-products .card p {

    margin: 0 16px 18px;

    color: var(--primary-dark);

    font-weight: 800;

}


/* =========================================================
   PRODUCT LOADING
   ========================================================= */

#product-details .loading-product {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: white;

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

    border-radius: 28px;

    box-shadow: var(--shadow);

}


#product-details .loading-product h2 {

    color: var(--text);

    font-family: "Baloo 2", cursive;

    font-size: 30px;

}


#product-details .loading-product p {

    color: var(--text-light);

    margin-top: 8px;

}


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

@media (max-width: 1000px) {

    .product-page-card {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .product-main-image {

        height: 450px;

    }

    #related-products {

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

    }

}


@media (max-width: 600px) {

    #product-details {

        width: 94%;

        margin-top: 25px;

    }

    .product-page-card {

        padding: 18px;

        border-radius: 22px;

    }

    .product-main-image {

        height: 330px;

        border-radius: 18px;

    }

    .product-info h1 {

        font-size: 34px;

    }

    .product-current-price {

        font-size: 32px;

    }

    .product-actions {

        grid-template-columns: 1fr;

    }

    .product-description-section {

        width: 94%;

        padding: 28px 22px;

    }

    #related-section {

        width: 94%;

    }

    #related-products {

        grid-template-columns: 1fr;

    }

}

/* ==========================================================
   SQUISHIES HERO — FINAL POSITIONING
========================================================== */

.women-box {
    padding: 32px 30px 42px;
}

.women-box .category-content {
    width: min(1100px, 92%);
    margin: 0 auto;
    text-align: center;
}


/* Badge directly above the heading */

.women-box .hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 12px;

    padding: 9px 18px;

    border-radius: 999px;

    /* stronger purple */
    background: #e3c9ff;

    color: #7c3aed;

    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.10);
}


/* Main heading */

.women-box h1 {
    margin: 0 0 10px;

    text-align: center;

    font-size: clamp(42px, 5vw, 60px);

    line-height: 1.05;

    font-weight: 800;

    color: #292052;

    letter-spacing: -1.5px;
}


/* Description */

.women-box p {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    font-size: 18px;

    line-height: 1.5;

    color: #756b9b;
}

/* ==========================================================
   MEN / PLUSHIES HERO - FINAL OVERRIDE
========================================================== */

.men-box {
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 35px 20px 45px !important;

    text-align: center !important;
}


/* Force the entire hero content into the center */

.men-box .category-content {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


/* Badge */

.men-box .hero-badge {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;

    margin: 0 auto 14px !important;

    padding: 9px 18px !important;

    border-radius: 999px !important;

    background: #e3c9ff !important;

    color: #7c3aed !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.12) !important;
}


/* PLUSHIES heading */

.men-box h1 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 12px !important;

    padding: 0 !important;

    text-align: center !important;

    font-size: clamp(42px, 5vw, 60px) !important;

    line-height: 1.05 !important;

    font-weight: 800 !important;

    color: #292052 !important;

    letter-spacing: -1.5px !important;
}


/* Description */

.men-box p {
    display: block !important;

    width: 100% !important;

    max-width: 850px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    text-align: center !important;

    font-size: 18px !important;

    line-height: 1.5 !important;

    color: #756b9b !important;
}


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

@media (max-width: 700px) {

    .men-box {
        padding: 28px 20px 35px !important;
    }

    .men-box .category-content {
        width: 100% !important;
    }

    .men-box h1 {
        font-size: 42px !important;
    }

    .men-box p {
        font-size: 16px !important;
    }

}


/* ==========================================================
   KEYCHAINS PAGE - FINAL LAYOUT FIX
========================================================== */

/* Hero section */
.shoes-box {
    width: 100%;
    box-sizing: border-box;

    padding: 32px 20px 42px;

    text-align: center;

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

/* Hero content */
.shoes-box .category-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* Badge */
.shoes-box .hero-badge {
    display: inline-flex;

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

    margin: 0 auto 14px;

    padding: 9px 18px;

    border-radius: 999px;

    background: #e3c9ff;

    color: #7c3aed;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
}

/* Main heading */
.shoes-box h1 {
    width: 100%;

    margin: 0 0 10px;

    text-align: center;

    font-size: clamp(42px, 5vw, 60px);

    line-height: 1.05;

    font-weight: 800;

    color: #292052;

    letter-spacing: -1.5px;
}

/* Description */
.shoes-box p {
    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    font-size: 18px;

    line-height: 1.5;

    color: #756b9b;
}


/* ==========================================================
   PRODUCTS AREA
========================================================== */

.products-wrapper {
    width: 100%;

    box-sizing: border-box;

    padding: 70px 30px 100px;

    background: #ffffff;

    text-align: center;
}


/* Product grid */

.products-wrapper .products-grid {
    width: min(1100px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(250px, 1fr)
        );

    gap: 28px;

    justify-items: center;

    align-items: start;
}


/* ==========================================================
   NO PRODUCTS MESSAGE
========================================================== */

.products-wrapper .products-message {
    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    padding: 60px 20px;

    text-align: center;
}


/* Heading inside No Products */

.products-wrapper .products-message h2 {
    margin: 0 0 14px;

    text-align: center;

    font-size: 32px;

    line-height: 1.2;

    color: #292052;
}


/* Description inside No Products */

.products-wrapper .products-message p {
    margin: 0 auto;

    text-align: center;

    font-size: 18px;

    line-height: 1.6;

    color: #756b9b;
}


/* ==========================================================
   EMPTY STATE
========================================================== */

.category-empty {
    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    padding: 60px 20px;

    text-align: center;
}

.category-empty .material-icons {
    display: block;

    margin-bottom: 18px;

    font-size: 54px;

    color: #a855f7;
}

.category-empty h2 {
    margin: 0 0 12px;

    text-align: center;

    font-size: 30px;

    color: #292052;
}

.category-empty p {
    margin: 0 auto;

    text-align: center;

    font-size: 17px;

    color: #756b9b;
}


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

@media (max-width: 700px) {

    .shoes-box {
        padding: 28px 20px 36px;
    }

    .shoes-box h1 {
        font-size: 42px;
    }

    .shoes-box p {
        font-size: 16px;
    }

    .products-wrapper {
        padding: 50px 20px 80px;
    }

    .products-wrapper .products-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   NEW ARRIVALS PAGE - FINAL LAYOUT
========================================================== */

.accessories-box {
    width: 100%;
    box-sizing: border-box;

    padding: 32px 20px 42px;

    text-align: center;

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

.accessories-box .category-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


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

.accessories-box .hero-badge {
    display: inline-flex;

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

    margin: 0 auto 14px;

    padding: 9px 18px;

    border-radius: 999px;

    background: #e3c9ff;

    color: #7c3aed;

    font-size: 13px;
    font-weight: 700;

    text-align: center;

    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.12);
}


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

.accessories-box h1 {
    width: 100%;

    margin: 0 0 10px;

    text-align: center;

    font-size: clamp(42px, 5vw, 60px);

    line-height: 1.05;

    font-weight: 800;

    color: #292052;

    letter-spacing: -1.5px;
}


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

.accessories-box p {
    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    font-size: 18px;

    line-height: 1.5;

    color: #756b9b;
}


/* ==========================================================
   PRODUCTS AREA
========================================================== */

.accessories-box + .products-section {
    width: 100%;

    box-sizing: border-box;

    padding: 70px 30px 100px;

    background: #ffffff;

    text-align: center;
}


/* ==========================================================
   PRODUCT GRID
========================================================== */

.accessories-box + .products-section .products-grid {
    width: min(1100px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(250px, 1fr)
        );

    gap: 28px;

    justify-items: center;

    align-items: start;
}


/* ==========================================================
   NO PRODUCTS / ERROR MESSAGE
========================================================== */

.accessories-box + .products-section .products-message {
    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    padding: 60px 20px;

    text-align: center;
}

.accessories-box + .products-section .products-message h2 {
    margin: 0 0 14px;

    text-align: center;

    font-size: 32px;

    line-height: 1.2;

    color: #292052;
}

.accessories-box + .products-section .products-message p {
    margin: 0 auto;

    text-align: center;

    font-size: 18px;

    line-height: 1.6;

    color: #756b9b;
}


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

@media (max-width: 700px) {

    .accessories-box {
        padding: 28px 20px 36px;
    }

    .accessories-box h1 {
        font-size: 42px;
    }

    .accessories-box p {
        font-size: 16px;
    }

    .accessories-box + .products-section {
        padding: 50px 20px 80px;
    }

    .accessories-box + .products-section .products-grid {
        grid-template-columns: 1fr;
    }

}