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

:root {
    /* Color Palette */
    --primary: #7b1b2b;
    /* Logo Red / Saffro dark maroon */
    --primary-dark: #B01E2B;
    --primary-light: #FF8F00;
    --brand-red: #D72638;
    --logo-red: #D72638;
    --logo-gold: #FFC107;
    --logo-text: #2c2c2c;

    /* Backgrounds */
    --premium-gradient-bg: linear-gradient(135deg, #ffcfc9 0%, #ffeecf 100%);
    --bg-body: #FFFBF2;
    --bg-white: #FFFFFF;
    --bg-soft-red: #FFF0F5;
    --bg-soft-gold: #FFF8E1;
    --bg-soft-gradient: linear-gradient(135deg, #fff1f1, #fff7eb);

    /* Text & Borders */
    --text-main: #000000;
    --text-dark: #000000;
    --text-light: #000000;
    --muted: #000000;
    --border-color: #E0E0E0;

    /* Status */
    --success: #2ECC71;
    --danger: #E74C3C;

    /* Layout */
    --container-width: 1200px;
    --header-height: 72px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 50px;

    /* Effects */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

    /* Helper aliases */
    --bg: var(--bg-white);
    --saffro: var(--primary);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* MOBILE SAFE POPUP */
@media (max-width: 768px) {

    #nodeOptionPopup {
        left: 50% !important;
        top: auto !important;
        bottom: 20px;
        transform: translateX(-50%);
        width: 90%;
        max-width: 320px;
        padding: 14px;
        text-align: center;
    }

    .nodeOptBtn {
        padding: 12px;
        font-size: 15px;
        margin-bottom: 8px;
    }
}


.topbar {
    padding: 4px 24px;
}

.logo img {
    height: 55px;
}

.search-box input {
    height: 36px;
}

.navbar {
    padding: 6px 0;
}


/* ================= HEADER ================= */
body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-body);
    font-size: 18px;
    /* Increased from 16px to 18px for better readability */
    color: var(--text-main);
    line-height: 1.6;
    padding-top: 118px;
    /* Standard base padding */
}

/* Ensure no negative margins affect layout flow globally unless specific */
body.checkout-page {
    background-color: var(--bg-soft-gold);
    /* Match user's "cream" preference seen in screenshot */
    padding-top: 150px;
    /* Specific generous padding for checkout */
}

@media (max-width: 768px) {
    body {
        padding-top: 125px;
        /* Consistent gap for mobile */
        /* Space for fixed header */
        padding-bottom: 60px;
        /* Space for bottom nav */
        transition: padding-top 0.3s ease;
    }

    /* HEADER LAYOUT ADJUSTMENTS */
    /* ... */
    .search-container {
        display: block;
        width: 100%;
        order: 3;
        margin: 0;
        /* Remove top margin */
        padding: 0 15px 10px 15px;
        /* Add bottom padding */
    }

    /* ... */
}

/* ================= GLOBAL RESPONSIVE FIXES ================= */
html,
body {
    overflow-x: hidden;
    /* Prevent horizontal scroll jank */
    width: 100%;
}

/* PREMIUM SCROLLBARS */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #fdf5e6;
    /* Subtle beige */
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 5px;
    border: 2px solid #fdf5e6;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #fdf5e6;
}

/* Home Page specific adjustment: Align with Shop Page */
body.home-page .hero-carousel {
    margin-top: 0;
    /* Remove gap to match other pages */
}

header {
    background: var(--bg-white);
    box-shadow: var(--shadow);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

/* MAIN NAV BAR */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    /* Reduced from 14px */
    gap: 16px;
}

/* LOGO */
.logo img {
    height: 48px;
    /* Reduced from 55px */
    object-fit: contain;
}

/* SEARCH */
.search-container {
    flex: 1;
    max-width: 520px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 30px;
    padding: 10px 16px;
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
}

/* RIGHT ICONS */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
}

.icon-label-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

/* ================= DROPDOWN ================= */
.profile-dropdown-container {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 48px;
    right: 0;
    width: 260px;
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 14px;
    display: none;
    z-index: 100;
}

/* DROPDOWN ARROW */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 70px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent var(--primary) transparent;
}

/* HEADER CONTENT */
.dropdown-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.dropdown-header h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.dropdown-header p {
    font-size: 17px;
    color: var(--muted);
    margin-bottom: 10px;
}

.btn-login-small {
    display: block;
    text-align: center;
    background-color: var(--primary);
    color: #fff;
    padding: 10px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
}

/* LINKS */
.dropdown-links li {
    list-style: none;
}

.dropdown-links li a {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--text-main);
}

/* SHOW DROPDOWN */
.profile-dropdown-container:hover .dropdown-menu {
    display: block;
}

/* Mobile touch support */
.dropdown-menu.show {
    display: block !important;
}

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

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

/* Tablet */
@media (max-width: 1024px) {
    .search-container {
        max-width: 360px;
    }

    .icon-label-btn span {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    header {
        top: 0;
        z-index: 9999;
    }

    .navbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Logo left */
    .logo {
        order: 1;
    }

    .logo img {
        height: 40px;
    }

    /* Icons right */
    .nav-icons {
        order: 2;
        gap: 16px;
    }

    /* Search goes full width below */
    .search-container {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
    }

    .search-bar {
        width: 100%;
    }

    /* Compact icons */
    .icon-label-btn span {
        display: none;
    }

    /* Fix dropdown alignment */
    .dropdown-menu {
        right: 0;
        top: 48px;
    }

    .dropdown-menu::before {
        right: 20px;
    }

    /* Show hamburger only on mobile */
    .mobile-menu-btn {
        display: block;
        font-size: 20px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        color: var(--text-dark);
    }
}

/* Desktop */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
}


/* ================= SECONDARY NAV ================= */
.sub-nav {
    background: #fff;
    border-top: 1px solid #eee;
    transition: all 0.3s ease;
    overflow: visible;
}

.sub-nav-links {
    display: flex;
    gap: 26px;
    padding: 12px 20px;
    overflow: visible;
    white-space: nowrap;
    scrollbar-width: none;
    position: relative;
}

.sub-nav-links::-webkit-scrollbar {
    display: none;
}

.sub-nav-links a {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    padding-bottom: 4px;
}

.sub-nav-links a.active {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
}

/* Sub-Nav Dropdown Container */
.sub-nav-dropdown {
    position: relative;
    display: inline-block;
}

.sub-nav-dropdown>a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sub-nav-dropdown>a i.fa-chevron-down {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.sub-nav-dropdown:hover>a i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Sub-Nav Dropdown Menu */
.sub-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    display: none;
    z-index: 9999;
    margin-top: 0;
    border: 1px solid #eee;
}

.sub-nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.sub-nav-dropdown:hover .sub-nav-dropdown-menu {
    display: block;
}

.sub-nav-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sub-nav-dropdown-menu a:hover {
    background: var(--bg-soft-red);
    color: var(--primary);
    padding-left: 20px;
}

.sub-nav-dropdown-menu a i {
    margin-right: 8px;
    color: var(--primary);
    width: 16px;
    text-align: center;
}

/* Mobile Drawer Dropdown Styles */
.drawer-dropdown {
    display: block;
}

.drawer-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    cursor: pointer;
}

.drawer-dropdown-toggle:hover {
    color: var(--primary);
    background-color: var(--bg-soft-red);
    border-left-color: var(--primary);
}

.drawer-dropdown-toggle i.fa-chevron-down {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.drawer-dropdown.active .drawer-dropdown-toggle i.fa-chevron-down {
    transform: rotate(180deg);
}

.drawer-dropdown-menu {
    display: none;
    padding-left: 20px;
    background: #f9f9f9;
}

.drawer-dropdown.active .drawer-dropdown-menu {
    display: block;
}

.drawer-dropdown-menu a {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 600;
    border-left: none;
}

.drawer-dropdown-menu a:hover {
    background: #fff;
}

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

@media (max-width: 768px) {
    body {
        padding-top: 55px;
        /* Extremely tight for mobile (~50px header) */
        /* Space for fixed header */
        padding-bottom: 60px;
        /* Space for bottom nav */
        transition: padding-top 0.3s ease;
    }

    /* HEADER LAYOUT ADJUSTMENTS */
    .navbar {
        flex-wrap: nowrap;
        gap: 10px;
        padding: 5px 15px;
        /* Tighter padding for mobile header */
        justify-content: flex-start;
        /* Align to left to match Meesho */
    }

    .logo {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        margin-left: 10px;
    }

    .logo img {
        height: 32px;
    }

    .mobile-menu-btn {
        display: flex !important;
        order: -1;
        /* Move to the absolute left */
        font-size: 20px;
        color: var(--text-dark);
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    .search-container {
        display: block;
        width: 100%;
        order: 3;
        margin: 5px 0 10px;
        padding: 0 15px;
    }

    .nav-icons {
        gap: 15px;
        order: 2;
    }

    .nav-icons .icon-label-btn span {
        display: none;
        /* Hide labels on mobile header */
    }

    .nav-icons .icon-label-btn i {
        font-size: 20px;
    }

    /* HIDE SUB-NAV ON MOBILE - It's now in Side Drawer */
    .sub-nav {
        display: none !important;
    }
}

/* ================= SIDE DRAWER ================= */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) !important;
    /* Semi-transparent black */
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    /* Using vh to ensure full height */
    background: #ffffff !important;
    /* Force full white */
    z-index: 2001;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.side-drawer.active {
    left: 0;
}

.drawer-header {
    padding: 25px 20px;
    background: #ffffff !important;
    /* Force full white */
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* To push close button to right */
}

.auth-form input,
.auth-form textarea,
.auth-form select {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 18px;
    color: var(--text-main);
    font-family: inherit;
}

.drawer-header .user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.close-drawer {
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dark);
    padding: 5px;
    transition: color 0.3s;
}

.close-drawer:hover {
    color: var(--primary);
}

.drawer-header i {
    font-size: 24px;
}

.drawer-links {
    padding: 15px 0;
    background: #ffffff !important;
    /* Force full white */
}

.drawer-links a {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 700;
    gap: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.drawer-links a:hover {
    color: var(--primary);
    background-color: var(--bg-soft-red);
    border-left-color: var(--primary);
}

.drawer-links a i {
    width: 24px;
    /* Increased from 20px */
    text-align: center;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.drawer-links a:hover i {
    color: var(--primary);
}

.drawer-links a:last-child {
    border-bottom: none;
}

/* ================= BOTTOM NAV ================= */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    display: none;
    /* Desktop hidden */
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    border-top: 1px solid #eee;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: none !important;
        /* User requested removal */
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    font-size: 11px;
    text-decoration: none;
    flex: 1;
}

.bottom-nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.bottom-nav-item.active {
    color: var(--primary);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 16px;
    /* Increased from 15px */
    transition: font-size 0.3s ease;
}

/* Product page exclusion */
body.product-page {
    font-size: 15px;
}

/* Form element font sizes */
input,
select,
textarea,
button,
label {
    font-size: 17px;
}

/* Specific increase for form-heavy pages */
.auth-form,
.contact-section,
.contact-form-container {
    font-size: 18px;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

.text-gradient-crown {
    background: var(--crown-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle 3D effect */
}

.crown-icon {
    font-size: 32px;
    display: block;
    margin: 0 auto 10px;
    background: var(--crown-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(150, 123, 182, 0.3));
    /* Light lavender glow */
}

/* Premium Tables (Cart/Wishlist) */
.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    margin-bottom: 20px;
}

.premium-table th {
    background: linear-gradient(to right, #f8f9fa, #fff);
    padding: 18px 25px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--text-main);
    border-bottom: 2px solid #eee;
}

.premium-table td {
    padding: 20px 25px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    color: var(--text-main);
    transition: background 0.2s;
}

.premium-table tr:last-child td {
    border-bottom: none;
}

.premium-table tr:hover td {
    background-color: #fafafa;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    /* Slightly larger padding for larger text */
    border-radius: var(--radius-full);
    font-weight: 600;
    /* Bolder for readability */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 16px;
    /* Explicit button size */
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 111, 0, 0.3);
}

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* New Button Style for Featured Section */
.btn-view-collection {
    background-color: white;
    color: #800000;
    /* Maroon to match theme */
    border: 2px solid #800000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-size: 22px;
    /* Increased size significantly */
    padding: 15px 40px;
}

.btn-view-collection:hover {
    background-color: #800000;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(128, 0, 0, 0.2);
}

/* Footer Styles */
footer {
    /* Matching the premium pale gradient */
    background: var(--premium-gradient-bg);
    padding: 20px 0 10px;
    color: #333;
}

footer p,
footer li,
footer a {
    font-size: 14px;
    color: #555;
}

footer h2 {
    font-size: 36px;
    color: #800000;
    margin-bottom: 20px;
}

footer h3 {
    font-size: 16px;
    /* Footer headers larger */
    color: #800000;
    margin-bottom: 15px;
}

.service-item h3 {
    font-size: 24px;
    color: #800000;
}

.service-item p {
    font-size: 18px;
    color: #666;
}

/* SEARCH BAR (Center) */
.search-container {
    flex: 1;
    max-width: 600px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
    overflow: hidden;
    width: 100%;
    transition: all 0.3s ease;
}

.search-bar:hover,
.search-bar:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(215, 38, 56, 0.25);
    transform: scale(1.01);
}

.search-icon-wrapper {
    padding: 0 15px;
    color: #999;
    display: flex;
    align-items: center;
    height: 100%;
}

.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
    height: 100%;
}

/* Nav Icons & Profile (Right) */
.nav-icons {
    display: flex;
    gap: 30px;
    align-items: center;
}

.icon-label-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    position: relative;
    padding: 10px 0;
    min-width: 60px;
    transition: color 0.3s;
}

.auth-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 18px;
}

.icon-label-btn:hover {
    color: var(--primary);
}

.icon-label-btn i {
    font-size: 20px;
    margin-bottom: 4px;
}

.icon-wrapper {
    position: relative;
    display: inline-block;
}

.badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--primary);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

/* Profile Dropdown */
.profile-dropdown-container {
    position: relative;
}

.profile-dropdown-container:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: -50px;
    /* Adjust to center relative to parent or align right */
    width: 250px;
    background: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    /* Sharper corners as per modern ecommerce */
    z-index: 1001;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    border-top: 3px solid var(--primary);
}

/* Mobile: Adjust dropdown arrow mechanism if needed */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 70px;
    /* Position the arrow */
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent var(--primary) transparent;
}

.dropdown-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.dropdown-header h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}

.dropdown-header p {
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.4;
}

.btn-login-small {
    display: block;
    text-align: center;
    background-color: var(--primary);
    color: white;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
    transition: background 0.3s;
}

.btn-login-small:hover {
    background-color: var(--primary-dark);
}

.dropdown-links li {
    margin-bottom: 0;
}

.dropdown-links a {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-radius: 4px;
    transition: background 0.2s;
}

.dropdown-links a:hover {
    background-color: #f9f9f9;
    font-weight: 600;
}

.dropdown-links i {
    width: 20px;
    margin-right: 10px;
    color: #999;
}

.mobile-menu-btn {
    display: none;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-dark);
}

/* Sub Nav */
.sub-nav {
    border-top: none;
    background: #fff;
    height: 40px;
}

.sub-nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    height: 100%;
}

.sub-nav-links a {
    font-size: 19px;
    /* Increased from 15px */
    color: #000;
    font-weight: 500;
    /* Slightly bolder for premium feel */
    position: relative;
    padding-bottom: 5px;
}

.sub-nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--brand-red);
    transition: width 0.3s ease;
}

.sub-nav-links a:hover {
    color: var(--brand-red);
}

.sub-nav-links a:hover::after {
    width: 100%;
}


/* Hero Carousel */
.hero-carousel {
    padding: 0;
    /* Full Width: Remove padding */
    width: 100%;
    margin: 20px 0 0 0;
    /* Add spacing from header */
}

.carousel-container {
    position: relative;
    width: 100vw;
    margin: 0;
    padding: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.carousel-slide {
    display: none;
    position: relative;
    height: 550px;
    /* Premium Height */
}

.carousel-slide img {
    width: 100vw;
    height: 100%;
    object-fit: cover;
}

/* Caption */
.carousel-caption {
    position: absolute;
    bottom: 50px;
    /* Adjust as needed */
    left: 50px;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: var(--radius-md);
    max-width: 400px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.5s;
}

.carousel-caption h1 {
    font-size: 32px;
    color: var(--text-main);
    margin-bottom: 15px;
    font-weight: 700;
}

/* Dots */
.carousel-dots {
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active,
.dot:hover {
    background-color: var(--primary);
}

/* Fade animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Mobile Responsiveness for Carousel */
@media (max-width: 768px) {
    body.home-page .hero-carousel {
        margin-top: -15px;
        /* Slight adjustment for mobile */
    }

    .carousel-slide {
        height: 350px;
    }

    .carousel-caption {
        left: 20px;
        bottom: 30px;
        padding: 15px;
        max-width: 80%;
    }

    .carousel-caption h1 {
        font-size: 20px;
    }
}

/* Tablet Responsiveness for Carousel */
@media (min-width: 769px) and (max-width: 1024px) {
    .carousel-slide {
        height: 450px;
    }
}

/* ================= SHOP PAGE ================= */
.shop-container {
    display: flex;
    padding: 0 20px 40px;
    gap: 40px;
    max-width: var(--container-width);
    margin: 40px auto 0;
    /* Header spacing */
}

.filters {
    width: 250px;
    flex-shrink: 0;
    background: white;
    padding: 20px;
    border-radius: 12px;
    height: fit-content;
    box-shadow: var(--shadow-sm);
}

.filter-group {
    margin-bottom: 30px;
}

.filter-group h3 {
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.filter-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.filter-item input {
    margin-right: 10px;
}

.products-grid-area {
    flex: 1;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* ================= CART PAGE ================= */
.cart-summary {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    width: 350px;
    position: sticky;
    top: 140px;
    height: fit-content;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.total-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #eee;
    font-weight: 700;
    font-size: 20px;
}

.cart-item-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 30px;
    width: fit-content;
    padding: 2px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #555;
    transition: all 0.2s;
}

.qty-btn:hover {
    background: #f0f0f0;
    color: var(--primary);
}

.qty-input {
    width: 40px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    -moz-appearance: textfield;
    appearance: none;
}

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

.qty-input:focus {
    outline: none;
}

/* ================= PAYMENT/CHECKOUT ================= */
.payment-method {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.payment-method.active {
    border-color: var(--primary);
    background: #FFF0D6;
}

.payment-details {
    display: none;
    padding: 20px;
    background: #f9f9f9;
    margin-top: 10px;
    border-radius: 8px;
}

/* ================= MOBILE SHOP PAGE FIX ================= */
@media (max-width: 768px) {
    .shop-container {
        flex-direction: column;
        margin-top: 80px;
        /* ⬅️ reduce space */
        padding: 0 12px 24px;
        /* tighter padding */
    }
}


/* Mobile responsiveness */
@media (max-width: 768px) {

    .filters,
    .cart-summary {
        width: 100%;
        max-width: 100%;
        position: static;
        margin: 0 auto 16px;
        /* remove side overflow */
        padding: 12px;
        /* inner spacing */
        box-sizing: border-box;
        /* VERY IMPORTANT */
        left: 0;
        right: 0;
    }
}


/* Form grids to single column */
.container form div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
}

#product-detail-area {
    flex-direction: column;
    gap: 30px !important;
}

div[style*="flex-wrap: wrap"] {
    flex-direction: column;
}

/* Curated Collections / Categories */
/* Curated Collections / Categories */
.categories-section {
    padding: 60px 0;
    /* User requested dim red with pale saffron background */
    background: linear-gradient(135deg, #fdece8 0%, #fff8e1 100%);
    text-align: center;
}

.section-title h4 {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.categories-section .section-title h2 {
    color: #800000;
    /* Red mixed with maroon */
    margin-bottom: 10px;
}

.categories-section .section-title h4 {
    color: var(--primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.category-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.category-item:hover {
    transform: translateY(-10px);
}

.cat-circle {
    width: 150px;
    /* Large premium size */
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    border: 4px solid white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background: #fff;
}

.cat-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.category-item:hover .cat-circle {
    border: 4px solid transparent;
    /* Instagram Gradient Border */
    background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
    background-origin: border-box;
    background-clip: content-box, border-box;
    -webkit-background-clip: content-box, border-box;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.category-item:hover .cat-circle img {
    transform: scale(1.1);
}

.category-item span {
    font-weight: 700;
    font-size: 22px;
    /* Increased wording size */
    color: #800000;
    /* Red mixed with maroon */
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Wording animation on touch/hover to Instagram Color */
.category-item:hover span {
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */
    transform: scale(1.05);
    /* Slight zoom for pop */
    display: inline-block;
    /* Required for transform */
}

/* Services / Trust Badges - HIDDEN BY DEFAULT */
.services-section {
    padding: 40px 0 30px;
    background: var(--bg-soft-gold);
    display: none;
    /* Only show on home page */
}

/* Show Services only on Home Page */
body.home-page .services-section {
    display: block;
}

.services-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px;
}

.service-card {
    background: #ffffff;
    padding: 45px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(123, 0, 0, 0.25);
}

.service-card i {
    font-size: 60px;
    color: #7b0000;
    margin-bottom: 26px;
}

.service-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #7b0000;
    /* Maroon headings */
}

.service-card p {
    font-size: 17px;
    color: #000;
    /* High contrast black */
    line-height: 1.6;
}

/* Global Footer Styles - COMPACT SIZE - MEESHO INSPIRED */
.main-footer {
    background: #7b0000;
    /* Dark Maroon background */
    color: #fff;
    margin-top: 20px;
    /* Reduced margin */
    padding: 0;
}

.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 25px 20px 15px;
    /* Compact padding */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

.footer-brand h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.5;
    max-width: 360px;
    color: #fff;
    margin-bottom: 10px;
}

.footer-social {
    margin-top: 15px;
}

.footer-social a {
    margin-right: 15px;
    font-size: 18px;
    color: #fff;
    transition: .3s;
}

.footer-col h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 6px;
}

.footer-col ul li a {
    color: #eee;
    font-size: 13px;
    text-decoration: none;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    opacity: 0.8;
    padding-left: 5px;
}

.footer-contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #eee;
    font-size: 13px;
    margin-bottom: 8px;
}

.footer-contact i {
    color: #fff;
    font-size: 14px;
    margin-top: 2px;
}

.footer-newsletter {
    text-align: center;
    margin: 15px 0 10px;
}

.footer-newsletter h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #fff;
}

.footer-newsletter p {
    font-size: 13px;
    color: #eee;
    margin-bottom: 12px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.newsletter-form input {
    padding: 8px 12px;
    width: 200px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
}

.newsletter-form button {
    padding: 8px 16px;
    background: #fff;
    color: #7b0000;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}

.footer-payments {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 15px;
}

.footer-payments i {
    font-size: 24px;
    margin: 0 8px;
    color: #fff;
}

.footer-bottom {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 12px;
    color: #ccc;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-contact li {
        justify-content: center;
    }

    .footer-container {
        padding: 50px 20px 30px;
    }

    .services-scroll {
        grid-template-columns: 1fr;
    }
}

.products-section {
    padding: 20px 0;
    /* Reduced padding for flush look */
    background: var(--premium-gradient-bg);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    /* WIDER cards for rectangular landscape look */
    gap: 30px;
}

.product-card {
    background: var(--bg-white);
    border-radius: 0;
    /* Strictly rectangular as requested */
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    height: 100%;
    /* Ensure equal height in grid */
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(215, 38, 56, 0.2);
}

.product-image {
    position: relative;
    height: 220px;
    /* Reduced height as requested */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 0;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the area neatly */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

/* FIXED ACTION BUTTONS (Neat & Consistent) */
.card-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;
    /* Always visible now, as requested for neatness/finding icons easily */
    opacity: 1;
    right: 15px;
}

.card-action-btn {
    width: 42px;
    /* Larger touch target */
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #555;
    font-size: 18px;
    /* Larger icon */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-action-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
}

.product-details {
    padding: 24px;
    /* More breathing room */
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
}

.product-category {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.product-name {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rating-badge {
    background-color: #23BB75;
    /* Meesho-like green */
    color: white;
    font-size: 14px;
    /* Larger rating text */
    padding: 4px 10px;
    border-radius: 20px;
    /* Pill shape */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rating-count {
    color: #888;
    font-size: 14px;
}

.price-row {
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.price {
    font-weight: 700;
    color: #333;
    font-size: 24px;
    /* Increased from 18px to 24px */
}

.original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 16px;
    /* Larger original price */
}

.discount {
    color: var(--success);
    font-size: 16px;
    /* Larger discount text */
    font-weight: 600;
}

/* Add to Cart button (Full width at bottom or icon? Let's do icon in details to keep it clean, 
   or allow the image overlay to handle it. User asked for cart button for EACH card.) 
   I'll add a concise "Add to Cart" button at the bottom.
*/
.btn-add-cart-text {
    width: 100%;
    margin-top: 0;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-cart-text:hover {
    background: var(--primary);
    color: white;
}



@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

/* Tablet / Medium Devices */
@media (max-width: 900px) and (min-width: 769px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }

    .product-details {
        padding: 18px;
    }

    .product-name {
        font-size: 16px;
    }

    .price {
        font-size: 20px;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {

    /* Product Grid - Mobile */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 15px;
        padding: 0 10px;
    }

    /* Product Card - Mobile */
    .product-card {
        border-radius: 8px;
    }

    .product-image {
        height: 190px;
    }

    .product-image img {
        object-fit: contain;
        /* Show full image without cropping */
        padding: 10px;
    }

    .product-details {
        padding: 12px;
    }

    .product-category {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .product-name {
        font-size: 14px;
        margin-bottom: 6px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .rating-row {
        gap: 4px;
        margin-bottom: 6px;
    }

    .rating-badge {
        font-size: 11px;
        padding: 3px 6px;
    }

    .rating-count {
        font-size: 11px;
    }

    .price-row {
        gap: 6px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .price {
        font-size: 16px;
    }

    .original-price {
        font-size: 12px;
    }

    .discount {
        font-size: 12px;
    }

    .btn-add-cart-text {
        padding: 6px;
        font-size: 11px;
    }

    /* Card Action Buttons - Mobile */
    .card-action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .card-actions {
        top: 8px;
        right: 8px;
        gap: 8px;
    }

    body {
        padding-top: 130px;
        /* Reduced from 180px to 130px */
    }

    .navbar {
        height: auto;
        padding: 10px 15px;
        flex-wrap: wrap;
        /* Allow search to wrap */
        gap: 12px;
    }

    .logo img {
        height: 40px;
    }

    .search-container {
        order: 3;
        max-width: 100%;
        margin: 0;
        padding: 5px 0;
    }

    .nav-icons {
        gap: 15px;
    }

    .icon-label-btn span {
        display: none;
    }

    /* Categories */
    .cat-circle {
        width: 100px;
        height: 100px;
    }

    .category-item span {
        font-size: 14px;
    }

    .category-row {
        display: flex;
        overflow-x: auto;
        padding: 5px 15px 15px;
        gap: 15px;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        /* Ensure scrolling starts at left */
    }

    .category-row::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .category-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        width: 90px;
    }

    .cat-circle {
        width: 80px;
        height: 80px;
    }

    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
        padding: 0 10px;
    }

    .product-details {
        padding: 15px;
    }

    .product-name {
        font-size: 16px;
        height: 45px;
    }

    .price {
        font-size: 18px;
    }

    /* Hero Carousel Mobile */
    .hero-carousel {
        height: auto;
    }

    .hero-carousel img {
        height: 400px;
        /* Taller for mobile portrait */
        object-fit: cover;
    }

    /* Shop Page Mobile */
    .shop-container {
        flex-direction: column;
        gap: 20px;
    }

    .filters {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 20px;
        padding: 15px;
        white-space: nowrap;
    }

    .filter-group {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .filter-group h3 {
        border-bottom: none;
        margin-bottom: 5px;
        font-size: 16px;
    }

    /* Table Responsiveness (Cart/Wishlist) */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }

    .premium-table {
        min-width: 600px;
        /* Force scroll on small screens */
    }

    /* Reduce table cell padding on mobile */
    .premium-table th,
    .premium-table td {
        padding: 12px 10px;
        font-size: 14px;
    }

    /* Product name in cart - prevent overflow */
    .premium-table td:first-child {
        max-width: 180px;
    }

    .premium-table td:first-child div {
        font-size: 14px;
        line-height: 1.3;
        word-wrap: break-word;
    }

    /* Price column - ensure it doesn't wrap */
    .premium-table td:nth-child(2) {
        white-space: nowrap;
        min-width: 80px;
    }

    /* Quantity controls */
    .premium-table td:nth-child(3) {
        min-width: 100px;
    }

    .cart-summary {
        width: 100%;
        position: static;
        margin-top: 20px;
    }

    /* Auth Forms Mobile */
    .main-auth-wrapper {
        padding: 40px 15px;
    }

    .auth-container {
        padding: 25px;
    }

    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }

    .footer-brand p {
        margin: 10px auto;
        font-size: 13px;
    }

    .footer-container {
        padding: 30px 15px 20px;
    }

    .newsletter-form input {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr 1fr;
        /* Two columns on small mobile */
    }

    .carousel-caption h1 {
        font-size: 24px;
    }
}

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

/* Orders Page Header */
.orders-page-header {
    background: linear-gradient(135deg, #7b1b2b 0%, #B01E2B 100%);
    padding: 30px 0;
    margin-bottom: 0;
    color: white;
}

.orders-page-header h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

.orders-page-header p {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Orders Filter Section */
.orders-filter-section {
    background: white;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    position: sticky;
    top: 120px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.orders-filter-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.orders-filter-tabs::-webkit-scrollbar {
    display: none;
}

.order-filter-tab {
    padding: 10px 24px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.order-filter-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff5f7;
}

.order-filter-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Orders Main Container */
.orders-main-container {
    padding: 30px 20px;
    max-width: 1000px;
    margin: 20px auto 0;
}

/* Order Card */
.order-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.order-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Order Card Header */
.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-bottom: 2px solid #e8e8e8;
}

.order-info-left {
    display: flex;
    gap: 24px;
    align-items: center;
}

.order-id,
.order-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    color: #555;
}

.order-id i,
.order-date i {
    color: var(--primary);
    font-size: 19px;
}

.order-id span {
    font-weight: 700;
    color: #333;
}

.order-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.total-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}

/* Order Items List */
.order-items-list {
    padding: 20px 24px;
}

.order-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fafafa;
}

.order-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item-details {
    flex: 1;
}

.order-item-name {
    font-size: 19px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.order-item-meta {
    display: flex;
    gap: 16px;
    font-size: 19px;
    color: #666;
}

.item-qty {
    font-weight: 500;
}

.item-price {
    color: #888;
}

.order-item-subtotal {
    font-size: 19px;
    font-weight: 700;
    color: #333;
    text-align: right;
}

/* Order Card Footer */
.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #fafafa;
    border-top: 1px solid #e8e8e8;
}

/* Status Badges */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 19px;
    font-weight: 600;
}

.order-status-badge i {
    font-size: 10px;
}

.status-delivered {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-delivered i {
    color: #2e7d32;
}

.status-shipped {
    background: #e3f2fd;
    color: #1565c0;
}

.status-shipped i {
    color: #1565c0;
}

.status-processing {
    background: #fff3e0;
    color: #e65100;
}

.status-processing i {
    color: #e65100;
}

.status-cancelled {
    background: #ffebee;
    color: #c62828;
}

.status-cancelled i {
    color: #c62828;
}

/* Order Actions */
.order-actions {
    display: flex;
    gap: 12px;
}

.btn-track-order,
.btn-order-details {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-track-order {
    background: var(--primary);
    color: white;
}

.btn-track-order:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 27, 43, 0.3);
}

.btn-order-details {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

/* ================= RESPONSIVE CART & ORDERS ================= */

@media (max-width: 768px) {

    /* CART PAGE RESPONSIVENESS - Horizontal Scroll with Visual "Card" feel */
    .table-container {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fff;
    }

    #cart-container {
        display: inline-block;
        /* Grow to fit table width */
        min-width: 100%;
    }

    .premium-table {
        width: 100%;
        min-width: 900px;
        /* Guaranteed to trigger scroll */
        border-collapse: collapse;
    }

    .premium-table thead {
        display: table-header-group;
        background: #f9f9f9;
    }

    .premium-table tbody {
        display: table-row-group;
    }

    .premium-table tr {
        display: table-row;
        border-bottom: 1px solid #f0f0f0;
    }

    .premium-table th,
    .premium-table td {
        display: table-cell;
        white-space: nowrap;
        /* Force content width */
        padding: 15px;
    }

    .premium-table td:first-child {
        /* Product column - let it wrap if really needed, or keep nowrap */
        white-space: normal;
        min-width: 250px;
    }

    /* Keep some padding adjustments */
    .premium-table th,
    .premium-table td {
        padding: 10px;
        white-space: nowrap;
        /* Prevent wrapping inside cells */
    }

    .premium-table td:first-child {
        /* Product column */
        white-space: normal;
        /* Allow product name to wrap if needed, or keep nowrap */
        min-width: 200px;
    }

    /* ORDERS PAGE RESPONSIVENESS */
    .order-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .order-info-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .order-total {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
        padding-top: 10px;
        margin-top: 5px;
    }

    .order-item {
        display: grid;
        grid-template-columns: 80px 1fr;
        /* Image | Details */
        gap: 12px;
        /* 🔴 IMPORTANT */
        align-items: flex-start;
    }

    .order-item-name {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #000 !important;

        white-space: normal !important;
        /* ✅ allow wrapping */
        overflow: visible !important;
        /* ✅ no clipping */
        text-overflow: unset !important;
        /* ✅ remove ellipsis */
        line-height: 1.4 !important;

        display: block !important;
    }



    .order-item-subtotal {
        grid-column: 2;
        text-align: left;
        margin-top: 4px;
        font-size: 16px;
        color: var(--primary);
    }

    .order-card-footer {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .order-actions {
        flex-direction: column;
    }

    .btn-track-order,
    .btn-order-details {
        justify-content: center;
    }
}

.btn-order-details:hover {
    background: var(--primary);
    color: white;
}

/* Empty State */
.empty-orders-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.empty-orders-state i {
    font-size: 80px;
    color: #ddd;
    margin-bottom: 20px;
}

.empty-orders-state h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 12px;
}

.empty-orders-state p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

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

/* Tablet */
@media (max-width: 1024px) {
    .orders-page-header h1 {
        font-size: 32px;
    }

    .order-card-header {
        padding: 18px 20px;
    }

    .order-items-list {
        padding: 18px 20px;
    }

    .order-card-footer {
        padding: 14px 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .orders-page-header {
        padding: 30px 0;
    }

    .orders-page-header h1 {
        font-size: 28px;
    }

    .orders-page-header p {
        font-size: 14px;
    }

    .orders-filter-section {
        top: 70px;
        padding: 15px 0;
    }

    .orders-filter-tabs {
        padding: 0 15px;
    }

    .order-filter-tab {
        padding: 8px 18px;
        font-size: 14px;
    }

    .orders-main-container {
        padding: 20px 15px;
    }

    .order-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .order-info-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .order-total {
        align-items: flex-start;
        width: 100%;
    }

    .total-amount {
        font-size: 20px;
    }

    .order-items-list {
        padding: 16px;
    }

    .order-item {
        grid-template-columns: 70px 1fr;
        gap: 12px;
    }

    .order-item-image {
        width: 70px;
        height: 70px;
    }

    .order-item-name {
        font-size: 19px;


        .order-item-meta {
            flex-direction: column;
            gap: 4px;
            font-size: 13px;
        }

        .order-item-subtotal {
            grid-column: 2;
            text-align: left;
            margin-top: 8px;
            font-size: 16px;
        }

        .order-card-footer {
            flex-direction: column;
            gap: 12px;
            align-items: stretch;
            padding: 16px;
        }

        .order-status-badge {
            justify-content: center;
        }

        .order-actions {
            flex-direction: column;
            gap: 10px;
        }

        .btn-track-order,
        .btn-order-details {
            justify-content: center;
            width: 100%;
            padding: 12px 18px;
        }

        .empty-orders-state {
            padding: 60px 20px;
        }

        .empty-orders-state i {
            font-size: 60px;
        }

        .empty-orders-state h3 {
            font-size: 20px;
        }

        .empty-orders-state p {
            font-size: 14px;
        }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
        .orders-page-header h1 {
            font-size: 24px;
        }

        .order-filter-tab {
            padding: 7px 16px;
            font-size: 13px;
        }

        .order-id,
        .order-date {
            font-size: 13px;
        }

        .order-item-image {
            width: 60px;
            height: 60px;
        }

        .order-item-name {
            font-size: 1px;
        }

        .total-amount {
            font-size: 18px;
        }
    }

    /* ================= CHECKOUT PAGE ================= */
    .checkout-wrapper {
        background: var(--bg-body);
        min-height: 100vh;
        padding: 40px 0 80px;
    }

    /* Progress Steps - Hidden to mimic simple checkout flow if desired, keeping for now but compact */
    .checkout-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        padding: 0 20px;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
        z-index: 2;
    }

    .step-number {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: white;
        border: 2px solid #e0e0e0;
        color: #888;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 18px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .step.active .step-number {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
        box-shadow: 0 6px 16px rgba(123, 27, 43, 0.4);
        transform: scale(1.1);
    }

    .step-label {
        font-size: 16px;
        font-weight: 600;
        color: #888;
        text-align: center;
        letter-spacing: 0.5px;
    }

    .step.active .step-label {
        color: var(--primary);
        font-weight: 700;
    }

    .step-divider {
        flex: 1;
        height: 3px;
        background: #e0e0e0;
        margin: 0 15px;
        margin-bottom: 35px;
        /* Adjust alignment with circle center */
        border-radius: 2px;
        position: relative;
        z-index: 1;
    }

    /* Main Grid Layout - Meesho Style */
    .checkout-grid {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        /* Wider address column */
        gap: 25px;
        align-items: start;
        max-width: 1000px;
        /* Constrain width for better readability */
        margin: 0 auto;
    }

    .checkout-left {
        width: 100%;
        /* Address Section */
    }

    .checkout-right {
        position: sticky;
        top: 100px;
        /* Sticky below header */
        height: fit-content;
        /* Price Details Section */
    }

    /* Card Styling */
    .checkout-card {
        background: white;
        border-radius: 8px;
        /* Sharper corners */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        /* Subtle shadow */
        margin-bottom: 20px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
    }

    .card-header {
        background: white;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .card-header h2 {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .card-header i {
        font-size: 22px;
        color: var(--primary);
    }

    /* Form Styling */
    #checkout-form {
        padding: 30px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 24px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-size: 16px;
        font-weight: 600;
        color: #444;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .required {
        color: #e74c3c;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 14px 18px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 17px;
        font-family: 'Outfit', sans-serif;
        color: #333;
        transition: all 0.3s ease;
        background: #fdfdfd;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 4px rgba(123, 27, 43, 0.08);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    /* Address Type Radio Buttons */
    .address-type-options {
        display: flex;
        gap: 20px;
        margin-top: 5px;
    }

    .radio-label {
        flex: 1;
        cursor: pointer;
    }

    .radio-label input[type="radio"] {
        display: none;
    }

    .radio-custom {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px;
        border: 2px solid #eee;
        border-radius: 10px;
        font-weight: 600;
        font-size: 16px;
        color: #666;
        transition: all 0.3s ease;
        background: #fafafa;
    }

    .radio-label input[type="radio"]:checked+.radio-custom {
        border-color: var(--primary);
        background: #fff5f7;
        color: var(--primary);
        box-shadow: 0 4px 12px rgba(123, 27, 43, 0.1);
    }

    /* Checkout Button */
    .btn-checkout {
        width: 100%;
        padding: 18px;
        font-size: 18px;
        font-weight: 700;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border-radius: 10px;
        background: var(--primary);
        color: white;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(123, 27, 43, 0.2);
    }

    .btn-checkout:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(123, 27, 43, 0.3);
    }

    /* Order Summary */
    .order-summary-content {
        padding: 0;
    }

    .summary-items {
        max-height: 450px;
        overflow-y: auto;
        padding: 25px 30px;
        background: white;
    }

    .summary-item {
        display: flex;
        gap: 18px;
        padding: 18px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .summary-item img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid #f0f0f0;
    }

    .summary-item-details h4 {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 6px;
    }

    .summary-item-details p {
        font-size: 14px;
        color: #777;
        margin: 2px 0;
    }

    .summary-item-price {
        font-weight: 700 !important;
        color: var(--primary) !important;
        font-size: 17px !important;
        margin-top: 6px !important;
    }

    /* Price Details */
    .price-details {
        padding: 25px 30px;
        background: #fcfcfc;
        border-top: 1px solid #f0f0f0;
    }

    .price-details h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 20px;
    }

    .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        font-size: 16px;
        color: #555;
    }

    .price-row span:last-child {
        font-weight: 600;
        color: #333;
    }

    .price-divider {
        height: 1px;
        background: #e0e0e0;
        margin: 20px 0;
        border-style: dashed;
    }

    .price-row.total {
        font-size: 20px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 0;
    }

    .price-row.total span:last-child {
        color: var(--primary);
    }

    .savings-badge {
        background: #e8f5e9;
        color: #2e7d32;
        padding: 14px;
        border-radius: 8px;
        margin-top: 20px;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px dashed #2e7d32;
    }

    /* Mobile Responsiveness */
    @media (max-width: 1024px) {
        .checkout-grid {
            grid-template-columns: 1fr;
            /* Stack on mobile */
            gap: 20px;
        }

        .checkout-right {
            position: static;
            order: 1;
            /* Price details BELOW address on mobile */
        }

        .checkout-steps {
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {
        .checkout-wrapper {
            padding: 20px 15px 60px;
        }

        .checkout-steps {
            margin-bottom: 30px;
            padding: 0;
        }

        .step-number {
            width: 36px;
            height: 36px;
            font-size: 15px;
        }

        .step-label {
            font-size: 12px;
            margin-top: 4px;
        }

        .step-divider {
            margin: 0 10px 28px;
        }

        .checkout-card {
            border-radius: 12px;
        }

        .card-header {
            padding: 18px 20px;
        }

        #checkout-form {
            padding: 20px;
        }

        .form-row {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .form-group input,
        .form-group select {
            padding: 12px 15px;
            font-size: 16px;
        }

        .address-type-options {
            flex-direction: column;
        }

        .summary-items {
            padding: 20px;
        }

        .price-details {
            padding: 20px;
        }
    }
}

/* ================= FOOTER ADJUSTMENTS ================= */
.footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 60px;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 30px;
    }
}

/* ================= FOOTER REDESIGN ================= */
.footer-redesign {
    background-color: var(--bg-body);
    /* Global cream background */
    padding: 25px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 40px;
    text-align: center;
}

.footer-fullwidth {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

/* Left: Logo */
.footer-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.footer-left img {
    height: 50px;
    /* Adjust based on logo aspect ratio */
    width: auto;
    object-fit: contain;
}

/* Center: Navigation */
.footer-center {
    flex: 2;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Right: Support */
.footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    color: var(--text-main);
}

.footer-right strong {
    font-weight: 700;
    color: #000;
}

/* Copyright Row */
.footer-bottom {
    text-align: center;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    color: #666;
    font-size: 14px;
}

/* Responsive Stacking */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        justify-content: center;
        flex: auto;
        width: 100%;
    }

    .footer-right {
        flex-direction: column;
        gap: 5px;
    }
}
/* MOBILE POPUP → CENTER / BOTTOM */
@media (max-width: 768px) {

    #nodeOptionPopup {
        left: 50% !important;
        top: auto !important;
        bottom: 20px;
        transform: translateX(-50%);
        width: 90%;
        max-width: 320px;
        text-align: center;
        padding: 14px;
    }

    .nodeOptBtn {
        padding: 12px;
        font-size: 15px;
        margin-bottom: 8px;
    }
}