:root {
    --main-color: #1F2937;        /* Dark Charcoal - Elegant */
    --alt-main-color: #F59E0B;    /* Amber/Gold - Accent */
    --white-color: #FFFFFF;
    --light-bg: #F3F4F6;          /* Clean background */
    --text-color: #111827;
    --sub-text-color: #6B7280;
}

/* Overall Page Background */
body, .app-inner, .app-content {
    background-color: var(--light-bg) !important; /* Light Gray background */
}

/* Body Text */
body {
    color: var(--text-color);
    font-family: 'Arial', sans-serif;
}

/* Top Navbar */
.top-navbar {
    background: var(--main-color)!important;
}

.top-navbar .s-search-input {
    background-color: var(--white-color)!important;
    color: var(--text-color);
}

/* User Icon & Cart */
i.header-btn__icon.sicon-user-circle,
i.header-btn__icon.icon.sicon-shopping-bag,
i.sicon-menu {
    background: var(--main-color)!important;
    color: var(--white-color)!important;
    border: 0!important;
    box-shadow: 0 7px 29px rgba(100,100,111,0.2);
    transition: 0.3s;
}

i.header-btn__icon.sicon-user-circle:hover,
i.header-btn__icon.icon.sicon-shopping-bag:hover {
    background: var(--white-color)!important;
    color: var(--alt-main-color)!important;
    transform: translateY(-3px);
}

/* Menu Links */
.main-menu li.root-level>a {
    position: relative;
    color: var(--text-color);
}

.main-menu li.root-level>a::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    bottom: 0;
    background: var(--alt-main-color);
    transition: 0.3s;
}

.main-menu li.root-level>a:hover {
    transform: translateY(-3px);
    background-color: #eee;
}

.main-menu li.root-level>a:hover::before {
    width: 100%;
}

/* Buttons */
.s-button-btn {
    background-color: var(--alt-main-color);
    border-radius: 10px;
    color: var(--white-color);
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.s-button-btn:hover {
    background-color: var(--main-color);
    color: var(--white-color);
}

/* Product Cards & Banners */
.s-product-card, 
.s-block--banners .grid a div, 
section.s-block.s-block--photos-slider .swiper-slide {
    background-color: var(--white-color) !important; /* White cards */
}

/* Product Price */
.s-product-card-price {
    color: var(--alt-main-color) !important;
}

/* Features Section */
section.s-block.s-block--features.container>div>div>div {
    background-color: var(--main-color);
    padding: 17px;
    border-radius: 50px;
    width: 10rem;
    height: 10rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section.s-block.s-block--features.container>div>div>div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

section.s-block.s-block--features.container i {
    font-size: 5rem;
    color: var(--white-color);
}

section.s-block.s-block--features.container p {
    display: none;
}

/* Footer */
.store-footer {
    background: var(--light-bg) !important; /* Light Gray footer */
}

.store-footer__inner {
    background: var(--main-color) !important;
    color: var(--white-color);
}

.store-footer__inner a {
    color: var(--white-color)!important;
}

/* Social Media Buttons */
footer a[href*=instagram] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border: none;
    color: #fff;
}

footer a[href*=tiktok] {
    background: black;
    color:white;
    border:none;
}

footer a[href*=snapchat] {
    background: yellow;
    border:none;
}

footer a[href*=youtube] {
    background:red;
    border:none;
    color:white;
}

footer a[href*=twitter] {
    background: lightskyblue;
    border:none;
    color:white;
}

/* Responsive Improvements */
@media(max-width: 767px) {
    section.s-block.s-block--features.container>div {
        grid-template-columns: repeat(3,minmax(0,1fr))!important;
    }

    section.s-block.s-block--features.container>div>div>div {
        width: 6rem;
        height: 6rem;
    }

    section.s-block.s-block--features.container i {
        font-size: 3rem;
    }

    .store-footer__inner * {
        text-align: center;
        justify-content: center;
    }

    .navbar-brand img {
        max-height: 2rem;
    }
}