/*
 * Custom styles for OnFashion E-commerce Template
 * Author: Your Name (Optional)
 * Date: July 12, 2025 (Updated)
 */

/* --- Color Variables based on User's Strict Palette: #ff73ec, #4cd2ff, #289e8e --- */
:root {
    /* User-defined core palette */
    --onfashion-primary-pink: #ff73ec;   /* Vibrant Pink / हल्का गुलाबी */
    --onfashion-primary-blue: #4cd2ff;   /* Sky Blue / हल्का नीला */
    --onfashion-primary-teal: #289e8e;   /* Teal / Dark Cyan / गहरा हरा-नीला */

    /* Derived colors for general use - light theme */
    --onfashion-light-pink: var(--onfashion-primary-pink);
    --onfashion-light-blue: var(--onfashion-primary-blue);
    --onfashion-deep-blue: var(--onfashion-primary-teal); /* Main brand color / bold elements */

    /* Backgrounds and neutrals for light theme */
    --onfashion-soft-bg: rgba(255, 115, 236, 0.05); /* Very light pink tint for soft backgrounds */
    --onfashion-pale-bg: rgba(76, 210, 255, 0.05);  /* Very light blue tint for pale backgrounds */
    --onfashion-white: #FFFFFF;        /* Pure White */
    --onfashion-off-white: #F8F8F8;    /* Slightly off white, for background separation */

    /* Text colors for light theme */
    --onfashion-dark-text: #333333;    /* Primary text (near black for readability) */
    --onfashion-medium-text: #666666;  /* Secondary text (medium grey) */
    --onfashion-light-text: #999999;   /* Subtle text (light grey) */
}

/* Update dark theme colors to integrate new palette */
html[data-bs-theme="dark"] {
    --bs-body-bg: #1A1A2E; /* Dark base background, slightly bluish for depth */
    --bs-body-color: var(--onfashion-white); /* Lighter text for dark theme */
    --bs-heading-color: var(--onfashion-white); /* Lighter headings */
    --bs-link-color: var(--onfashion-primary-blue); /* Links in sky blue */
    --bs-link-hover-color: var(--onfashion-primary-pink); /* Hover links in vibrant pink */
    --bs-card-bg: #2C2C4E; /* Darker card background, complements body-bg */
    --bs-border-color-translucent: rgba(255, 255, 255, 0.2); /* Slightly more visible borders */

    /* Text colors for dark theme */
    --onfashion-dark-text: var(--onfashion-white); /* Invert text for dark mode readability */
    --onfashion-medium-text: rgba(255, 255, 255, 0.8); /* Adjusted for better dark mode readability */
    --onfashion-light-text: rgba(255, 255, 255, 0.6); /* Adjusted for better dark mode readability */

    /* Main palette colors for dark theme - used directly */
    --onfashion-light-pink: var(--onfashion-primary-pink); /* Vibrant Pink */
    --onfashion-light-blue: var(--onfashion-primary-blue); /* Sky Blue */
    --onfashion-deep-blue: var(--onfashion-primary-teal);  /* Teal / Dark Cyan */
    --onfashion-emerald-green: var(--onfashion-primary-teal); /* Use primary teal for green accents */
}


/* General Body Styling */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    overflow-x: hidden; /* Prevents horizontal scroll */
    -webkit-font-smoothing: antialiased; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}

/* Main content area styling */
main {
    flex: 1;
    padding-top: 0;
    padding-bottom: 0;
}

/* Navbar Enhancements */
.navbar {
    border-bottom: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
    transition: background-color 0.3s ease;
    background-color: var(--bs-body-bg) !important;
    padding: 0.75rem 0 0; /* Reduced vertical padding, specifically padding-bottom to 0 */
    margin-bottom: 0; /* Ensure no margin below navbar */
    position: sticky; /* Make the navbar sticky */
    top: 0; /* Stick to the top of the viewport */
    z-index: 1020; /* Ensure it stays above most content but below modals */
}

.navbar-brand {
    letter-spacing: 1.5px; /* More prominent letter spacing */
    font-size: 1.9rem !important; /* Slightly larger */
    font-weight: 800; /* Extra bold */
    color: var(--onfashion-deep-blue) !important; /* Brand in deep blue */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* More noticeable shadow */
}

html[data-bs-theme="dark"] .navbar-brand {
    color: var(--onfashion-light-pink) !important; /* Brand in light pink for dark mode */
}


.navbar-nav .nav-item .nav-link {
    font-weight: 500;
    transition: color 0.2s ease-in-out, transform 0.2s ease; /* Adjusted transition */
    padding: 0.6rem 1rem; /* Standard padding for desktop */
    color: var(--bs-body-color) !important;
    border-bottom: none; /* No border-bottom for desktop */
    background-color: transparent; /* No background for desktop */
    border: none; /* No border for desktop */
    box-shadow: none; /* No shadow for desktop */
    margin: 0; /* No margin for desktop */
    border-radius: 0; /* No border-radius for desktop */
}

/* Active Nav Link Styling for Desktop */
.navbar-nav .nav-item .nav-link.active {
    font-weight: bold;
    color: var(--onfashion-light-pink) !important; /* Active link in light pink */
    border-bottom: 4px solid var(--onfashion-light-pink); /* Thicker border */
    padding-bottom: 0.3rem; /* Adjusted padding */
    transform: translateY(-2px); /* Slight lift */
}

/* Hover effect for Desktop Nav Links */
.navbar-nav .nav-item .nav-link:hover:not(.active) {
    color: var(--onfashion-light-blue) !important; /* Light blue on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}


/* Mobile-specific styles for navigation links (app-like buttons) */
@media (max-width: 991.98px) { /* Applies to screens smaller than Bootstrap's 'lg' breakpoint */
    .navbar-nav .nav-item .nav-link {
        padding: 0.7rem 1.2rem; /* Increased padding to make them look like buttons */
        margin: 0.25rem; /* Add some margin between buttons */
        border-radius: 0.75rem; /* Rounded corners for button look */
        background-color: rgba(76, 210, 255, 0.1); /* Light background for button effect */
        border: 1px solid rgba(76, 210, 255, 0.3); /* Subtle border */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
        color: var(--bs-body-color) !important; /* Ensure text color is readable */
        text-align: center; /* Center text in buttons */
        display: block; /* Make them block elements for full width in collapse */
    }

    .navbar-nav .nav-item .nav-link.active {
        background-color: var(--onfashion-primary-pink); /* Primary pink for active button */
        border: 1px solid var(--onfashion-primary-pink); /* Solid border matching background */
        box-shadow: 0 4px 10px rgba(255, 115, 236, 0.4); /* Stronger shadow for active */
        color: var(--onfashion-white) !important; /* White text for active */
    }

    .navbar-nav .nav-item .nav-link:hover:not(.active) {
        background-color: var(--onfashion-primary-blue); /* Primary blue on hover */
        border-color: var(--onfashion-primary-blue); /* Solid border matching background */
        color: var(--onfashion-white) !important; /* White text on hover */
        box-shadow: 0 4px 10px rgba(76, 210, 255, 0.4); /* Stronger shadow for hover */
    }
}


/* Navbar Toggle Icon */
.navbar-toggler-icon {
    filter: invert(var(--bs-navbar-toggler-icon-filter));
}
.navbar-toggler {
    border-color: var(--bs-border-color-translucent) !important;
}

/* Cart badge in Navbar */
.cart-badge {
    font-size: 0.8rem; /* Slightly larger badge */
    padding: 0.3em 0.7em;
    vertical-align: middle; /* Align middle */
    animation: pulse 1.5s infinite; /* Added a subtle pulse effect */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* --- Header Search Bar (Desktop View) --- */
.header-search-input {
    border-radius: 50px 0 0 50px !important;
    border-color: var(--onfashion-light-blue) !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    padding: 0.30rem 1rem !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
}

.header-search-input:focus {
    border-color: var(--onfashion-light-pink) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 115, 236, 0.2) !important; /* Using primary pink with transparency */
}

.header-search-btn {
    background-color: var(--onfashion-deep-blue) !important;
    color: var(--onfashion-white) !important;
    border: 1px solid var(--onfashion-deep-blue) !important;
    border-radius: 0 50px 50px 0 !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.header-search-btn:hover {
    background-color: var(--onfashion-light-pink) !important;
    color: var(--onfashion-dark-text) !important;
    border-color: var(--onfashion-light-pink) !important;
}


/* --- Hero Section Styles --- */
.hero-section {
    height: 60vh; /* Changed from 70vh to 60vh */
    min-height: 400px; /* Changed from 500px to 400px */
    background: transparent; /* यह transparent होना चाहिए ताकि #heroBackgroundSlider दिखे */
    position: relative; /* ताकि इसके अंदर के children को absolute position कर सकें */
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically center content of the section */
    justify-content: center; /* Horizontally center content */
    border-top-left-radius: 1.5rem; /* Added border-radius */
    border-top-right-radius: 1.5rem; /* Added border-radius */
}

/* नया बैकग्राउंड स्लाइडर div */
#heroBackgroundSlider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* इमेज को पूरी तरह से कवर करने के लिए स्केल करें */
    background-position: center; /* इमेज को सेंटर करें */
    background-repeat: no-repeat; /* इमेज को दोहराएं नहीं */
    z-index: -1; /* कंटेंट (टेक्स्ट, बटन, आइकन) के पीछे रखें */
    transition: background-image 0.5s ease-in-out, opacity 0.5s ease-in-out; /* स्मूथ ट्रांजीशन */
    opacity: 0; /* शुरू में अदृश्य - JavaScript इसे 1 पर सेट करेगा */
}

/* डार्क थीम के लिए ओवरले या अलग इमेज */
html[data-bs-theme="dark"] .hero-section {
    /* यदि आप डार्क थीम में एक अलग ओवरले या इमेज चाहते हैं, तो यहाँ जोड़ें */
    /* उदाहरण: background: linear-gradient(135deg, rgba(26,26,46,0.8) 0%, rgba(44,44,78,0.8) 100%); */
}
html[data-bs-theme="dark"] #heroBackgroundSlider {
    /* यदि डार्क थीम के लिए अलग बैकग्राउंड इमेज चाहिए */
    /* background-image: url('../static/images/hero_bg_dark_1.jpg'); */
}


.hero-title {
    font-size: 3.2rem; /* Reduced from 3.8rem */
    font-weight: 900; /* Bolder */
    line-height: 1.1;
    color: var(--onfashion-deep-blue); /* Deep blue for main title */
    text-shadow: 3px 3px 8px rgba(0,0,0,0.2); /* More pronounced shadow */
    max-width: 950px;
}

html[data-bs-theme="dark"] .hero-title {
    color: var(--bs-heading-color); /* Updated for dark theme */
}

.hero-subtitle {
    font-size: 1.2rem; /* Reduced from 1.4rem */
    color: var(--onfashion-medium-text);
    max-width: 750px;
}

html[data-bs-theme="dark"] .hero-subtitle {
    color: var(--bs-body-color);
}

/* Highlight text color */
.text-onfashion-pink {
    color: var(--onfashion-light-pink) !important;
}
.text-onfashion-blue {
    color: var(--onfashion-light-blue) !important;
}

/* Hero Icon (for the bag-heart icon) */
.hero-icon {
    font-size: 18rem; /* Very large icon */
    color: var(--onfashion-light-blue); /* Light blue color */
    opacity: 0.6; /* Slightly transparent */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); /* Subtle shadow */
    transition: transform 0.5s ease-out; /* Smooth transition */
}

.hero-icon:hover {
    transform: scale(1.05); /* Slight grow on hover */
}

html[data-bs-theme="dark"] .hero-icon {
    color: var(--onfashion-light-pink); /* Light pink for dark theme */
}


/* Hero Button - SCROLLING IMAGE BACKGROUND */
.hero-btn {
    background-image: url('../static/images/button_texture.png'); /* <<< UPDATE THIS PATH TO YOUR IMAGE */
    background-size: 400% 100%; /* Make the background wider than the button to allow scrolling */
    background-position: 0% 0%; /* Start position */
    background-repeat: repeat-x; /* Repeat horizontally */

    color: var(--onfashion-white); /* Text color for the button */
    border: 2px solid var(--onfashion-primary-teal); /* Added teal border using variable */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; /* Added border transition for highlight */
    padding: 1rem 3rem; /* Reduced padding from 1.1rem 3.8rem */
    font-weight: 700; /* Bolder font weight */
    border-radius: 50px;
    letter-spacing: 1.5px; /* More letter spacing */
    text-transform: uppercase;
    font-size: 1.1rem; /* Reduced from 1.2rem */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Stronger initial shadow */

    animation: buttonBgScroll 18s linear infinite; /* Adjusted time for smoother, slower scroll */
    cursor: pointer; /* Ensure default pointer cursor */
}

/* Hover effect for the button */
.hero-btn:hover {
    transform: translateY(-8px); /* Reduced lift from -10px */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7); /* Even stronger shadow on hover for highlight */
    color: var(--onfashion-white);
    animation-play-state: paused; /* Pause animation on hover */
    /* Add a subtle background-position reset on hover for a cleaner look */
    background-position: 0% 0%;
    border: 5px solid var(--onfashion-light-pink); /* Highlight with a thicker border */
}

/* Keyframe animation for the scrolling background image */
@keyframes buttonBgScroll {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; } /* Scrolls the image from left to right */
}


/* Animations for general content (used in hero section) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); } /* More vertical movement */
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight { /* Added for the hero-icon */
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s forwards cubic-bezier(0.2, 0.8, 0.2, 1); /* Slower, smoother animation */
}
.animate-fade-in-up.delay-1 {
    animation-delay: 0.3s; /* Slightly longer delay */
}
.animate-fade-in-up.delay-2 {
    animation-delay: 0.6s; /* Slightly longer delay */
}
.animate-fade-in-right { /* Applied to hero-icon's parent div */
    opacity: 0;
    transform: translateX(50px);
    animation: fadeInRight 1.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
    animation-delay: 0.8s; /* Delay to appear after text */
}


/* --- Categories Bar Styling --- */
.category-bar {
    background-color: var(--onfashion-light-blue); /* Light blue background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Slightly more visible border */
    padding: 0; /* Reduced from 1rem 0 */
    box-shadow: inset 0 -3px 10px rgba(0,0,0,0.15); /* Stronger inset inset shadow */
}
html[data-bs-theme="dark"] .category-bar {
    background: linear-gradient(135deg, #2C2C4E 0%, #3C3C6E 100%); /* Darker blue-purple gradient for dark theme */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); /* Darker border */
}

.category-btn {
    background-color: var(--onfashion-white); /* White for category buttons */
    color: var(--onfashion-dark-text);
    border: 2px solid var(--onfashion-light-blue); /* Thicker light blue border */
    font-weight: 700; /* Bolder */
    white-space: nowrap;
    transition: all 0.3s ease;
    border-radius: 40px; /* More rounded */
    padding: 0.7rem 1.5rem; /* Reduced from 0.8rem 2rem */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Stronger shadow */
}

.category-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-white); /* White text on hover for contrast */
    border-color: var(--onfashion-light-pink);
    transform: translateY(-7px); /* Reduced lift from -10px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Reduced shadow from 0.55 */
}
html[data-bs-theme="dark"] .category-btn {
    background-color: #3C3C6E; /* Darker background for dark theme buttons */
    color: var(--bs-body-color);
    border-color: #4C4C8E;
}
html[data-bs-theme="dark"] .category-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text); /* Keep dark text for light pink hover */
    border-color: var(--onfashion-light-pink);
}

/* --- Search Section Styling (Home Page) --- */
.search-section {
    background-color: transparent; /* Changed to transparent */
    padding: 0; /* Reduced from 2rem 0 */
    border-bottom: none; /* Removed border */
    margin-top: 0; /* Changed from 2mm to 0 */
}
html[data-bs-theme="dark"] .search-section {
    background-color: transparent; /* Changed to transparent */
}

.search-section .input-group-lg .form-control {
    padding: 1rem 1.4rem; /* Reduced from 1.3rem 1.7rem */
    font-size: 1.1rem; /* Reduced from 1.2rem */
    border-radius: 50px 0 0 50px;
    border-color: var(--onfashion-light-blue);
    background-color: var(--onfashion-white);
    color: var(--onfashion-dark-text);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* Stronger shadow */
}

html[data-bs-theme="dark"] .search-section .input-group-lg .form-control {
    background-color: #2C2C4E;
    color: var(--bs-body-color);
    border-color: var(--onfashion-deep-blue);
}


.search-section .input-group-lg .form-control:focus {
    border-color: var(--onfashion-light-pink);
    box-shadow: 0 0 0 0.3rem rgba(255, 115, 236, 0.3), 0 5px 20px rgba(0,0,0,0.2); /* Using primary pink with transparency */
    outline: none;
}

.search-btn-main {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
    border: 2px solid var(--onfashion-deep-blue);
    font-weight: 800; /* Even bolder */
    transition: all 0.3s ease;
    padding: 1rem 2.2rem; /* Reduced from 1.3rem 2.8rem */
    border-radius: 0 50px 50px 0;
    letter-spacing: 1.5px; /* More letter spacing */
    text-transform: uppercase;
    font-size: 1.1rem; /* Reduced from 1.2rem */
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); /* Stronger shadow */
}

.search-btn-main:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-light-pink);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); /* Reduced shadow from 0.5 */
    transform: translateY(-5px); /* Reduced lift from -7px */
}


/* Flash Messages */
.alert {
    border-radius: 1rem; /* More rounded */
    font-size: 1rem; /* Slightly larger font */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow */
    border: none;
    padding: 1rem 1.2rem; /* Reduced from 1.2rem 1.5rem */
}
.alert-success { background-color: rgba(40, 158, 142, 0.2); color: var(--onfashion-primary-teal); }
.alert-info { background-color: rgba(76, 210, 255, 0.2); color: var(--onfashion-primary-blue); }
.alert-warning { background-color: rgba(255, 115, 236, 0.2); color: var(--onfashion-primary-pink); }
.alert-danger { background-color: rgba(255, 115, 236, 0.3); color: var(--onfashion-primary-pink); }

html[data-bs-theme="dark"] .alert-success { background-color: rgba(40, 158, 142, 0.4); color: var(--onfashion-primary-teal); border: 1px solid rgba(40, 158, 142, 0.5); }
html[data-bs-theme="dark"] .alert-info { background-color: rgba(76, 210, 255, 0.4); color: var(--onfashion-primary-blue); border: 1px solid rgba(76, 210, 255, 0.5); }
html[data-bs-theme="dark"] .alert-warning { background-color: rgba(255, 115, 236, 0.4); color: var(--onfashion-primary-pink); border: 1px solid rgba(255, 115, 236, 0.5); }
html[data-bs-theme="dark"] .alert-danger { background-color: rgba(255, 115, 236, 0.5); color: var(--onfashion-primary-pink); border: 1px solid rgba(255, 115, 236, 0.6); }


/* --- Section Headings --- */
.section-heading {
    color: var(--onfashion-deep-blue);
    font-weight: 900; /* Extra bold */
    font-size: 2.8rem; /* Reduced from 3.5rem */
    margin-bottom: 3rem !important; /* Reduced from 4.5rem */
    position: relative;
    padding-bottom: 0.8rem; /* Reduced from 1rem */
    letter-spacing: 1.2px; /* More letter spacing */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Stronger shadow */
}

html[data-bs-theme="dark"] .section-heading {
    color: var(--bs-heading-color);
}

.section-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 150px; /* Wider underline */
    height: 6px; /* Thicker underline */
    background-color: var(--onfashion-light-pink);
    border-radius: 4px; /* More rounded */
    box-shadow: 0 3px 8px rgba(0,0,0,0.2); /* Stronger shadow */
}

/* --- Product Card Styling --- */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.product-card {
    border: none;
    border-radius: 1.5rem; /* More rounded */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    background-color: var(--bs-card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow */
}

.card-link:hover .product-card {
    transform: translateY(-12px); /* Reduced lift from -15px */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); /* Reduced shadow from 0.7 */
    border: 4px solid var(--onfashion-light-blue); /* Thicker light blue border on hover */
}

.product-card .card-img-top {
    height: 220px; /* Slightly taller images */
    object-fit: cover; /* Ensures image covers the area, cropping if needed */
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}

.product-card .card-body {
    padding: 1rem; /* Reduced from 2rem */
}

/* Product Title Shortening */
.product-title-short {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 1.4rem; /* Reduced from 1.5rem */
    font-weight: 700; /* Bolder */
    color: var(--onfashion-dark-text);
    margin-bottom: 0.6rem;
}
html[data-bs-theme="dark"] .product-title-short {
    color: var(--bs-body-color);
}

.product-card .h5 { /* For product price */
    color: var(--onfashion-white) !important; /* Changed to white */
    font-weight: 800; /* Extra bold */
    font-size: 1.5rem; /* Reduced from 1.6rem */
    margin-bottom: 0;
}
html[data-bs-theme="dark"] .product-card .h5 {
    color: var(--onfashion-white) !important; /* Changed to white */
}

.product-card .border-top {
    border-color: var(--bs-border-color-translucent) !important;
}


/* Product Button Styling */
.product-btn {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border: 2px solid var(--onfashion-light-pink); /* Thicker border */
    font-weight: 700; /* Bolder */
    transition: all 0.3s ease, border-radius 0.3s ease; /* Added border-radius transition */
    border-radius: 1rem; /* More rounded */
    padding: 0.7rem 1.2rem; /* Reduced from 0.9rem 1.6rem */
    font-size: 1rem; /* Reduced from 1.1rem */
    text-transform: uppercase;
    letter-spacing: 1px; /* More letter spacing */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Stronger shadow */
}

.product-btn:hover {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
    border-color: var(--onfashion-deep-blue);
    transform: translateY(-4px); /* Reduced lift from -5px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Reduced shadow from 0.45 */
    border-radius: 1.5rem; /* More rounded on hover for highlight */
}

.product-btn-alt { /* For New Arrivals, different button style */
    background-color: var(--onfashion-light-blue);
    color: var(--onfashion-dark-text);
    border: 2px solid var(--onfashion-light-blue); /* Thicker border */
    font-weight: 700;
    transition: all 0.3s ease, border-radius 0.3s ease; /* Added border-radius transition */
    border-radius: 1rem;
    padding: 0.7rem 1.2rem; /* Reduced from 0.9rem 1.6rem */
    font-size: 1rem; /* Reduced from 1.1rem */
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.product-btn-alt:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-light-pink);
    transform: translateY(-4px); /* Reduced lift from -5px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Reduced shadow from 0.45 */
    border-radius: 1.5rem; /* More rounded on hover for highlight */
}


/* New Badge Styling */
.badge.new-badge {
    background-color: var(--onfashion-deep-blue) !important;
    color: var(--onfashion-white) !important;
    font-size: 0.8em; /* Reduced from 0.85em */
    padding: 0.5em 0.7em; /* Reduced from 0.7em 0.9em */
    border-radius: 0.5rem; /* More rounded */
    vertical-align: middle;
    letter-spacing: 0.8px; /* More letter spacing */
}

/* Placeholder image styling */
.placeholder-img {
    background-color: rgba(76, 210, 255, 0.1) !important; /* Light blue tint */
    height: 320px;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}
html[data-bs-theme="dark"] .placeholder-img {
    background-color: rgba(40, 158, 142, 0.3) !important; /* Dark teal tint */
}
.placeholder-img .bi-image {
    color: rgba(40, 158, 142, 0.5) !important; /* Medium teal */
}
html[data-bs-theme="dark"] .placeholder-img .bi-image {
    color: rgba(76, 210, 255, 0.5) !important; /* Medium blue */
}


/* --- Footer Styling --- */
footer {
    border-top: 1px solid var(--bs-border-color-translucent);
    background-color: var(--onfashion-deep-blue) !important; /* Deep blue footer */
    padding-top: 4rem; /* Reduced from 5rem */
    padding-bottom: 4rem; /* Reduced from 5rem */
    color: rgba(255, 255, 255, 0.95); /* Slightly brighter text */
}

footer h5 {
    font-weight: bold;
    color: var(--onfashion-light-pink);
    margin-bottom: 1.5rem; /* Reduced from 2rem */
    letter-spacing: 0.8px; /* More letter spacing */
    font-size: 1.3rem; /* Reduced from 1.5rem */
}

footer ul {
    margin-bottom: 0;
    padding-left: 0;
}

footer ul li {
    margin-bottom: 0.7rem; /* Reduced from 1rem */
}

footer a {
    color: var(--onfashion-light-blue);
    transition: color 0.3s ease-in-out;
    text-decoration: none;
    font-size: 1.05rem; /* Slightly larger link text */
}

footer a:hover {
    color: var(--onfashion-light-pink);
    text-decoration: underline !important;
}

footer .text-muted {
    color: rgba(255, 255, 255, 0.8) !important; /* Brighter muted text */
}

footer .border-secondary {
    border-color: rgba(255, 255, 255, 0.3) !important; /* More visible border */
}


/* --- Cart Page Styles --- */

.cart-section {
    background-color: var(--onfashion-off-white); /* Using off-white for light theme */
    padding: 3rem 0; /* Reduced from 4rem 0 */
}

html[data-bs-theme="dark"] .cart-section {
    background-color: var(--bs-body-bg); /* Using dark body background for dark theme */
}

.cart-heading {
    color: var(--onfashion-deep-blue);
    font-size: 2.6rem; /* Reduced from 3.2rem */
    font-weight: 900; /* Extra bold */
    margin-bottom: 2.5rem; /* Reduced from 3.5rem */
    text-align: center;
}

html[data-bs-theme="dark"] .cart-heading {
    color: var(--bs-heading-color);
}

.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px; /* Reduced from 20px */
}

.cart-table thead th {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
    padding: 1.2rem; /* Reduced from 1.5rem */
    font-weight: 700; /* Bolder */
    font-size: 1.1rem; /* Reduced from 1.25rem */
    border-bottom: none;
    border-radius: 1rem; /* More rounded */
}
.cart-table thead th:first-child { border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; }
.cart-table thead th:last-child { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }


.cart-table tbody tr {
    background-color: var(--bs-card-bg);
    border-radius: 1.2rem; /* More rounded */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cart-table tbody tr:hover {
    transform: translateY(-8px); /* Reduced lift from -10px */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); /* Reduced shadow */
}

.cart-table tbody td {
    padding: 1.4rem; /* Reduced from 1.8rem */
    vertical-align: middle;
    border-top: none;
    color: var(--bs-body-color);
}

/* Specific styling for table cells */
.cart-table tbody td:first-child { border-top-left-radius: 1.2rem; border-bottom-left-radius: 1.2rem; }
.cart-table tbody td:last-child { border-top-right-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }

.cart-item-img {
    width: 90px; /* Reduced from 100px */
    height: 90px; /* Reduced from 100px */
    object-fit: cover;
    border-radius: 0.8rem; /* More rounded */
    border: 3px solid var(--onfashion-light-pink); /* Thicker light pink border */
    flex-shrink: 0;
}

.cart-item-name {
    font-weight: 700; /* Bolder */
    color: var(--onfashion-dark-text);
    font-size: 1.2rem; /* Reduced from 1.3rem */
    flex-grow: 1;
}

html[data-bs-theme="dark"] .cart-item-name {
    color: var(--bs-body-color);
}

.cart-item-size,
.cart-item-price {
    color: var(--onfashion-medium-text);
    font-size: 1rem; /* Reduced from 1.1rem */
}

html[data-bs-theme="dark"] .cart-item-size,
html[data-bs-theme="dark"] .cart-item-price {
    color: var(--bs-body-color);
}


.quantity-input {
    width: 70px; /* Reduced from 80px */
    text-align: center;
    border: 2px solid var(--onfashion-light-blue); /* Thicker border */
    border-radius: 0.8rem; /* More rounded */
    padding: 0.4rem; /* Reduced from 0.6rem */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 1rem; /* Reduced from 1.1rem */
}

.quantity-input:focus {
    border-color: var(--onfashion-light-pink);
    outline: none;
    box-shadow: 0 0 0 0.3rem rgba(255, 115, 236, 0.3); /* Using primary pink with transparency */
}


.remove-item-btn {
    background-color: transparent;
    border: none;
    color: var(--onfashion-primary-pink); /* Using primary pink for danger */
    font-size: 1.4rem; /* Reduced from 1.6rem */
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0.6rem; /* Reduced from 0.8rem */
}

.remove-item-btn:hover {
    color: darken(var(--onfashion-primary-pink), 10%); /* Darken primary pink on hover */
    transform: scale(1.2); /* Reduced grow from 1.3 */
}

.cart-summary {
    background-color: var(--bs-card-bg);
    border-radius: 1.5rem; /* More rounded */
    padding: 2.5rem; /* Reduced from 3rem */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow */
    border: 1px solid var(--bs-border-color-translucent);
}

.cart-summary h4 {
    color: var(--onfashion-deep-blue);
    font-weight: 800; /* Extra bold */
    margin-bottom: 2rem; /* Reduced from 2.5rem */
    font-size: 1.8rem; /* Reduced from 2rem */
}

html[data-bs-theme="dark"] .cart-summary h4 {
    color: var(--bs-heading-color);
}

.cart-summary .list-group-item {
    background-color: transparent;
    border: none;
    padding: 0.8rem 0; /* Reduced from 1rem 0 */
    color: var(--bs-body-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem; /* Reduced from 1.15rem */
    border-bottom: 1px dashed var(--bs-border-color-translucent);
}
.cart-summary .list-group-item:last-child {
    border-bottom: none;
    margin-top: 1.2rem; /* Reduced from 1.5rem */
    padding-bottom: 0;
}

.cart-summary .list-group-item strong {
    color: var(--onfashion-white) !important; /* Changed to white */
    font-size: 1.3rem; /* Reduced from 1.4rem */
}

html[data-bs-theme="dark"] .cart-summary .list-group-item strong {
    color: var(--onfashion-white) !important; /* Changed to white */
}

.cart-summary .total-price {
    font-size: 2.2rem; /* Reduced from 2.5rem */
    font-weight: 900; /* Extra bold */
    color: var(--onfashion-light-pink);
}

/* Highlighted Checkout Button */
.checkout-btn {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
    border: 3px solid var(--onfashion-deep-blue); /* Thicker border */
    font-weight: 800; /* Extra bold */
    transition: all 0.3s ease, border-radius 0.3s ease; /* Added border-radius transition */
    padding: 1rem 3rem; /* Reduced from 1.2rem 3.5rem */
    border-radius: 50px;
    letter-spacing: 1.8px; /* More letter spacing */
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem; /* Reduced from 1.3rem */
    box-shadow: 0 8px 25px rgba(0,0,0,0.35); /* Stronger shadow */
}

.checkout-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-light-pink);
    transform: translateY(-8px); /* Reduced lift from -10px */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); /* Reduced shadow */
    border-radius: 1.5rem; /* More rounded on hover for highlight */
}

/* Update Cart button */
.update-cart-btn {
    background-color: var(--onfashion-light-blue);
    color: var(--onfashion-dark-text);
    border: 2px solid var(--onfashion-light-blue);
    font-weight: 700;
    transition: all 0.3s ease, border-radius 0.3s ease; /* Added border-radius transition */
    border-radius: 50px;
    padding: 0.7rem 2rem; /* Reduced from 0.9rem 2.5rem */
    font-size: 1.05rem; /* Reduced from 1.15rem */
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.update-cart-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-light-pink);
    transform: translateY(-4px); /* Reduced lift from -5px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    border-radius: 1.5rem; /* More rounded on hover for highlight */
}


.continue-shopping-btn {
    background-color: transparent;
    color: var(--onfashion-dark-text);
    border: 2px solid var(--onfashion-dark-text);
    font-weight: 600; /* Bolder */
    transition: all 0.3s ease, border-radius 0.3s ease; /* Added border-radius transition */
    padding: 0.7rem 2rem; /* Reduced from 0.9rem 2.5rem */
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    font-size: 1.05rem; /* Reduced from 1.15rem */
    letter-spacing: 0.8px; /* More letter spacing */
}

html[data-bs-theme="dark"] .continue-shopping-btn {
    color: var(--bs-body-color);
    border-color: var(--bs-body-color);
}

.continue-shopping-btn:hover {
    background-color: var(--onfashion-pale-bg); /* Using pale background variable */
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-pale-bg); /* Using pale background variable */
    transform: translateY(-3px); /* Reduced lift from -4px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-radius: 1.5rem; /* More rounded on hover for highlight */
}

/* Empty Cart Message */
.empty-cart-message {
    text-align: center;
    padding: 6rem 0; /* Reduced from 8rem 0 */
    font-size: 1.5rem; /* Reduced from 1.8rem */
    color: var(--onfashion-medium-text);
}

html[data-bs-theme="dark"] .empty-cart-message {
    color: var(--bs-body-color);
}

.empty-cart-message .bi-emoji-frown {
    font-size: 5rem; /* Reduced from 6rem */
    color: var(--onfashion-light-blue);
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

/* Responsive Adjustments for Cart */
@media (max-width: 767.98px) {
    .cart-table thead {
        display: none;
    }

    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
        display: block;
        width: 100%;
    }

    .cart-table tr {
        margin-bottom: 1.5rem; /* Reduced from 1.8rem */
        border-radius: 1.2rem;
        overflow: hidden;
    }

    .cart-table td {
        text-align: right;
        position: relative;
        padding-left: 55%;
    }

    .cart-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1.5rem; /* Reduced from 1.8rem */
        width: calc(45% - 1.5rem);
        text-align: left;
        font-weight: 700; /* Bolder */
        color: var(--onfashion-dark-text);
        font-size: 1rem; /* Reduced from 1.1rem */
    }
    html[data-bs-theme="dark"] .cart-table td::before {
        color: var(--bs-body-color);
    }

    .cart-table td.text-center {
        text-align: right !important;
    }

    .cart-table td:first-child {
        text-align: left !important;
    }

    .cart-item-img {
        margin-right: 1.2rem; /* Reduced from 1.5rem */
    }

    /* Adjust button width for small screens */
    .update-cart-btn, .continue-shopping-btn, .checkout-btn {
        width: 100%;
        margin-bottom: 0.8rem; /* Reduced from 1rem */
    }

    /* Mobile Hero Section adjustments */
    .hero-section {
        height: auto;
        min-height: 400px; /* Reduced from 450px */
        padding: 4rem 0; /* Reduced from 5rem 0 */
    }

    .hero-title {
        font-size: 2.2rem; /* Reduced from 2.5rem */
    }

    .hero-subtitle {
        font-size: 1rem; /* Reduced from 1.1rem */
    }

    /* Product Grid Mobile Adjustments */
    .products-page-section {
        padding: 2.5rem 0; /* Reduced from 3rem 0 */
    }
    .row.row-cols-1.row-cols-sm-2.row-cols-md-2.row-cols-lg-4.g-4 {
        /* This targets the product grid rows directly for mobile */
        display: flex;
        flex-wrap: wrap;
        margin-left: -0.5rem; /* Adjust for gutter */
        margin-right: -0.5rem; /* Adjust for gutter */
    }
    .product-grid-main > div, /* General product columns */
    .row.row-cols-1.row-cols-sm-2.row-cols-md-2.row-cols-lg-4.g-4 > .col { /* Specific col targeting for products */
        flex: 0 0 50%; /* Make each column take 50% width */
        max-width: 50%; /* Ensure max width is 50% */
        padding-left: 0.5rem; /* Add padding between columns */
        padding-right: 0.5rem; /* Add padding between columns */
        margin-bottom: 1.2rem; /* Space below each card */
    }
    .product-card {
        border-radius: 0.8rem; /* Reduced from 1rem */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    }
    .product-card .card-img-top {
        height: 140px; /* Further reduced from 160px for two per row */
    }
    .product-card .card-body {
        padding: 0.8rem; /* Further reduced from 1rem */
    }
    .product-title-short {
        font-size: 0.9rem; /* Further reduced from 1rem */
        margin-bottom: 0.4rem; /* Adjusted margin */
    }
    .product-card .h5 {
        font-size: 1rem; /* Further reduced from 1.1rem */
    }
    .product-btn,
    .product-btn-alt {
        padding: 0.5rem 0.8rem; /* Further reduced from 0.6rem 1rem */
        font-size: 0.8rem; /* Further reduced from 0.9rem */
    }
}


/* --- New Styles for Products Page Filters & Pagination --- */

.products-page-section {
    background-color: var(--onfashion-off-white); /* Using off-white for light theme */
    padding: 4rem 0; /* Reduced from 5rem */
}

html[data-bs-theme="dark"] .products-page-section {
    background-color: var(--bs-body-bg); /* Using dark body background for dark theme */
}

/* Removed .filter-sidebar styles as it's no longer a sidebar */

.filter-heading {
    color: var(--onfashion-deep-blue);
    font-weight: 800; /* Extra bold */
    font-size: 1.6rem; /* Reduced from 1.8rem */
    border-bottom: 4px solid var(--onfashion-light-pink); /* Thicker underline */
    padding-bottom: 0.8rem; /* Reduced from 1rem */
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}
html[data-bs-theme="dark"] .filter-heading {
    color: var(--bs-heading-color);
}

.filter-subheading {
    color: var(--onfashion-dark-text);
    font-weight: 700; /* Bolder */
    font-size: 1.1rem; /* Reduced from 1.25rem */
    margin-bottom: 0.8rem; /* Reduced from 1rem */
}
html[data-bs-theme="dark"] .filter-subheading {
    color: var(--bs-body-color);
}

.filter-input {
    border-radius: 0.8rem; /* More rounded */
    border: 2px solid var(--onfashion-light-blue);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0.6rem 1rem; /* Reduced from 0.7rem 1.2rem */
    font-size: 1rem; /* Reduced from 1.05rem */
}
.filter-input:focus {
    border-color: var(--onfashion-light-pink);
    box-shadow: 0 0 0 0.3rem rgba(255, 115, 236, 0.3); /* Using primary pink with transparency */
}

.filter-btn {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
    border: none;
    border-radius: 0.8rem;
    transition: background-color 0.2s ease;
    padding: 0.6rem 1rem; /* Reduced from 0.7rem 1.2rem */
    font-weight: 600;
}
.filter-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
}

.category-list-item {
    display: block;
    padding: 0.7rem 1rem; /* Reduced from 0.8rem 1.2rem */
    margin-bottom: 0.3rem; /* Reduced from 0.4rem */
    border-radius: 0.8rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 1.05rem; /* Reduced from 1.1rem */
}
.category-list-item:hover {
    background-color: var(--onfashion-pale-bg); /* Using pale background variable */
    color: var(--onfashion-dark-text);
}
.category-list-item.active {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text) !important;
    font-weight: 700;
}
html[data-bs-theme="dark"] .category-list-item.active {
    color: var(--onfashion-dark-text) !important;
}


.filter-select {
    border-radius: 0.8rem;
    border: 2px solid var(--onfashion-light-blue);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0.6rem 1rem; /* Reduced from 0.7rem 1.2rem */
    font-size: 1rem; /* Reduced from 1.05rem */
}
.filter-select:focus {
    border-color: var(--onfashion-light-pink);
    box-shadow: 0 0 0 0.3rem rgba(255, 115, 236, 0.3); /* Using primary pink with transparency */
}

.product-grid-main {
    margin-top: 1.5rem; /* Reduced from 2rem */
}

.product-category-name {
    font-weight: 600;
    color: var(--onfashion-medium-text) !important;
    font-size: 0.95rem; /* Reduced from 1rem */
}
html[data-bs-theme="dark"] .product-category-name {
    color: var(--bs-body-color) !important;
}


/* Pagination Styles */
.pagination-custom .page-item .page-link {
    border-radius: 0.8rem;
    margin: 0 0.2rem; /* Reduced from 0.3rem */
    background-color: var(--bs-card-bg);
    border: 2px solid var(--onfashion-light-blue);
    color: var(--onfashion-dark-text);
    transition: all 0.3s ease;
    padding: 0.7rem 1rem; /* Reduced from 0.8rem 1.2rem */
    font-size: 1.05rem; /* Reduced from 1.15rem */
}

html[data-bs-theme="dark"] .pagination-custom .page-item .page-link {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color-translucent);
}

.pagination-custom .page-item .page-link:hover {
    background-color: var(--onfashion-pale-bg); /* Using pale background variable */
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-pale-bg); /* Using pale background variable */
    transform: translateY(-2px); /* Reduced lift from -3px */
}

.pagination-custom .page-item.active .page-link {
    background-color: var(--onfashion-light-pink);
    border-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text) !important;
    font-weight: bold;
    transform: scale(1.05);
}
html[data-bs-theme="dark"] .pagination-custom .page-item.active .page-link {
    color: var(--onfashion-dark-text) !important;
}

/* Mobile Filter/Sort Bar */
/* (Add your mobile specific filter/sort bar styles here if needed) */



/* Bottom Navigation Bar Styles */
.bottom-nav {
    background-color: var(--bs-body-bg) !important; /* Use body background for consistency */
    border-top: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it's above other content */
    padding-bottom: env(safe-area-inset-bottom); /* For iPhone X notch */
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--onfashion-medium-text); /* Subtle color for inactive */
    font-size: 0.8rem; /* Smaller font for text */
    padding: 0.5rem 0.2rem;
    flex-grow: 1; /* Distribute space evenly */
    transition: all 0.2s ease;
    border-radius: 0.5rem; /* Slightly rounded for touch targets */
}

.bottom-nav-item i {
    font-size: 1.4rem; /* Icon size */
    margin-bottom: 0.2rem; /* Space between icon and text */
    transition: color 0.2s ease;
}

.bottom-nav-item span {
    font-weight: 600;
}

.bottom-nav-item:hover {
    color: var(--onfashion-light-blue); /* Highlight on hover */
    background-color: rgba(76, 210, 255, 0.08); /* Subtle background on hover */
}

.bottom-nav-item.active {
    color: var(--onfashion-primary-pink); /* Active item in primary pink */
    background-color: rgba(255, 115, 236, 0.1); /* Light pink background for active */
    font-weight: bold;
}

html[data-bs-theme="dark"] .bottom-nav-item {
    color: var(--onfashion-light-text);
}

html[data-bs-theme="dark"] .bottom-nav-item:hover {
    color: var(--onfashion-light-blue);
    background-color: rgba(76, 210, 255, 0.15);
}

html[data-bs-theme="dark"] .bottom-nav-item.active {
    color: var(--onfashion-primary-pink);
    background-color: rgba(255, 115, 236, 0.2);
}

/* New styles for top filters and sort section */
.top-filters-sort-section {
    background-color: var(--bs-card-bg); /* Use card background for the section */
    border: 1px solid var(--bs-border-color-translucent);
}

.filter-toggle-btn {
    background-color: var(--onfashion-light-blue);
    color: var(--onfashion-dark-text);
    border: 2px solid var(--onfashion-light-blue);
    font-weight: 700;
    transition: all 0.3s ease;
    border-radius: 0.8rem;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.filter-toggle-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-light-pink);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

html[data-bs-theme="dark"] .filter-toggle-btn {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
    border-color: var(--onfashion-deep-blue);
}

html[data-bs-theme="dark"] .filter-toggle-btn:hover {
    background-color: var(--onfashion-light-pink);
    color: var(--onfashion-dark-text);
    border-color: var(--onfashion-light-pink);
}

/* Adjust filter inputs and selects within the top section */
.top-filters-sort-section .filter-input,
.top-filters-sort-section .filter-select {
    width: 100%; /* Ensure they take full width in their columns */
}

/* Adjust category list for top filter */
.top-filters-sort-section .category-list-item {
    padding: 0.5rem 0; /* Adjust padding for a more compact dropdown-like list */
    font-size: 0.95rem;
}
.top-filters-sort-section .category-list-item.active {
    background-color: transparent; /* Remove background for active in dropdown */
    color: var(--onfashion-primary-pink) !important; /* Only highlight text */
}
.top-filters-sort-section .category-list-item:hover {
    background-color: var(--onfashion-pale-bg);
}

/* Ensure filter subheadings are visible */
.top-filters-sort-section .filter-subheading {
    color: var(--onfashion-dark-text); /* Ensure visibility */
}
html[data-bs-theme="dark"] .top-filters-sort-section .filter-subheading {
    color: var(--bs-body-color);
}

/* Product Detail Page Specific Styles */
.product-detail-title {
    font-size: 1.0rem; /* Slightly larger title */
    font-weight: 800;
    color: var(--onfashion-deep-blue);
    margin-bottom: 1.5rem;
}
html[data-bs-theme="dark"] .product-detail-title {
    color: var(--bs-heading-color);
}

.product-badge {
    font-size: 0.9rem;
    padding: 0.5em 0.8em;
    border-radius: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.product-price-display {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--onfashion-white) !important; /* Changed to white */
}

.product-section-heading {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--onfashion-dark-text);
    margin-bottom: 0.8rem;
}
html[data-bs-theme="dark"] .product-section-heading {
    color: var(--bs-body-color);
}

.product-description p {
    color: var(--onfashion-medium-text);
}
html[data-bs-theme="dark"] .product-description p {
    color: var(--bs-body-color);
}

.product-size-btn {
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--onfashion-deep-blue); /* Teal border */
    color: var(--onfashion-deep-blue); /* Teal text */
    transition: all 0.2s ease;
}
.product-size-btn:hover {
    background-color: var(--onfashion-deep-blue);
    color: var(--onfashion-white);
}
.product-size-btn.active {
    background-color: var(--onfashion-deep-blue) !important;
    color: var(--onfashion-white) !important;
    border-color: var(--onfashion-deep-blue) !important;
}
html[data-bs-theme="dark"] .product-size-btn {
    border-color: var(--onfashion-light-blue);
    color: var(--onfashion-light-blue);
}
html[data-bs-theme="dark"] .product-size-btn:hover {
    background-color: var(--onfashion-light-blue);
    color: var(--onfashion-dark-text);
}
html[data-bs-theme="dark"] .product-size-btn.active {
    background-color: var(--onfashion-light-blue) !important;
    color: var(--onfashion-dark-text) !important;
    border-color: var(--onfashion-light-blue) !important;
}

.quantity-input {
    /* Existing styles for quantity-input */
    border-color: var(--onfashion-light-blue); /* Ensure border color is themed */
    color: var(--onfashion-dark-text); /* Ensure text color is themed */
}
html[data-bs-theme="dark"] .quantity-input {
    color: var(--bs-body-color);
}
.quantity-input:focus {
    border-color: var(--onfashion-light-pink);
    box-shadow: 0 0 0 0.25rem rgba(255, 115, 236, 0.25);
}


.product-stock-info {
    font-size: 0.95rem;
    color: var(--onfashion-medium-text);
}
html[data-bs-theme="dark"] .product-stock-info {
    color: var(--bs-body-color);
}

.product-out-of-stock-alert {
    background-color: rgba(255, 115, 236, 0.2); /* Light pink alert */
    color: var(--onfashion-primary-pink);
    border: 1px solid rgba(255, 115, 236, 0.4);
    font-weight: 600;
}
html[data-bs-theme="dark"] .product-out-of-stock-alert {
    background-color: rgba(255, 115, 236, 0.3);
    border: 1px solid rgba(255, 115, 236, 0.5);
}

.product-additional-info {
    background-color: var(--onfashion-pale-bg); /* Very light blue tint */
    border: 1px solid var(--bs-border-color-translucent);
}
html[data-bs-theme="dark"] .product-additional-info {
    background-color: var(--bs-card-bg);
}

.product-details-list li strong {
    color: var(--onfashion-dark-text);
}
html[data-bs-theme="dark"] .product-details-list li strong {
    color: var(--bs-body-color);
}

.product-main-image {
    height: 300px; /* Fixed height for the container */
    object-fit: contain; /* Ensure full image is visible */
    background-color: var(--onfashion-off-white); /* Background for contained image */
    padding: 0.5px; /* Padding inside the container */
    border-radius: 1rem; /* Consistent rounded corners */
}

.product-thumbnail {
    border-radius: 0.75rem; /* Slightly smaller rounded corners for thumbnails */
    border: 2px solid var(--bs-border-color-translucent);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.product-thumbnail:hover {
    border-color: var(--onfashion-light-pink);
    transform: translateY(-2px);
}

.product-image-carousel .carousel-indicators button {
    background-color: var(--onfashion-light-blue);
    border: 1px solid var(--onfashion-light-blue);
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.product-image-carousel .carousel-indicators button.active {
    background-color: var(--onfashion-primary-pink);
    border-color: var(--onfashion-primary-pink);
    opacity: 1;
}
html[data-bs-theme="dark"] .product-image-carousel .carousel-indicators button {
    background-color: var(--onfashion-deep-blue);
    border-color: var(--onfashion-deep-blue);
}
html[data-bs-theme="dark"] .product-image-carousel .carousel-indicators button.active {
    background-color: var(--onfashion-primary-pink);
    border-color: var(--onfashion-primary-pink);
}