:root {
    --bg: #F3F7FF;
    --surface: #FFFFFF;
    --ink: #10233E;
    --ink2: #314866;
    --muted: #6C7C91;
    --indigo: #2459D6;
    --indigo2: #54A7FF;
    --coral: #E15B56;
    --mint: #008C88;
    --border: #D9E4F2;
    --shadow-sm: 0 2px 8px rgba(16, 35, 62, 0.04);
    --shadow-md: 0 8px 24px rgba(16, 35, 62, 0.07);
    --shadow-lg: 0 16px 48px rgba(16, 35, 62, 0.10);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
}

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: 'Sora', sans-serif;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -.5px;
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
            color: inherit;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

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

        input,
        textarea,
        select {
            font-family: inherit;
            outline: none;
            border: none;
        }

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

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #C9D7EA;
            border-radius: 10px;
        }

        .hide-scroll::-webkit-scrollbar {
            display: none;
        }

        .hide-scroll {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* ============ LOADER ============ */
        .loader {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity .6s ease, visibility .6s ease;
        }

        .loader.hide {
            opacity: 0;
            visibility: hidden;
        }

        .loader-bag {
            position: relative;
            width: 80px;
            height: 90px;
            animation: bob 2s ease-in-out infinite;
        }

        .loader-bag i {
            font-size: 70px;
            color: var(--indigo);
            filter: drop-shadow(0 10px 15px rgba(36, 89, 214, .28));
        }

        .loader-item {
            position: absolute;
            top: -10px;
            left: 50%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--coral);
            animation: drop 1.5s ease-in infinite;
        }

        .loader-item:nth-child(2) {
            background: var(--mint);
            animation-delay: .5s;
        }

        .loader-item:nth-child(3) {
            background: var(--indigo2);
            animation-delay: 1s;
        }

        @keyframes bob {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes drop {
            0% {
                transform: translate(-50%, -50px);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            80% {
                opacity: 1;
            }

            100% {
                transform: translate(-50%, 40px);
                opacity: 0;
            }
        }

        .loader-text {
            font-family: 'Sora', sans-serif;
            font-size: 24px;
            font-weight: 700;
            margin-top: 20px;
        }

        .loader-sub {
            color: var(--muted);
            font-size: 14px;
            margin-top: 8px;
        }

        .loader-bar {
            width: 200px;
            height: 4px;
            background: var(--border);
            border-radius: 10px;
            margin-top: 24px;
            overflow: hidden;
        }

        .loader-bar div {
            height: 100%;
            width: 0;
            background: var(--indigo);
            animation: progress 2s ease-out forwards;
        }

        @keyframes progress {
            to {
                width: 100%;
            }
        }

        /* ============ LAYOUT ============ */
        .layout {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        /* ============ MAIN ============ */
        .main {
            flex: 1;
            width: 100%;
            min-width: 0;
        }

        .content-pad {
            padding: 0 32px 80px;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        /* Topbar */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(243, 247, 255, .92);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: 16px 32px;
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .top-brand {
            display: flex;
            align-items: center;
            gap: 0;
            margin-right: 12px;
        }

        .sb-brand {
            font-family: 'Sora';
            font-weight: 700;
            font-size: 18px;
            white-space: nowrap;
        }

        .top-nav {
            display: flex;
            gap: 8px;
        }

        .top-nav a {
            font-size: 14px;
            font-weight: 500;
            color: var(--ink2);
            padding: 8px 12px;
            border-radius: 8px;
        }

        .top-nav a:hover {
            color: var(--indigo);
        }

        .search-bar {
            flex: 1;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
        }

        .search-bar i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
        }

        .search-bar input {
            width: 100%;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 30px;
            padding: 11px 16px 11px 42px;
            font-size: 14px;
            color: var(--ink);
            transition: all .2s;
        }

        .search-bar input:focus {
            border-color: var(--indigo);
            box-shadow: 0 0 0 4px rgba(36, 89, 214, .12);
        }

        .search-results {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            max-height: 320px;
            overflow-y: auto;
            z-index: 60;
            display: none;
        }

        .search-results.active {
            display: block;
        }

        .search-item {
            display: flex;
            gap: 12px;
            padding: 10px 16px;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
        }

        .search-item:hover {
            background: var(--bg);
        }

        .search-item img {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
        }

        .search-item-info h5 {
            font-size: 14px;
            font-weight: 500;
        }

        .search-item-info p {
            font-size: 12px;
            color: var(--muted);
        }

        .top-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            display: grid;
            place-items: center;
            color: var(--ink2);
            position: relative;
            transition: all .2s;
        }

        .icon-btn:hover {
            border-color: var(--indigo);
            color: var(--indigo);
        }

        .icon-btn .badge {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--coral);
            color: #fff;
            font-size: 10px;
            display: grid;
            place-items: center;
            font-weight: 700;
        }

        .menu-btn {
            display: none;
        }

        /* ============ ABOUT ============ */
        .about-new {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 40px;
            margin-bottom: 40px;
        }

        .about-head {
            text-align: center;
            margin-bottom: 32px;
        }

        .about-head h2 {
            font-size: 28px;
            margin-bottom: 8px;
        }

        .about-layout {
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr;
            gap: 24px;
            align-items: stretch;
        }

        .about-col {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .about-col .stat-card {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .about-content {
            background: var(--bg);
            border-radius: var(--radius-lg);
            padding: 32px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;
        }

        .about-content p {
            color: var(--ink2);
            line-height: 1.7;
            font-size: 15px;
        }

        /* ============ STATS ============ */
        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all .3s;
        }

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

        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .stat-icon.indigo {
            background: rgba(36, 89, 214, .12);
            color: var(--indigo);
        }

        .stat-icon.coral {
            background: rgba(255, 107, 107, .1);
            color: var(--coral);
        }

        .stat-icon.mint {
            background: rgba(0, 184, 153, .1);
            color: var(--mint);
        }

        .stat-icon.gold {
            background: rgba(255, 193, 7, .1);
            color: #ffc107;
        }

        .stat-num {
            font-family: 'Sora';
            font-size: 20px;
            font-weight: 700;
        }

        .stat-lbl {
            font-size: 12px;
            color: var(--muted);
        }

        /* ============ SECTION GENERIC ============ */
        .sec-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 24px;
        }

        .sec-head h2 {
            font-size: 24px;
        }

        .sec-link {
            color: var(--indigo);
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ============ PRODUCTS ============ */
        .category-rail {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            margin-bottom: 16px;
            padding-bottom: 8px;
        }

        .cat-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 30px;
            background: var(--surface);
            border: 1px solid var(--border);
            font-size: 13px;
            font-weight: 500;
            color: var(--ink2);
            white-space: nowrap;
            transition: .2s;
        }

        .cat-pill i {
            font-size: 14px;
            color: var(--indigo);
        }

        .cat-pill.active {
            background: var(--ink);
            color: #fff;
        }

        .cat-pill.active i {
            color: #fff;
        }

        .subcat-rail {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .subcat-pill {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 20px;
            background: var(--bg);
            color: var(--muted);
            cursor: pointer;
        }

        .subcat-pill.active {
            background: var(--indigo);
            color: #fff;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .p-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all .3s cubic-bezier(.19, 1, .22, 1);
            position: relative;
        }

        .p-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: transparent;
        }

        .p-img-wrap {
            height: 220px;
            background: var(--bg);
            position: relative;
            overflow: hidden;
        }

        .p-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 10px;
            transition: transform .4s;
        }

        .p-card:hover .p-img-wrap img {
            transform: scale(1.08);
        }

        .p-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .5px;
            color: #fff;
            z-index: 2;
        }

        .p-badge.hot {
            background: var(--coral);
        }

        .p-badge.new {
            background: var(--mint);
        }

        .p-badge.sale {
            background: var(--indigo);
        }

        .p-actions {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            opacity: 0;
            transform: translateX(10px);
            transition: all .3s;
            z-index: 2;
        }

        .p-card:hover .p-actions {
            opacity: 1;
            transform: none;
        }

        .p-action-btn {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: #fff;
            display: grid;
            place-items: center;
            color: var(--ink);
            box-shadow: var(--shadow-sm);
            transition: .2s;
        }

        .p-action-btn:hover {
            background: var(--ink);
            color: #fff;
        }

        .p-action-btn.active {
            background: var(--coral);
            color: #fff;
        }

        .p-body {
            padding: 16px;
        }

        .p-cat {
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .p-name {
            font-family: 'Sora';
            font-size: 15px;
            font-weight: 600;
            margin: 4px 0 12px;
            line-height: 1.3;
            height: 39px;
            overflow: hidden;
        }

        .p-foot {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .p-price {
            font-family: 'Sora';
            font-size: 18px;
            font-weight: 700;
            color: var(--indigo);
        }

        .add-cart-btn {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--ink);
            color: #fff;
            display: grid;
            place-items: center;
            transition: .2s;
        }

        .add-cart-btn:hover {
            background: var(--indigo);
        }

        .add-cart-btn.success {
            background: var(--mint);
        }

        /* ============ WIDGETS ============ */
        .widgets-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }

        .widget-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 24px;
        }

        .bestsellers-list {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }

        .bestseller-item {
            display: flex;
            align-items: center;
            gap: 16px;
            background: var(--bg);
            padding: 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: .2s;
        }

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

        .bs-rank {
            font-family: 'Sora';
            font-size: 24px;
            font-weight: 700;
            color: var(--border);
        }

        .bestseller-item img {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
        }

        .bs-info {
            flex: 1;
            min-width: 0;
        }

        .bs-info h5 {
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .bs-info p {
            color: var(--indigo);
            font-weight: 600;
            font-size: 14px;
        }

        /* ============ WHY US ============ */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .why-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .why-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(36, 89, 214, .06) 0%, transparent 100%);
            opacity: 0;
            transition: .3s;
        }

        .why-card:hover::before {
            opacity: 1;
        }

        .why-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 16px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            font-size: 24px;
            color: #fff;
            position: relative;
            z-index: 1;
        }

        .why-icon.indigo {
            background: linear-gradient(135deg, var(--indigo), var(--indigo2));
        }

        .why-icon.mint {
            background: linear-gradient(135deg, var(--mint), #4dd0b8);
        }

        .why-icon.coral {
            background: linear-gradient(135deg, var(--coral), #ff9a9a);
        }

        .why-icon.gold {
            background: linear-gradient(135deg, #ffc107, #ffd54f);
        }

        .why-card h4 {
            font-size: 18px;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .why-card p {
            font-size: 14px;
            color: var(--ink2);
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

        /* ============ PROCESS ============ */
        .process-sec {
            background: var(--surface);
            border-radius: var(--radius-xl);
            padding: 40px;
            margin-bottom: 40px;
            border: 1px solid var(--border);
        }

        .process-head {
            text-align: center;
            margin-bottom: 40px;
        }

        .process-head h2 {
            font-size: 28px;
            margin-bottom: 8px;
        }

        .process-head p {
            color: var(--muted);
        }

        .process-track {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            position: relative;
        }

        .process-track::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 10%;
            right: 10%;
            height: 2px;
            background: var(--border);
            z-index: 0;
        }

        .proc-step {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .proc-num {
            width: 60px;
            height: 60px;
            background: var(--surface);
            border: 2px solid var(--border);
            border-radius: 50%;
            margin: 0 auto 16px;
            display: grid;
            place-items: center;
            font-family: 'Sora';
            font-weight: 700;
            font-size: 18px;
            color: var(--indigo);
            transition: .3s;
        }

        .proc-step:hover .proc-num {
            border-color: var(--indigo);
            background: var(--indigo);
            color: #fff;
            transform: translateY(-4px);
        }

        .proc-step h4 {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .proc-step p {
            font-size: 13px;
            color: var(--ink2);
            line-height: 1.6;
            padding: 0 12px;
        }

        /* ============ TESTIMONIALS ============ */
        .testi-track {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 16px;
            margin-bottom: 40px;
            scroll-snap-type: x mandatory;
        }

        .testi-card {
            flex: 0 0 340px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 24px;
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
        }

        .testi-stars {
            color: #ffc107;
            margin-bottom: 12px;
        }

        .testi-text {
            font-size: 14px;
            line-height: 1.7;
            color: var(--ink2);
            margin-bottom: 20px;
            font-style: italic;
            flex: 1;
        }

        .testi-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .testi-user h5 {
            font-size: 14px;
        }

        .testi-user span {
            font-size: 12px;
            color: var(--muted);
        }

        .testi-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--indigo);
            color: #fff;
            display: grid;
            place-items: center;
            font-weight: 700;
            font-family: 'Sora';
        }

        /* ============ FAQ ============ */
        .faq-sec {
            margin-bottom: 40px;
        }

        .faq-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            overflow: hidden;
        }

        .faq-q {
            padding: 18px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 500;
            font-size: 15px;
        }

        .faq-icon {
            width: 24px;
            height: 24px;
            display: grid;
            place-items: center;
            transition: transform .3s;
            color: var(--indigo);
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg);
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease;
        }

        .faq-a p {
            padding: 0 24px 20px;
            color: var(--ink2);
            font-size: 14px;
            line-height: 1.7;
        }

        /* ============ NEWSLETTER ============ */
        .newsletter {
            background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo2) 100%);
            border-radius: var(--radius-xl);
            padding: 48px;
            color: #fff;
            position: relative;
            overflow: hidden;
            margin-bottom: 40px;
        }

        .newsletter::before,
        .newsletter::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, .1);
        }

        .newsletter::before {
            width: 200px;
            height: 200px;
            top: -50px;
            right: -50px;
        }

        .newsletter::after {
            width: 100px;
            height: 100px;
            bottom: -30px;
            left: 10%;
        }

        .nl-content {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
        }

        .nl-content h2 {
            color: #fff;
            font-size: 28px;
            margin-bottom: 12px;
        }

        .nl-content p {
            opacity: .9;
            margin-bottom: 24px;
        }

        .nl-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 24px;
            border-radius: var(--radius-lg);
        }

        .nl-form .form-field {
            text-align: left;
        }

        .nl-form label {
            display: block;
            color: rgba(255, 255, 255, .9);
            font-size: 13px;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .nl-form input[type="text"],
        .nl-form input[type="email"],
        .nl-form input[type="date"] {
            background: #fff;
            color: var(--ink);
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 12px;
            border-radius: 8px;
            width: 100%;
            font-size: 14px;
        }

        .nl-form input::placeholder {
            color: var(--muted);
        }

        .nl-form input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(0.5);
        }

        .nl-consent {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            opacity: .9;
            color: #fff;
            text-align: left;
        }

        .nl-btn {
            background: var(--ink);
            color: #fff;
            padding: 14px 24px;
            border-radius: 8px;
            font-weight: 600;
            transition: .2s;
            font-size: 14px;
        }

        .nl-btn:hover {
            background: #fff;
            color: var(--indigo);
        }

        .nl-btn.unsub {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.6);
            color: #fff;
        }

        .nl-btn.unsub:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #fff;
        }

        /* ============ CONTACT ============ */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 40px;
        }

        .contact-form {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 32px;
        }

        .contact-form h3 {
            font-size: 20px;
            margin-bottom: 24px;
        }

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

        .form-field {
            margin-bottom: 16px;
            text-align: left;
        }

        .form-field label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--ink2);
        }

        .form-field input,
        .form-field textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            background: var(--bg);
            color: var(--ink);
        }

        .form-field input:focus,
        .form-field textarea:focus {
            border-color: var(--indigo);
            background: #fff;
        }

        .form-submit {
            background: var(--ink);
            color: #fff;
            padding: 14px 32px;
            border-radius: 8px;
            font-weight: 600;
            width: 100%;
            transition: .2s;
        }

        .form-submit:hover {
            background: var(--indigo);
        }

        .contact-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            align-content: start;
        }

        .info-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 24px;
        }

        .info-icon {
            width: 40px;
            height: 40px;
            background: var(--bg);
            border-radius: 10px;
            display: grid;
            place-items: center;
            color: var(--indigo);
            margin-bottom: 12px;
        }

        .info-card h4 {
            font-size: 14px;
            margin-bottom: 4px;
        }

        .info-card p {
            font-size: 13px;
            color: var(--muted);
        }

        .info-card.full-width {
            grid-column: span 2;
            background: var(--indigo);
            border-color: var(--indigo);
        }

        .info-card.full-width h4 {
            color: #fff;
            margin-bottom: 8px;
        }

        .info-card.full-width p {
            color: rgba(255, 255, 255, .8);
            line-height: 1.6;
        }

        /* ============ FOOTER ============ */
        footer {
            background: var(--ink);
            color: rgba(255, 255, 255, .7);
            padding: 48px 32px 24px;
        }

        .foot-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 32px;
        }

        .foot-brand .sb-brand {
            color: #fff;
        }

        .foot-brand p {
            font-size: 14px;
            line-height: 1.7;
            margin: 16px 0;
            max-width: 300px;
        }

        .foot-head {
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .foot-links a {
            display: block;
            font-size: 13px;
            margin-bottom: 8px;
            transition: .2s;
            cursor: pointer;
        }

        .foot-links a:hover {
            color: var(--indigo2);
        }

        .foot-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }

        /* ============ DRAWERS & MODALS ============ */
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(16, 35, 62, .62);
            backdrop-filter: blur(4px);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: .3s;
        }

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

        .drawer {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 400px;
            background: var(--surface);
            z-index: 1001;
            transform: translateX(100%);
            transition: transform .35s cubic-bezier(.19, 1, .22, 1);
            display: flex;
            flex-direction: column;
        }

        .drawer.active {
            transform: none;
        }

        .drawer-head {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .drawer-head h3 {
            font-size: 18px;
        }

        .drawer-close {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--bg);
            display: grid;
            place-items: center;
            cursor: pointer;
        }

        .drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .drawer-foot {
            padding: 20px;
            border-top: 1px solid var(--border);
        }

        .cart-item {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .cart-item img {
            width: 70px;
            height: 70px;
            border-radius: 8px;
            object-fit: cover;
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-info h4 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .cart-item-price {
            color: var(--indigo);
            font-weight: 600;
            font-size: 14px;
        }

        .qty-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }

        .qty-btn {
            width: 24px;
            height: 24px;
            background: var(--bg);
            border-radius: 6px;
            display: grid;
            place-items: center;
            font-size: 12px;
        }

        .qty-val {
            font-weight: 600;
            font-size: 14px;
        }

        .cart-item-del {
            color: var(--coral);
            background: none;
            margin-left: auto;
        }

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

        .empty-state i {
            font-size: 48px;
            color: var(--border);
            margin-bottom: 16px;
        }

        .empty-state h4 {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .empty-state p {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 20px;
        }

        .empty-btn {
            background: var(--indigo);
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .total-row.main {
            font-size: 18px;
            font-weight: 700;
        }

        .checkout-btn {
            background: var(--indigo);
            color: #fff;
            padding: 14px;
            border-radius: 8px;
            font-weight: 600;
            width: 100%;
            transition: .2s;
        }

        .checkout-btn:hover {
            background: var(--ink);
        }

        .modal {
            position: fixed;
            inset: 0;
            z-index: 1002;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: .3s;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-panel {
            background: var(--surface);
            border-radius: var(--radius-xl);
            width: 100%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(.95);
            transition: transform .3s;
            position: relative;
        }

        .modal.active .modal-panel {
            transform: scale(1);
        }

        .qv-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .qv-img {
            height: 100%;
            min-height: 350px;
            border-radius: var(--radius-xl) 0 0 var(--radius-xl);
            overflow: hidden;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

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

        .qv-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg);
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 10;
            transition: .2s;
        }

        .qv-close:hover {
            background: var(--coral);
            color: #fff;
        }

        .qv-body {
            padding: 40px;
        }

        .qv-cat {
            color: var(--muted);
            font-size: 12px;
            text-transform: uppercase;
        }

        .qv-name {
            font-size: 24px;
            margin: 4px 0 12px;
        }

        .qv-desc {
            color: var(--ink2);
            line-height: 1.7;
            margin-bottom: 24px;
            font-size: 14px;
            max-height: 200px;
            overflow-y: auto;
            padding-right: 10px;
        }

        .qv-desc::-webkit-scrollbar {
            width: 6px;
        }

        .qv-desc::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 10px;
        }

        .qv-price {
            font-size: 28px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 24px;
        }

        .qv-actions {
            display: flex;
            gap: 12px;
        }

        .qv-cart {
            background: var(--ink);
            color: #fff;
            padding: 14px 24px;
            border-radius: 10px;
            flex: 1;
            font-weight: 600;
            transition: .2s;
        }

        .qv-cart:hover {
            background: var(--indigo);
        }

        .qv-wl {
            width: 50px;
            height: 50px;
            border: 1px solid var(--border);
            border-radius: 10px;
            display: grid;
            place-items: center;
            cursor: pointer;
        }

        .checkout-panel {
            max-width: 600px;
        }

        .checkout-head {
            padding: 24px 32px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .checkout-body {
            padding: 32px;
        }

        .checkout-summary {
            background: var(--bg);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 24px;
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .summary-total {
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 18px;
            border-top: 1px solid var(--border);
            padding-top: 12px;
            margin-top: 8px;
        }

        .cod-method {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(0, 184, 153, .05);
            border: 1px solid rgba(0, 184, 153, .2);
            padding: 16px;
            border-radius: 10px;
            margin-bottom: 24px;
        }

        .cod-method i {
            font-size: 24px;
            color: var(--mint);
        }

        .success-modal {
            max-width: 400px;
            text-align: center;
            padding: 40px;
        }

        .success-icon {
            width: 80px;
            height: 80px;
            background: rgba(0, 184, 153, .1);
            color: var(--mint);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 36px;
            margin: 0 auto 24px;
        }

        .success-modal h3 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        .success-modal p {
            color: var(--ink2);
            margin-bottom: 8px;
            line-height: 1.6;
        }

        .order-id {
            font-weight: 700;
            color: var(--indigo);
            margin-bottom: 24px;
        }

        .policy-body {
            max-height: 60vh;
            overflow-y: auto;
            padding: 32px;
        }

        .policy-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }

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

        .policy-item h4 {
            margin-bottom: 5px;
            color: var(--indigo);
        }

        .policy-item p {
            font-size: 14px;
            color: var(--ink2);
            line-height: 1.6;
        }

        /* ============ REVEAL ============ */
        .rv {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .8s ease, transform .8s ease;
        }

        .rv.in {
            opacity: 1;
            transform: none;
        }

        /* ============ RESPONSIVE ============ */
        @media(max-width:1024px) {
            .top-nav {
                display: none;
            }

            .menu-btn {
                display: grid;
            }

            .product-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .why-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .about-layout {
                grid-template-columns: 1fr;
            }

            .bestsellers-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media(max-width:768px) {
            .topbar {
                padding: 12px 16px;
                gap: 12px;
            }

            .search-bar {
                display: none;
            }

            .content-pad {
                padding: 0 16px 60px;
            }

            .product-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .process-track {
                grid-template-columns: repeat(2, 1fr);
            }

            .process-track::before {
                display: none;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }

            .foot-grid {
                grid-template-columns: 1fr 1fr;
            }

            .qv-grid {
                grid-template-columns: 1fr;
            }

            .qv-img {
                min-height: 250px;
                border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            }

            .drawer {
                width: 100%;
            }

            .about-new {
                padding: 20px;
            }

            .hero-content h1 {
                font-size: 32px;
            }
        }

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

            .why-grid {
                grid-template-columns: 1fr;
            }

            .process-track {
                grid-template-columns: 1fr;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .bestsellers-list {
                grid-template-columns: 1fr;
            }

            .foot-grid {
                grid-template-columns: 1fr;
            }
        }
    

/* ============ MULTI-PAGE REFINEMENT ============ */
body { background: linear-gradient(180deg, #F6F9FF 0%, var(--bg) 42%, #EEF5FF 100%); }
.topbar { background: rgba(243, 247, 255, .92); }
.top-nav a.is-current { color: var(--indigo); background: #E9F0FF; }
.top-nav a:focus-visible, .icon-btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(36, 89, 214, .28); outline-offset: 3px; }

.page-content { padding-top: 40px; min-height: 58vh; }
.page-heading { max-width: 920px; margin: 0 auto 32px; text-align: center; }
.page-heading h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 12px; }
.page-heading p { color: var(--muted); line-height: 1.75; max-width: 720px; margin: 0 auto; }
.page-heading .page-mark { width: 50px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--indigo), var(--mint)); margin: 0 auto 18px; }
.policy-page { max-width: 960px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(24px, 5vw, 56px); box-shadow: var(--shadow-sm); }
.policy-page > h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 32px; }
.policy-list { display: grid; gap: 0; }
.policy-item { padding: 22px 0; border-top: 1px solid var(--border); }
.policy-item:first-child { border-top: 0; padding-top: 0; }
.policy-item h2 { font-size: 18px; margin-bottom: 9px; }
.policy-item p { color: var(--ink2); font-size: 15px; line-height: 1.8; }
.unsubscribe-page { max-width: 600px; margin: 0 auto; }
.unsubscribe-page .contact-form { box-shadow: var(--shadow-sm); }
.contact-standalone { max-width: 1120px; margin: 0 auto; }
.about-page .about-new { max-width: 1200px; margin-left: auto; margin-right: auto; }
.about-page .why-grid, .about-page .process-sec, .about-page #reviews, .about-page .faq-sec { max-width: 1200px; margin-left: auto; margin-right: auto; }
.shop-page #products, .shop-page .widgets-grid { max-width: 1320px; margin-left: auto; margin-right: auto; }
.shop-page .sec-head h2 { font-size: clamp(28px, 4vw, 42px); }
.newsletter-page { max-width: 900px; margin: 0 auto; }
.newsletter-page .newsletter { box-shadow: 0 24px 56px rgba(36, 89, 214, .22); }

.toast-region { position: fixed; top: 88px; right: 24px; z-index: 1200; width: min(390px, calc(100vw - 32px)); display: grid; gap: 12px; pointer-events: none; }
.toast { pointer-events: auto; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start; padding: 15px; background: #10233E; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 16px 38px rgba(16,35,62,.22); animation: toast-in .3s ease both; }
.toast.is-leaving { animation: toast-out .25s ease both; }
.toast-icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(84,167,255,.20); display: grid; place-items: center; color: #A9D2FF; }
.toast-copy strong { display: block; font-family: 'Sora', sans-serif; font-size: 14px; margin: 1px 0 4px; }
.toast-copy span { display: block; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.5; }
.toast-close { color: rgba(255,255,255,.72); padding: 3px; font-size: 15px; }
.toast-close:hover { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(18px); } }

@media(max-width:1024px) {
  .top-nav.is-open { display: flex; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding: 10px; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
  .top-nav.is-open a { padding: 12px; }
}
@media(max-width:768px) {
  .page-content { padding-top: 28px; }
  .policy-page { border-radius: var(--radius-lg); }
  .newsletter-page .newsletter { padding: 32px 20px; }
  .toast-region { top: 76px; right: 16px; }
}