/* Import DM Sans and Inter */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:wght@300;400;700&display=swap');

:root {
    /* Main Theme Colors */
    --primary-blue: #3186c7;
    --deep-bg: #030a12; 
    --glass-bg: rgba(255, 255, 255, 0.05);
    --white: #ffffff;
    --text-gray: #cfd8dc;
    --text-dark: #242424;
    --border-light: #f0f0f0;
    --border-medium: #e1e1e1;
    --font-main: 'DM Sans', sans-serif;
}

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

body {
    background-color: var(--white);
    color: #333;
    font-family: var(--font-main);
    line-height: 1.5;
}

/* Header Styles */
.header-main {
    padding: 15px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

.logo {
    display: flex;
    align-items: center;
    max-width: 200px; /* Adjust this to your preferred logo width */
}

.logo-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Optional: If your logo is a bit too high/low, use this to nudge it */
.logo a {
    display: flex;
    text-decoration: none;
}
.search-container {
    flex: 0.5;
    display: flex;
    align-items: center;
    border: 2px solid var(--border-medium);
    border-radius: 50px;
    padding: 2px 5px 2px 20px;
    margin: 0 30px;
}

.search-container input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 0;
    font-size: 17px;font-family: 'DM Sans', sans-serif;
    font-family: var(--font-main);
}

.search-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.search-icon-img {
    width: 20px;  /* Adjust size as needed */
    height: 20px;
    object-fit: contain;
    /* If your PNG is black and you want it white, use: filter: brightness(0) invert(1); */
}

.search-container button:hover { transform: scale(1.1); }

.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* This targets the Font Awesome icons inside your header-right section */
.header-right .info-box i {
    color: var(--primary-blue); /* Change this to your desired color */
    font-size: 24px; /* Optional: Adjust the size of the icon here */
}

/* Optional: Change color when hovering over the box */
.info-box:hover i {
    color: #000000; 
}
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between the icons */
 }
/* 1. Make the circle the reference point for the badge */
.icon-circle {
    position: relative; /* Crucial for positioning the badge */
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 2. Style the small count circle */
.count-badge {
    position: absolute;
    top: -5px;          /* Move it slightly above the circle */
    right: -5px;        /* Move it slightly to the right */
    background-color: #ff4d4d; /* Bright red for visibility */
    color: white;
    font-size: 10px;    /* Small text */
    font-weight: 500;
    width: 20px;        /* Small circle size */
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white); /* Gives it a clean 'cut-out' look */
    font-family: var(--font-main);
}

/* Optional: Hide badge if count is 0 */
.count-badge:empty, 
.count-badge[value="0"] {
    display: none;
}
.header-icon-img {
    width: 20px;  /* Adjust size to match your design */
    height: 20px;
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.header-icon-img:hover {
    opacity: 0.7; /* Gives a nice interactive feel on hover */
}

.cart-total {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between the cart PNG and the $0.00 text */
    font-weight: 700;
}
.price-amount {
    color: white;
     padding: 4px 5px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

.info-box { display: flex; align-items: center; gap: 12px; }
.info-box i { font-size: 26px; color: var(--text-dark); }
.info-text { font-size: 12px; color: #777; line-height: 1.2; }
.info-text strong { display: block; font-size: 15px; color: var(--text-dark); }

/* Navigation Bar */
.nav-bar {
    padding: 0 5%;
    height: 75px;
    display: flex;
    align-items: center;
    background: #f1f1f1;
    border-bottom: 1px solid var(--border-light);
}

.all-categories {
    background: var(--white);
    padding: 10px 20px;
    border-radius: 4px 4px 0 0;
     border-bottom: none;
    font-weight: 500;
    font-size: 16px;
    margin-right: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 100px;
}

 
/* Update your original class to include a transition */
.menu-icon-img {
    width: 35px;
    height: 35px;
    padding: 6px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    object-fit: contain;
    margin-right: 10px;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
    cursor: pointer;
}

/* The Hover Style */
.menu-icon-img:hover {
    background-color: var(--secondary-blue, #000000); /* Darkens or changes the blue */
    transform: translateY(-2px); /* Lifts the icon slightly */
}
/* --- Mega Menu Core Logic --- */
 
.nav-links { 
  list-style: none; 
  display: flex; 
  gap: 10px; 
  font-size: 16px; 
  font-weight: 500; 
  color: #161616; 
  font-family: 'DM Sans', sans-serif;
  align-items: center;
}

.nav-links li {
    position: relative;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
}

 .nav-links li a {
    text-decoration: none; /* Removes underline */
    color: inherit;        /* Keeps the #161616 color */
 }
/* 3. The Mega Menu Container - FIXED HEIGHT & SCROLL ADDED */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff; /* Replaced var for stability */
    min-width: 500px; 
    
    /* --- Pro Scrolling Fixes --- */
    max-height: 400px;        /* Set a specific height */
    overflow-y: auto;         /* Enable vertical scroll if content is long */
    scrollbar-width: thin;    /* For Firefox */
    scrollbar-color: #ccc transparent; 
    
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-radius: 0 0 15px 15px;
    border-top: 3px solid #007AFF; 
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 9999;
}

/* --- Custom Scrollbar for Chrome/Safari/Edge --- */
.mega-menu::-webkit-scrollbar {
    width: 6px;
}

.mega-menu::-webkit-scrollbar-track {
    background: transparent;
}

.mega-menu::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
    border-radius: 10px;
}

/* 4. Hover Interactions */
.has-dropdown:hover {
    color: #007AFF;
    background-color: rgba(0, 122, 255, 0.05); /* Soft highlight on parent */
}

.has-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown:hover i {
    transform: rotate(180deg);
}
/* Styling the icon into a circle */
.has-dropdown i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;          /* Adjust size of the circle */
    height: 22px;         /* Adjust size of the circle */
    background-color: var(--primary-blue); /* Light gray background */
    border-radius: 50%;   /* Makes it a circle */
    font-size: 10px;      /* Adjust icon size inside circle */
    color: #ffffff;
    transition: all 0.3s ease;
}

/* Hover effect for the icon circle */
.has-dropdown:hover i {
    background-color: var(--primary-blue); /* Circle turns blue on hover */
    color: #ffffff;            /* Arrow turns white on hover */
    transform: rotate(180deg); /* Keeps your existing rotation */
}
/* Sub-links Styling */
.mega-col h4 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.mega-col a {
    display: block;
    text-decoration: none;
    color: #666;
    font-size: 14px;
    padding: 8px 0;
    transition: 0.2s ease;
}

.mega-col a:hover {
    color: #007AFF;
    padding-left: 5px; /* Slight push effect */
}
.nav-links li:hover { 
  color: var(--primary-blue); 
  background-color: var(--white);
}

.nav-settings { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 600; }
.header-icons { display: flex; gap: 18px; font-size: 20px; color: var(--text-dark); align-items: center; }

.cart-total {
    background: var(--primary-blue);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}




























/* --- Main Hero Section Frame --- */
.main-hero-section {
    position: relative;
    min-height: 80vh;
    /* Large curve for desktop */
    border-radius: 0 0 200px 0;
    overflow: hidden;
    background-color: #000;
}
 /* 1. Prepare the slide to hold an absolute background layer */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    overflow: hidden; /* Keeps the zoom contained */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

/* 2. Create the background layer using ::before */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Inherit the background from the inline style in your HTML */
    background-image: inherit; 
    background-position: center;
    background-size: cover;
    z-index: -1; /* Sits behind the text */
    transition: transform 0.5s ease-out;
}

/* 3. Animate ONLY the background layer when the slide is active */
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-slide.active::before {
    animation: backgroundZoomOnly 20s ease-in-out infinite;
}

/* 4. The Zoom Animation */
@keyframes backgroundZoomOnly {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* --- Elements Styling --- */
.main-hero-badge {
    display: inline-block; /* Essential for centering */
    background: var(--primary-blue, #007bff);
    color: var(--white, #fff);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0; 
}

.main-hero-title {
    width: 100%;
    max-width: 900px;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 1.1;
    background: linear-gradient(180deg, #ffffff 60%, #989898);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    margin: 20px auto;
    opacity: 0;
    
    /* Line Breaking Enhancements */
    text-wrap: balance;         /* Distributes text evenly across lines */
    word-break: break-word;     /* Prevents overflow on very small screens */
    overflow-wrap: break-word;  /* Standard way to handle long words */
}

.main-hero-subtitle {
    color: var(--text-gray, #ccc);
    margin: 0 auto 40px auto;
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.6;
    opacity: 0;

    /* Line Breaking Enhancements */
    text-wrap: pretty;          /* Specifically designed to prevent orphans */
    hyphens: auto;              /* Optional: allows hyphenation if needed */
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-blue);
    color: white;
    padding: 18px 45px;
    border-radius: 50px;
    border: none;
    font-weight: 600;
        font-family: var(--font-main);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* --- Slider Dots --- */
.slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-blue, #007bff);
    border-color: var(--primary-blue, #007bff);
    transform: scale(1.3);
}

 
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered text entrance */
.hero-slide.active .main-hero-badge { animation: fadeInUp 0.8s forwards 0.3s; }
.hero-slide.active .main-hero-title { animation: fadeInUp 0.8s forwards 0.5s; }
.hero-slide.active .main-hero-subtitle { animation: fadeInUp 0.8s forwards 0.7s; }
.hero-slide.active .btn-primary { animation: fadeInUp 0.8s forwards 0.9s; }


/* --- Grid Banner Section --- */
.hero-section {
    padding: 40px 5%;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
}

.banner {
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    padding: 50px;
    transition: transform 0.4s ease;
}

.banner:hover { transform: translateY(-5px); }

.main-banner {
    background: #000;
    color: white;
}

.main-banner h1 { font-size: 48px; margin-bottom: 15px; max-width: 400px; font-weight: 800; line-height: 1.1; }
.main-banner p { color: #aaa; margin-bottom: 30px; font-size: 18px; }

.btn-shop {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
}

/* Right Column */
.right-col { display: flex; flex-direction: column; gap: 25px; }

.headset-banner { background: #F2F3F5; color: var(--text-dark); }
.headset-banner h3 { font-size: 28px; font-weight: 800; }

.timer-grid { display: flex; gap: 15px; margin: 20px 0; }
.timer-unit span { font-size: 24px; font-weight: 800; color: var(--text-dark); }
.timer-unit label { font-size: 11px; text-transform: uppercase; font-weight: 700; opacity: 0.6; }

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

.blue-card { background: #2D9CDB; color: white; }
.orange-card { background: #F2994A; color: white; }

.card-img {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 80px;
}

.small-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 15px;
    backdrop-filter: blur(5px);
    cursor: pointer;
}






/* --- Desktop vs Mobile Toggle --- */
.mobile-header {
    display: none; /* Hidden on PC by default */
}

/* --- Mobile Responsive Enhancements --- */

@media (max-width: 992px) {
    .hero-section {
        grid-template-columns: 1fr; /* Stack columns vertically */
    }
}

@media (max-width: 768px) {
    /* Adjust the massive curve for mobile screens */
    .main-hero-section {
        min-height: 78vh;
        border-radius: 0 0 100px 0px; /* Smaller curve looks better on phones */
    }

    .main-hero-title {
        font-size: 2.8rem; /* Scale down the title */
        padding: 0 10px;
    }

    .main-hero-subtitle {
        font-size: 1rem;
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .btn-primary {
        padding: 15px 35px;
        font-size: 16px;
    }

    /* Adjust Grid Banners */
    .banner {
        padding: 30px; /* Reduce internal padding */
    }

    .main-banner h1 {
        font-size: 32px;
    }

    .bottom-row {
        grid-template-columns: 1fr; /* Stack the blue and orange cards */
    }

    .card-img {
        height: 60px; /* Shrink images to prevent overlapping text */
    }

    .slider-dots {
        bottom: 20px; /* Move dots up slightly */
    }
}
/* Mobile-specific zoom animation */
@keyframes mobilePulseZoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); } /* Slightly deeper zoom for mobile impact */
    100% { transform: scale(1); }
}



@media (max-width: 768px) {
    .main-hero-badge {
        padding: 8px 18px;      /* Slightly smaller padding */
        font-size: 10px;        /* Smaller font for mobile hierarchy */
        letter-spacing: 1.5px;  /* Reduced tracking to fit narrower screens */
        margin-bottom: 15px;    /* Tighter spacing to the title */
        
        /* Ensures it stays centered if the parent uses text-align: center */
        margin-left: auto;
        margin-right: auto;
    }
}
/* Apply to the background layer only when on mobile */
@media (max-width: 768px) {
    .hero-slide.active::before {
        /* Overriding the 20s desktop animation with a slightly faster 12s pulse */
        animation: mobilePulseZoom 12s ease-in-out infinite;
    }
    
    .main-hero-section {
        /* Ensures the zoomed image never spills outside the curved container */
        overflow: hidden; 
    }
}
 
 
/* Combining media queries into one block for performance and readability */
@media (max-width: 768px) {
    
    /* 1. Reset & Hide Desktop Elements */
    .header-main, .nav-bar {
        display: none !important;
    }

    /* 2. Mobile Header Container */
    .mobile-header {
        display: block;
        background: var(--white);
        border-bottom: 1px solid var(--border-light);
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .mobile-top-bar {
        display: flex;        
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        min-height: 80px; /* Ensures a consistent height */
    }

    /* 3. Left Section (Menu + Logo) */
    .mobile-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-menu-btn {
        background-color: var(--primary-blue);
        border: none;
        width: 38px;          /* Slightly larger for better tap target */
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        transition: transform 0.1s ease, background-color 0.2s;
        -webkit-tap-highlight-color: transparent; /* Removes blue flash on tap */
    }

    .mobile-menu-btn:active {
        transform: scale(0.92);
        background-color: #2675b0;
    }

    .mobile-menu-png {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: brightness(0) invert(1); /* Forces icon to white */
    }

    .mobile-logo img {
        height: 47px; /* Adjusted for better mobile scaling */
        width: auto;
        object-fit: contain;
        display: block;
    }

    .mobile-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    }

    .mobile-logo img {
        display: block;
        height: 47px; /* Matches the height you set earlier */
        width: auto;
    }

    /* 4. Right Section (Icons + Badges) */
    .mobile-right {
        display: flex;
        align-items: center;
        gap: 18px; /* Increased gap for finger spacing */
    }

    .mobile-icon {
        position: relative;
        display: flex;
        align-items: center;
    }

    .mobile-icon img {
        width: 24px;
        height: 24px;
    }

        .m-badge {
                position: absolute;
                top: -8px;
                right: -8px;
                background: var(--primary-blue, #007bff);
                color: white;
                
                /* Typography Fixes */
                font-family: var(--font-main); /* Match your site font */
                font-size: 10px;
                font-weight: 500;
                line-height: 0; /* CRITICAL: Removes the "ghost" space below text */
                
                /* Shape & Alignment */
                display: flex;
                justify-content: center;
                align-items: center;
                
                min-width: 18px; /* Slightly larger for better tap visibility */
                height: 18px;
                padding: 0 4px;
                border-radius: 500px; /* Use a large number for pill shape when double digits */
                
                /* Premium Polish */
                border: 1px solid var(--white); /* White ring helps it pop against icons */
                 pointer-events: none; /* Prevents badge from blocking icon clicks */
            }

    /* 5. Mobile Search Bar */
    .mobile-search-bar {
        padding: 8px 15px 12px;
        background-color: #f8f9fa; /* Slightly softer gray */
    }

    .m-search-form {
        display: flex;
        background: #ffffff;
        border: 1px solid var(--border-light, #ddd);
        border-radius: 50px;
        padding: 8px 15px;
        align-items: center;
        transition: border-color 0.2s;
    }

    .m-search-form:focus-within {
        border-color: var(--primary-blue);
    }

    .m-search-form input {
        flex: 1;
        border: none;
        background: none;
        outline: none;
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
        font-family: 'DM Sans', sans-serif;
        color: var(--text-dark);
        padding: 4px 8px;
    }

    .m-search-btn {
        background: none;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .m-search-png {
        width: 20px;
        height: 20px;
     }

    .m-search-form:focus-within .m-search-png {
        opacity: 1;
        filter: none; 
    }
}



/* --- Header & Nav Fixes --- */

/* Fix the Main Header on PC and Mobile Header on Mobile */
.header-main, .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100; /* Higher than everything else */
    background: var(--white);
}

/* Fix the Nav Bar below the Main Header on PC */
.nav-bar {
    position: fixed;
    top: 85px; /* Adjust this to match the height of your .header-main */
    left: 0;
    width: 100%;
    z-index: 1050;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Class to hide the nav-bar when scrolling down */
.nav-bar-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Push the body content down so it doesn't hide behind the fixed header */
body {
    padding-top: 155px; /* header-main height + nav-bar height */
}

@media (max-width: 768px) {
    body {
        padding-top: 135px; /* mobile-header height + search bar height */
    }
}

@media (max-width: 768px) {
    /* The container for the whole mobile header */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: var(--white);
        display: flex;
        flex-direction: column;
    }

    /* Keep the Logo/Menu bar always at the very top */
    .mobile-top-bar {
        position: relative;
        z-index: 1001;
        background: var(--white);
    }

    /* The Search Bar with transition */
    .mobile-search-bar {
        transition: transform 0.3s ease-in-out, opacity 0.2s ease;
        transform-origin: top;
    }

    /* Class to hide the search bar */
    .mobile-search-bar.m-search-hidden {
        transform: translateY(-100%); /* Slides it up behind the top bar */
        opacity: 0;
        pointer-events: none; /* Prevents clicking while hidden */
        height: 0;
        padding: 0; /* Ensures it doesn't leave a gap */
    }
}


/* --- Desktop Hide Rules --- */
@media (min-width: 769px) {
    .mobile-sidebar, .sidebar-overlay {
        display: none !important;
    }
}

/* --- Mobile Sidebar Container --- */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px; 
    height: 100%;
    background: var(--white);
    z-index: 2000;
     transform: translateX(-100%); /* Start hidden */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

.mobile-sidebar.open {
    transform: translateX(0);
}

/* --- Header & Close Btn --- */
.sidebar-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--text-dark);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.close-sidebar:active { transform: scale(0.9); }

/* --- Sidebar Links & Blue Arrows --- */
.sidebar-links {
    list-style: none;
    padding: 10px 0;
    overflow-y: auto;
}

.sidebar-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #f8f8f8;
    transition: background 0.2s ease;
}

/* The Blue Circle Icon Logic */
/* The Blue Circle Icon - Perfect Center Alignment */
.sidebar-links li a i {
    display: flex;           /* Enables flexbox */
    align-items: center;     /* Vertically centers the arrow */
    justify-content: center;  /* Horizontally centers the arrow */
    
    width: 28px;
    height: 28px;
    background-color: #3186c7; /* Your primary blue */
    color: #ffffff;
    border-radius: 50%;
    
    /* FIXES: */
    font-size: 12px;         /* Slightly larger for better visibility */
    line-height: 0;          /* Removes extra space below the icon */
    text-align: center;
    flex-shrink: 0;          /* Prevents the circle from squishing */
    transition: all 0.3s ease;
}

/* Hover/Active State */
.sidebar-links li a:active {
    background-color: rgba(49, 134, 199, 0.05);
}

/* Rotation logic when submenu is active */
.sidebar-links li.has-mobile-submenu.active > a i {
    transform: rotate(90deg);
    background-color: var(--text-dark);
}

/* --- Footer Info --- */
.sidebar-footer {
    margin-top: auto;
    padding: 30px 25px;
    background: #f9f9f9;
    border-top: 1px solid var(--border-light);
}

.sidebar-footer .info-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-footer .info-box i {
    color: var(--primary-blue);
    font-size: 22px;
}

/* --- Overlay --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px); /* Premium Apple-style blur */
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

/* Ensures the tag stays close to the text in nav links */
.nav-links li a .new-tag, 
.sidebar-links li a .new-tag {
    margin-left: 8px; 
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px; /* Optical alignment */
}

/* --- Premium PC Sidebar Restyle --- */

.pc-sidebar {
    position: fixed;
    top: 0;
    left: -380px; /* Increased slightly for shadow clearance */
    width: 380px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px); /* Premium frosted effect */
    z-index: 2100;
    transition: all 0.5s cubic-bezier(0.8, 0, 0.2, 1);
     display: flex;
    flex-direction: column;
    overflow: auto;
}

.pc-sidebar.active {
    left: 0;
}

/* Header: Modern & Minimal */
.pc-sidebar-header {
    padding: 35px 30px;
    background: transparent;
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pc-sidebar-header h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.close-pc-sidebar {
    background: #f4f4f7;
    border: none;
    color: #000;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-pc-sidebar:hover {
    background: #e2e2e8;
    transform: rotate(90deg);
}

/* Category List: Pill-shaped hover states */
.pc-category-list {
    list-style: none;
    padding: 0 15px; /* Side padding for pill-effect */
    overflow-y: auto;
}

.pc-category-list li {
    margin-bottom: 4px;
}

.pc-category-list li a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #444;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-radius: 12px; /* Rounded pill look */
    transition: all 0.25s ease;
}

.pc-category-list li a i {
    margin-right: 18px;
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: var(--primary-blue);
    transition: transform 0.3s ease;
}

/* Hover State: The "Apple" Treatment */
.pc-category-list li a:hover {
    background: rgba(49, 134, 199, 0.08); /* Faint blue tint */
    color: var(--primary-blue);
    padding-left: 25px; /* Elegant slide-in effect */
}

.pc-category-list li a:hover i {
    transform: scale(1.1);
}

/* Tags: Sophisticated badge */
.new-tag {
    background: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: auto; /* Pushes tag to the far right */
    letter-spacing: 0.5px;
}

/* Footer addition for the sidebar */
.pc-sidebar-footer {
    margin-top: auto;
    padding: 30px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    color: #999;
}/* Styling for the custom PNG inside the PC Sidebar Header */
.pc-menu-png {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 12px;
    vertical-align: middle;

    /* This filter converts black (#000) to exactly #3186c7 */
    filter: invert(53%) sepia(35%) saturate(836%) hue-rotate(165deg) brightness(88%) contrast(88%);
    
    transition: filter 0.3s ease; /* Smooth transition if you want it to change on hover */
}

 
.pc-sidebar-header h3 {
    display: flex;
    align-items: center;   /* Perfectly centers the PNG and Text vertically */
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}



/* Product Shelf Section */
.product-shelf {
    padding: 60px 0; /* REMOVED 5% here so the background color spans full width */
    background-color: #ffffff; 
}

/* Header needs its own padding to stay aligned with your site grid */
.shelf-header {
    padding: 0 5%; 
    margin-bottom: 30px;
    display: block;
}

.shelf-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -1.5px;
}

.shelf-header h2 span {
    color: #86868b;
}

/* Scrollable Container - THE FIX IS HERE */
.shelf-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    /* Added 5% padding inside so the first card is aligned, 
       and the last card has a gap on the right */
    padding: 0 5% 30px 5%; 
    scrollbar-width: none; 
    scroll-behavior: smooth;
}

.shelf-container::-webkit-scrollbar {
    display: none;
}

/* Individual Product Card */
.product-card {
    min-width: 320px; 
    flex-shrink: 0; /* CRITICAL: This prevents cards from squishing */
    background: #f3f3f3;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Image and Info remain the same */
.card-image {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

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

.card-info {
    padding: 25px;
    text-align: center;
}

.card-info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    margin-bottom: 5px;
    letter-spacing: -1.5px;
}

.status-badge {
    font-size: 15px;
    color: #86868b;
    font-weight: 500;
}

/* Controls stay centered */
.shelf-controls-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.ctrl-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #d2d2d7;
    background: rgba(255, 255, 255, 0.8);
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.ctrl-btn:hover {
    background: var(--primary-blue);
    color: #ffffff;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    /* 1. Adjust Section Padding */
    .product-shelf {
        padding: 40px 0;
    }

    /* 2. Scale down the Shelf Header */
    .shelf-header h2 {
        font-size: 1.8rem; /* Smaller font for mobile */
        letter-spacing: -1px;
        padding: 0 10px; /* Consistent side padding */
            line-height: 30px;

    }

    /* 3. The "Peeking" Card Effect */
    .shelf-container {
        gap: 15px; /* Tighter gap */
        padding: 0 20px 20px 20px; /* Match header padding */
        /* Enable momentum scrolling for iOS */
        -webkit-overflow-scrolling: touch; 
    }

    .product-card {
        /* This ensures the user see part of the second card, 
           prompting them to swipe left */
        min-width: 280px; 
        border-radius: 20px; /* Slightly tighter corners for small screens */
    }

    /* 4. Shrink the Image height for better vertical flow */
    .card-image {
        height: 280px;
    }

    /* 5. Reduce Text Sizes inside the Card */
    .card-info {
        padding: 20px 15px;
    }

    .card-info h3 {
        font-size: 1.25rem; /* Noticeably smaller */
        letter-spacing: -1px;
    }

    .status-badge {
        font-size: 13px;
    }

   
}


/* 1. Image Zoom Effect */
.product-card:hover .card-image img {
    transform: scale(1.08); /* Subtle zoom */
}

/* 2. Setup the Title for the Underline */
.card-info h3 {
    position: relative;
    display: inline-block; /* Crucial: ensures underline only spans the text width */
    padding-bottom: 2px;
}

/* 3. The Animated Underline (Black) */
.card-info h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Start from center */
    width: 0;
    height: 1px;
    background-color: #1d1d1f; /* Apple black */
    transition: width 0.3s ease, left 0.3s ease;
}

/* 4. Trigger Underline on Card Hover */
.product-card:hover .card-info h3::after {
    width: 100%;
    left: 0;
}








/* --- Shop By Category Section --- */
.shop-by-category {
    padding: 10px 5%;
    background: #ffffff;
}

/* Header Styling - Matching your image exactly */
.category-header h2 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #1d1d1f; /* Apple Black */
    text-transform: uppercase;
}

.category-header h2 span {
    font-size: 13px;
    color: #86868b; /* Subtle Gray */
    font-weight: 400;
    margin-left: 10px;
        letter-spacing: -1.1px;

}

.header-line {
    width: 100%;
    height: 1px;
    background: #d2d2d7; /* Light thin line */
    margin-top: 15px;
    margin-bottom: 40px;
}

/* Grid & Circle Styling */
.category-grid {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: none;
}

.category-grid::-webkit-scrollbar { display: none; }

.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto; /* Keeps them from shrinking */
    width: 150px; 
    transition: transform 0.3s ease;
}

/* --- The "Full Fit" Circle Styling --- */
.cat-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* This clips the image into the circle shape */
    margin-bottom: 15px;
    background: #fbfbfd;
    transition: all 0.3s ease;
}

.cat-circle img {
    width: 100%;      /* Fills the width */
    height: 100%;     /* Fills the height */
    object-fit: cover; /* CRITICAL: This crops the image to fill the circle without stretching */
    transition: transform 0.4s ease;
}

/* Optional: Slight zoom on hover for that premium feel */
.cat-item:hover .cat-circle img {
    transform: scale(1.1);
}

.cat-label {
    font-size: 14px;
    color: #1d1d1f;
    font-family: var(--font-main);
    font-weight: 500;
    text-align: center;
            letter-spacing: -1.1px;

}

 

.cat-item:hover .cat-circle {
    border-color: var(--primary-blue);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

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

.cat-item:hover .cat-label {
    color: var(--primary-blue);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .cat-item {
        width: 110px;
    }
    .category-header h2 {
        font-size: 21px;
    }
    .category-header h2 span {
        display: block;
        margin-left: 0;
        font-size: 15px;
    }
}










/* --- Latest Added Section (PC & General) --- */
.latest-added-section {
    padding: 60px 5%;
    background: #f8f9fa;
    overflow: hidden; /* Keeps sliding content from spilling out of the page */
}

/* Removes default link styling from the product name */
.product-link {
    text-decoration: none;
    color: inherit; /* Takes the color from the H3 */
    display: block;
}

.product-link:hover {
    color: #0071e3; /* Optional: adds a blue tint when hovering over the name */
}

/* Ensures the link inside latest-image covers the whole area */
.latest-image a {
    display: block;
    width: 100%;
    height: 100%;
}


.latest-container {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Meken scrolling activate wenawa */
    scroll-behavior: smooth;
    padding: 20px 0;

    /* --- Scrollbar eka hide karana widi --- */
    
    /* 1. Chrome, Safari, and Edge (Newer versions) */
    -webkit-overflow-scrolling: touch;
}

.latest-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari wala scrollbar eka invisible karanawa */
}

/* 2. Firefox wala hide karන්න */
.latest-container {
    scrollbar-width: none; 
}

/* 3. IE and Edge (Older versions) */
.latest-container {
    -ms-overflow-style: none; 
}

.latest-card {
    flex: 0 0 calc(25% - 15px); /* Forces exactly 4 cards per view on PC */
    min-width: 250px;           /* Safety for smaller laptops */
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* Specifically targets ONLY the h2 inside the Latest Added section */
.latest-added-section .shelf-header h2 {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    /* If it still looks too far right, use a small negative margin */
    /* margin-left: -10px; */ 
}

/* Ensure the wrapper doesn't have internal padding pushing the text */
.latest-added-section .shelf-header {
    padding-left: 0;
    display: flex;
    justify-content: flex-start;
}

 
/* Update these specific classes in your CSS */

 

.latest-image {
    width: 100%;
    line-height: 0; /* Removes tiny ghost gap at bottom of images */
}

.latest-image img {
    width: 100%;
    height: auto;
    display: block; /* Removes bottom spacing */
    object-fit: cover; /* Ensures it fills the space if you set a height */
    margin-bottom: 0; /* Removed margin */
}

.latest-info {
    padding: 20px; /* Add padding back here so text isn't touching the edges */
}

/* Adjust the swatch alignment if needed now that padding is moved */
.color-swatches {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
}

.brand-name {
    font-size: 10px;
    letter-spacing: 2px;
    color: #86868b;
    display: block;
    margin-bottom: 5px;
}

.latest-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.price {
    font-size: 14px;
    color: #424245;
    margin-bottom: 15px;
}

/* Color Swatches */
.color-swatches {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Specific Colors */
.swatch.orange { background: #f9a03f; }
.swatch.silver { background: #d2d2d7; }
.swatch.blue { background: #27445a; }
.swatch.purple { background: #e5ddea; }
.swatch.green { background: #add8ad; }
.swatch.white { background: #ffffff; }
.swatch.black { background: #1d1d1f; }
.swatch.cyan { background: #a7e1e9; }
.swatch.gold { background: #f5e3be; }

 @media (max-width: 768px) {
    /* 1. Full-width background, inner padding for header */
    .latest-added-section {
        padding: 40px 20px; /* Removed side padding so background spans full width */
    }

    /* Keep the title aligned with the cards */
    .latest-added-section h2 {
        padding: 0 0;
        margin-bottom: 0;
        font-size: 1.8rem;
    }

    /* 2. Switch Grid to Flex for horizontal swiping */
    .latest-container {
        display: flex; /* Changed from Grid */
        grid-template-columns: none; 
        overflow-x: auto;
        gap: 15px;
        padding: 10px 20px 30px 20px; /* 20px sides match the header */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .latest-container::-webkit-scrollbar {
        display: none;
    }

    /* 3. The "Peeking" Card Logic */
    .latest-card {
        min-width: 260px; /* Ensures the next card is visible on the edge */
        flex-shrink: 0;
        scroll-snap-align: start;
     }

    /* 4. Adjust card internal spacing */
    .latest-image img {
        height: 240px; /* Fixed height for consistency while swiping */
        object-fit: cover;
    }

    .latest-info {
        padding: 15px;
    }

    .latest-info h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .price {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .swatch {
        width: 12px;
        height: 12px;
    }
}


/* Action Icons Container */
.latest-image {
    position: relative; /* Essential for positioning the icons */
}

.card-actions {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    gap: 10px;
    opacity: 0; /* Hidden by default on PC */
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

/* Individual Button Styling */
.action-btn {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    font-size: 16px;
}

.action-btn:hover {
    background: var(--primary-blue);
    color: #ffffff;
    transform: scale(1.1);
}

/* PC Hover Effect */
.latest-card:hover .card-actions {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- Mobile Responsive (Override) --- */
@media (max-width: 768px) {
    .card-actions {
        opacity: 1; /* Always visible on mobile */
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        bottom: 10px; /* Slightly tighter for mobile */
    }
    
    .action-btn {
        width: 35px; /* Slightly smaller for mobile screens */
        height: 35px;
        font-size: 14px;
        /* Keep background semi-transparent so it feels premium on mobile */
        background: rgba(255, 255, 255, 0.9); 
        backdrop-filter: blur(4px);
    }
}


/* --- Bottom Controls Container --- */
.shelf-controls-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding-bottom: 20px;
}

/* --- The Main View All Button --- */
/* --- The Main View All Button --- */
.view-all-main-btn {
    display: inline-block;
    padding: 12px 30px;
        font-family: var(--font-main);

    /* Reduced White: Using silver and deep grays */
background: linear-gradient(135deg, #050505, #121212, #494949, #121212, #050505);    background-size: 250% 250%;
    animation: subtleSweep 7s ease-in-out infinite;
    
    color: #ffffff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    
    /* Thin border to define the shape against the deep-bg */
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

/* Smoother, slower animation */
@keyframes subtleSweep {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.view-all-main-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
     /* Subtle glow on hover without using the primary blue */
    background: linear-gradient(135deg, #121212, #1d1d1f);
}
.view-all-main-btn:hover {
    background: #0071e3; /* Changes to Blue on hover */
    transform: translateY(-2px);
 }
 
/* --- Mobile Specific Fixes --- */
@media (max-width: 768px) {
    .shelf-controls-bottom {
        gap: 12px; /* Tighter gap for smaller screens */
    }

    .view-all-main-btn {
        padding: 10px 20px;
        font-size: 14px;
        flex-grow: 0; /* Keeps it from stretching too wide */
    }
}















/* --- iPhone Section Specifics --- */
.iphone-section {
    padding: 80px 5%;
    background: #ffffff; /* Clean white background for Apple products */
    overflow: hidden;
    border-top: 1px solid #f0f0f0;
}

/* Matching the Container Logic */
.iphone-container {
    display: flex;
    gap: 25px; /* Slightly wider gap */
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 30px 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
 .iphone-section .shelf-header {
    text-align: left;  
    display: block;   
    padding-left: 0;  
}

.iphone-section .shelf-header h2 {
    margin-left: 0;
    justify-content: flex-start; /* ඇතුලේ content තියෙන්නේ flex වලින් නම් */
}


.iphone-container::-webkit-scrollbar {
    display: none;
}

/* Reusing your Card Design but adding a subtle border */
.iphone-section .latest-card {
    border: 1px solid #f2f2f7;
 }

 

/* Styling the "Designed by Apple" span */
.iphone-section .shelf-header h2 span {
    color: var(--primary-blue); /* Action color for the subtitle */
    font-weight: 400;
}

/* Mobile Responsive Override for iPhone Section */
@media (max-width: 768px) {
    .iphone-section {
        padding: 50px 20px;
    }

    .iphone-container {
        padding: 20px 0 40px 0;
        gap: 15px;
    }

    .iphone-section .latest-card {
        min-width: 280px; /* Slightly larger cards for mobile readability */
    }
}















/* --- AirPods Section Specifics --- */
.airpods-section {
    padding: 80px 5%;
    background: #fbfbfd; /* Slightly different off-white to separate from iPhone section */
    overflow: hidden;
}

.airpods-container {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 30px 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.airpods-container::-webkit-scrollbar {
    display: none;
}

/* Align Title to the Left */
.airpods-section .shelf-header {
    text-align: left;  
    display: block;   
    padding-left: 0;  
}

.airpods-section .shelf-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -1.5px;
}

.airpods-section .shelf-header h2 span {
    color: #86868b;
    font-weight: 400;
}

/* Card Borders */
.airpods-section .latest-card {
    background: #ffffff;
    border: 1px solid #f2f2f7;
    border-radius: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .airpods-section {
        padding: 50px 20px;
    }
    .airpods-container {
        padding: 20px 0 40px 0;
        gap: 15px;
    }
    .airpods-section .latest-card {
        min-width: 260px;
    }
    .airpods-section .shelf-header h2 {
        font-size: 1.8rem;
    }
}














/* --- Power Section Styles --- */
.power-section {
    padding: 80px 5%;
    background: #fbfbfd; /* Very subtle light gray background */
    overflow: hidden;
    border-top: 1px solid #f2f2f7;
}

/* Align Header Left */
.power-section .shelf-header {
    text-align: left;
    display: block;
    padding-left: 0;
}

.power-section .shelf-header h2 span {
    color: #86868b;
    font-weight: 400;
}

.power-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 30px 5px;
    scrollbar-width: none;
}

.power-container::-webkit-scrollbar {
    display: none;
}

/* Card Styling with Borders */
.power-section .latest-card {
    background: #ffffff;
    border: 1px solid #f2f2f7;
    flex-shrink: 0;
    min-width: 250px;
}

/* Hover Effect for PC: Show Action Buttons */
.power-section .latest-card:hover .card-actions {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Responsive Mobile Tweaks */
@media (max-width: 768px) {
    .power-section {
        padding: 50px 20px;
    }
    
    .power-section .latest-card {
        min-width: 220px; /* Slightly smaller for accessories */
    }

    /* Force actions visible on mobile as there is no 'hover' */
    .power-section .card-actions {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        bottom: 10px;
    }
}













/* --- Power Bank Cover Specifics --- */
.pb-cover-section {
    padding: 80px 5%;
    background: #ffffff; 
    overflow: hidden;
    border-top: 1px solid #f2f2f7;
}

.pb-cover-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 30px 5px;
    scrollbar-width: none;
}

.pb-cover-container::-webkit-scrollbar {
    display: none;
}

/* Align Header Left */
.pb-cover-section .shelf-header {
    text-align: left;
    display: block;
    padding-left: 0;
}

.pb-cover-section .shelf-header h2 span {
    color: #0071e3; /* Blue highlight for the subtitle */
    font-weight: 400;
}

/* Card Style matches the iPhone section */
.pb-cover-section .latest-card {
    background: #fbfbfd;
    border: 1px solid #f2f2f7;
    flex-shrink: 0;
}

/* Ensure Actions are visible on hover */
.pb-cover-section .latest-card:hover .card-actions {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .pb-cover-section {
        padding: 50px 20px;
    }
    .pb-cover-section .latest-card {
        min-width: 240px;
    }
    .pb-cover-section .card-actions {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}












/* --- Video Showcase Specifics --- */
.video-showcase-section {
    padding: 80px 5%;
    background: #000000; /* Dark background makes the video pop */
    overflow: hidden;
}

/* Header Adjustments for Dark Background */
.video-showcase-section .shelf-header {
    text-align: left;
    margin-bottom: 40px;
    padding-left: 0;
}

.video-showcase-section .shelf-header h2 {
    color: #ffffff; /* White text for dark section */
}

.video-showcase-section .shelf-header h2 span {
    color: #86868b;
}

/* Video Container */
.video-wrapper {
    position: relative;
    width: 100%;
    height: 550px; /* Adjust based on your preference */
    border-radius: 30px;
    overflow: hidden;
    background: #1d1d1f;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fills the area without stretching */
}

/* Glassmorphism Overlay */
.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
}

.video-info {
    color: #ffffff;
    max-width: 500px;
}

.video-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #0071e3;
    margin-bottom: 15px;
    display: block;
}

.video-info h3 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -1.5px;
}

.video-info p {
    font-size: 1.2rem;
    color: #cecece;
    margin-bottom: 30px;
}

/* Play/Pause Button */
.video-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.play-toggle-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.play-toggle-btn:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .video-showcase-section {
        padding: 40px 20px;
    }
    
    .video-wrapper {
        height: 400px;
    }

    .video-overlay {
        padding: 30px;
    }

    .video-info h3 {
        font-size: 2rem;
    }

    .video-info p {
        font-size: 1rem;
    }
}












 







/* --- Features Section Specifics --- */
.features-section {
    padding: 80px 5%;
    background: #ffffff;
    border-top: 1px solid #f2f2f7;
    border-bottom: 1px solid #f2f2f7;
}

/* Align Header Left */
.features-section .shelf-header {
    text-align: left;
    display: block;
    padding-left: 0;
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-item {
    padding: 40px 30px;
    background: #fbfbfd;
    border-radius: 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.feature-item:hover {
    background: #ffffff;
    transform: translateY(-10px);
    border-color: #d2d2d7;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}

.feature-icon {
    font-size: 40px;
    color: #0071e3; /* Signature Blue */
    margin-bottom: 20px;
    display: inline-block;
}

.feature-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.feature-item p {
    font-size: 15px;
    color: #86868b;
    line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 on Tablets */
    }
}

@media (max-width: 600px) {
    .features-section {
        padding: 50px 20px;
    }
    
    .features-grid {
        grid-template-columns: 1fr; /* Stacked on Mobile */
        gap: 20px;
    }

    .feature-item {
        padding: 30px 20px;
    }
}











/* --- Premium Footer Styling --- */
.main-footer {
    background-color: #000000;
    color: #ffffff;
    padding: 80px 0 0 0;
    font-family: var(--font-main);
    border-radius: 120px 0 0 0; /* Sophisticated asymmetrical curve */
    margin-top: 100px;
}

/* 1. Newsletter Section Fixes */
.footer-newsletter {
    padding: 0 8% 60px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 30px;
}

.newsletter-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.1;
}

.newsletter-content h2 span {
    color: var(--primary-blue);
}

.newsletter-content p {
    color: #86868b;
    margin-top: 10px;
    font-size: 16px;
}

.newsletter-form {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 450px;
    transition: border-color 0.3s ease;
}

.newsletter-form:focus-within {
    border-color: var(--primary-blue);
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    padding: 0 25px;
    font-size: 16px;
    font-family: var(--font-main);
}

/* --- High-End Subscribe Button --- */
.cta-submit-premium {
    background: #ffffff; /* Stark contrast against the dark form */
    color: #000000;
    border: none;
    padding: 12px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
        letter-spacing: -1px;

    white-space: nowrap;
 }

.cta-submit-premium:hover {
    background: var(--primary-blue);
    color: #ffffff;
    transform: scale(1.02) translateX(2px);
 }

.cta-submit-premium:active {
    transform: scale(0.98);
}

 
/* 2. Logo Fixed Size & Branding */
.footer-logo {
    display: block;
    margin-bottom: 25px;
}

.footer-logo .logo-img {
    width: 150px;       /* Set a fixed professional width */
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
    border-radius: 500px;
}

.footer-logo:hover .logo-img {
    opacity: 0.8;
}

.brand-desc {
    color: #86868b;
    line-height: 1.8;
    margin-bottom: 25px;
    font-size: 15px;
    max-width: 320px;
}

/* 3. Footer Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 60px;
    padding: 80px 8%;
}

.footer-col h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;    /* Made headings slightly brighter for contrast */
    margin-bottom: 30px;
    font-weight: 700;
}

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

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

.footer-col ul li a {
    color: #86868b;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--primary-blue);
    padding-left: 5px; /* Subtle interaction */
}

/* 4. Social & Contact Alignment */
.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-links a:hover {
    background: var(--primary-blue);
    transform: translateY(-4px);
 }

.contact-col p {
    font-size: 14px;
    color: #86868b;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}

.contact-col i {
    color: var(--primary-blue);
    margin-top: 3px;
    font-size: 16px;
}

/* 5. Payment Methods Filter (Makes icons white/silver) */
.payment-methods {
    margin-top: 25px;
}

.payment-methods img {
    height: 30px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(0.8); /* Ensures icons match the dark theme */
    opacity: 0.7;
}

/* 6. Footer Bottom Bar */
.footer-bottom {
    background: rgba(255, 255, 255, 0.02);
    padding: 35px 8%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #636366;
}

.legal-links {
    display: flex;
    gap: 25px;
}

.legal-links a {
    color: #636366;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links a:hover { 
    color: #ffffff; 
}
 /* --- Mobile Footer Enhancements --- */

@media (max-width: 768px) {
    .main-footer {
        /* Reduce curve for mobile so it doesn't cut into content */
        border-radius: 60px 0 0 0; 
        padding: 60px 0 0 0;
        margin-top: 60px;
        text-align: center; /* Center align for mobile balance */
    }

    /* 1. Newsletter Mobile Adjustments */
    .footer-newsletter {
        padding: 0 20px 40px 20px;
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .newsletter-content h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .newsletter-content p {
        font-size: 14px;
        max-width: 100%;
    }

    /* Important: Form width fix */
    .newsletter-form {
        min-width: 100%; 
        width: 100%;
        flex-direction: column; /* Stack input and button */
        background: transparent;
        border: none;
        padding: 0;
        gap: 12px;
    }

    .newsletter-form input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50px;
        padding: 16px 25px;
        width: 100%;
        text-align: center;
    }

    .cta-submit-premium {
        width: 100%;
        padding: 16px;
        font-size: 14px;
    }

    /* 2. Grid to Vertical Stack */
    .footer-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 40px;
        padding: 50px 20px;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center all items */
    }

    .brand-col {
        order: -1; /* Keep branding at the top */
    }

    .brand-desc {
        max-width: 100%;
        margin: 0 auto 25px auto;
    }

    .footer-col h4 {
        margin-bottom: 20px;
        font-size: 12px;
    }

    /* 3. Social Links Centering */
    .social-links {
        justify-content: center;
    }

    /* 4. Contact Info Center Alignment */
    .contact-col p {
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .contact-col i {
        margin-top: 0; /* Align icon with centered text */
    }

    /* 5. Footer Bottom Stack */
    .footer-bottom {
        padding: 40px 20px;
    }

    .bottom-inner {
        display: flex;
        flex-direction: column; /* Stack vertically */
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    /* 2. Push the copyright paragraph to the very bottom */
    .bottom-inner p {
        order: 2; /* Higher number moves it down */
        margin-top: 10px;
        color: #636366;
        font-size: 12px;
    }

    /* 3. Keep legal links at the top */
    .legal-links {
        order: 1; /* Lower number moves it up */
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* 6. Payment Icons Centering */
    .payment-methods {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Fix for very small screens (iPhone SE etc) */
@media (max-width: 380px) {
    .newsletter-content h2 {
        font-size: 1.5rem;
    }
    
    .legal-links {
        flex-direction: column;
        gap: 10px;
    }
}


/* Hide Submenus by default */
.mobile-sub-list {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    background: #f9f9f9;
    transition: max-height 0.3s ease-out;
}

.mobile-sub-list li a {
    padding: 12px 40px !important; /* Indented for hierarchy */
    font-size: 14px !important;
    border-bottom: 1px solid #eee;
    color: #666 !important;
}

/* When parent is active, show submenu */
.has-mobile-submenu.active .mobile-sub-list {
    max-height: 500px; /* Large enough for the list */
}

/* Rotate the arrow when open */
.has-mobile-submenu.active .submenu-toggle i {
    transform: rotate(90deg);
    background-color: var(--text-dark);
}

/* Premium Sidebar Glass Overlay */
.sidebar-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.4);
}


/* Update your existing processing logic to be even smoother */
.action-btn.processing, 
.shop-action-btn.processing,
.rel-btn.processing {
    pointer-events: none;
    opacity: 0.7;
    background-color: #f5f5f7 !important;
}

/* Target the icon specifically for the rotation */
.action-btn.processing i, 
.shop-action-btn.processing i,
.rel-btn.processing i {
    display: inline-block; /* Required for transform/animation to work properly */
    animation: spin 1s linear infinite;
    color: #0071e3; /* Apple Blue or your muted grey #86868b */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Right Side Cart Sidebar (The "Best Design" Card Part) */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px; /* Hidden by default */
    width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
    z-index: 3000;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 30px;
}

/* Only applies to PC/Desktop (screens wider than 1024px) */
@media screen and (min-width: 1025px) {
    .cart-sidebar {
        position: fixed;
        top: 0;
        right: -450px; /* Adjusted to hide full width + shadow */
        width: 400px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        box-shadow: -10px 0 30px rgba(0,0,0,0.05);
        z-index: 3000;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        padding: 30px;

        /* Left side corners rounded */
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
        
        /* Optional: adds a subtle border to define the curve better */
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-right: none;
    }

    /* Class to trigger when cart is open */
    .cart-sidebar.active {
        right: 0;
    }
}
.cart-sidebar.open {
    right: 0;
}

/* Overlay for focus */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 2999;
}

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



/* Mini Product Item in Cart */
.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f2f2f7;
}

.mini-cart-img {
    width: 70px;
    height: 70px;
    background: #fbfbfd;
    border-radius: 12px;
    overflow: hidden;
}

.mini-cart-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mini-cart-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.mini-cart-info p {
    font-size: 14px;
    color: #86868b;
}

/* Footer Actions */
.cart-footer-actions {
    margin-top: auto; /* Pushes footer to bottom of sidebar */
    padding-top: 20px;
    
}

.cart-total-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 18px;
}

/* Container for side-by-side buttons */
.cart-button-group {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    width: 100%;
}

/* Base button styles with smooth transition */
.btn-view-cart, 
.btn-checkout-primary {
    flex: 1;
    margin-bottom: 0;
    padding: 14px 10px;
    font-size: 14px;
    border-radius: 120px; /* Keep your rounded style */
    border: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Professional easing */
}

/* --- HOVER EFFECTS --- */

/* View Cart: Subtle lift and slight darken */
.btn-view-cart {
    background: #f5f5f7;
    color: #1d1d1f;
}

.btn-view-cart:hover {
    background: #e8e8ed;
    transform: translateY(-2px); /* Lifts the button slightly */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.btn-view-cart:active {
    transform: translateY(0); /* Press down effect */
}

/* Checkout: Glow and scale effect */
.btn-checkout-primary {
    background: var(--primary-blue);
    color: white;
 }

.btn-checkout-primary:hover {
    filter: brightness(1.1); /* Makes the blue pop */
    transform: translateY(-2px) scale(1.02); /* Lift and grow slightly */
 }

.btn-checkout-primary:active {
    transform: translateY(0) scale(0.98); /* Press down effect */
}

/* Ensure sidebar uses flex to keep footer at bottom */
.cart-sidebar {
    display: flex;
    flex-direction: column;
}

/* Sidebar Header H3 Container */
.sidebar-header h3 {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between text and the count */
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--text-dark);
    letter-spacing: -0.8px;
}
/* The 0 Count Part - Perfectly Centered */
.cart-count {
    display: inline-flex;
    align-items: center;      /* Vertically centers the number */
    justify-content: center;   /* Horizontally centers the number */
    
    /* Shape Logic */
    width: 24px;              /* Changed min-width to width for a perfect circle */
    height: 24px;
    border-radius: 50%;       /* Use 50% for a perfect circle when width=height */
    
    /* Typography Fixes */
    font-size: 12px;
    font-weight: 500;         /* Slightly bolder for better visibility */
    font-family: 'Inter', sans-serif;
    line-height: 0;           /* CRITICAL: Removes extra space below the number */
    text-align: center;
    
    /* Style & Color */
    background-color: var(--primary-blue);
    color: var(--white);
    
    /* Performance & Interaction */
    flex-shrink: 0;           /* Prevents the circle from squishing in the header */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 

.cart-items-list {
    flex: 1;
    overflow-y: auto;
    margin: 20px 0;
}/* Quantity Controls Container */
.qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    background: #f5f5f7;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 8px;
}

.qty-controls button {
    background: white;
    border: 1px solid #d2d2d7;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    transition: 0.2s;
}

.qty-controls button:hover {
    background: #e8e8ed;
}

.qty-controls span {
    font-size: 14px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Delete X Button */
.mini-cart-item {
    position: relative;
}

.delete-item {
    position: absolute;
    right: 0;
    top: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #86868b;
    cursor: pointer;
}

.delete-item:hover {
    color: #ff1f1f;
}



/* Quantity Controls */
.qty-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    background: #f5f5f7;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 500px;
}

.qty-btn {
    background: white;
    border: 1px solid #d2d2d7;
    width: 24px;
    height: 24px;
    border-radius: 500px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
    color: #1d1d1f;
}

.qty-btn:hover {
    background: #e8e8ed;
}

.qty-count {
    font-size: 15px;
    font-weight: 500;
    min-width: 15px;
        font-family: var(--font-main);

    text-align: center;
}

.mini-cart-info h4 {
    margin-bottom: 2px;
}

.mini-cart-info p {
    margin-bottom: 0;
}


.shipping-note {
    font-size: 13px;
    color: #86868b; /* Classic muted grey */
    margin-bottom: 20px;
    text-align: center;
    font-family: var(--font-main);
    line-height: 1.4;
}

/* Empty Cart Container */
.empty-cart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    animation: fadeIn 0.5s ease-out;
}

/* Iconic Bag Design */
.empty-cart-icon {
    width: 80px;
    height: 80px;
    background: #f5f5f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.empty-cart-icon i {
    font-size: 32px;
    color: #86868b;
}

/* Typography */
.empty-cart-container h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.empty-cart-container p {
    font-size: 15px;
    color: #86868b;
    line-height: 1.5;
    max-width: 200px;
    margin-bottom: 30px;
}

/* Start Shopping Button */
.btn-continue-shopping {
    background: #0071e3; /* Classic Apple Blue */
    color: white;
    padding: 12px 24px;
    border-radius: 980px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-continue-shopping:hover {
    background: #0077ed;
    transform: scale(1.05);
 }

.btn-continue-shopping:active {
    transform: scale(0.98);
}

/* Simple Fade Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }

}


/* Mobile (768px or less) */
@media (max-width: 768px) {
    .close-pc-sidebar {
        display: none!important;
    }
}


@media (max-width: 768px) {
    /* 1. Transform Sidebar into a Bottom Sheet */
    .cart-sidebar {
        right: 0 !important; /* Reset horizontal position */
        bottom: -100%;       /* Hide below the screen */
        top: auto;           /* Remove top alignment */
        width: 100%;
        height: 85vh;        /* Don't cover the whole screen, leave a gap at top */
        border-radius: 30px 30px 0 0; /* Apple-style rounded top corners */
        padding: 20px;
        transition: bottom 0.5s cubic-bezier(0.32, 0.72, 0, 1); /* iOS Spring transition */
    }

    .cart-sidebar.open {
        bottom: 0; /* Slide up to the bottom of the screen */
    }

    /* 2. Add the "Grab Handle" at the top (Very iPhone style) */
    .cart-sidebar::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: #d2d2d7;
        border-radius: 10px;
    }

    /* 3. Adjust Header for the bottom sheet */
    .sidebar-header {
        padding-top: 15px;
        margin-bottom: 10px;
    }

    .sidebar-header h3 {
        font-size: 1.4rem; /* Scale down for mobile */
    }

    /* 4. Make Cart Items List scrollable within the sheet */
    .cart-items-list {
        margin: 10px 0;
        padding-right: 5px;
    }

    /* 5. Sticky Footer for Checkout (Apple Pay style) */
    .cart-footer-actions {
        padding-bottom: env(safe-area-inset-bottom); /* Fix for iPhone Notch/Home Bar */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
    }

    /* 6. Larger Tap Targets for Buttons (Mobile UX) */
    .btn-view-cart, 
    .btn-checkout-primary {
        padding: 16px 10px;
        font-size: 16px;
    }

    .qty-btn {
        width: 32px;  /* Easier to tap with thumbs */
        height: 32px;
    }

    /* 7. Mini Cart Item adjustments */
    .mini-cart-item {
        gap: 12px;
    }

    .mini-cart-img {
        width: 60px;
        height: 60px;
    }
}


@media (max-width: 768px) {
    .cart-sidebar {
        /* This ensures the drag feels responsive but snaps back smoothly */
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), 
                    bottom 0.5s cubic-bezier(0.32, 0.72, 0, 1);
        
        /* Ensure touch actions don't interfere with the page scroll */
        touch-action: none; 
    }
}





/* Container Spacing */
.shipping-progress-container {
    padding: 15px 5px;
    margin-bottom: 5px;
    animation: fadeInSlide 0.6s ease-out forwards;
}

/* Typography - Clean & Professional */
.shipping-info-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1d1d1f;
    margin-bottom: 12px;
    font-family: var(--font-main);
}

.shipping-info-text i {
    color: var(--primary-blue);
    font-size: 16px;
}

.shipping-info-text strong {
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The Track (The background of the bar) */
.progress-track {
    position: relative;
    width: 100%;
    height: 10px; /* Slightly thicker for a modern look */
    background: #f2f2f7;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
} 

/* Container Logic */
.shipping-progress-container {
    padding: 18px 0;
    margin-bottom: 5px;
    animation: fadeInSlide 0.6s ease-out forwards;
}

.shipping-info-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1d1d1f;
    margin-bottom: 12px;
    font-family: var(--font-main);
}

.shipping-info-text strong {
    color: var(--primary-blue);
    font-weight: 700;
}

/* The Track (White/Grey Background) */
.progress-track {
    width: 100%;
    height: 12px; /* Matching the chunky feel of your image */
    background: #f2f2f7;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
}

/* The Striped Fill */
.progress-fill-striped {
    height: 100%;
    border-radius: 50px;
    position: relative;
    
    /* 1. The Striped Pattern Logic */
    background-image: repeating-linear-gradient(
        45deg,
        #3186c7,           /* Your Primary Blue */
        #3186c7 10px,      /* Color width */
        #2675b0 10px,      /* Slightly darker blue for the stripe */
        #2675b0 20px       /* Stripe width */
    );
    background-size: 40px 40px; /* Controls stripe density */
    
    /* 2. Animations: Growth + The Moving Stripes */
    animation: 
        growBar 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards, 
        moveStripes 1s linear infinite;
        
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.2);
}

/* Keyframes: Move stripes from left to right */
@keyframes moveStripes {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

/* Keyframes: Grow the bar width to 75% */
@keyframes growBar {
    from { width: 0%; }
    to { width: 75%; }
}

/* Smooth Entrance for the whole container */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Mobile Optimization for Shipping Progress */
@media screen and (max-width: 768px) {
    
    /* Reduce outer spacing to save screen height */
    .shipping-progress-container {
        padding: 12px 0;
        margin-bottom: 3px;
    }

    /* Shrink text size and tighten the icon gap */
    .shipping-info-text {
        font-size: 12px;
        gap: 6px;
        margin-bottom: 8px;
    }

    /* Scale down the icon */
    .shipping-info-text i {
        font-size: 14px;
    }

    /* Make the bar thinner for a sleek mobile feel */
    .progress-track {
        height: 8px;
        border-radius: 20px;
    }

    /* Adjust stripe size for the thinner bar */
    .progress-fill-striped {
        background-image: repeating-linear-gradient(
            45deg,
            #3186c7,
            #3186c7 8px, /* Smaller stripes for smaller screen */
            #2675b0 8px,
            #2675b0 16px
        );
        background-size: 32px 32px; /* Adjusted to match */
    }

    /* Adjust animation to match the new background-size */
    @keyframes moveStripes {
        from { background-position: 0 0; }
        to { background-position: 32px 0; }
    }
}

/* --- 1. Universal Wishlist Buttons --- */
.action-btn[title="Wishlist"] i,
.shop-action-btn[title="Wishlist"] i,
.rel-btn[title="Wishlist"] i,
.text-action-btn i {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

/* Red State */
.active-wishlist i {
    color: #ff3b30 !important;
    font-weight: 900;
}

/* Hover Scale */
.action-btn[title="Wishlist"]:hover i,
.shop-action-btn[title="Wishlist"]:hover i,
.rel-btn[title="Wishlist"]:hover i {
    transform: scale(1.15);
 }

/* Details Page PNG Heart Filter */
.active-wishlist .action-png-icon {
    filter: invert(21%) sepia(100%) saturate(7414%) hue-rotate(354%) brightness(95%) contrast(118%);
}

/* --- 2. Header Badge Styling --- */
.icon-circle {
    position: relative;
    display: flex;
}
 

.count-badge:empty { display: none; }


/* --- About Us Section Styles --- */
.about-us-section {
    padding: 100px 5%;
    background-color: #ffffff;
    overflow: hidden;
}

.about-container {
    max-width: 1300px;
    margin: 0 auto;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Visuals Side */
.about-visuals {
    position: relative;
}

.main-image-frame {
    position: relative;
    z-index: 2;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.floating-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.main-image-frame:hover .floating-img {
    transform: scale(1.05);
}

.experience-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    padding: 20px 30px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.exp-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
}

.exp-text {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    text-transform: uppercase;
}

.accent-blur {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: var(--primary-blue);
    filter: blur(120px);
    opacity: 0.1;
    z-index: 1;
}

/* Content Side */
.section-tag {
    color: var(--primary-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    margin-bottom: 15px;
    display: block;
}

.about-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.about-title span {
    color: #86868b;
}

.about-description {
    font-size: 18px;
    color: #424245;
    line-height: 1.6;
    margin-bottom: 40px;
}

.about-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 45px;
}

.about-mini-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.about-mini-item i {
    font-size: 20px;
    color: var(--primary-blue);
    background: rgba(49, 134, 199, 0.1);
    padding: 15px;
    border-radius: 15px;
}

.about-mini-item h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
}

.about-mini-item p {
    font-size: 14px;
    color: #86868b;
}
/* --- Responsive Styles --- */

/* For Tablets and smaller desktops */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr; /* Stack image and text vertically */
        gap: 50px;
    }

    .about-us-section {
        padding: 60px 5%; /* Reduce vertical padding */
    }

    .about-title {
        font-size: 2.5rem; /* Shrink title slightly */
    }
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .about-us-section {
        padding: 40px 20px; /* Consistent side padding for mobile */
    }

    .about-grid {
        gap: 40px;
    }

    .about-title {
        font-size: 2rem; /* Mobile-friendly heading size */
        letter-spacing: -1px;
        line-height: 1.2;
    }

    .about-description {
        font-size: 16px; /* Slightly smaller text for readability */
        margin-bottom: 30px;
    }

    .floating-img {
        height: 350px; /* Reduce image height so it doesn't take the whole screen */
    }

    .main-image-frame {
        border-radius: 25px; /* Softer corners for smaller screens */
    }

    .experience-badge {
        bottom: 15px;
        right: 15px;
        padding: 12px 20px;
        gap: 10px;
    }

    .exp-number {
        font-size: 1.8rem;
    }

    .exp-text {
        font-size: 11px;
    }

    .about-mini-item {
        gap: 15px;
    }

    .about-mini-item i {
        padding: 12px;
        font-size: 18px;
    }
}






/* --- Contact Us Section Styles --- */
.contact-us-section {
    padding: 100px 5%;
    background-color: #fbfbfd; /* Apple light grey background */
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

/* Form Styling */
.contact-form-wrapper {
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #f2f2f7;
}

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

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-group input, 
.input-group select, 
.input-group textarea {
    width: 100%;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1.5px solid #e5e5e7;
    font-family: var(--font-main);
    font-size: 15px;
    background: #fbfbfd;
    transition: all 0.3s ease;
}

.input-group input:focus, 
.input-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(49, 134, 199, 0.1);
}

/* Info Card Styling */
.contact-info-card {
    background: var(--white);
    padding: 40px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #f2f2f7;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.contact-method {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.method-icon {
    width: 50px;
    height: 50px;
    background: rgba(49, 134, 199, 0.1);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 20px;
    flex-shrink: 0;
}

.method-text h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #1d1d1f;
}

.method-text p {
    font-size: 14px;
    color: #86868b;
    line-height: 1.5;
}

.map-preview {
    border-radius: 20px;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #e5e5e7;
}
/* --- Contact Us Responsive Styles --- */

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stack Form on top of Info Card */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .contact-us-section {
        padding: 50px 20px; /* Adjusting section padding for mobile */
    }

    .contact-form-wrapper, 
    .contact-info-card {
        padding: 25px; /* Reducing internal padding to save space */
        border-radius: 20px; /* Slightly smaller radius for mobile */
    }

    .form-row {
        grid-template-columns: 1fr; /* Force Name/Email etc. to stack vertically */
        gap: 0; /* Let input-group margins handle the spacing */
    }

    .input-group {
        margin-bottom: 15px;
    }

    .input-group input, 
    .input-group select, 
    .input-group textarea {
        padding: 12px 15px; /* Smaller touch targets for inputs */
        font-size: 16px; /* Prevents iOS from auto-zooming on focus */
    }

    .method-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 12px;
    }

    .method-text h4 {
        font-size: 15px;
    }

    .method-text p {
        font-size: 13px;
    }

    .map-preview {
        height: 200px; /* Fixed height for map so it doesn't push content too far */
    }
}






/* --- FAQ Section Styles --- */
.faq-section {
    padding: 100px 5%;
    background-color: #ffffff;
}

.faq-container {
    max-width: 900px; /* Thinner container looks better for FAQs */
    margin: 0 auto;
}

.faq-list {
    margin-top: 40px;
}

.faq-item {
    border-bottom: 1px solid #f2f2f7;
    padding: 10px 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question h3 {
    font-size: 19px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}

.faq-icon {
    width: 30px;
    height: 30px;
    background: #f5f5f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #86868b;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer p {
    padding-bottom: 25px;
    font-size: 16px;
    line-height: 1.6;
    color: #424245;
}

/* Active State (Triggered by JS) */
.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust based on content length */
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: var(--primary-blue);
    color: white;
}

.faq-item.active .faq-question h3 {
    color: var(--primary-blue);
}
/* --- FAQ Responsive Styles --- */

@media (max-width: 768px) {
    .faq-section {
        padding: 50px 20px; /* Reduced vertical padding */
    }

    .faq-container {
        width: 100%; /* Ensure it uses the full width available */
    }

    .faq-list {
        margin-top: 20px;
    }

    .faq-item {
        padding: 5px 0;
    }

    .faq-question {
        padding: 15px 0;
        gap: 15px; /* Adds space between text and icon if text wraps */
    }

    .faq-question h3 {
        font-size: 16px; /* Slightly smaller for mobile */
        line-height: 1.4;
        letter-spacing: -0.3px;
    }

    .faq-icon {
        width: 28px; /* Slightly smaller icon */
        height: 28px;
        flex-shrink: 0; /* Prevents icon from squishing if text is long */
    }

    .faq-answer p {
        font-size: 14px; /* More readable body text for small screens */
        padding-bottom: 20px;
        line-height: 1.5;
    }

    /* Adjust max-height for mobile if content is long */
    .faq-item.active .faq-answer {
        max-height: 500px; 
    }
}




/* --- Privacy Policy Styles --- */
.privacy-section {
    padding: 100px 5%;
    background-color: #fbfbfd; /* Soft Apple Gray */
}

.privacy-container {
    max-width: 1200px;
    margin: 0 auto;
}

.privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 Grid for balance */
    gap: 30px;
    margin-top: 50px;
}

.privacy-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    border: 1px solid #f2f2f7;
    transition: all 0.3s ease;
}

.privacy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    border-color: var(--primary-blue);
}

.privacy-icon {
    width: 50px;
    height: 50px;
    background: rgba(49, 134, 199, 0.1);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 22px;
    margin-bottom: 20px;
}

.privacy-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.privacy-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #86868b;
}

.privacy-footer-note {
    margin-top: 60px;
    text-align: center;
    padding: 40px;
    background: rgba(49, 134, 199, 0.05);
    border-radius: 20px;
}

.privacy-footer-note p {
    font-size: 14px;
    color: #424245;
    max-width: 700px;
    margin: 0 auto 15px;
}

.last-updated {
    font-size: 12px;
    color: #86868b;
    font-weight: 600;
    text-transform: uppercase;
}
/* --- Privacy Policy Responsive Styles --- */

@media (max-width: 992px) {
    .privacy-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .privacy-section {
        padding: 50px 20px; /* Breatheable side padding */
    }

    .privacy-card {
        padding: 30px 25px; /* Reduce internal padding */
        border-radius: 24px; /* Slightly tighter corners */
    }

    .privacy-card h3 {
        font-size: 18px; /* Scale down heading */
        margin-bottom: 12px;
    }

    .privacy-card p {
        font-size: 14px; /* Standard mobile reading size */
    }

    .privacy-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .privacy-footer-note {
        margin-top: 40px;
        padding: 30px 20px;
    }

    .privacy-footer-note p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Disable hover effect on touch devices to avoid "sticky" hover states */
    .privacy-card:hover {
        transform: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    }
}





/* --- Terms of Service Styles --- */
.terms-section {
    padding: 100px 5%;
    background-color: #ffffff;
}

.terms-container {
    max-width: 1100px;
    margin: 0 auto;
}

.terms-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    margin-top: 50px;
}

/* Sticky Sidebar Nav */
.terms-nav {
    position: sticky;
    top: 180px; /* Aligned with your fixed header */
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.t-nav-link {
    padding: 15px 20px;
    text-decoration: none;
    color: #86868b;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.t-nav-link:hover {
    color: var(--primary-blue);
    background: #f5f5f7;
}

.t-nav-link.active {
    color: var(--primary-blue);
    background: rgba(49, 134, 199, 0.1);
}

/* Content Blocks */
.terms-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.terms-block h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.terms-block h3 i {
    color: var(--primary-blue);
    font-size: 20px;
}

.terms-block p {
    font-size: 16px;
    line-height: 1.7;
    color: #424245;
    margin-bottom: 20px;
}

.terms-block ul {
    list-style: none;
    padding-left: 0;
}

.terms-block ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #6e6e73;
}

.terms-block ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: bold;
}
/* --- Terms of Service Responsive Styles --- */

@media (max-width: 992px) {
    .terms-wrapper {
        grid-template-columns: 1fr; /* Stack sidebar and content */
        gap: 40px;
    }

    .terms-nav {
        position: relative; /* Remove sticky on tablet/mobile */
        top: 0;
        flex-direction: row; /* Make links horizontal */
        overflow-x: auto; /* Allow scrolling if many links */
        padding-bottom: 10px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .t-nav-link {
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .terms-section {
        padding: 50px 20px;
    }

    .terms-content {
        gap: 40px; /* Tighten space between blocks */
    }

    .terms-block h3 {
        font-size: 20px; /* Reduce heading size */
        gap: 10px;
    }

    .terms-block p {
        font-size: 15px; /* Better reading size for phones */
        line-height: 1.6;
    }

    .terms-block ul li {
        font-size: 14px;
        line-height: 1.5;
    }
}





/* --- Premium Toast Notifications --- */
.anju-status-msg {
    position: fixed;
    top: 100px; /* Sits below your fixed header */
    right: 20px;
    z-index: 9999;
    min-width: 320px;
    max-width: 420px;
    padding: 16px 20px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-main);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
     animation: toastIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    cursor: pointer;
}

/* Success Style: Emerald Glass */
.anju-status-msg.success {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(49, 134, 199, 0.2);
 }

.anju-status-msg.success i {
    color: var(--primary-blue);
    font-size: 20px;
}

/* Error Style: Ruby Glass */
.anju-status-msg.error {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 59, 48, 0.2);
 }

.anju-status-msg.error i {
    color: #ff3b30;
    font-size: 20px;
}

/* Typography inside Toast */
.msg-content {
    display: flex;
    flex-direction: column;
}

.msg-content .msg-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.msg-content .msg-desc {
    font-size: 13px;
    color: #636366;
    margin-top: 2px;
}

/* Animation: Pop and Slide */
@keyframes toastIn {
    from { transform: translateX(100%) scale(0.9); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

.toast-out {
    animation: toastOut 0.4s ease forwards !important;
}

@keyframes toastOut {
    to { transform: translateX(100%); opacity: 0; }
}

/* Mobile Adjustment: Centered at the top */
@media (max-width: 768px) {
    .anju-status-msg {
        top: 85px;
        left: 15px;
        right: 15px;
        min-width: auto;
    }
}

/* iPhone default link styling reset */
a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
}