/* =========================================================
   APEXZON E-COMMERCE THEME
   ASP.NET Core + Bootstrap 5
   Design direction based on supplied client references:
   - Purple / Magenta primary palette
   - Clean white surfaces
   - Soft lavender/pink backgrounds
   - Rounded cards and controls
   - Modern ecommerce spacing
   - Mobile-first responsive behavior
   ========================================================= */

:root {
    --primary: #6d28d9;
    --primary-dark: #4c1d95;
    --primary-light: #f3e8ff;
    --secondary: #d946ef;
    --secondary-dark: #c026d3;
    --accent: #ec4899;
    --accent-light: #fce7f3;
    --text-dark: #17172b;
    --text: #25243a;
    --text-muted: #77758b;
    --text-light: #9a98aa;
    --bg: #ffffff;
    --bg-light: #faf9ff;
    --bg-soft: #f7f3ff;
    --border: #ece8f5;
    --border-dark: #ddd6fe;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #2563eb;
    --white: #ffffff;
    --black: #111111;
    --gradient-primary: linear-gradient(135deg, #5b21b6 0%, #7c3aed 48%, #d946ef 100%);
    --gradient-soft: linear-gradient(135deg, #f5edff 0%, #fff1f9 100%);
    --gradient-banner: linear-gradient(135deg, #21145f 0%, #39208d 50%, #8b238e 100%);
    --shadow-xs: 0 2px 8px rgba(54, 34, 105, .06);
    --shadow-sm: 0 5px 18px rgba(54, 34, 105, .08);
    --shadow: 0 10px 30px rgba(54, 34, 105, .10);
    --shadow-lg: 0 18px 45px rgba(54, 34, 105, .14);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --transition: .25s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-light);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.55;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

    a:hover {
        color: var(--secondary-dark);
    }

img {
    max-width: 100%;
}

button,
.btn,
.form-control,
.form-select {
    font-family: inherit;
}

::selection {
    background: rgba(124, 58, 237, .18);
    color: var(--primary-dark);
}

:focus-visible {
    outline: 3px solid rgba(217, 70, 239, .28);
    outline-offset: 2px;
}

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

.navbar {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
    z-index: 1030;
}

    .navbar.scrolled {
        box-shadow: var(--shadow-sm);
    }

.navbar-brand {
    color: var(--primary) !important;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.4px;
}

    .navbar-brand img {
        max-height: 52px;
        width: auto;
        object-fit: contain;
    }

.nav-link {
    color: var(--text) !important;
    font-weight: 600;
    margin-left: 8px;
    padding: 9px 12px !important;
    border-radius: 10px;
    transition: all var(--transition);
}

    .nav-link:hover,
    .nav-link:focus {
        color: var(--primary) !important;
        background: var(--primary-light);
    }

.navbar .nav-link.active {
    color: var(--primary) !important;
    background: var(--primary-light);
}

.navbar-toggler {
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 7px 9px;
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .12);
    }

.navbar .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
}

/* =========================================================
   TOP WELCOME BAR
   ========================================================= */

.top-bar,
.welcome-bar {
    background: var(--gradient-primary);
    color: var(--white);
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1px;
}

    .top-bar a,
    .welcome-bar a {
        color: #fff;
    }

/* =========================================================
   HEADER ACTION ICONS
   ========================================================= */

.btn-icon {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-xs);
}

    .btn-icon i {
        font-size: 21px;
        transition: transform var(--transition);
    }

    .btn-icon:hover {
        background: var(--primary-light);
        color: var(--primary);
        border-color: var(--border-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

        .btn-icon:hover i {
            transform: scale(1.08);
        }

.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 39px;
    height: 39px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

    .wishlist-btn:hover,
    .wishlist-btn.active {
        color: var(--accent);
        border-color: #f5b7d6;
        background: #fff5fa;
        transform: scale(1.06);
    }

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

.cart-badge {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(109,40,217,.3);
}

/* =========================================================
   SEARCH BOX
   ========================================================= */

.search-box {
    position: relative;
    width: 320px;
}

    .search-box .form-control {
        height: 48px;
        padding: 0 100px 0 48px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
        color: var(--text);
        font-size: 15px;
        box-shadow: var(--shadow-xs);
        transition: all var(--transition);
    }

        .search-box .form-control::placeholder {
            color: #aaa8b7;
        }

        .search-box .form-control:focus {
            border-color: #b89af4;
            box-shadow: 0 0 0 .2rem rgba(124,58,237,.10);
        }

    .search-box .search-icon {
        position: absolute;
        left: 17px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 19px;
        z-index: 2;
    }

    .search-box .search-btn,
    .search-box .btn {
        position: absolute;
        right: 4px;
        top: 4px;
        bottom: 4px;
        min-width: 88px;
        border-radius: 11px;
        background: var(--gradient-primary);
        color: #fff;
        border: none;
        font-weight: 700;
    }

        .search-box .search-btn:hover,
        .search-box .btn:hover {
            color: #fff;
            filter: brightness(.97);
        }

@media (max-width: 991.98px) {
    .search-box {
        width: 100%;
        margin: 12px 0;
    }
}

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

.btn-theme,
.btn-primary-theme {
    background: var(--gradient-primary);
    color: #fff !important;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    padding: 10px 21px;
    box-shadow: 0 7px 18px rgba(109,40,217,.18);
    transition: all var(--transition);
}

    .btn-theme:hover,
    .btn-primary-theme:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 11px 24px rgba(109,40,217,.25);
    }

.btn-outline-theme {
    border: 1.5px solid var(--primary);
    color: var(--primary) !important;
    background: #fff;
    border-radius: 12px;
    font-weight: 700;
    padding: 9px 20px;
    transition: all var(--transition);
}

    .btn-outline-theme:hover {
        background: var(--primary);
        color: #fff !important;
        transform: translateY(-1px);
    }

.btn-cart-sm {
    border: none;
    background: var(--gradient-primary);
    color: #fff;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: all var(--transition);
    white-space: nowrap;
}

    .btn-cart-sm:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(109,40,217,.22);
    }

.btn-checkout {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    transition: all var(--transition);
}

    .btn-checkout:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(109,40,217,.24);
    }

/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title {
    color: var(--text-dark);
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -.3px;
}

.section-subtitle {
    color: var(--text-muted);
    margin-bottom: 0;
}

.heading-line {
    width: 65px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 20px;
}

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

.hero-section,
.hero-banner {
    position: relative;
    overflow: hidden;
    background: var(--gradient-banner);
    color: #fff;
    border-radius: var(--radius-lg);
    min-height: 360px;
    box-shadow: var(--shadow-lg);
}

    .hero-section::before,
    .hero-banner::before {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        right: -80px;
        top: -130px;
        border-radius: 50%;
        background: rgba(236,72,153,.18);
        filter: blur(3px);
    }

    .hero-section::after,
    .hero-banner::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        left: -100px;
        bottom: -140px;
        border-radius: 50%;
        background: rgba(124,58,237,.35);
    }

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .hero-title span {
        color: #f5a5e8;
    }

.hero-subtitle {
    color: rgba(255,255,255,.88);
    font-size: 1.05rem;
    max-width: 520px;
}

.hero-image {
    position: relative;
    z-index: 2;
}

    .hero-image img {
        max-height: 390px;
        width: 100%;
        object-fit: contain;
    }

/* =========================================================
   PROMO BANNER
   ========================================================= */

.promo-banner {
    background: var(--gradient-banner);
    color: #fff;
    border-radius: 18px;
    padding: 24px 28px;
    overflow: hidden;
    position: relative;
}

    .promo-banner h2,
    .promo-banner h3,
    .promo-banner h4 {
        font-weight: 800;
    }

    .promo-banner p {
        color: rgba(255,255,255,.82);
    }

    .promo-banner .btn {
        background: linear-gradient(135deg, #d946ef, #ec4899);
        border: none;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
    }

/* =========================================================
   CAROUSEL
   ========================================================= */

.carousel-item img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 38px;
    height: 38px;
    background-size: 45%;
    background-color: rgba(255,255,255,.92);
    border-radius: 50%;
    filter: none;
    box-shadow: var(--shadow-sm);
}

.carousel-control-prev,
.carousel-control-next {
    width: 58px;
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255,255,255,.65);
}

.carousel-indicators .active {
    width: 24px;
    border-radius: 8px;
    background-color: #fff;
}

/* =========================================================
   TRUST / FEATURE CARDS
   ========================================================= */

.feature-card {
    background: #fff;
    padding: 22px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
    height: 100%;
    text-align: center;
}

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: #ded0fb;
    }

.feature-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--primary);
    background: var(--primary-light);
}

.feature-card:nth-child(2) .feature-icon {
    color: var(--info);
    background: #eff6ff;
}

.feature-card:nth-child(3) .feature-icon {
    color: var(--success);
    background: #ecfdf3;
}

.feature-card:nth-child(4) .feature-icon {
    color: var(--warning);
    background: #fff7ed;
}

/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.category-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 12px;
    text-align: center;
    height: 100%;
    transition: all var(--transition);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

    .category-card:hover {
        transform: translateY(-5px);
        border-color: #d9c7fa;
        box-shadow: var(--shadow);
    }

    .category-img,
    .category-card img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 15px;
        background: var(--gradient-soft);
    }

.category-title {
    margin: 12px 0 5px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 700;
}

.category-arrow {
    width: 26px;
    height: 26px;
    margin: 8px auto 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 12px;
}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.product-card {
    background: #fff;
    border: 1px solid #e9d5ff;
    border-radius: 18px;
    overflow: hidden;
    transition: all var(--transition);
    position: relative;
    height: 100%;
    box-shadow: var(--shadow-xs);
}

    .product-card:hover {
        transform: translateY(-5px);
        border-color: #d8c6fa;
        box-shadow: var(--shadow);
    }

    .product-card .product-image-wrap {
        position: relative;
        overflow: hidden;
        background: #faf9ff;
    }

.product-img {
    width: 100%;
    height: 410px;
    object-fit: cover;
    transition: transform .45s ease;
    background: #fff;
}


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

.product-info {
    padding: 15px;
}

.product-title {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 5px;
}

    .product-title a {
        color: inherit;
    }

.product-code {
    color: var(--text-light);
    font-size: 12px;
}

.product-price-box {
    margin-top: 10px;
}

.mrp {
    color: #9996a5;
    text-decoration: line-through;
    margin-right: 8px;
    font-size: 14px;
}

.dp {
    color: #000000;
    font-weight: 700;
    font-size: 14px;
}

.product-bv {
    color: #000000;
    font-size: 14px;
}

.product-rating {
    color: #f59e0b;
    font-size: 14px;
}

.discount-badge,
.offer-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    background: var(--gradient-primary);
    color: #fff;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
}

.best-seller-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: #fff3e8;
    color: #e76f1d;
    font-size: 11px;
    font-weight: 700;
}

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

.product-detail {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-xs);
}

.product-gallery {
    background: #faf9ff;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.product-gallery-main {
    width: 100%;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8fb;
}

    .product-gallery-main img {
        width: 100%;
        height: 430px;
        object-fit: contain;
    }

.product-thumb {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
}

    .product-thumb img {
        width: 100%;
        height: 85px;
        object-fit: cover;
    }

    .product-thumb:hover,
    .product-thumb.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(124,58,237,.10);
    }

.product-detail-title {
    color: var(--text-dark);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}

.product-detail-price {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 800;
}

.save-box {
    background: #faf8ff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
}

.color-option {
    width: 38px;
    height: 38px;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 3px;
    cursor: pointer;
    transition: all var(--transition);
}

    .color-option::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: currentColor;
    }

    .color-option.active,
    .color-option:hover {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(124,58,237,.3);
    }

.size-option {
    min-width: 43px;
    height: 39px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-weight: 600;
    transition: all var(--transition);
}

    .size-option:hover,
    .size-option.active {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--primary-light);
    }

.product-feature-strip {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    padding: 18px 10px;
}

    .product-feature-strip .feature-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

.product-description-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-xs);
}

    .product-description-card h5 {
        color: var(--primary);
        font-weight: 800;
    }

/* =========================================================
   CUSTOMER ALSO BOUGHT / HORIZONTAL PRODUCT ROW
   ========================================================= */

.product-horizontal-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

    .product-horizontal-scroll > * {
        flex: 0 0 180px;
    }

.related-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    transition: all var(--transition);
}

    .related-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-sm);
    }

    .related-card img {
        width: 100%;
        height: 175px;
        object-fit: cover;
    }

    .related-card .card-body {
        padding: 10px;
    }

    .related-card .price {
        color: var(--primary);
        font-weight: 800;
    }

/* =========================================================
   JOIN BUSINESS / MLM BANNER
   ========================================================= */

.business-banner,
.join-business {
    position: relative;
    overflow: hidden;
    background: var(--gradient-banner);
    color: #fff;
    border-radius: 20px;
    padding: 28px;
    min-height: 210px;
}

    .business-banner::before,
    .join-business::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        right: -70px;
        top: -130px;
        border-radius: 50%;
        background: rgba(217,70,239,.22);
    }

    .business-banner h2,
    .join-business h2 {
        font-weight: 800;
        position: relative;
        z-index: 1;
    }

        .business-banner h2 span,
        .join-business h2 span {
            color: #f0a1e8;
        }

    .business-banner p,
    .join-business p {
        color: rgba(255,255,255,.82);
        position: relative;
        z-index: 1;
    }

    .business-banner .btn,
    .join-business .btn {
        background: linear-gradient(135deg, #d946ef, #ec4899);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-weight: 700;
        position: relative;
        z-index: 1;
    }

/* =========================================================
   SPECIAL OFFER
   ========================================================= */

.special-offer {
    background: linear-gradient(135deg, #fff0fb 0%, #f8efff 100%);
    border: 1px solid #f0d6ee;
    border-radius: 18px;
    padding: 15px 20px;
}

    .special-offer .offer-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ec4899, #d946ef);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .special-offer strong {
        color: var(--accent);
    }

.coupon-code {
    background: #fff;
    border: 1px dashed #e5a8d4;
    border-radius: 10px;
    color: var(--accent);
    font-weight: 800;
    padding: 8px 14px;
}

/* =========================================================
   STATS
   ========================================================= */

.stats-section {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stat-icon {
    color: var(--primary);
    font-size: 2.6rem;
    margin-bottom: 8px;
}

.stats-section h2 {
    color: var(--primary);
    font-weight: 800;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb-section {
    background: var(--gradient-soft);
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    margin-top: 0;
}


.breadcrumb-title {
    color: var(--text-dark);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.breadcrumb-subtitle {
    color: var(--text-muted);
    font-size: .95rem;
}

.breadcrumb {
    margin: 0;
}

.breadcrumb-item a {
    color: var(--primary);
    font-weight: 600;
}

    .breadcrumb-item a:hover {
        color: var(--secondary-dark);
    }

.breadcrumb-item.active {
    color: var(--text-muted);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #a78bfa;
}

@media (max-width: 768px) {
    .breadcrumb-section {
        text-align: center;
        padding: 22px 0;
    }

    .breadcrumb-title {
        font-size: 1.55rem;
    }

    .breadcrumb {
        justify-content: center !important;
        margin-top: 8px;
    }
}

/* =========================================================
   PRODUCT DROPDOWN
   ========================================================= */

.product-dropdown {
    position: relative;
}

    .product-dropdown .dropdown-toggle::after {
        margin-left: 7px;
        transition: transform var(--transition);
    }

    .product-dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    .product-dropdown .dropdown-menu {
        border-radius: 15px;
        min-width: 240px;
        padding: 8px;
        margin-top: 8px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }

    .product-dropdown .dropdown-item {
        padding: 10px 13px;
        border-radius: 9px;
        transition: all var(--transition);
        color: var(--text);
        font-weight: 600;
    }

        .product-dropdown .dropdown-item:hover,
        .product-dropdown .dropdown-item:focus {
            background: var(--primary-light);
            color: var(--primary);
            transform: translateX(3px);
        }

@media (min-width: 992px) {
    .product-dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeIn .2s ease;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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

/* =========================================================
   MAIN NAV LINKS
   ========================================================= */

.nav-main-link {
    font-weight: 650;
    color: var(--text) !important;
    padding: 10px 10px !important;
    transition: all var(--transition);
}

    .nav-main-link:hover,
    .nav-main-link.active {
        color: var(--primary) !important;
        background: var(--primary-light);
        border-radius: 9px;
    }

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

.form-control,
.form-select {
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--text);
    min-height: 44px;
    background-color: #fff;
}

    .form-control:focus,
    .form-select:focus {
        border-color: #b99af2;
        box-shadow: 0 0 0 .2rem rgba(124,58,237,.10);
    }

.input-group-text {
    background: #faf9ff;
    border-color: var(--border);
    color: var(--text-muted);
    border-radius: 11px;
}

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

.modal-herbal-header,
.modal-theme-header {
    background: var(--gradient-primary);
    color: #fff;
}

    .modal-herbal-header h4,
    .modal-theme-header h4 {
        font-weight: 800;
    }

    .modal-herbal-header p,
    .modal-theme-header p {
        color: rgba(255,255,255,.9);
    }

.herbal-input {
    border: 1px solid var(--border);
    border-radius: 10px;
}

    .herbal-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 .2rem rgba(124,58,237,.10);
    }

.herbal-icon {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--border);
}

.btn-herbal {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    border-radius: 11px;
    font-weight: 700;
    padding: 12px;
    transition: all var(--transition);
}

    .btn-herbal:hover {
        background: linear-gradient(135deg, #4c1d95, #c026d3);
        color: #fff;
        transform: translateY(-2px);
    }

.modal-footer {
    background: #faf9ff;
    border-top-color: var(--border);
}

    .modal-footer a {
        color: var(--primary);
        font-weight: 700;
    }

        .modal-footer a:hover {
            color: var(--secondary-dark);
        }

.captcha-box {
    background: var(--primary-light);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 12px;
}

.modal-content {
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* =========================================================
   CART OFFCANVAS
   ========================================================= */

/*.cart-ayurvedic {
    width: 420px;
    border-left: 1px solid var(--border);
}

.cart-header {
    background: var(--gradient-primary);
    color: #fff;
    padding: 18px;
}

    .cart-header .offcanvas-title {
        font-size: 1.1rem;
        font-weight: 700;
    }

.cart-items {
    background: var(--bg-light);
    padding: 15px;
    overflow-y: auto;
}

.cart-footer {
    background: #fff;
    padding: 20px;
    border-top: 1px solid var(--border);
}

.cart-price {
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 800;
}

.empty-cart {
    text-align: center;
    padding: 40px 20px;
}

    .empty-cart i {
        font-size: 55px;
        color: var(--primary);
        opacity: .35;
    }

    .empty-cart p {
        margin-top: 15px;
        color: var(--text-muted);
    }

@media (max-width: 768px) {
    .cart-ayurvedic {
        width: 100%;
    }
}
*/
/* =========================================================
   CART OFFCANVAS
   ========================================================= */

.cart-ayurvedic {
    width: 420px;
    border-left: 1px solid var(--border-dark);
}

.cart-header {
    background: var(--gradient-primary);
    color: #fff;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

    .cart-header .offcanvas-title {
        font-size: 1.1rem;
        font-weight: 700;
    }

.cart-items {
    background: var(--bg-light);
    padding: 15px;
    overflow-y: auto;
}

.cart-footer {
    background: #fff;
    padding: 20px;
    border-top: 1px solid var(--border-dark);
}

.cart-price {
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 800;
}

.empty-cart {
    text-align: center;
    padding: 40px 20px;
}

    .empty-cart i {
        font-size: 55px;
        color: var(--primary);
        opacity: .35;
    }

    .empty-cart p {
        margin-top: 15px;
        color: var(--text-muted);
    }

.btn-checkout {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    transition: all var(--transition);
}

    .btn-checkout:hover {
        background: linear-gradient( 135deg, var(--primary-dark), var(--secondary) );
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(109,40,217,.24);
    }

@media (max-width: 768px) {

    .cart-ayurvedic {
        width: 100%;
    }
}





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

.footer-orange {
    background: linear-gradient(135deg, #17123c 0%, #25175b 55%, #46165d 100%);
    color: #d9d4e8;
    padding: 65px 0 20px;
}

.footer-title {
    color: #fff;
    font-weight: 800;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 9px;
}

    .footer-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 42px;
        height: 3px;
        background: linear-gradient(90deg, #d946ef, #ec4899);
        border-radius: 10px;
    }

.footer-text,
.footer-contact {
    color: #c8c2db;
    line-height: 1.8;
}

.footer-links a {
    color: #c8c2db;
    text-decoration: none;
    display: block;
    margin-bottom: 9px;
    transition: all var(--transition);
}

    .footer-links a:hover {
        color: #f0a1e8;
        padding-left: 6px;
    }

.footer-card {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

    .footer-card .form-control,
    .footer-card .form-select {
        border: 1px solid #51466e;
        background: #fff;
        border-radius: 10px;
    }

        .footer-card .form-control:focus,
        .footer-card .form-select:focus {
            border-color: #d946ef;
            box-shadow: 0 0 0 .2rem rgba(217,70,239,.16);
        }

.btn-footer {
    background: linear-gradient(135deg, #7c3aed, #d946ef);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px;
}

    .btn-footer:hover {
        background: linear-gradient(135deg, #5b21b6, #c026d3);
        color: #fff;
    }

.footer-divider {
    border-color: rgba(255,255,255,.10);
    margin-top: 40px;
}

.footer-bottom {
    color: #aaa4c0;
}

    .footer-bottom a {
        color: #d9d4e8;
        text-decoration: none;
    }

        .footer-bottom a:hover {
            color: #f0a1e8;
        }

.footer-icon {
    color: #e879d8;
    margin-right: 8px;
}

/* =========================================================
   USER DROPDOWN
   ========================================================= */

.user-dropdown-menu {
    width: 320px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
}

    .user-dropdown-menu::-webkit-scrollbar {
        width: 5px;
    }

    .user-dropdown-menu::-webkit-scrollbar-track {
        background: #f5f3fa;
    }

    .user-dropdown-menu::-webkit-scrollbar-thumb {
        background: #c9bfdc;
        border-radius: 10px;
    }

        .user-dropdown-menu::-webkit-scrollbar-thumb:hover {
            background: #a99bbf;
        }

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

#global-loader {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.78);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}

    #global-loader img {
        width: 110px;
        height: 110px;
        object-fit: contain;
    }

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

.float-btn {
    position: fixed;
    right: 24px;
    bottom: 88px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    font-size: 21px;
    box-shadow: 0 8px 22px rgba(37,211,102,.28);
    transition: all var(--transition);
}

    .float-btn:hover {
        color: #fff;
        transform: translateY(-3px) scale(1.04);
    }

/* =========================================================
   SCROLL TOP
   ========================================================= */

#scrollTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    display: none;
    z-index: 999;
    box-shadow: 0 8px 20px rgba(109,40,217,.25);
    transition: all var(--transition);
}

    #scrollTop:hover {
        color: #fff;
        transform: translateY(-3px);
    }

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination .page-link {
    color: var(--primary);
    border-color: var(--border);
    border-radius: 9px;
    margin: 0 3px;
}

    .pagination .page-link:hover {
        color: var(--primary-dark);
        background: var(--primary-light);
        border-color: var(--border-dark);
    }

.pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}

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

.badge-theme {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #ddd0fb;
}

.badge-offer {
    background: #fff0f8;
    color: var(--accent);
    border: 1px solid #f6c7df;
}

.alert-theme {
    background: var(--primary-light);
    border: 1px solid var(--border-dark);
    color: var(--primary-dark);
    border-radius: 12px;
}

/* =========================================================
   TABLES
   ========================================================= */

.table {
    color: var(--text);
}

    .table thead th {
        background: #faf9ff;
        color: var(--text-dark);
        font-weight: 700;
        border-bottom-color: var(--border);
    }

    .table > :not(caption) > * > * {
        border-bottom-color: var(--border);
    }

/* =========================================================
   PRODUCT FILTER / SIDEBAR
   ========================================================= */

.filter-card,
.sidebar-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-xs);
}

    .filter-card h5,
    .sidebar-card h5 {
        color: var(--text-dark);
        font-weight: 800;
    }

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: #b99af2;
    box-shadow: 0 0 0 .2rem rgba(124,58,237,.10);
}

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

.quantity-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

    .quantity-control button {
        width: 38px;
        height: 38px;
        border: none;
        background: #faf9ff;
        color: var(--primary);
        font-weight: 800;
    }

        .quantity-control button:hover {
            background: var(--primary-light);
        }

    .quantity-control input {
        width: 45px;
        height: 38px;
        border: 0;
        text-align: center;
        font-weight: 700;
        color: var(--text);
    }

/* =========================================================
   EMPTY / STATUS CARDS
   ========================================================= */

.empty-state {
    background: #fff;
    border: 1px dashed var(--border-dark);
    border-radius: 18px;
    padding: 45px 20px;
    text-align: center;
}

    .empty-state i {
        color: #c4b5fd;
        font-size: 48px;
        margin-bottom: 12px;
    }

    .empty-state h5 {
        color: var(--text-dark);
        font-weight: 800;
    }

    .empty-state p {
        color: var(--text-muted);
    }

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

.text-theme {
    color: var(--primary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.bg-theme {
    background: var(--primary) !important;
}

.bg-theme-light {
    background: var(--primary-light) !important;
}

.bg-soft {
    background: var(--bg-soft) !important;
}

.border-theme {
    border-color: var(--border-dark) !important;
}

.rounded-theme {
    border-radius: var(--radius) !important;
}

.shadow-theme {
    box-shadow: var(--shadow) !important;
}

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

@media (max-width: 1199.98px) {
    .product-img {
        height: 410px;
    }

    .hero-section,
    .hero-banner {
        min-height: 330px;
    }
}

@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 22px;
    }

    .nav-link {
        margin-left: 0;
        margin-top: 3px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-image img {
        max-height: 300px;
    }

    .product-gallery-main,
    .product-gallery-main img {
        min-height: 350px;
        height: 350px;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    .top-bar,
    .welcome-bar {
        font-size: 12px;
        padding: 7px 10px;
        text-align: center;
    }

    .hero-section,
    .hero-banner {
        min-height: auto;
        border-radius: 18px;
    }

    .hero-title {
        font-size: 1.9rem;
    }

    .hero-subtitle {
        font-size: .93rem;
    }

    .hero-image img {
        max-height: 250px;
    }

    .product-img {
        height: 410px;
    }

    .product-info {
        padding: 12px;
    }

    .product-detail {
        border-radius: 17px;
    }

    .product-gallery-main,
    .product-gallery-main img {
        min-height: 300px;
        height: 300px;
    }

    .product-thumb img {
        height: 65px;
    }

    .product-detail-price {
        font-size: 1.7rem;
    }

    .business-banner,
    .join-business {
        padding: 22px;
        min-height: 190px;
    }

    .special-offer {
        padding: 13px;
    }

    .float-btn {
        right: 16px;
        bottom: 80px;
        width: 48px;
        height: 48px;
    }

    #scrollTop {
        right: 16px;
        bottom: 20px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 575.98px) {
    .section-title {
        font-size: 1.35rem;
    }

    .product-img {
        height: 410px;
    }

    .wishlist-btn {
        width: 35px;
        height: 35px;
        top: 8px;
        right: 8px;
    }

    .discount-badge,
    .offer-badge {
        top: 8px;
        left: 8px;
    }

    .dp {
        font-size: 16px;
    }

    .btn-cart-sm {
        padding: 8px 11px;
        font-size: 12px;
    }

    .category-card {
        padding: 9px;
        border-radius: 16px;
    }

    .category-title {
        font-size: 13px;
    }

    .feature-card {
        padding: 17px 10px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }
}

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

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #f7f5fb;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #d946ef);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #6d28d9, #c026d3);
    }

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   APEXZON PROFESSIONAL UI OVERRIDES
   Borders • Modals • Tables • Forms • Cards • Alerts
   ========================================================= */

:root {
    --ax-primary: #6d28d9;
    --ax-primary-dark: #4c1d95;
    --ax-primary-hover: #5b21b6;
    --ax-secondary: #8b5cf6;
    --ax-magenta: #d946ef;
    --ax-pink: #ec4899;
    --ax-text: #25243a;
    --ax-heading: #17172b;
    --ax-muted: #77758b;
    --ax-surface: #ffffff;
    --ax-surface-soft: #faf9ff;
    --ax-surface-lavender: #f5f3ff;
    --ax-surface-pink: #fff5fa;
    --ax-border: #e8e2f2;
    --ax-border-soft: #eeeaf6;
    --ax-border-active: #c4b5fd;
    --ax-success: #16a34a;
    --ax-warning: #d97706;
    --ax-danger: #dc2626;
    --ax-info: #2563eb;
    --ax-shadow-xs: 0 2px 8px rgba(54, 34, 105, .06);
    --ax-shadow-sm: 0 5px 18px rgba(54, 34, 105, .08);
    --ax-shadow-md: 0 10px 30px rgba(54, 34, 105, .11);
    --ax-shadow-lg: 0 18px 45px rgba(54, 34, 105, .15);
    --ax-radius-sm: 10px;
    --ax-radius: 14px;
    --ax-radius-lg: 18px;
    --ax-radius-xl: 22px;
}

/* ---------------------------------------------------------
   GLOBAL BORDER / SURFACE SYSTEM
   --------------------------------------------------------- */

hr {
    border: 0;
    border-top: 1px solid var(--ax-border);
    opacity: 1;
}

.border {
    border-color: var(--ax-border) !important;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--ax-border) !important;
}

.border-primary {
    border-color: var(--ax-border-active) !important;
}

.card,
.card-header,
.card-footer,
.list-group-item {
    border-color: var(--ax-border);
}

.card {
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    box-shadow: var(--ax-shadow-xs);
    overflow: hidden;
}

    .card:hover {
        border-color: #ddd2f5;
    }

.card-header {
    background: linear-gradient(180deg, #ffffff 0%, #fcfaff 100%);
    color: var(--ax-heading);
    font-weight: 700;
    border-bottom: 1px solid var(--ax-border);
    padding: 14px 18px;
}

.card-footer {
    background: #fcfaff;
    border-top: 1px solid var(--ax-border);
}

/* ---------------------------------------------------------
   PROFESSIONAL BUTTONS
   --------------------------------------------------------- */

.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all .2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 5px 14px rgba(109, 40, 217, .16);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
        border-color: transparent;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(109, 40, 217, .22);
    }

.btn-outline-primary {
    color: var(--ax-primary);
    border-color: #b9a4e8;
    background: #fff;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        color: #fff;
        background: var(--ax-primary);
        border-color: var(--ax-primary);
    }

.btn-light {
    background: #fff;
    border-color: var(--ax-border);
    color: var(--ax-text);
}

    .btn-light:hover {
        background: var(--ax-surface-lavender);
        border-color: var(--ax-border-active);
        color: var(--ax-primary);
    }

/* ---------------------------------------------------------
   FORM CONTROLS
   --------------------------------------------------------- */

.form-control,
.form-select,
.input-group-text,
textarea.form-control {
    border: 1px solid var(--ax-border);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ax-text);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .form-control:hover,
    .form-select:hover {
        border-color: #d5c9eb;
    }

    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus {
        border-color: #9f7aea;
        box-shadow: 0 0 0 .20rem rgba(109, 40, 217, .10);
    }

.input-group-text {
    background: var(--ax-surface-soft);
    color: var(--ax-muted);
}

.form-label {
    color: var(--ax-heading);
    font-weight: 600;
    margin-bottom: 6px;
}

.form-text {
    color: var(--ax-muted);
}

.form-control::placeholder,
.form-select::placeholder {
    color: #aaa6b7;
}

.form-check-input {
    border-color: #cfc5df;
}

    .form-check-input:checked {
        background-color: var(--ax-primary);
        border-color: var(--ax-primary);
    }

/* ---------------------------------------------------------
   PROFESSIONAL MODALS / POPUPS
   --------------------------------------------------------- */

.modal {
    --bs-modal-border-color: var(--ax-border);
    --bs-modal-border-radius: var(--ax-radius-xl);
    --bs-modal-box-shadow: var(--ax-shadow-lg);
}

.modal-backdrop.show {
    opacity: .55;
    background-color: #171229;
}

.modal-dialog {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.modal-content {
    background: #fff;
    border: 1px solid var(--ax-border);
    border-radius: 20px;
    box-shadow: 0 24px 65px rgba(35, 20, 70, .20);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(180deg, #ffffff 0%, #fcfaff 100%);
    color: var(--ax-heading);
    border-bottom: 1px solid var(--ax-border);
    padding: 16px 20px;
}

.modal-title {
    color: var(--ax-heading);
    font-weight: 800;
    font-size: 1.05rem;
}

.modal-header .btn-close {
    border-radius: 50%;
    opacity: .75;
    transition: all .2s ease;
}

    .modal-header .btn-close:hover {
        opacity: 1;
        background-color: var(--ax-surface-lavender);
        box-shadow: 0 0 0 5px rgba(109, 40, 217, .07);
    }

.modal-body {
    background: #fff;
    color: var(--ax-text);
    padding: 20px;
}

.modal-footer {
    background: #fcfaff;
    border-top: 1px solid var(--ax-border);
    padding: 13px 20px;
}

/* Theme/login modal headers */
.modal-herbal-header,
.modal-theme-header {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 52%, #d946ef 100%);
    color: #fff;
    border-bottom: 0;
}

    .modal-herbal-header .modal-title,
    .modal-theme-header .modal-title,
    .modal-herbal-header h4,
    .modal-theme-header h4 {
        color: #fff;
    }

    .modal-herbal-header .btn-close,
    .modal-theme-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: .9;
    }

    .modal-herbal-header + .modal-body,
    .modal-theme-header + .modal-body {
        border-top: 0;
    }

/* Small popup / dropdown-like dialogs */
.popover {
    border: 1px solid var(--ax-border);
    border-radius: 12px;
    box-shadow: var(--ax-shadow-lg);
}

.popover-header {
    background: var(--ax-surface-soft);
    color: var(--ax-heading);
    border-bottom: 1px solid var(--ax-border);
    font-weight: 700;
}

.popover-body {
    color: var(--ax-text);
}

/* ---------------------------------------------------------
   TABLES — CLEAN PROFESSIONAL ADMIN STYLE
   --------------------------------------------------------- */

.table-responsive {
    border: 1px solid var(--ax-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--ax-shadow-xs);
    overflow-x: auto;
    overflow-y: hidden;
}

.table {
    --bs-table-color: var(--ax-text);
    --bs-table-bg: #fff;
    --bs-table-border-color: var(--ax-border);
    color: var(--ax-text);
    margin-bottom: 0;
    vertical-align: middle;
}

    .table > :not(caption) > * > * {
        padding: 11px 13px;
        border-bottom: 1px solid var(--ax-border);
        box-shadow: none;
    }

    .table thead th,
    .table > thead > tr > th {
        background: linear-gradient(180deg, #f8f5ff 0%, #f3effd 100%);
        color: #3f3360;
        border-bottom: 1px solid #dcd2ef !important;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .15px;
        white-space: nowrap;
        text-transform: none;
    }

    .table tbody td {
        color: var(--ax-text);
        background: #fff;
    }

    .table tbody tr {
        transition: background-color .18s ease;
    }

        .table tbody tr:hover td {
            background: #fbf9ff;
        }

        .table tbody tr:last-child td {
            border-bottom: 0;
        }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #fdfcff;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #fbf9ff;
    background-color: #fbf9ff;
}

.table-bordered {
    border-color: var(--ax-border);
}

    .table-bordered > :not(caption) > * {
        border-width: 1px 0;
    }

        .table-bordered > :not(caption) > * > * {
            border-width: 0 1px;
        }

.table-primary {
    --bs-table-bg: #f3effd;
    --bs-table-color: #3f3360;
    --bs-table-border-color: #ddd2f3;
}

.table-dark {
    --bs-table-bg: #29213e;
    --bs-table-color: #fff;
    --bs-table-border-color: #41375a;
}

.table-success {
    --bs-table-bg: #f0fdf4;
    --bs-table-color: #166534;
}

.table-warning {
    --bs-table-bg: #fffbeb;
    --bs-table-color: #92400e;
}

.table-danger {
    --bs-table-bg: #fff1f2;
    --bs-table-color: #991b1b;
}

.table-info {
    --bs-table-bg: #eff6ff;
    --bs-table-color: #1e40af;
}

/* ---------------------------------------------------------
   DATATABLES / ADMIN GRID SUPPORT
   --------------------------------------------------------- */

.dataTables_wrapper {
    color: var(--ax-text);
}

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid var(--ax-border) !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: var(--ax-text) !important;
        min-height: 38px;
    }

        .dataTables_wrapper .dataTables_filter input:focus,
        .dataTables_wrapper .dataTables_length select:focus {
            border-color: #9f7aea !important;
            outline: 0;
            box-shadow: 0 0 0 .18rem rgba(109, 40, 217, .10) !important;
        }

    .dataTables_wrapper .dataTables_info {
        color: var(--ax-muted);
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid var(--ax-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--ax-primary) !important;
        margin-left: 4px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: var(--ax-surface-lavender) !important;
            border-color: var(--ax-border-active) !important;
            color: var(--ax-primary-dark) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
            border-color: transparent !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(109, 40, 217, .18);
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: .45;
        }

/* ---------------------------------------------------------
   BADGES / STATUS LABELS
   --------------------------------------------------------- */

.badge {
    border-radius: 7px;
    font-weight: 700;
    letter-spacing: .1px;
}

.badge-theme {
    background: #f3e8ff;
    color: #6d28d9;
    border: 1px solid #ddd0fb;
}

.badge-success,
.bg-success-subtle {
    color: #166534 !important;
}

.badge-warning,
.bg-warning-subtle {
    color: #92400e !important;
}

.badge-danger,
.bg-danger-subtle {
    color: #991b1b !important;
}

.badge-info,
.bg-info-subtle {
    color: #1e40af !important;
}

/* ---------------------------------------------------------
   ALERTS / TOASTS
   --------------------------------------------------------- */

.alert {
    border-radius: 12px;
    border-width: 1px;
    box-shadow: var(--ax-shadow-xs);
}

.alert-primary {
    --bs-alert-color: #4c1d95;
    --bs-alert-bg: #f5f3ff;
    --bs-alert-border-color: #ddd6fe;
}

.alert-success {
    --bs-alert-border-color: #bbf7d0;
}

.alert-warning {
    --bs-alert-border-color: #fde68a;
}

.alert-danger {
    --bs-alert-border-color: #fecaca;
}

.toast {
    border: 1px solid var(--ax-border);
    border-radius: 12px;
    box-shadow: var(--ax-shadow-lg);
    overflow: hidden;
}

/* ---------------------------------------------------------
   DROPDOWNS
   --------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--ax-border);
    border-radius: 12px;
    padding: 7px;
    box-shadow: var(--ax-shadow-lg);
    background: #fff;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--ax-text);
    padding: 9px 11px;
    font-weight: 500;
}

    .dropdown-item:hover,
    .dropdown-item:focus,
    .dropdown-item.active {
        background: var(--ax-surface-lavender);
        color: var(--ax-primary);
    }

.dropdown-divider {
    border-top-color: var(--ax-border);
}

/* ---------------------------------------------------------
   TABS / NAV PILLS
   --------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--ax-border);
    gap: 4px;
}

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-radius: 9px 9px 0 0;
        color: var(--ax-muted) !important;
        font-weight: 600;
    }

        .nav-tabs .nav-link:hover {
            border-color: var(--ax-border-soft);
            background: var(--ax-surface-soft);
            color: var(--ax-primary) !important;
        }

        .nav-tabs .nav-link.active {
            color: var(--ax-primary) !important;
            background: #fff;
            border-color: var(--ax-border) var(--ax-border) #fff;
        }

.nav-pills .nav-link {
    border-radius: 9px;
    color: var(--ax-text);
    font-weight: 600;
}

    .nav-pills .nav-link.active {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff !important;
    }

/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.pagination .page-link {
    color: var(--ax-primary);
    background: #fff;
    border: 1px solid var(--ax-border);
    border-radius: 8px;
    margin: 0 3px;
    box-shadow: none;
}

    .pagination .page-link:hover,
    .pagination .page-link:focus {
        color: var(--ax-primary-dark);
        background: var(--ax-surface-lavender);
        border-color: var(--ax-border-active);
    }

.pagination .page-item.active .page-link {
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(109, 40, 217, .18);
}

/* ---------------------------------------------------------
   LIST GROUPS
   --------------------------------------------------------- */

.list-group {
    border-radius: 14px;
    overflow: hidden;
}

.list-group-item {
    border-color: var(--ax-border);
    color: var(--ax-text);
    background: #fff;
    padding: 12px 15px;
}

    .list-group-item:hover {
        background: #fcfaff;
    }

    .list-group-item.active {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        border-color: transparent;
        color: #fff;
    }

/* ---------------------------------------------------------
   TOOLTIP
   --------------------------------------------------------- */

.tooltip .tooltip-inner {
    background: #29213e;
    border-radius: 7px;
    box-shadow: var(--ax-shadow-sm);
    padding: 7px 10px;
}

/* ---------------------------------------------------------
   OFFCANVAS
   --------------------------------------------------------- */

.offcanvas {
    border-color: var(--ax-border);
    box-shadow: -15px 0 40px rgba(35, 20, 70, .12);
}

.offcanvas-header {
    border-bottom: 1px solid var(--ax-border);
    background: #fff;
}

.offcanvas-title {
    color: var(--ax-heading);
    font-weight: 800;
}

.offcanvas-body {
    background: #fff;
}

/* ---------------------------------------------------------
   PROGRESS / SPINNERS
   --------------------------------------------------------- */

.progress {
    background: #eeeaf7;
    border-radius: 999px;
}

.progress-bar {
    background: linear-gradient(90deg, #6d28d9, #d946ef);
}

.spinner-border,
.spinner-grow {
    color: var(--ax-primary);
}

/* ---------------------------------------------------------
   BREADCRUMB / SECTION SEPARATORS
   --------------------------------------------------------- */



.breadcrumb-item + .breadcrumb-item::before {
    color: #a78bfa;
}

.breadcrumb-item.active {
    color: var(--ax-muted);
}

/* ---------------------------------------------------------
   IMAGE / MEDIA FRAMES
   --------------------------------------------------------- */

.img-thumbnail {
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ax-border);
    border-radius: 10px;
}

/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

:focus-visible {
    outline: 3px solid rgba(109, 40, 217, .22);
    outline-offset: 2px;
}

::selection {
    background: rgba(109, 40, 217, .18);
    color: var(--ax-primary-dark);
}

/* ---------------------------------------------------------
   RESPONSIVE MODAL / TABLE REFINEMENTS
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: .75rem;
    }

    .modal-content {
        border-radius: 16px;
    }

    .modal-header,
    .modal-body {
        padding: 15px;
    }

    .modal-footer {
        padding: 12px 15px;
    }

    .table-responsive {
        border-radius: 11px;
    }

    .table > :not(caption) > * > * {
        padding: 9px 10px;
    }

    .table thead th,
    .table > thead > tr > th {
        font-size: .76rem;
    }

    .card {
        border-radius: 15px;
    }
}



/* =========================================================
   APEXZON PROFESSIONAL NAVBAR
   ========================================================= */

.custom-navbar {
    min-height: 62px;
    padding: 6px 0;
    background: #ffffff !important;
    /*border-bottom: 1px solid #ddd6fe !important;*/
    border-bottom: 1px solid var(--border-dark) !important;
    box-shadow: 0 3px 14px rgba(76,29,149,.10);
    z-index: 1030;
}

    /* Top gradient border */
    .custom-navbar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,#6d28d9,#8b5cf6,#d946ef,#ec4899);
    }

    /* Container */
    .custom-navbar .container-fluid {
        min-width: 0;
        flex-wrap: nowrap;
    }

    /* Logo */
    .custom-navbar .navbar-brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-right: 18px;
        padding: 4px 0;
    }

        .custom-navbar .navbar-brand img {
            display: block;
            max-height: 45px;
            width: auto;
            object-fit: contain;
        }

    /* Search */
    .custom-navbar .search-box {
        position: relative;
        width: 190px;
        flex: 0 1 190px;
        margin-right: 15px !important;
    }

        .custom-navbar .search-box .form-control {
            height: 38px;
            padding-left: 38px;
            border: 1px solid #ddd6fe !important;
            border-radius: 10px;
            background: #faf9ff;
            color: #212529;
            font-size: .85rem;
            box-shadow: none !important;
        }

            .custom-navbar .search-box .form-control:focus {
                border-color: #8b5cf6 !important;
                background: #fff;
                box-shadow: 0 0 0 3px rgba(139,92,246,.12) !important;
            }

    .custom-navbar .search-icon {
        position: absolute;
        top: 50%;
        left: 14px;
        z-index: 2;
        color: #8b5cf6;
        transform: translateY(-50%);
    }

    /* Collapse */
    .custom-navbar .navbar-collapse {
        min-width: 0;
        flex-grow: 1;
    }

    /* Main menu */
    .custom-navbar .navbar-nav {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 2px;
        margin-left: auto;
    }

    /* Nav item */
    .custom-navbar .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Nav link */
    .custom-navbar .nav-link.nav-main-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        min-height: 38px;
        padding: 7px 9px !important;
        border: 1px solid transparent;
        border-radius: 9px;
        color: #4b5563 !important;
        font-size: .86rem;
        font-weight: 500;
        line-height: 1;
        transition: all .2s ease;
    }

        .custom-navbar .nav-link.nav-main-link i {
            flex: 0 0 auto;
            color: #7c3aed;
            font-size: .84rem;
        }

        .custom-navbar .nav-link.nav-main-link:hover {
            color: #6d28d9 !important;
            background: #f5f3ff;
            border-color: #ddd6fe;
        }

            .custom-navbar .nav-link.nav-main-link:hover i {
                color: #d946ef;
            }

        .custom-navbar .nav-link.nav-main-link.active {
            color: #6d28d9 !important;
            background: #f5f3ff;
            border-color: #ddd6fe;
            font-weight: 600;
        }

    /* Dropdown arrow */
    .custom-navbar .dropdown-toggle::after {
        margin-left: 6px;
        border-top-color: #7c3aed;
    }

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

    .custom-navbar .dropdown-menu {
        min-width: 210px;
        margin-top: 7px !important;
        padding: 6px;
        border: 1px solid #ddd6fe !important;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(76,29,149,.15) !important;
    }

    .custom-navbar .dropdown-item {
        display: flex;
        align-items: center;
        gap: 2px;
        min-height: 36px;
        padding: 7px 10px;
        border-radius: 8px;
        color: #374151;
        font-size: .84rem;
        white-space: nowrap;
    }

        .custom-navbar .dropdown-item:hover {
            color: #6d28d9;
            background: #f5f3ff;
        }

        .custom-navbar .dropdown-item.active {
            color: #6d28d9 !important;
            background: #ede9fe !important;
        }

    .custom-navbar .dropdown-divider {
        margin: 5px 0;
        border-color: #ede9fe;
    }

    /* User dropdown */
    .custom-navbar .user-dropdown-menu {
        max-width: 320px;
        border-color: #ddd6fe !important;
    }

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

    .custom-navbar .btn-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        margin-left: 3px;
        padding: 0;
        border: 1px solid #ddd6fe;
        border-radius: 9px;
        background: #fff;
        color: #6d28d9;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s ease;
    }

        .custom-navbar .btn-icon:hover {
            border-color: #8b5cf6;
            background: #f5f3ff;
            color: #d946ef;
            transform: translateY(-1px);
        }

        .custom-navbar .btn-icon i {
            font-size: 1rem;
        }

    /* Cart badge */
    .custom-navbar .cart-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 2px solid #fff;
        border-radius: 20px;
        background: #d946ef;
        color: #fff;
        font-size: .62rem;
        font-weight: 700;
        line-height: 1;
    }

    /* =========================================================
   TOGGLER
   ========================================================= */

    .custom-navbar .navbar-toggler {
        flex: 0 0 auto;
        width: 42px;
        height: 38px;
        padding: 6px 9px;
        border: 1px solid #ddd6fe !important;
        border-radius: 9px;
        background: #faf9ff;
        box-shadow: none !important;
    }

        .custom-navbar .navbar-toggler:focus {
            border-color: #8b5cf6 !important;
            box-shadow: 0 0 0 3px rgba(139,92,246,.12) !important;
        }

    .custom-navbar .navbar-toggler-icon {
        width: 20px;
        height: 20px;
    }


/* =========================================================
   LARGE DESKTOP
   Prevent text wrapping during browser zoom
   ========================================================= */

@media (min-width: 1200px) {

    .custom-navbar .nav-link.nav-main-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: .87rem;
    }

    .custom-navbar .navbar-nav {
        gap: 3px;
    }
}


/* =========================================================
   110% - 125% ZOOM / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1199.98px) and (min-width: 992px) {

    .custom-navbar .navbar-brand {
        margin-right: 10px;
    }

        .custom-navbar .navbar-brand img {
            max-height: 40px;
        }

    .custom-navbar .search-box {
        width: 150px;
        flex-basis: 150px;
        margin-right: 7px !important;
    }

    .custom-navbar .nav-link.nav-main-link {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: .79rem;
    }

        .custom-navbar .nav-link.nav-main-link i {
            font-size: .76rem;
        }

    .custom-navbar .navbar-nav {
        gap: 0;
    }

    .custom-navbar .btn-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        margin-left: 2px;
    }
}


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

@media (max-width: 991.98px) {

    .custom-navbar {
        min-height: 58px;
        padding: 5px 0;
    }

        .custom-navbar .container-fluid {
            flex-wrap: wrap;
        }

        .custom-navbar .navbar-brand {
            margin-right: auto;
        }

        .custom-navbar .navbar-toggler {
            display: block;
        }

        .custom-navbar .navbar-collapse {
            width: 100%;
            flex-basis: 100%;
            margin-top: 8px;
            padding: 8px;
            border: 1px solid #ddd6fe;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 8px 24px rgba(76,29,149,.10);
        }

        .custom-navbar .navbar-nav {
            width: 100%;
            align-items: stretch;
            flex-direction: column;
            gap: 2px;
            margin-left: 0;
        }

        .custom-navbar .nav-item {
            width: 100%;
        }

        .custom-navbar .nav-link.nav-main-link {
            width: 100%;
            justify-content: flex-start;
            padding: 10px 12px !important;
            font-size: .9rem;
        }

        .custom-navbar .dropdown-menu {
            position: static !important;
            width: 100%;
            margin: 3px 0 !important;
            box-shadow: none !important;
        }

        .custom-navbar .btn-icon {
            width: 100%;
            height: 40px;
            justify-content: flex-start;
            padding-left: 13px;
            margin: 2px 0;
        }

            .custom-navbar .btn-icon::after {
                content: attr(aria-label);
                margin-left: 10px;
                color: #4b5563;
                font-size: .88rem;
            }
}


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

@media (max-width: 575.98px) {

    .custom-navbar .navbar-brand img {
        max-height: 38px;
    }

    .custom-navbar .navbar-collapse {
        padding: 6px;
    }

    .custom-navbar .nav-link.nav-main-link {
        min-height: 40px;
        font-size: .88rem;
    }

    .custom-navbar .dropdown-item {
        font-size: .83rem;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.custom-navbar a:focus-visible,
.custom-navbar button:focus-visible,
.custom-navbar input:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}




/* =========================================================
   CART BUTTONS - THEME COLORS
   ========================================================= */

/* Add to Cart */
.btn-success {
    background: var(--gradient-primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active {
        background: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        color: #ffffff !important;
    }

/* Out of Stock */
.btn-danger,
.btn-danger:disabled {
    background: #fce7f3 !important;
    border-color: #f9a8d4 !important;
    color: #9d174d !important;
    opacity: 1 !important;
}